CODEWITHSUNDEEP
javascriptjquerykendo-uikendo-asp.net-mvc
PeaceInMind
PeaceInMind

Reputation: 1167

Format kendo ui grid to hierarchy


I want to create a grid by kendo ui as the below figure. When loading data, if level is zero, padding of field name is 1, bold, if level 2: font-size small, padding 10.

// Kendo ui grid

@(Html.Kendo().Grid<Model>()
          .Name("gridModel")
          .HtmlAttributes(new { @class = "table" })
          .DataSource(x => x.Ajax()
                      .Read("ReadData", "Information")

          )       
          .Events(r => r.DataBound("FormatTable"))
          .Columns(c =>
          {

             c.Bound(i=>i.ID)
             ....

I want to call a event to format table when loading data. It will check value of level field then format row, but I don't know how to implement it.

// javascript

function FormatTable() {
    alert('b');
    var grid = $("#gridModel").data("kendoGrid");
    grid.closest("tr").has("td:eq(2):contains(1)").setSize(7);
}

It isn't work. Please help me if you have any ideas. Many thanks. enter image description here

Upvotes: 2

Views: 350

Answers (1)

Hoang Nguyen
Hoang Nguyen

Reputation: 1358

Try to below code (Bold is the change in your code)

 @(Html.Kendo().Grid<Model>()
      .Name("gridModel")
      .HtmlAttributes(new { @class = "table" })
      .DataSource(x => x.Ajax()
                  .Read("ReadData", "Information")

      )       
      .Events(r => r.DataBound("FormatTable"))
      .Columns(c =>
      {

         c.Bound(i=>i.ID)
         **c.Bound(i=>i.Name).HtmlAttributes(new {@class="grid-name-column"})**
         ....

 function FormatTable() {     
    var grid = $("#gridModel").data("kendoGrid");
    **$.each(data, function (i, row) {
        if (row.Level!= null) {                
            var element = $('tr[data-uid="' + row.uid + '"]');
            $(element).find(".grid-name-column").addCss("level-"+row.Level);
        }
    });**
}

**.level-1{
   margin-left:10px;
}
.level-2{
   margin-left:20px;
}
.level-3{
   margin-left:30px;
}**

Hope it help!

Upvotes: 2

Related Questions