Demos

[Markov]

Hi,

Please, look at https://www.htmlelements.com/demos/input/overview/. The demo shows the 3 different rendering modes of the Input.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

At present our Gantt does not support task reorder. We will consider adding this functionality in the future versions of the component.

Thank you for the feature request!

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

In the last week of November, we will release an update of Smart UI.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

https://www.htmlelements.com/demos/table/overview/ – this example shows how to customize the rendering of the Table component.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Please, look at https://www.htmlelements.com/demos/table/html-virtualization/

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Please, look at https://www.htmlelements.com/docs/table/

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Smart.Grid supports client-side rendering only, but there is no problem to use it with NextJS as we have prepared the component for such scenarios. You can look at https://www.htmlelements.com/docs/grid/ which shows how to use it with next js in server side rendering scenarios.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

I saw the updated codepen example. The updateRow should update the row details as well while it does not currently without calling the render method. We will update this for the next version.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

You can look at it:

<smart-kanban
  #kanban
  [dataSource]="data"
  [columns]="columns"
  (cardUpdate)="onTaskUpdate($event)">
</smart-kanban>

import { Component, OnInit, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-kanban',
  templateUrl: './kanban.component.html'
})
export class KanbanComponent implements OnInit {
  @ViewChild('kanban', { static: false }) kanban: any;

  data: any[] = [];
  columns = [
    { dataField: 'todo', label: 'To Do' },
    { dataField: 'inProgress', label: 'In Progress' },
    { dataField: 'done', label: 'Done' }
  ];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.loadData();
  }

  loadData() {
    this.http.get<any[]>('https://api.example.com/tasks').subscribe((tasks) => {
      this.data = tasks;
    });
  }

  onTaskUpdate(event: CustomEvent) {
    const { card, oldColumn, newColumn } = event.detail;
    this.http.patch(<code>https://api.example.com/tasks/${card.id}</code>, {
      status: newColumn.dataField
    }).subscribe();
  }
}

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Please, look at https://www.htmlelements.com/demos/kanban/export/

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

In the Grid’s API Docs – https://www.htmlelements.com/docs/grid-api/, take a look at the events section which shows how to handle events.

Here is an example for reference:

<smart-grid
  #grid
  [dataSource]="data"
  [columns]="columns"
  (cellBeginEdit)="onCellBeginEdit($event)"
  (cellEndEdit)="onCellEndEdit($event)"
  (rowSelect)="onRowSelect($event)"
></smart-grid>

onCellBeginEdit(event: CustomEvent) {
  const { row, column } = event.detail;
  console.log('Editing started for:', row, column);
}

onCellEndEdit(event: CustomEvent) {
  const { row, column, value } = event.detail;
  console.log(<code>New value in ${column.dataField}:</code>, value);
}

onRowSelect(event: CustomEvent) {
  console.log('Selected row:', event.detail.row);
}

Hope this helps.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Please, look at https://www.htmlelements.com/demos/scheduler/custom-styles/ which shows how to customize the styles of the Scheduler.

Hope this helps.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

We export the data as a table so in this case we cannot export the layout with the styles.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Use updateRow instead of setting the dataSource.

  grid.updateRow(0,
                { Name: 'Task 11', Status: "evaluated", Created: 'Item 1.3', Evaluator: 'UPDATE Item 2.4', EvaluationTime: 'Item 12.5', WorkDirectory: " UPDATE path1" }
                )

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

@ViewChild('chart', { static: false }) chart: any;

data = [
  { month: 'Jan', value: 30 },
  { month: 'Feb', value: 45 },
  { month: 'Mar', value: 25 }
];

seriesGroups = [
  {
    type: 'column',
    series: [{ dataField: 'value', displayText: 'Sales' }]
  }
];

updateData() {
  // Update an existing point
  this.data[1].value = 60;

  // Notify the chart to refresh its visuals
  this.chart.refresh();
}

In the above example, we update the data and refresh the chart visuals.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts