Conditionally set Grid Row Color for Child Grid.

[Abhijeet]

Hi,

 My grid is configured as follows:

@(Html.Kendo().Grid<GRL.DomainViewModel.ViewModel>()
                                .Name("tblView")
                                .Columns(columns =>
                                {
                                    columns.Bound(p => p.Selected).Width(50).Title(" ").ClientTemplate("<input id='recApprovalsSelected' style = 'width: 30px' type='checkbox' #= Selected ? checked='checked' :'' #' onclick='recApprovalViewRowCheck(this)' />");
                                    ....
                                    columns.Command(command => command.Custom("approverViewCoversheet").Text("Coversheet").Click("recApprovalsViewCoversheetClick")).Width(100).Title(" ");
                                    columns.Command(command => command.Custom("approverViewReconcilerComment").Text("Comment").Click("recApprovalsViewCommentClick")).Width(100).Title(" ");
                                })
                                 .Scrollable(s => s.Height(550))
                                 .Pageable(pageable => pageable.Refresh(true)
                                                            .Input(true)
                                                            .PageSizes(new int[] { 100, 250, 500, 1000 }))
                                .Sortable()
                                .NoRecords()
                                .AutoBind(false)
                                .Reorderable(r => r.Columns(true))
                                .Resizable(resize => resize.Columns(true))
                                .Filterable()                                
                                .Groupable(true)                               
                                .ClientDetailTemplateId("approverViewPackageDetails")
                                .DataSource(dataSource => dataSource
                                    .WebApi()
                                    .Batch(true)
                                    .Model(model =>
                                    {
                                        model.Id(p => p.PkgName);                                        

                                    })
                                    .PageSize(100)
                                    .ServerOperation(false)
                                    .Read(read => read.Action("View", "Manager").Data("ViewParameters"))
                                )
                            )
                            <script id="approverViewPackageDetails" type="text/kendo-tmpl">
                                <h4>Details for Package \\##=PkgName# </h4>
                                @(Html.Kendo().Grid<GRL.DomainViewModel.GLComboViewModel>()
      .Name("grid_#=PkgId#")
      .Columns(columns =>
      {
          columns.Bound(p => p.Account).Title("Account").Width(75);
          .....
          columns.Bound(p => p.TransCur).Title("Trans.Cur").Width(80);
          columns.Bound(p => p.TransAmount).Title("Trans.Amount").Width(100);          
          columns.Bound(p => p.RecAmount).Title("Rec.Amount").Width(100);
      })      
      .Pageable()
      .Sortable()
      .NoRecords()
       .Reorderable(r => r.Columns(true))
      .Resizable(resize => resize.Columns(true))
      .Filterable()
      .DataSource(dataSource => dataSource
            .WebApi()
            .Model(model =>
            {
                model.Id(p => p.RecPackageId);
            })
            .PageSize(15)
            .Read(read => read.Action("RecPackageCombo", "RecPackageManager", new
            {
                PkgId = "#=PkgId#",
                pkgVer = "#=PkgVersion#"             
            }))
      )
      .ToClientTemplate()
                                )

For my Child Grid, if TransAmount is not equal to RecAmount, i need the row be highlighted in different color. 

I tried using the ClientRowTemplate on child grid also tried adding ClientTemplate on the Child grid columns, but it did not work.

Thanks,

 

 

 

[Stefan]

Hello, Abhijeet,

Thank you for the provided code.

The desired result could be achieved using a function inside the ClientTemplate. It will require selecting the current row based on the uid and then add the desired styles only if the values are equal.

I made an example demonstrating how it can be achieved:

https://dojo.telerik.com/UPiWuVAS

I hope this is helpful.

Regards,
Stefan
Progress Telerik