how to make multi level hierarchy

[Harya]

Hello,

so, i want to make multi level hierarchy and i dont know how to make it, The one i want to make is Hierarchy of ProductID , so i can click on it and display the product name , price , etc.

 

here's my current code,

 

controller :

namespace TelerikMvcApp100.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";

            return View();
        }

        public ActionResult Headers_Read([DataSourceRequest]DataSourceRequest request)
        {
            using (var salesheaders = new SalesHeaderEntities1())
            {
                IQueryable<Header> headers = salesheaders.Headers;
                DataSourceResult result = headers.ToDataSourceResult(request, header => new
                {
                    header.OrderID,
                    header.CustomerID,
                    header.TotalAmount
                });
                return Json(result);
            }

        }

        public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request, int orderID)
        {
            using (var salesheaders = new SalesHeaderEntities1())
            {
                IQueryable<Order> orders = salesheaders.Orders.Where(order => order.OrderID == orderID);

                DataSourceResult result = orders.ToDataSourceResult(request, order => new
                {
                    order.LinesID,
                    order.ProductID,
                    order.Quantity,
                    order.Unit,
                    order.TotalPrice
                });
                return Json(result);
            }
        }

        public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request, int productID)
        {
            using (var salesheaders = new SalesHeaderEntities1())
            {
                IQueryable<Product> products = salesheaders.Products.Where(product => product.ProductID == productID);

                DataSourceResult result = products.ToDataSourceResult(request, product => new
                {
                    product.ProductName,
                    product.Price
                });
                return Json(result);
            }
        }

    }
}

 

 

view :

@(Html.Kendo().Grid<TelerikMvcApp100.Models.Header>()
      .Name("grid")
      .Columns(columns =>
      {
          columns.Bound(header => header.OrderID);
          columns.Bound(header => header.CustomerID);
          columns.Bound(header => header.TotalAmount);
      })
      .DataSource(dataSource =>
          dataSource.Ajax().Read(read => read.Action("Headers_Read", "Home"))
      )
      .ClientDetailTemplateId("client-template")
)
<script id="client-template" type="text/x-kendo-template">
    @(Html.Kendo().Grid<TelerikMvcApp100.Models.Order>()
      .Name("grid_#=OrderID#")
      .Columns(columns =>
      {
          columns.Bound(order => order.ProductID);

          columns.Bound(order => order.Quantity);
          columns.Bound(order => order.Unit);
          columns.Bound(order => order.TotalPrice);

      })
      .DataSource(dataSource =>

          dataSource.Ajax().Read(read => read.Action("Orders_Read", "Home", new { orderID = "#=OrderID#" }))
      )
      .Pageable()
      .ToClientTemplate()


    )
</script>

@(Html.Kendo().Grid<TelerikMvcApp100.Models.Product>() // CORRECT THIS CODE PLS
        .Name("grid_#=ProductID#")
        .Columns(columns =>
        {
            columns.Bound(product => product.ProductName);
            columns.Bound(product => product.Price);
        })
        .DataSource(dataSource =>
            dataSource.Ajax().Read(read => read.Action("Products_Read", "Home", new { producID = "#=ProductID#" }))
        )
        .Pageable()
        .ToClientTemplate()
)

[Harya]

and one more question , 

how to make CustomerID display as CustomerName 

[Georgi]

Hello Harya,

It's possible to create multi level hierarchy using the same approach you applied to create two level hierarchy.

e.g.

@(Html.Kendo().Grid<TelerikMvcApp100.Models.Header>()
      .Name("grid")
      .Columns(columns =>
      {
          columns.Bound(header => header.OrderID);
          columns.Bound(header => header.CustomerID);
          columns.Bound(header => header.TotalAmount);
      })
      .DataSource(dataSource =>
          dataSource.Ajax().Read(read => read.Action("Headers_Read", "Home"))
      )
      .ClientDetailTemplateId("client-template")
)
<script id="client-template" type="text/x-kendo-template">
    @(Html.Kendo().Grid<TelerikMvcApp100.Models.Order>()
      .Name("grid_#=OrderID#")
      .Columns(columns =>
      {
          columns.Bound(order => order.ProductID);

          columns.Bound(order => order.Quantity);
          columns.Bound(order => order.Unit);
          columns.Bound(order => order.TotalPrice);

      })
      .DataSource(dataSource =>

          dataSource.Ajax().Read(read => read.Action("Orders_Read", "Home", new { orderID = "#=OrderID#" }))
      )
      .Pageable()
      .ClientDetailTemplateId("client-template-product")
      .ToClientTemplate()


    )
</script>

 <script id="client-template-product" type="text/x-kendo-template">
@(Html.Kendo().Grid<TelerikMvcApp100.Models.Product>() // CORRECT THIS CODE PLS
        .Name("grid_#=ProductID#")
        .Columns(columns =>
        {
            columns.Bound(product => product.ProductName);
            columns.Bound(product => product.Price);
        })
        .DataSource(dataSource =>
            dataSource.Ajax().Read(read => read.Action("Products_Read", "Home", new { producID = "#=ProductID#" }))
        )
        .Pageable()
        .ToClientTemplate()
)
</script>

