how to make multi level hierarchy

3 posts, 0 answers
  1. Harya
    Harya avatar
    5 posts
    Member since:
    Sep 2017

    Posted 27 Sep Link to this post

    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()
    )
     
  2. Harya
    Harya avatar
    5 posts
    Member since:
    Sep 2017

    Posted 27 Sep Link to this post

    and one more question , 

    how to make CustomerID display as CustomerName 

  3. Georgi
    Admin
    Georgi avatar
    171 posts

    Posted 29 Sep Link to this post

    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
    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.
Back to Top