Kendo UI Style Grid Rows

[Volkan]

Is there any way to style grid rows ? Here is an example :
If I wanted to style all rows who met a certain criteria with a red outline; would that even be possible ? 

[Iliana Dyankova]

Hello Volkan,

To achieve the desired result, you could use the Grid's dataBound event and apply your custom CSS class to the given row(s) via standard DOM operations. Please notice that each record in the dataSource has an unique identified called uid that is attached as a data-uid attribute to its <tr> HTML element and you need to use this uid in order to get the row which answers the conditions. For example: 

dataBound: function () {
    dataView = this.dataSource.view();
    for(var i = 0; i < dataView.length; i++) {
        if(dataView[i].FirstName === "Jane") {
           var uid = dataView[i].uid;
           $("#grid tbody").find("tr[data-uid=" + uid + "]").addClass("customClass");
         }
    }
}

For convenience I created a simple project, which illustrates such approach in action. 

Regards,
Iliana Nikolova
the Telerik team

[Kwex]

You could also achieve same using the template property of the column during its definition.

E.g.

            columns: [
                        { title: "Programme Name", template: '<span class="#= ValidationStatus #" title="#= ValidationMsg #">#= ProgrammeName #</span>' },
                        { field: "ProgrammeId", title: "", width: "1px" },
                        { field: "Col2", title: "Col2 Title" },
                        { field: "Col3", title: "Col3 Title" }
                    ],


NB: ValidationStatus, ValidationMsg and ProgrammeName are all columns from my JSON result-set.

Cheers,

Kwex

[Soumen]

How about applying different styles for different rows based on data. For example, a grid displays no of open tickets. Based on the days open I want to change color of individual rows. For example, for the tickets which are opened for than 10 days, the rows should be red, if opened since 5 days, the rows should be orange, and so on.

[Iliana Dyankova]

Hi Soumen,

Please check this forum thread which discusses the same subject. 

Regards,
Iliana Nikolova
the Telerik team

[Soumen]

Thanks Iliana.

Could you please help and let me know, what is wrong with this code:
http://jsfiddle.net/qyYUG/48/

Thanks & regards,
Soumen

[Nikolay Rusev]

Hello Soumen,

I see that you've duplicated your posts in the other forum thread. Please avoid this as this make it harder for us to track the progress of the issue.

The fiddle you've posted has JavaScript error due to misformatted object literals. Here is how it should be properly formatted:
http://jsfiddle.net/ZKUNT/

Regards,
Nikolay Rusev
the Telerik team

[Soumen]

Thanks a lot Nikolay. 

Sorry for the duplicate post.

Could you please help me achieve the same result using a kendo MVVM viewModel? I mean how to bind the grid and listview to a Kendo MVVM viewmodel with relational data in it?

Basically I am looking for a solution by which an MVVM viewModel can hold master-detail data and then eventually bind them to kendo ListView and Grid widget (or any nested widget representation). Considering both master and detail data to be collections and not just a single object.

Thanks & regards,
Soumen Barua
(Trying to move to Kendo Web from knockout)

[Soumen]

A gentle reminder.

Still waiting for a feedback on my query from Kendo technical team.

Thanks & regards,
Soumen

[Nikolay Rusev]

Hello Soumen,

Your question is a bit too abstract. Did you try implementing something from that requirement? Can you show us your progress and what is the concreted issues with this implementation? Can you modify the fiddle from the previous post so that it illustrates concrete issues that you are having in implementing the scenario you describe?

Here are some related topics on that matter:
http://demos.kendoui.com/web/mvvm/widgets.html
http://docs.kendoui.com/getting-started/framework/mvvm/overview

Regards,
Nikolay Rusev
the Telerik team

[Soumen]

Hi Nilkolay,

I have already explained my requirement in the fiddle. In the fiddle, I am binding the json data directly to the ListView and Grid. Instead of that, I want to 1st populate the json data into a relational MVVM viewmodel and then bind the viewModel to the listview and grid.

So that I can manupulate the data in the viewModel at run-time and it should reflect the change automatically in the ListView and Grid widgets.
For example, let's suppose the json data that I want to display in the grid has price and quantity. If I populate this into ViewModel, I can extend it with a computable property as Amount = price * quantity,  and hence should be able to bind the Amount as a 3rd column in the Grid.

To simplify my question, please refer the example in the link below. I want to know if we can achieve the same using MVVM viewModel. Also what if the parent widget is not grid but listView and the child widget is Grid.
http://demos.kendoui.com/web/grid/detailtemplate.html

I have a request to the kendo team, for collection widgets such as Grid/ListView, please try to explain the examples always using a scenario where the data has collection-of-collections (relational data) rather than a single collection. A single collection example is of no use in real life projects now-a-days.

Thanks & regards,
Soumen

[Nikolay Rusev]

Dear Soumen,

In the fiddle from the first post you didn't even attempt to implement the scenario you described(using Kendo MVVM). Not to mention that the fiddle contains invalid JavaScript.

The links from my last post provides sufficient information how to implement it. Did you visit them?

Here is what I've composed based on that articles/demos.
http://jsbin.com/igemux/1/edit

We’d like to remind you that for maximum quality of your support service, the ticketing system is designed to help you resolve product related issues only and isn’t intended as a training resource.

We’re confident our online documentation has the answer you’re looking for. If this isn’t the case, tell us and we’ll fix it.

In case you need any concrete assistance with implementing parts of your project, you may consider contacting our professional services.

All the best,

Nikolay Rusev
the Telerik team

[Soumen]

Thanks Nikolay.

[Ross]

using this in a hierarchy grid how could I change the rowstyle of the parent row, let me explain a litte more, I have a masterdetail grid which based on a condition I wanted the parent row change the background color to red.

This is my function it works but only in the details row, how to access to the master row and change it to backgrond red

 

   function onOrderDetailsDataBound(e) {
         var grid = this;
        var currentRecords = grid.dataSource.view();

        for (var i = 0; i < currentRecords.length; i++) {
            //currentRecords[i] is the current dataItem
            if (!currentRecords[i].Deducible) {
                grid.tbody.find("tr[data-uid='" + currentRecords[i].uid + "']").addClass("noDeducible");
              
            }
        }
    }

 

adding this code the results is: when the master row is expanded it turns red but I want to be in red and not be necessary to click it.

 

var parentRow = $(this).closest(".k-detail-row").prev(".k-master-row"); $(parentRow).addClass(".k-state-selected");

 

Any help? I'm using kendo mvc

 

[Nikolay Rusev]

Hello Ross,

 

This post is duplicate with the one here. I've replied in the forum linked above.

 

Regards,
Nikolay Rusev
Telerik