Native Grid: Add a class to a row based on data

[Wayne Hiller]

Native Grid: Is there a way to assign a class to a row (tr) based on the data without having to completely render the row in a row template? Seems like it would be a pretty common operation.

[Plamen]

Hello,

Thank you for getting in touch with us.

Yes indeed - you are right. In the current version of the Kendo Native Grid there is no class property for the row and we should use template as for example it is done here in the general case- https://stackblitz.com/edit/s5rkb6-iwsg5p?file=index.js.

If your scenario is somehow more complicated please let me know so I could be more helpful.

Regards,
Plamen
Progress Telerik

[Wayne Hiller]

Thank you. I knew about the row rendering but I was missing the part about passing the defautSlots. This will work fine :)

 

return h(
                'tr', 
                { 
                  class: [defaultClass,'custom']
                }, 
                defaultSlots);

[Wayne Hiller]

One issue though, rendering a row this way breaks the rowclicked event.

[Wayne Hiller]

This seems to work:

renderRow(h, trElement, defaultSlots, props, listeners) {
            var cls = props.isAltRow ? "k-master-row k-alt" : "k-master-row";
            if (props.selectedField && props.dataItem[props.selectedField]) {
                cls += " k-state-selected";
            }
            if (props.dataItem.__viewed__) {
                cls += " viewed";
            }

            return h("tr", {
                class: cls,
                on: {
                    click: function(e) {
                        if (listeners.rowclick) {
                            listeners.rowclick({ dataItem: props.dataItem });
                        }
                    }
                }
            },
            defaultSlots);
        }

 

[Plamen]

Hello,

Yes, this is the way to add the click event vie render function template - if you have further questions please don't hesitate to contact us again.

Regards,
Plamen
Progress Telerik

[Wayne Hiller]

There has to be a better way to do this. I find that I am having to recreate all the "row" functionality in the render function. Grouping is all messed up too now. It seems like a lot of work just to put a class on a TR.

[Plamen]

Hello,

Thank you for getting back to us.

If you want to handle all the cases you will have to add a bit more logic in the template. Here is example that has all the default checks in it and worked correctly at my side with grouping - https://stackblitz.com/edit/8ah33e-glxq3t?file=index.js.

Please review it and let me know if you have further questions.

Regards,
Plamen
Progress Telerik