Demos

[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

[admin]

Hi,

Have you checked https://www.htmlelements.com/docs/router/ which shows how to configure the router?

[admin]

Hi ygenin,

The reported issue is confirmed and resolved in the latest version of our software. Thank you for the feedback!

Regards,
Boyko

[admin]

Ok, Thank you for the suggestion.

[admin]

Thank you for the feedback. We will check the provided details. If there is an issue on our side, it will be resolved in a future version of our product.

[admin]

Hi Oliver,

Create a Hidden Column with dataField = your Display Field and your column with the Display Field will work

Regards,
Peter

[admin]

Hi Oliver,

The workaround is valid for any use case. Adding a hidden column is possible in any app using a Grid.

Regards,
Peter

[admin]

We offered a workaround. A fix will come in a future version.

[Author]

Posts