Demos

[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/

[Markov]

Hi,

It is possible to use CSS variables for this purpose. Please, refer to https://www.htmlelements.com/docs/input-css/

Best regards,
Markov

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

[Markov]

Hi,

Yes, this is possible. As a solution look at the following code which fetches data from a server and data binds the Gantt chart to it.

// assume we have <smart-gantt-chart id="gantt"></smart-gantt-chart> in HTML
const gantt = document.getElementById('gantt');

// Function to map server model → Gantt model
function mapServerToGantt(serverTasks, serverLinks) {
  return {
    // the Gantt expects tasks + links (or inside dataSource)
    tasks: serverTasks.map(t => ({
      id: t.id,
      label: t.name,
      dateStart: t.startDate,
      dateEnd: t.endDate,
      progress: t.progress,
      // etc.
    })),
    links: serverLinks.map(l => ({
      id: l.id,
      source: l.fromTaskId,
      target: l.toTaskId,
      type: l.type  // e.g. “finish-to-start”
    }))
  }
}

// Initial load
fetch('/api/tasks')
  .then(r => r.json())
  .then(data => {
    const mapped = mapServerToGantt(data.tasks, data.links);
    gantt.dataSource = mapped;
  })
  .catch(err => {
    console.error('failed load tasks', err);
  });

// Listen for changes
gantt.addEventListener('onTaskChanged', (e) => {
  const changed = e.detail;  // depending on library’s event payload
  // you’ll have to inspect the event shape from the api docs
  fetch(<code>/api/tasks/${changed.id}</code>, {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      startDate: changed.dateStart,
      endDate: changed.dateEnd,
      progress: changed.progress
    })
  }).then(/* … */).catch(/* … */);
});

// Similar for link-add / link-delete, etc.
gantt.addEventListener('onLinkAdded', (e) => {
  const link = e.detail;
  fetch('/api/links', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      source: link.source,
      target: link.target,
      type: link.type
    })
  }).then(/* … */).catch(/* … */);
});

Hope this helps.

Best regards,
Markov

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

[Markov]

Hi,

Sure, you can use it for example with our smart-window component. Just place the smart-scheduler tag inside it. There are not any known issues with this approach.

Best regards,
Markov

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

[Markov]

Hi,

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

Best regards,
Markov

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

[Markov]

Hi,

Yes, it can. You need to place the smart-grid tag inside a smart-window and that is all.

Best regards,
Markov

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

[Markov]

Hi,

This could be achieved by using the Chart’s range selector – https://www.htmlelements.com/demos/chart/range-selector-date/

Best regards,
Markov

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

[Markov]

Hi,

Basically, jqxChart and Smart.Chart share the same API. However, the main difference is that things marked as deprecated in the jqxChart are not included in Smart.Chart. I would suggest you to look the https://www.htmlelements.com/docs/chart-api/ to understand the API of Smart.Chart and also look at the available demos which show how to initialize the component and use the API.

Best regards,
Markov

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

[Author]

Posts