Also you can use column.ClientTemplate in order to customize the visualization of the displayed data.


Regards,
Georgi
Progress Telerik

[Austin]

I know this is an old post but I wanted to just post some code in case anyone else has the same question I had when I went searching. I wanted to create a Grid, and have it mimic some folder structure by returning the items in the folder. I only needed one template as each folder grid would contain the same items as the previous. I only needed to create one template and just reference itself in the the .ClientDetailTemplateId().

@(Html.Kendo().Grid<ShareFile.Api.Client.Models.Item>()
.Name("DocumentsGrid")
.AutoBind(false)
.Columns(columns =>
{
columns.Bound(d => d.__type).Visible(false);
columns.Bound(d => d.url).ClientTemplate("<a style='cursor:pointer' onclick='DownloadItem(this)'>#=FileName#</a>").Width(300).MinResizableWidth(300).Title("File Name");
columns.Bound(d => d.FileSizeInKB).Width(150).MinResizableWidth(150).Title("Size").ClientTemplate("#=FileSizeInKB# Kb</a>");
columns.Bound(d => d.Description).Width(175).Title("Description").MinResizableWidth(175);
columns.Bound(d => d.FileName).Visible(false);
})
.HtmlAttributes(new { style = "height: 700px;" })
.Scrollable()
.Groupable()
.Sortable()
.ClientDetailTemplateId("template")
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(datasource => datasource
.Custom()
.Schema(schema => schema
.Model(model => {
model.Id(d => d.Id);
}
)
)
.Transport(transport =>
{
transport.Read(read =>
read.Action("GetPlanUploadedDocuments", "Documents")
.DataType("json")
.Data("GetPlanId")
);
})
)
.Events(e=>e.DataBound("dataBound"))
)

<script id="template" type="text/x-kendo-template">
    @(Html.Kendo().Grid<ShareFile.Api.Client.Models.Item>()
.Name("documents_#=Id#")
.AutoBind(true)
.Columns(columns =>
{
columns.Bound(e => e.__type).Visible(false);
columns.Bound(e => e.url).ClientTemplate("<a style='cursor:pointer' onclick='DownloadItem(this)'>\\#=FileName\\#</a>").Width(300).MinResizableWidth(300).Title("File Name");
columns.Bound(e => e.FileSizeInKB).Width(150).MinResizableWidth(150).Title("Size").ClientTemplate("\\#=FileSizeInKB\\# Kb</a>");
columns.Bound(e => e.Description).Width(175).Title("Description").MinResizableWidth(175);
columns.Bound(e => e.FileName).Visible(false);
})
.DataSource(datasource => datasource
.Custom()
.Schema(schema => schema
.Model(model => {
model.Id(p => p.Id);
}
)
)
.Transport(transport =>
{
transport.Read(read =>
read.Action("GetFolderItems", "Documents", new { folderUrl = "#=url#" })
);
})
)
.ClientDetailTemplateId("template")
.Events(e=>e.DataBound("dataBound"))
.Sortable()
.HtmlAttributes(new { style = "height: 500px;" })
.ToClientTemplate())
</script>

<script>

function dataBound(e) {
        var items = e.sender.items();
items.each(function () {
var row = $(this);
var dataItem = e.sender.dataItem(row);
if (dataItem["odata.type"] !== "Folder") {
row.find(".k-hierarchy-cell").html("");
}
});
}

</script>

[Georgi]

Hello Austin,

Thanks for sharing your solution with the community.

Please have in mind that this approach will create an infinite hierarchy which will cause an empty child grid if the user navigates beyond the last level of the hierarchy.


Regards,
Georgi
Progress Telerik

[Austin]

Georgi

Sorry! I should've mentioned I am using a databound function to handle removing the details row if it isn't a specific type (in my case a folder). 

Here is the code I used to disable the Hierarchy cell based on a condition.

function dataBound(e) {
    var items = e.sender.items();
    items.each(function () {
        var row = $(this);
        var dataItem = e.sender.dataItem(row);
        var type = dataItem["odata.type"].split(".");
        dataItem.__type = type[type.length - 1]
        if (dataItem.__type !== "Folder") {
            row.find(".k-hierarchy-cell").html("");
        }
    });
}

 

This removes the ability to transverse a hierarchy cell if it isn't a 'folder' in my case. Also, sorry for the poorly formatted initial post. Didn't find the handy formatting option for code until now :)

[Georgi]

Hello Austin,

Thanks for the explanation. I did not notice the part which removes the expand icon for the last level of the hierarchy. I have examined the provided snippet once again and I did not notice anything that might cause an issue.

Thanks once again for sharing your solution, hope it will help someone.


Regards,
Georgi
Progress Telerik