Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
75
Adding a css class to row based on condition; GridModel approach
posted

Straight forward question. Do I have to use the column template? I'd much rather just add the class to the tr row. Class will be added based on data from a column in the row. I few things about my grid; I'm using GridModel approach with Remote Paging. 

Thanks

Parents
No Data
Reply
  • 140
    Offline posted

    Hello Erik,

    By design, setting custom css to the entire grid row can be achieved by setting formatter option for each grid column in columns collection. Formatting defines how column cell values are displayed in the grid. When defining formatter function representation of the value is up to your control. Your custom css can be applied conditionally, based on some cell value since the formatter function has reference to both current cell value and entire record values.

    My suggestion for achieving your requirement is to define a formatter function for every grid column. This function will render the cell based depending on the condition. For example: 

    const formatter = function (val, record) {
        return (record.ID > 5) ? ("<div style='color:red;'>" + val + "</div>") : val;
    };

    This would make the text in rows that have id higher than 5 red.

    Then you can set the FormatterFunction the following way:

    .Columns(x =>
    {
        x.Columns.Add(new GridColumn() { HeaderText = "ID", Key = "ID", DataType = "number", Hidden = true });
        x.Columns.Add(new GridColumn() { HeaderText = "BP Name", Key = "BPName", FormatterFunction = "formatter" });
        x.Columns.Add(new GridColumn() { HeaderText = "Matter ID", Key = "ClientMatter", FormatterFunction = "formatter" });
        x.Columns.Add(new GridColumn() { HeaderText = "Client Name", Key = "ClientName", FormatterFunction = "formatter" });
        x.Columns.Add(new GridColumn() { HeaderText = "Matter Name", Key = "MatterName", FormatterFunction = "formatter" });
    })

    You can find a MVC sample with this configurations here.

    In case you have additional questions don’t hesitate to ask them.

Children