Hierarchy Grid - Filtering

[Joe]

I'm looking at the Hierarchy Grid Demo (http://demos.telerik.com/aspnet-mvc/grid/hierarchy) for inspiration on something similar I need to do.

In the demo, it's a list of people, and the detail grid shows orders placed for the person in the parent grid.  So hypothetically, how would you implement a client side filtering condition that used data from the details to get a list of the parents?  Say I want a list of all people who had orders shipped to Australia?  Would I have to build a custom search, then populate the grid with the results, or is there a way to build that filter condition within the built in grid capabilities?

[Joe]

Well as it turns out, the whole hierarchy grid just isn't working.  I built it similar to the demo, but the first grid doesn't load at all.  If I take out the .ClientDetailTemplateId() method, the grid loads up just fine.  But as soon as I try to put the .ClientDetailTemplateId in, it just stops reading for the first grid.

 

And of course, here's the code.  First up, the controller.  It's very simple:

using System.Collections.Generic;
using System.Configuration;
using System.Linq;
using System.Web.Mvc;
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using Vensure.Dashboard.DataEntity;
using Vensure.Dashboard.Utility;
using Vensure.Dashboard.Utility.Attributes;

namespace Vensure.UserManager.Controllers
{
    [MustBeAuthorized]
    public class HomeController : Controller
    {
        private readonly string _baseURL = $"{ConfigurationManager.AppSettings["BaseURL"]}";

        // GET: Home
        public ActionResult Index()
        {
            return View();
        }

        [HttpGet]
        [ActionName("GetAllUsers")]
        public ActionResult GetAllUsers([DataSourceRequest]DataSourceRequest request)
        {
            var userList = WebApiHelper.CallGetAPI<List<User>>($"{_baseURL}/api/User/GetAllUsers");
            return Json(userList.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
        }

        [HttpPost]
        [ActionName("GetUserRoles")]
        public ActionResult GetUserRoles(string userName, [DataSourceRequest] DataSourceRequest request)
        {
            var appRoles = WebApiHelper.CallGetAPI<List<UserAppRoles>>($"{_baseURL}/api/User/GetAllUserAppsAndRoles");
            return Json(appRoles.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
        }
    }
}

 

And now the cshtml code:

@using System.Configuration
@using Vensure.Dashboard.DataEntity

@{
    ViewBag.Title = "Index";
}

<style>
    .k-loading-image {
        @* this can't be setup in the GridOverrides.css because of the MVC path resolver *@
        background-image: url(@Url.Content("~/Content/loadBgGrey.gif"));
    }

    .k-button .k-icon {
        color: white;
    }
</style>

@(Html.Kendo().Grid<User>()
    .Name("userGrid")
    .Columns(cols =>
    {
        cols.Bound(c => c.UserId).Filterable(false);
        cols.Bound(c => c.FirstName);
        cols.Bound(c => c.LastName);
        cols.Bound(c => c.UserName);
        cols.Bound(c => c.Email);
        cols.Bound(c => c.IsActive);
    })
    .ClientDetailTemplateId("template")
    .Resizable(resize => resize.Columns(true))
    .Scrollable(s => s.Height("auto"))
    .Sortable()
    .Pageable(pageable => pageable
        .Refresh(true)
        .PageSizes(new List<object> { 10, 20, 30, 40, 50, "all" })
        .Refresh(true)
        .ButtonCount(10)
    )
    .Filterable(f => f.Enabled(true))
    .AutoBind(true)
    .Events(events => events.DataBound("dataBound"))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(r => r.Action("GetAllUsers", "Home").Type(HttpVerbs.Get))
        .PageSize(20)
    )
)

<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<UserAppRoles>()
          .Name("grid_#=UserName")
          .Columns(cols =>
          {
              cols.Bound(c => c.ApplicationName);
              cols.Bound(c => c.Role);
              cols.Bound(c => c.RoleCreated);
          })
          .DataSource(ds => ds
              .Ajax()
              .PageSize(10)
              .Read(r => r.Action("GetUserRoles", "Home", new { userName = "#=UserName" }).Type(HttpVerbs.Post))
          )
          .Pageable()
          .Sortable()
          .ToClientTemplate())
