1
votes

How do I add CSS classes to both the parent and the child nodes of a Kendo treeview?

I tried this:

@(Html.Kendo().TreeView()
      .Name("Countries")
      .DataTextField("CityName")
      .Checkboxes(checkboxes => checkboxes
          .Name("cityCheck")
          .CheckChildren(true)
      )
      .BindTo((IEnumerable<CountryModel>)ViewBag.Country, (Kendo.Mvc.UI.Fluent.NavigationBindingFactory<TreeViewItem> mappings) =>
      {
          mappings.For<CityModel>(binding => binding.ItemDataBound((item, parent) =>
          {
              item.Id = parent.Id.ToString();
              item.Text = parent.Name;
              item.HtmlAttributes.Add("class", "citycheck");
          })
          .Children(p => p.City));
          mappings.For<CityModel>(binding => binding.ItemDataBound((item, child) =>
          {
               item.Id = child.Code;
               item.Text = child.Name;
               item.HtmlAttributes.Add("class", "citycheck");
          }));
      })
)

But, it is not applying the classes.

Please let me know where I have made a mistake.

1

1 Answers

1
votes

what i posted the code in my question is working fine now.

  @(Html.Kendo().TreeView()
  .Name("Countries")
  .DataTextField("CityName")
  .Checkboxes(checkboxes => checkboxes
      .Name("cityCheck")
      .CheckChildren(true)
  )
  .BindTo((IEnumerable<CountryModel>)ViewBag.Country, (Kendo.Mvc.UI.Fluent.NavigationBindingFactory<TreeViewItem> mappings) =>
  {
      mappings.For<CityModel>(binding => binding.ItemDataBound((item, parent) =>
      {
          item.Id = parent.Id.ToString();
          item.Text = parent.Name;
          item.HtmlAttributes.Add("class", "citycheck");
      })
      .Children(p => p.City));
      mappings.For<CityModel>(binding => binding.ItemDataBound((item, child) =>
      {
           item.Id = child.Code;
           item.Text = child.Name;
           item.HtmlAttributes.Add("class", "citycheck");
      }));
  })

)