I want to render a treeview and a tabstrip within a page. This tabstrip will have three tabs each of which will render a grid inside it.
<
div
class
=
"row"
>
<
div
class
=
"demo-section narrow tree-view"
>
<
div
>
@(Html.Kendo().TreeView()
.Name("AssetTreeView")
.DataTextField("Name")
.DataSource(dataSource => dataSource
.Read("ReadCategories", "Software")
.Model(categoriesModel => categoriesModel
.Id("Id")
.Children(clientHw => clientHw
.Read("ReadClientHWs", "Software")
.Model(clientHWModel => clientHWModel.Id("Id"))
)
)
)
.Events(events => events
.Select("onNodeSelected"))
)
</
div
>
</
div
>
<
div
class
=
"demo-section wide grid"
>
@(Html.Kendo().TabStrip()
.Name("SoftwareTabStrip")
.Animation(animation =>
animation.Open(effect =>
effect.Fade(FadeDirection.In)))
.Items(tabstrip =>
{
tabstrip.Add()
.Text("Blacklisted")
.Selected(true)
.ImageUrl("~/Content/Images/32x32/traffic-light-red.png")
.ImageHtmlAttributes(new { style = "width: 32px; height: 32px; padding: 3px;" })
.Content(@<
text
>Blacklisted is bad!
@(Html.Kendo().Grid<
MyIT.ModelsInterfaces.Models.MyIT.Software
>()
.Name("BlacklistedSoftwareGrid")
.Columns(columns =>
{
columns.Bound(s => s.Publisher).Width(250);
columns.Bound(s => s.SoftwareName).Width(250);
columns.Bound(s => s.Version).Width(100);
columns.Bound(s => s.Description).Width(400);
})
.NoRecords("No blacklisted software installed...")
.Pageable()
.Sortable()
.Scrollable(x => x.Height(400))
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("GetRedSoftware", "Software").Data("additionalData"))
)
.Events(events => events
.DataBound("onBlacklistedBound")
.DataBinding("onDataBinding"))
)
</
text
>);
tabstrip.Add()
.Text("Other Software")
.ImageUrl("~/Content/Images/32x32/traffic-light-yellow.png")
.ImageHtmlAttributes(new { style = "width: 32px; height: 32px; padding: 3px;" })
.Content(@<
text
>Yellow is allowed!
@(Html.Kendo().Grid<
MyIT.ModelsInterfaces.Models.MyIT.Software
>()
.Name("UnsupportedSoftwareGrid")
.Columns(columns =>
{
columns.Bound(s => s.Publisher).Width(250);
columns.Bound(s => s.SoftwareName).Width(250);
columns.Bound(s => s.Version).Width(100);
columns.Bound(s => s.Description).Width(400);
})
.NoRecords("No software available...")
.Pageable()
.Sortable()
.Scrollable(x => x.Height(400))
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("GetYellowSoftware", "Software").Data("additionalData"))
)
.Events(events => events
.DataBound("onUnsupportedBound")
.DataBinding("onDataBinding"))
)
</
text
>);
tabstrip.Add()
.Text("Supported")
.ImageUrl("~/Content/Images/32x32/traffic-light-green.png")
.ImageHtmlAttributes(new { style = "width: 32px; height: 32px; padding: 3px;" })
.Content(@<
text
>Green is supported!
@(Html.Kendo().Grid<
MyIT.ModelsInterfaces.Models.MyIT.Software
>()
.Name("SupportedSoftwareGrid")
.Columns(columns =>
{
columns.Bound(s => s.Publisher).Width(200);
columns.Bound(s => s.SoftwareName).Width(200);
columns.Bound(s => s.Version).Width(100);
columns.Bound(s => s.Description).Width(400);
})
.NoRecords("No software available...")
.Pageable()
.Sortable()
.Scrollable(x => x.Height(400))
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("GetGreenSoftware", "Software").Data("additionalData"))
)
.Events(events => events
.DataBound("onSupportedBound")
.DataBinding("onDataBinding"))
)
</
text
>);
})
)
</
div
>
</
div
>
The treeview should always return one node (HW Category) expanded with one of it's child node (ClientHW) selected.
Note: ReadClientHWs action method below will return node object with one of the property named "selected"
public class SoftwareController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult ReadCategories()
{
var categories = from category in _clientHWService.GetMajorAssetCategoriesOfUser(_myITService.GetCurrentUser())
select category;
return Json(_mapperService.MapToClientHWCategoryItems(categories),
JsonRequestBehavior.AllowGet);
}
public ActionResult ReadClientHWs(int id)
{
var clientHardwares = from hw in _clientHWService.GetMajorAssetsForUser(_myITService.GetCurrentUser())
where hw.UsedAsId.Equals(id)
select hw;
return Json(_mapperService.MapToClientHWItems(clientHardwares), JsonRequestBehavior.AllowGet);
}
public ActionResult GetGreenSoftware([DataSourceRequest] DataSourceRequest request, string computerName)
{
return Json(_softwareService.GetGreenSoftwares(computerName).ToDataSourceResult(request));
}
public ActionResult GetYellowSoftware([DataSourceRequest] DataSourceRequest request, string computerName)
{
return Json(_softwareService.GetYellowSoftwares(computerName).ToDataSourceResult(request));
}
public ActionResult GetRedSoftware([DataSourceRequest] DataSourceRequest request, string computerName)
{
return Json(_softwareService.GetRedSoftwares(computerName).ToDataSourceResult(request));
}
}
I successfully made the grid loads the correct data every time user click one of the ClientHW nodes. but I haven't been able to render the grid base on this selected node the first time the page load.
how can i accomplish this?