Creating a Master-Detail grids editable

4 posts, 0 answers
  1. Denlys
    Denlys avatar
    6 posts
    Member since:
    May 2016

    Posted 05 May Link to this post

    Hi,

    I'm creating a master-detail grid (see the screenshot attached) and I need the following:

    1. Always show the first column in both grids as checkboxes. Currently in the master grid I need to click the column and after that a checkbox is shown so I need to click again to change the checkbox status. What I need is to show the checkbox always and when I click it only once I change it status.
    2. I need to do the details grid editable so I can check/uncheck the checkboxes in the first column. See the red circle in the screenshot, currently I can't see the checkbox. I did some trials with no success!
    3. When the user click the checkbox in the master grid then all checkboxes in the detailed grid for that row are set to checked (this is realized in the client side)

    Both grids uses local data binding, once the controller returns the view I don't wanna access the server again to read the data of the grids. Here's my code

     

    The view:

    01.@(Html.Kendo().Grid(Model.ExpedienteRows)
    02.    .Name("grid_SeleccionarPedidos")
    03.    .Columns(columns =>
    04.    {
    05.        columns.Bound(c => c.IdExpediente).Hidden();
    06.        columns.Bound(c => c.Seleccionado)
    07.            .Width(90);
    08.        columns.Bound(c => c.Autor).Width(190);
    09.        columns.Bound(c => c.AnnoExpediente)
    10.            .Title("Año")
    11.            .Width(70);
    12.        columns.Bound(c => c.NumeroExpediente)
    13.            .Title("Número")
    14.            .Width(120);
    15.    })
    16.    .Editable(ed => ed.Mode(GridEditMode.InCell))
    17.    .HtmlAttributes(new { style = "height: 380px; with: 200px;" })
    18.    .Scrollable(x => x.Height(300))
    19.    .Sortable(x => x.SortMode(GridSortMode.MultipleColumn))
    20.    .Filterable()
    21.    .DataSource(dataSource => dataSource
    22.        .Ajax()
    23.        .ServerOperation(false)
    24.        .Batch(true)
    25.        .Model(model =>
    26.        {
    27.            model.Id(p => p.IdExpediente);
    28.        })
    29.    )
    30.    .ClientDetailTemplateId("pedidos")
    31.    .Events(e => e.DetailInit("detailInit"))
    32.)
    33. 
    34.<script id="pedidos" type="text/kendo-tmpl">
    35.    @(Html.Kendo().Grid<PedidoRow>()
    36.        .Name("gridPedido_#=IdExpediente#")
    37.        .Columns(columns =>
    38.        {
    39.            columns.Bound(c => c.IdPedido).Hidden();
    40.            columns.Bound(c => c.Seleccionado)
    41.                .Width(40);
    42.            columns.Bound(c => c.AnnoPedido).Width(70);
    43.            columns.Bound(c => c.NumeroPedido).Width(70);
    44.            columns.Bound(c => c.Proveedor).Width(70);
    45.            columns.Bound(c => c.DescripcionMaterial).Width(70);
    46.            columns.Bound(c => c.Importe)
    47.                .Format("{0:N4}")
    48.                .Width(70);
    49.        })
    50.        .HtmlAttributes(new { style = "with: 200px;" })
    51.        .ToClientTemplate()
    52.    )
    53.</script>
    54. 
    55.<script>
    56.    function detailInit(e) {
    57.        var grid = $("#gridPedido_" + e.data.IdExpediente).data("kendoGrid");
    58.        grid.dataSource.data(e.data.Pedidos);
    59.    }
    60.</script>

    and here's the model

    01.public class SeleccionarPedidosModel
    02.{
    03.    public IEnumerable<ExpedienteRow> ExpedienteRows { get; set; }
    04.}
    05. 
    06.public class ExpedienteRow
    07.{
    08.    public bool Seleccionado { get; set; } // binded to the first column (checkbox)
    09.    public Guid IdExpediente { get; set; }
    10.    public string Autor { get; set; }
    11.    public int NumeroExpediente { get; set; }
    12.    public int AnnoExpediente { get; set; }
    13.    public IEnumerable<PedidoRow> Pedidos { get; set; } // Detail grid content
    14.}
    15. 
    16.public class PedidoRow
    17.{
    18.    public Guid IdPedido { get; set; }
    19.    public bool Seleccionado { get; set; } // binded to the first column (checkbox)
    20.    public int NumeroPedido { get; set; }
    21.    public int AnnoPedido { get; set; }
    22.    public string Proveedor { get; set; }
    23.    public string DescripcionMaterial { get; set; }
    24.    public decimal Importe { get; set; }
    25.}

     

    Any help will be appreciated

    Thanks.

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 09 May Link to this post

    Hi Denlys,

    You can use templates in order to show checkboxes. You can examine this (http://stackoverflow.com/questions/17889049/adding-bindeable-checkbox-column-to-grid/17923173#17923173) forum post and the how-to examples from our documentation for details on the matter.

    Regards,
    Danail Vasilev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Denlys
    Denlys avatar
    6 posts
    Member since:
    May 2016

    Posted 18 May in reply to Danail Vasilev Link to this post

    Hi Danail,

    I've tried what you suggested and I've created a new project to learn how to create the checkboxes.

    I almost have it working. The problems I'm facing are these:

    1. When I expand only one child grid it works as expected but when I open two children grids the first one doesn't add the class k-state-selected to the selected row however the checkboxes are checked/unchecked when I click them.
    2. After I select some rows how can I know where are selected? I've seen some examples using grid.select() but when I try to use .Selectable(x => x.Mode(GridSelectionMode.Multiple)) in the child grid I get this error:

    An exception of type 'System.NotSupportedException' occurred in Kendo.Mvc.dll but was not handled in user code.
    Additional information: There is no DataSource Model Id property specified.

    Is it possible to use .Selectable(...) in the child grid?

    Here's the code

    View:

    01.@using TelerikTests.Models
    02.@model TestModel
    03. 
    04.@{
    05.    ViewBag.Title = "Home Page";
    06.}
    07. 
    08. 
    09.<button onclick="onClickButton()">show selected items</button>
    10. 
    11.@(Html.Kendo().Grid(Model.Categories)
    12.    .Name("grid_Master")
    13.    .Columns(columns =>
    14.    {
    15.        columns.Bound(c => c.ID).Hidden();
    16.        columns.Bound(c => c.Description);
    17.        columns.Bound(c => c.Date);
    18.    })
    19.    .Editable(ed => ed.Mode(GridEditMode.InCell))
    20.    .HtmlAttributes(new { style = "height: 380px; with: 200px;" })
    21.    .Scrollable(x => x.Height(300))
    22.    .Sortable(x => x.SortMode(GridSortMode.MultipleColumn))
    23.    .Filterable()
    24.    .DataSource(dataSource => dataSource
    25.        .Ajax()
    26.        .ServerOperation(false)
    27.        .Batch(true)
    28.        .Model(model =>
    29.        {
    30.            model.Id(p => p.ID);
    31.        })
    32.    )
    33.    .ClientDetailTemplateId("pedidos")
    34.    .Events(e => e.DetailInit("detailGridInit"))
    35.)
    36. 
    37.<script id="pedidos" type="text/kendo-tmpl">
    38.    @(Html.Kendo().Grid<ProductModel>()
    39.        .Name("gridDetail_#=ID#")
    40.        .Columns(columns =>
    41.        {
    42.            columns.Bound(c => c.ID).Hidden();
    43.            columns.Bound(c => c.Selected)
    44.                .ClientTemplate("<input class='checkbox' type='checkbox' />")
    45.                .Width(30);
    46.            columns.Bound(c => c.Name).Width(70);
    47.            columns.Bound(c => c.Price).Width(70);
    48.        })
    49.        .HtmlAttributes(new { style = "with: 200px;" })
    50.        .Events(x => x.DataBound("onDataBound"))
    51.        .Selectable(x => x.Mode(GridSelectionMode.Multiple))
    52.        .ToClientTemplate()
    53.    )
    54.</script>
    55. 
    56.<script>
    57.    function onDataBound() {
    58.        $(".checkbox").bind("change", function (e) {
    59.            $(e.target).closest("tr").toggleClass("k-state-selected");
    60.        });
    61.    }
    62. 
    63.    function detailGridInit(e) {
    64.        var grid = $("#gridDetail_" + e.data.ID).data("kendoGrid");
    65.        grid.dataSource.data(e.data.Products);
    66.    }
    67. 
    68.    function onClickButton() {
    69.    }
    70.</script>

     

    The Controller:

    01.public ActionResult Index()
    02.{
    03.    var model = GetModel();
    04.    return View(model);
    05.}
    06. 
    07.TestModel GetModel()
    08.{
    09.    TestModel model = new TestModel
    10.    {
    11.        Categories = new List<CategoryModel>
    12.        {
    13.            new CategoryModel
    14.            {
    15.                ID= Guid.NewGuid(),
    16.                Description = "Red",
    17.                Date = new DateTime(2016, 5, 4),
    18.                Products = new List<ProductModel>
    19.                {
    20.                    new ProductModel
    21.                    {
    22.                        ID = Guid.Parse("{FB1C9AFF-6205-4475-BC79-B9F7CD2EF794}"),
    23.                        Name = "Cat",
    24.                        Price = 5m,
    25.                    },
    26.                    new ProductModel
    27.                    {
    28.                        ID = Guid.Parse("{FB1C9AFF-6205-4475-BC79-B9F7CD2EF700}"),
    29.                        Name = "Dog",
    30.                        Price = 7m,
    31.                    },
    32.                },
    33.            },
    34.            new CategoryModel
    35.            {
    36.                ID= Guid.NewGuid(),
    37.                Description = "Blue",
    38.                Date = new DateTime(2016, 8, 8),
    39.                Products = new List<ProductModel>
    40.                {
    41.                    new ProductModel
    42.                    {
    43.                        ID = Guid.Parse("{001C9AFF-6205-4475-BC79-B9F7CD2EF710}"),
    44.                        Name = "Laptop",
    45.                        Price = 9m,
    46.                    },
    47.                    new ProductModel
    48.                    {
    49.                        ID = Guid.Parse("{00009AFF-6205-4475-BC79-B9F7CD2EF700}"),
    50.                        Name = "Desktop",
    51.                        Price = 4m,
    52.                    },
    53.                },
    54.            },
    55.        },
    56.    };
    57. 
    58.    return model;
    59.}

    The model:

    01.public class TestModel
    02.{
    03.    public IEnumerable<CategoryModel> Categories { get; set; }
    04.}
    05. 
    06.public class CategoryModel
    07.{
    08.    public Guid ID { get; set; }
    09.    public string Description { get; set; }
    10.    public DateTime Date { get; set; }
    11.    public IEnumerable<ProductModel> Products { get; set; }
    12.}
    13. 
    14.public class ProductModel
    15.{
    16.    public Guid ID { get; set; }
    17.    public string Name { get; set; }
    18.    public decimal Price { get; set; }
    19.}

     

  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 20 May Link to this post

    Hi Denlys,

    I am not able to reproduce the mentioned issue as the provided example is not runnable. There is no Selected field in the model, also the data source of the second grid is not provided.

    You can try to debug the onDataBound event to see whether the change event is properly attached.

    Regarding the multiple selection of the child grid I am not reproducing this issue with the following demo - http://demos.telerik.com/aspnet-mvc/grid/hierarchy. You can see the result here - http://screencast.com/t/rMOUnFYjKV31 and the modification I have made to the code is highlighted as follows:
    <script id="template" type="text/kendo-tmpl">
        @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
                .Name("grid_#=EmployeeID#") // template expression, to be evaluated in the master context
                .Columns(columns =>
                {
                    columns.Bound(o => o.OrderID).Width(110);
                    columns.Bound(o => o.ShipCountry).Width(110);
                    columns.Bound(o => o.ShipAddress).ClientTemplate("\\#= ShipAddress \\#"); // escaped template expression, to be evaluated in the child/detail context
                    columns.Bound(o => o.ShipName).Width(300);
                })
                .Selectable(x=>x.Mode(GridSelectionMode.Multiple))
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(10)
                    .Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
                )
                .Pageable()
                .Sortable()
                .ToClientTemplate()
        )
    </script>




    Regards,
    Danail Vasilev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready