Products

[admin]

Hi Catdoken,

You can use the rowClick event which occurs when a row is clicked and open a Smart.Window for custom editing purposes. As for the resize, you are right, when a row is resized, it needs to be re-rendered. With methods such as beginCellEdit and beginRowEdit, you can restart the editing process, too.

Regards,
Peter

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

[admin]

Hi maoz,

The circle was available in the previous versions, too. The events rendering has 2 modes – classic and modern and by default it is modern i.e with circle since the first release of the Scheduler. This behavior depends on the eventRenderMode property with ‘classic’ and ‘modern’ values.

Regards,
Peter

[admin]

Thanks for the feedback!

We created a work item about this misbehavior and will resolve it in the next patch release.

Best Regards,
Peter Stoev

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

[admin]

Hi,

The Grid has endEdit method which triggers the end of edit operation. You can call this method within the button’s on click event handler.

Best Regards,
Markov

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

[admin]

Hi,

getViewDates() returns the view start and end dates. When the current date is within the same view, the view start and end dates are the same and does not change.
As for the loading, no, it does not have a property to display a loading indicator. You can use an overlay DIV tag with loading gif and show/hide it dynamically as a solution. For example: https://www.w3schools.com/howto/howto_css_loader.asp

Regards,
Markov

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

[admin]

Hi,

This function is not available for usage in Scheduler. You can bind it to an Array, JSON, CSV, TSV or XML. For binding to remote data, you can look at https://www.htmlelements.com/demos/scheduler/server-side-mysql-php/

Regards,
Markov

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

[admin]

Hi,

The 17.2 release refreshes our Angular & Blazor components which are available only as NPM & Nuget packages. The Angular package is about the Angular 17 support i.e npm i smart-webcomponents-angular and Blazor .NET 8 support – dotnet add package Smart.Blazor.

Regards,
Peter

[admin]

Hi,

The Grid is used a bit incorrectly in the shared sample. Using element.querySelector on elements which are dynamically created and reused is the source of the issue. I would suggest you to look at our help docs and examples in order to learn how to better utilize the component. It is also better to create a grid instance, set all the Grid properties and then append the Grid to the DOM instead of dynamically setting multiple properties which will require re-renders from a performance point of view. If you app requires this, then I would suggest using the Grid’s beginUpdate and endUpdate methods before and after setting your properties. By doing that, you will end up with only 1 refresh.

Regards,
Markov

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

[admin]

Hi Ferris,

I tried to reproduce this here https://www.htmlelements.com/demos/grid/grouping-header-panel/ and tested with Edge, Chrome and Firefox. I cannot see an issue with the behavior. Do you use the latest version of the Grid component?

Regards,
Markov

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

[admin]

Hi edvardsmarkff,

For styling Grid cells, please refer to https://www.htmlelements.com/docs/grid-styling-cells/ and for applying templates look at https://www.htmlelements.com/demos/grid/column-dynamic-template-with-components/. You can see in the example, that the “template” is a function. We check whether there is a template. If there is not a template, we set it. Next, when the cell is re-rendered, we have a template and just update it instead of creating new html elements which will affect the performance.

Regards,
Markov

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

[admin]

Hi Ferris,

As mentioned in the article, you can apply styles dynamically, too by using a callback function cellsClassName

cellsClassName: (index, dataField, value, rowData, row) => {
                if (value < 3) {
                    return 'cell-class-2';
                }

                if (index < 5) {
                    return 'cell-class-1';
                }

                if (index >= 5) {
                    return 'cell-class-3';
                }
            }
        },

The custom CSS class may or may not include borders. However, this would not remove the Grid’s default cell borders, they will be inside the cell.

Regards,
Markov

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

[admin]

Hi Ferris,

The approach you’re using will not work, because Cells are reused while scrolling which means that this CSS class is applied to a physical cell html element which will be the same one when you scroll up/down or left/right. The good news are that we have API for styling cells. Please, look at https://www.htmlelements.com/docs/grid-styling-cells/. The help article shows how to style cells in the Grid.

Regards,
Markov

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

[admin]

Hi Loick,

Unfortunately, that is not possible. I will create a work item for adding this feature in some of the next releases of the Scheduler component.

Regards,
Peter

[admin]

Hi Daniz,

The templates define a specific cell rendering. The rowSpan functionality is supported for cells with standard rendering. The feature cannot be applied for template cells.

Regards,
Peter

[admin]

Hi Loick,

You can define the first day of week by using the ‘firstDayOfWeek’ property. For monday, it should be 1.
As for start hour, you can define which hours per day are available and you can interact with them by using a property called ‘available’.
For example, to make the available hours from 5 to 18, you can use available: [{ start: 5, end: 18 }]

Hope this helps.

Regards,
Peter

[Author]

Posts