Products

[Markov]

Hi,

Each task has an onRender callback which we call like this: task.onRender(task, segment, taskBar, segmentElement, labelWrapper);

We pass the task and the HTML Elements of the task so you can apply conditional rendering depending on task details. Hope this helps for the Gantt chart.

Best regards,
Markov

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

[Markov]

Hi,

Smart Grid (smart-grid) is responsive out of the box, but to make it adapt nicely across different screen sizes you usually combine a few things:

Use percentage or auto width/height

Instead of fixed px, let the Grid resize with its container:

<smart-grid id="grid"></smart-grid>

<style>
  smart-grid {
    width: 100%;
    height: 100%;
  }

  /* Example: responsive container */
  .grid-container {
    width: 100%;
    height: calc(100vh - 100px);
    overflow: hidden;
  }
</style>

Best regards,
Markov

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

[Markov]

Hi,

We do not have known issues with the Kanban. Also, set the virtualization: true property and it will be in virtualized mode.

Hope this helps.

Best regards,
Markov

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

[Markov]

Hi,

For example:

<template>
  <smart-editor :value="content" @change="onChange"></smart-editor>
  <p>Editor content: {{ content }}</p>
</template>

<script>
export default {
  data() {
    return {
      content: "<p>Hello World</p>"
    };
  },
  methods: {
    onChange(event) {
      this.content = event.detail.value; // Smart.Editor emits the new value here
    }
  }
};
</script>

Hope this helps.

Best regards,
Markov

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

[Markov]

Hi,

Please, look at https://www.htmlelements.com/docs/table-css/. The help topic shows how to customize the themes of the Table component.

Best regards,
Markov

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

[Markov]

Hi,

No, we do not support server-side rendering. Our components are client-side components written in Javascript.

Best regards,
Markov

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

[Markov]

Hi,

You can use its setDate and getDate methods to set and get dates or bind its value property to a Blazor variable.

<DateTimePicker @bind-Value="@selectedDate" FormatString="dd/MM/yyyy HH:mm" />

<p>Selected: @selectedDate</p>

@code {
    private DateTime selectedDate = DateTime.Now;
}

Best regards,
Markov

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

[Markov]

Hi,

You can use the “change” event. It is triggered when the content is changed.

Best regards,
Markov

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

[Markov]

Hi,

This is the specific path. It is in the source/modules folder.

Best regards,
Markov

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

[Markov]

Hi,

You can theme Smart Kanban in a web project by overriding its built-in CSS variables and styles, without modifying the library’s core files.

Smart UI components, including Kanban, are built with CSS custom properties (variables), which makes theming straightforward.

For example:

--smart-primary: #3f51b5;
--smart-background: #ffffff;
--smart-surface: #f5f5f5;
--smart-border-color: #ddd;
--smart-border-radius: 4px;
--smart-font-size: 14px;
--smart-kanban-column-header-background: #f0f0f0;
--smart-kanban-task-background: #fff;

Best regards,
Markov

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

[Markov]

Hi,

Yes, it is possible to lazy load the Kanban. Please, take a look at : https://www.htmlelements.com/react/demos/kanban/server-side-crud/
Best regards,
Markov

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

[Markov]

Hi,

Please, look at: https://www.htmlelements.com/demos/table/overview/. The demo shows how to render custom content in the Table.

Best regards,
Markov

Smart Team
https://www.jqwidgets.com/

[Markov]

Hi,

You can use the animationDuration property.

const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	animationDuration: 500,
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

Best regards,
Markov

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

[Markov]

Hi,

Yes, this is possible. The chart has a ‘click’ event. The event is triggered when the user clicks on a series element within the chart. This allows developers to respond to user interactions with individual data points, such as displaying details, highlighting the selected element, or performing custom actions based on the clicked series element.

Best regards,
Markov

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

[Markov]

Hi,

Yes, we support server side rendering in our Smart.Table. Please, look at https://www.htmlelements.com/demos/table/server-side-crud/

Hope this helps.

Best regards,
Markov

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

[Author]

Posts