Integrating Grids inside a Tabstrip with Treeviews

[Raditya]

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?

[Ianko]

Hello ,

From the code shared I see the server-side and Razor implementation of the solution you have. However, what it is accomplished is most probably related to the client-side logic that is missing. 

Can you please provide a locally runnable sample that demonstrates the components integrated and the difficulties experienced so that I can properly evaluate the case and suggest a possible solution for the initial load mentioned?

Regards,
Ianko
Telerik by Progress

[Raditya]

Hi Ianko,

I found a solution for my problem.

First I subscribed to DataBound event on the treeview.

Then every time this event is fired, I will check the selected node's name and pass this as additional data for the grid datasource. something like this

01.<script type="text/javascript">
02.    var compName;
03.
04.    function additionalData() {
05.        return { computerName: compName }
06.    }
07.
08.    function loadSoftwares() {
09.        var blacklistedGrid = $("#BlacklistedSoftwareGrid").data("kendoGrid");
10.        var unsupportedGrid = $("#UnsupportedSoftwareGrid").data("kendoGrid");
11.        var supportedGrid = $("#SupportedSoftwareGrid").data("kendoGrid");
12.        blacklistedGrid.dataSource.read();
13.        unsupportedGrid.dataSource.read();
14.        supportedGrid.dataSource.read();
15.    }
16.
17.    function onTreeNodesBound(e) {
18.        var treeview = $('#AssetTreeView').data("kendoTreeView");
19.        var dataItem = treeview.dataItem(treeview.select());
20.        if (dataItem != null && dataItem.Name != null && dataItem.selectable) {
21.            compName = dataItem.Name;
22.            loadSoftwares();
23.        }
24.    }
25.</script>

 

anyway, thanks for your response to my question.

 

Best regards,

Raditya

 

<script type="text/javascript">
    var compName;

    function additionalData() {
        return { computerName: compName }
    }

    function loadSoftwares() {
        var blacklistedGrid = $("#BlacklistedSoftwareGrid").data("kendoGrid");
        var unsupportedGrid = $("#UnsupportedSoftwareGrid").data("kendoGrid");
        var supportedGrid = $("#SupportedSoftwareGrid").data("kendoGrid");
        blacklistedGrid.dataSource.read();
        unsupportedGrid.dataSource.read();
        supportedGrid.dataSource.read();
    }

    function onTreeNodesBound(e) {
        var treeview = $('#AssetTreeView').data("kendoTreeView");
        var dataItem = treeview.dataItem(treeview.select());
        if (dataItem != null && dataItem.Name != null && dataItem.selectable) {
            compName = dataItem.Name;
            loadSoftwares();
        }
    }
</script>