Integrating Grids inside a Tabstrip with Treeviews

3 posts, 0 answers
  1. Raditya
    Raditya avatar
    3 posts
    Member since:
    Jan 2016

    Posted 02 May Link to this post

    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?

  2. Ianko
    Admin
    Ianko avatar
    1741 posts

    Posted 04 May Link to this post

    Hello Raditya,

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Raditya
    Raditya avatar
    3 posts
    Member since:
    Jan 2016

    Posted 04 May Link to this post

    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>

     
Back to Top