How to get the correct column name of a grouped grid.

[Chinonso]

Hello there guys, i need your help. i have a batch edit grid view. And when i click on particular cell, i get the correct column name  of the clicked cell as long as the grid is un-grouped. When i group the columns in the grid, the name are all wrong.

Here is my grid

01.@(Html.Kendo().Grid<P2I_UI.Models.ViewM.Plan>()
02.    .Name("PlanGrid")
03.    .Columns(columns =>
04.    {
05.        columns.Group(ScriptGroup => ScriptureGroup
06.               .Title("<center>Scripture</center>")
07.               .Columns(dd =>
08.               {
09.                   dd.Bound(e => e.MaterialCategory).Title("Type").Width(110).HtmlAttributes(new { @style = "text-align:center; font-weight:normal; font-size:80%" }).ClientTemplate("#=MaterialCategory.ShortName#").Sortable(false);
10.                   dd.Bound(e => e.Product).Title("Item No").Width(130).HtmlAttributes(new { @style = "text-align:center; font-weight normal; font-size:80%" }).ClientTemplate("#=Product.ItemNumber#").Sortable(false);
11.                   dd.Bound(e => e.ProductName).Title("Description").Width(160).HtmlAttributes(new { @style = "text-align:center; font-weight normal; font-size:80%" });
12.               })
13.        );
14.        columns.Bound(c => c.ProjectEOYInventoryAssigned).Title("Proj.<br>EOY Inv<br>Assgnd").Width(71).HeaderHtmlAttributes(new { style = "text-align:right; font-weight: normal; font-size:85%" }).HtmlAttributes(new { @style = "text-align:right; font-weight:normal; font-size:80%" }).Format("{0:,#}");
15.        columns.Group(OuterGrantQuantity => OuterGrantQuantity
16.              .Title("<center>Grant Quantity</center>")
17.              .Columns(ogq =>
18.              {
19.                  ogq.Bound(e => e.Quarter1).Title("Q1").Width(95).HtmlAttributes(new { @style = "text-align:right; font-weight: normal; font-size:80%" }).Format("{0:,#}");
20.                  ogq.Bound(e => e.Quarter2).Title("Q2").Width(95).HtmlAttributes(new { @style = "text-align:right; font-weight: normal; font-size:80%" }).Format("{0:,#}");
21.                  ogq.Bound(e => e.Quarter3).Title("Q3").Width(95).HtmlAttributes(new { @style = "text-align:right; font-weight: normal; font-size:80%" }).Format("{0:,#}");
22.                  ogq.Bound(e => e.Quarter4).Title("Q4").Width(95)..HtmlAttributes(new { @style = "text-align:right; font-weight: normal; font-size:80%" }).Format("{0:,#}");
23.              })// end of the column
24.        );
25.columns.Bound(e => e.TotalGrantedRequest).Title("Tot.<br>Granted<br>Req").Width(72).HtmlAttributes(new { @style = "text-align:right; font-weight:normal; font-size:80%" }).Format("{0:,#}");
26.        columns.Bound(e => e.StandardCostPerUnit).Title("Cost<br>Per Unit").Width(72)..HtmlAttributes(new { @style = "text-align:right; font-weight:normal; font-size:80%" }).Format("{0:c}");
27.        columns.Bound(e => e.EstimatedGrantedCost).Title("Est.<br>Granted<br>Cost").Width(73)..HtmlAttributes(new { @style = "text-align:right; font-weight: normal; font-size:80%" }).Format("{0:c0}");
28.        columns.Bound(e => e.TotalNumberNeeded).Title("Tot.<br>Number<br>Needed").Width(75).HtmlAttributes(new { @style = "text-align:right; font-weight: normal; font-size:80%" }).Format("{0:,#}");
29.        columns.Command(e => e.Destroy().Text(" ").HtmlAttributes(new { @title = "Delete" })).Width(1);
30.    })
31.    .ToolBar(toolbar => { toolbar.Create(); toolbar.Save(); })
32.    .Editable(editable => editable.Mode(GridEditMode.InCell))
33.    .Events(events =>
34.    {
35.        events.Edit("onEditPlanGrid");
36.    })
37.    .Navigatable()
38.    .Sortable()
39.    .DataSource(dataSource => dataSource
40.        .Ajax()
41.        .Batch(true)
42.        .PageSize(30)
43.        .ServerOperation(false)
44.        .Model(model =>
45.        {
46.            model.Id(p => p.PlanScriptureID);
47.            model.Field(p => p.MaterialCategory).DefaultValue(ViewData["defaultMaterialCategory"] as P2I_UI.Models.ViewM.MaterialCategoryVM);
48.            model.Field(p => p.Product).DefaultValue(ViewData["defaultProduct"] as P2I_UI.Models.ViewM.ProductVM);
49.            model.Field(p => p.ProjectEOYInventoryAssigned);
50.            model.Field(p => p.TotalGrantedRequest).Editable(false);
51.            model.Field(p => p.StandardCostPerUnit);
52.            model.Field(p => p.EstimatedGrantedCost).Editable(false);
53.            model.Field(p => p.TotalNumberNeeded).Editable(false);
54.        })
55.        .Create("Script_Create", "Plan")
56.        .Read("Script_Read", "Plan")
57.        .Update("Script_Update", "Plan")
58.        .Destroy("Script_Delete", "Plan")
59.        .Events(e1 => e1.Change("onChange"))
60.    )
61.)
62.
63.    function onEditPlanGrid(e) {
64.
65.        var grid = $("#PlanGrid").data("kendoGrid");
66.        var fieldName = grid.columns[e.container.index()];
67.
68.        console.log("this is fieldName:", fieldName)
69.        //if (fieldName === undefined) {
70.        //    e.sender.closeCell();
71.        //}
72.    }

 

How do i get the correct column name of the cell that was clicked?. Thank

 

[Stefan]

Hello, Chinonso,

This difference occurs because an extra column is rendered for every new group which is interfering with the indexes.

I can suggest accessing the field name from the kendoBindingTarget:

e.container[0].kendoBindingTarget.target.options.fields.field

I made an example demonstrating this:

http://dojo.telerik.com/ExOWA

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[Chinonso]

Thanks!!!!!