Products

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

[Markov]

Hi,

It is possible to use Next JS with Smart.Grid. Read https://www.htmlelements.com/docs/grid/. As for the rendering, the rendering of the grid will be on the client side.

Best regards,
Markov

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

[Author]

Posts