</script>

<script type="text/javascript">
    $(document).ready(function () {
        $("#gridFilterReset").click(function (e) {
            e.preventDefault();
            var ds = $("#userGrid").data("kendoGrid").dataSource;
            ds.filter([]);
        });

        //$("#gridSaveSettings").click(function (e) {
        //    e.preventDefault();
        //    localStorage["gridSettings"] = window.kendo.stringify($("#ajaxGrid").data("kendoGrid").getOptions());
        //});
    });

    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
</script>

 

Any help at all would be greatly appreciated...

[Joe]

I wish I could delete my response, cuz I got it working after all.  Totally my fault as to why it didn;t work... :(

[Joe]

So as you can see, I got the actual loading of the grid to work, however my issue now is the detail grid is shown in my hilight or selection bar color.  In the demo, the background of the detail grid, behind the actual grid, is the selection color, but the grid itself comes out with a white background, making it totally readable.

In my grid (see attached screen shot) when I move my cursor over the detail grid, the entire grid lights up in the selection bar color of the parent grid.  I'm sure I have some style somewhere that is mucking it up, but damned if I can find it.  I really wish there were better methods for styling these damn things... ARGH!!

In the detail grid, I even have it set to select single rows, and still the entire grid lights up.  It's not at all what I want, and I'm not sure what I need to muck about with to get it to look right.  Any help?

 

[Joe]

Hopefully whomever from support reads this, I hope they just jump to the bottom and see this message...

My initial question still stands, about filtering the list of people in the parent grid based off of properties in the detail grid.  Hopefully there's a way to easily implement this for the users without having to build custom search forms and a different page with the search results.

My second question about the coloring of the detail grid is still a legitimate question.  I hate that the detail grid is colored the same as the hilight bar from the parent grid.

And thirdly, my detail grid I have grouped by a column.  How can I get the detail grid to display with the groups all collapsed?

[Stefan]

Hello, Joe,

Regarding the questions:

1) The first Grid can be initially filtered using the filter property of the data source:

Filter property MVC

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-filter

2) The colors can be set dynamically on the dataBound event of the child Grids:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-dataBound

https://dojo.telerik.com/EGOxi

3) This can be achieved by programmatically clicking the collapse icon on the dataBound event of the childGrid:

http://dojo.telerik.com/uYiHip

$(e.sender.tbody).find(".k-i-collapse").trigger("click");

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[Joe]

I'm afraid you either didn't completely read the message, or lost the actual issue in all the replies I left to my own message.  I want to present to the user a way to filter the data in the topmost parent grid based off of information in the detail grid.  To use the Hierarchial Grid demo as an example,  the demo has a list of people, and the detail grid shows orders placed for the person in the parent grid.  So hypothetically, how would you implement a client side filtering condition that used data from the details to get a list of the parents?  Say I want a list of all people who had orders shipped to Australia?  Would I have to build a custom search, then populate the grid with the results, or is there a way to build that filter condition within the built in grid capabilities?

2. I'll try the color thing, but I'm more interested in why the colors come out all wonky in the detail grid to begin with?

[Joe]

The color and the collapsing the grouped rows in the detail table didn't work. As soon as I add a DataBound event in the detail grid, it stops reading altogether.  Even if the databound event merely throws up an alert and nothing else related to the grid or the data, and it still just stops reading altogether. Even if javascript function contains nothing, just the simple act of defining a databaound event stops it from reading.  Not much help at all.

[Stefan]

Hello, Joe,

I'm sorry to hear that the suggestions were not helpful in the real application.

Based on the description of the desired result, this can be achieved with an external filter which can be set using the filter method of the Grid. The value can come from an input or from a variable. In general, the child Grids are filtered based on the parent, so filtering the parent based on the child is not supported, as parent Grid will be made first and it will not know the values of the child Grid before that:

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-filter

As for the second issue with the rows colors, only setting the data-bound event should not cause the Grid to stop functioning, I can assume that there is a JavaScript error in the console which is causing this.

If additional assistance is needed, please provide a fully runnable example, as this will allow us to provide suggestions best suited for the real application.

Regards,
Stefan
Progress Telerik