Adding CSS class to parent row in client template

[Mark]

I have a grid that I want to have a secondary grid show if the user clicks the detail. Normally I have a databound method that is called on the parent grid to color the rows based on the data there but I don't seem to be able to do this for the parent grid if I use the client detail template for the secondary grid. Am I missing something? here is the grid declarations for both grids. It works if i remove the client detail grid.

 

@(Html.Kendo().Grid<tbl_Quote_Scheduled_Locations>()
                  .Name("locations")
                  .DataSource(datasource => datasource
                      .Ajax()
                      .Model(model => model.Id(p => p.Id))
                      .Read(read => read.Action("LocationsGetList", "Import").Data("onLocationRead"))
                      .Update(update => update.Action("UpdateLocation", "Import"))
                      .Destroy(update => update.Action("DeleteLocation", "Import"))
                      .Aggregates(agg =>
                      {
                          agg.Add("LocationName", typeof(int?)).Count();
                          agg.Add(p => p.TIV).Sum();
                      })
                      .Events(e => e.RequestEnd("onChange"))
                  )
                  .Columns(columns =>
                  {
                      columns.Bound(p => p.LocationName).Title("Location Name").ClientFooterTemplate("Count: #=count#");
                      columns.Bound(p => p.Address).Title("Address");
                      columns.Bound(p => p.City).Title("City");
                      columns.Bound(p => p.State).Title("State");
                      columns.Bound(p => p.Zip).Title("Zipcode");
                      columns.Bound(p => p.TIV).Title("TIV").Format("{0:c}").ClientFooterTemplate("Total TIV: #=kendo.toString(sum, 'C')#");
                      columns.Bound(p => p.Error).Hidden(true);
                      columns.Command(command =>
                      {
                          command.Edit();
                          command.Destroy();
                      });
                  })
                  .Events(e => e
                      .DataBound("onLocationsGridBound")
                  )
                  .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("Location"))
                  .ClientDetailTemplateId("errorTemplate")
            )

<script id="errorTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<ReturnLocationErrors_Result>()
          .Name("error_#=Id#")
          .Columns(col =>
          {
              col.Bound(o => o.LocationId).Hidden(true);
              col.Bound(o => o.ErrorDetail);
          })
          .DataSource(s => s
              .Ajax()
              .Read(read => read.Action("GetLocationErrors", "Import", new {locationId = "#=Id#"}))
        )
          .ToClientTemplate()
    )
</script>

 

    function onLocationsGridBound() {
        var data = this._data;
        for (var x = 0; x < data.length; x++) {
            var dataItem = data[x];
            var tr = $("#locations").find("[data-uid='" + dataItem.uid + "']");
            console.log(tr);
            var cell = $("td:nth-child(7)", tr);
            if (cell[0].textContent == "1") {
                tr.addClass("ErrorColor");
            }
        }
    }

 

 

 

[Mark]

Ok turns out this is caused by the client template adding the subcolumn for the dropdown grid. So I just needed to adjust the column index I was looking for by one because of the added column from.

[Preslav]

Hi Mark,

Based on your second post, I believe that you were able to resolve the issue. Please correct me if I am wrong.

If this is not the case, could you please elaborate on the issue again?


Regards,
Preslav
Progress Telerik

[Mark]

You are right I was able to resolve my situation. I just can't mark my own post as answered so I will mark your reply as the answer so it closes this post.