Creating a Master-Detail grids editable

[Denlys]

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.

[Danail Vasilev]

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

[Denlys]

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.}

 

[Danail Vasilev]

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

[chetan]

Error is:

Error: Invalid template:'
    <div class="k-widget k-grid" id="grid1_#=shipmentid_Guid#" style="height:400px;"><table><colgroup><col style="width:100px" /><col style="width:120px" /><col style="width:120px" /><col style="width:120px" /><col style="width:120px" /><col style="width:120px" /><col style="width:120px" /><col style="width:120px" /><col style="width:120px" /><col style="width:150px" /><col style="width:150px" /></colgroup><thead class="k-grid-header"><tr><th class="k-header" data-field="shipmentid_Guid" data-index="0" data-title="shipmentid_ Guid" scope="col"><a class="k-link" href="/Test/ChildDelivery_Read?shipmentid_Guid=%23%3Dshipmentid_Guid%23&grid1_%23%3Dshipmentid_Guid%23-sort=shipmentid_Guid-asc">shipmentid_ Guid</a></th><th class="k-header" data-field="mawbno" data-index="1" data-title="MAWB #" scope="col"><a class="k-link" href="/Test/ChildDelivery_Read?shipmentid_Guid=%23%3Dshipmentid_Guid%23&grid1_%23%3Dshipmentid_Guid%23-sort=mawbno-asc">MAWB #</a></th><th class="… kendo.all.js:198:30
compile kendo.all.js:198:30
i http://localhost:52749/Scripts/jquery-1.10.2.min.js:21:6424
<anonymous> http://localhost:52749/Test/Index:259:2644
c http://localhost:52749/Scripts/jquery-1.10.2.min.js:21:26031
fireWith http://localhost:52749/Scripts/jquery-1.10.2.min.js:21:26840
ready http://localhost:52749/Scripts/jquery-1.10.2.min.js:21:3303
q http://localhost:52749/Scripts/jquery-1.10.2.min.js:21:715

 

Example of Shipment_ID=''7e6420b5-6854-4380-b136-02653c4c3e32"

[Alex Hajigeorgieva]

Hello, Chetan,

The error that you have shared with us, is most likely caused by the # literal in the client template of the hierarchy grid if the grid in your project is generated by the ASP.NET MVC wrappers.

https://demos.telerik.com/aspnet-mvc/grid/hierarchy

The # literal should be escaped dependent on the level of the hierarchy. 

https://docs.telerik.com/kendo-ui/framework/templates/overview#hash-literals

Without more context, it is hard to judge what may be going wrong. Please provide more information so I can alter my suggestion accordingly.

Regards,
Alex Hajigeorgieva
Progress Telerik