Using Win 7, IE 8 standards mode and IE 9, MVC 4, jQuery 2.0.3, Kendo UI w/ MVC Wrappers 2013.2.918.340
I have a relatively simple grid in a MVC View that renders perfectly OK on page load when containing no data (in all browsers). But when the data source contains at least one row, the initialization script appears to be rendered twice in the DOM,which causes a sort of empty "phantom" grid to appear below the real one. This also throws off all the remaining DOM elements in the page, as if there is an unclosed tag or invalid HTML somewhere. See attached screenshots. Other grids in this app with a similar configuration also work fine.
Here is my grid config:
@(Html.Kendo().Grid(@Model.OrderViewModel.Parcels)
.Name("OrderViewModel_OrderParcels")
.ToolBar(tb => tb.Create().Text("Add"))
.Columns(c => {
c.Bound(model => model.OrderParcelId).Hidden();
c.Bound(model => model.OrderId).Hidden();
c.Bound(model => model.Number);
c.Command(command => {
command.Edit().Text(" ").UpdateText(" ").CancelText(" ");
command.Destroy().Text(" ");
}).Width(300);
})
.Editable(edit => {
edit.Mode(GridEditMode.InLine);
edit.DisplayDeleteConfirmation("Are you sure you want to remove this Parcel Number?");
})
.DataSource(ds => ds.Ajax()
.Model(m => m.Id(x => x.OrderParcelId))
.Create(x => x.Action("AddParcel", "Order"))
.Update(x => x.Action("AddParcel", "Order"))
.Destroy(x => x.Action("RemoveParcel", "Order"))
.ServerOperation(false))
.Scrollable(scroll => scroll.Height(50))
)
</fieldset></div>
Here is the output (copied from IE Dev Tools > View Source > DOM (Page)):
<DIV class="row">
<FIELDSET>
<LEGEND>Parcels</LEGEND>
<DIV id="OrderViewModel_OrderParcels" class="k-widget k-grid k-secondary" data-role="grid" jQuery111002042388671417229="202">
<DIV class="k-toolbar k-grid-toolbar k-grid-top slvzr-first-child" jQuery111002042388671417229="213">
<A class="k-button k-button-icontext k-grid-add" href="http://localhost:54886/Order/Edit/1?OrderViewModel_OrderParcels-mode=insert"><SPAN class="k-icon k-add"></SPAN>Add</A>
</DIV>
<DIV style="PADDING-RIGHT: 17px" class="k-grid-header">
<DIV class="k-grid-header-wrap">
<TABLE role="grid">
<COLGROUP><COL /><COL style="WIDTH: 300px" /></COLGROUP>
<THEAD class="">
<TR class="">
<TH style="DISPLAY: none" class="k-header slvzr-first-child" scope="col" data-title="Order Parcel Id" data-field="OrderParcelId">
<SPAN class="k-link slvzr-not4046k-state-disabled41">Order Parcel Id</SPAN>
</TH>
<TH style="DISPLAY: none" class="k-header" scope="col" data-title="Order Id" data-field="OrderId">
<SPAN class="k-link slvzr-not4046k-state-disabled41">Order Id</SPAN>
</TH>
<TH class="k-header" scope="col" data-title="Parcel Num" data-field="Number">
<SPAN class="k-link slvzr-not4046k-state-disabled41">Parcel Num</SPAN>
</TH>
<TH class="k-header" scope="col">
<SPAN class="k-link slvzr-not4046k-state-disabled41"> </SPAN>
</TH>
</TR>
</THEAD>
</TABLE>
</DIV>
</DIV>
<DIV style="HEIGHT: 50px" class="k-grid-content" jQuery111002042388671417229="209">
<TABLE role="grid" jQuery111002042388671417229="211">
<COLGROUP><COL /><COL style="WIDTH: 300px" /></COLGROUP>
<TBODY>
<TR role="row" data-uid="aecb476a-cbda-4b2f-9465-92464cde82de">
<TD style="DISPLAY: none" role="gridcell">
11
</TD>
<TD style="DISPLAY: none" role="gridcell">
1
</TD>
<TD role="gridcell">
1
</TD>
<TD role="gridcell">
<A class="k-button k-button-icontext k-grid-edit" href="http://localhost:54886/Order/Edit/1#"><SPAN class="k-icon k-edit"></SPAN></A><A class="k-button k-button-icontext k-grid-delete" href="http://localhost:54886/Order/Edit/1#"><SPAN class="k-icon k-delete"></SPAN></A>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</DIV>
<SCRIPT>
jQuery(function(){jQuery("#OrderViewModel_OrderParcels").kendoGrid({"columns":[{"title":"Order Parcel Id","hidden":true,"field":"OrderParcelId","filterable":{},"encoded":true,"editor":"\u003cinput class=\"text-box single-line\" data-val=\"true\" data-val-number=\"The field OrderParcelId must be a number.\" id=\"OrderParcelId\" name=\"OrderParcelId\" type=\"number\" value=\"0\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"OrderParcelId\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"title":"Order Id","hidden":true,"field":"OrderId","filterable":{},"encoded":true,"editor":"\u003cinput class=\"text-box single-line\" data-val=\"true\" data-val-number=\"The field OrderId must be a number.\" id=\"OrderId\" name=\"OrderId\" type=\"number\" value=\"0\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"OrderId\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"title":"Parcel Num","field":"Number","filterable":{},"encoded":true,"editor":"\r\n\u003cinput class=\"k-textbox\" data-val=\"true\" data-val-length=\"The field Parcel Num must be a string with a maximum length of 50.\" data-val-length-max=\"50\" data-val-required=\"The Parcel Num field is required.\" id=\"Number\" maxlength=\"50\" name=\"Number\" type=\"text\" value=\"\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Number\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"width":"300px","command":[{"name":"edit","buttonType":"ImageAndText","text":{"cancel":" ","update":" ","edit":" "}},{"name":"destroy","buttonType":"ImageAndText","text":" "}]}],"editable":{"confirmation":"Are you sure you want to remove this Parcel Number?","mode":"inline","create":true,"update":true,"destroy":true},"toolbar":{"command":[{"name":null,"buttonType":"ImageAndText","text":"Add"}]},"dataSource":{"transport":{"prefix":"","read":{"url":""},"update":{"url":"/Order/AddParcel"},"create":{"url":"/Order/AddParcel"},"destroy":{"url":"/Order/RemoveParcel"}},"type":"aspnetmvc-ajax","schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"OrderParcelId","fields":{"OrderParcelId":{"type":"number"},"OrderId":{"type":"number"},"Number":{"type":"string"}}}},"data":{"Data":[{"OrderParcelId":11,"OrderId":1,"Number":"1"}],"Total":1}}});});
</SCRIPT>
</FIELDSET>
</DIV>
</FORM>
<SCRIPT>
jQuery(function(){jQuery("#OrderViewModel_OrderParcels").kendoGrid({"columns":[{"title":"Order Parcel Id","hidden":true,"field":"OrderParcelId","filterable":{},"encoded":true,"editor":"\u003cinput class=\"text-box single-line\" data-val=\"true\" data-val-number=\"The field OrderParcelId must be a number.\" id=\"OrderParcelId\" name=\"OrderParcelId\" type=\"number\" value=\"0\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"OrderParcelId\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"title":"Order Id","hidden":true,"field":"OrderId","filterable":{},"encoded":true,"editor":"\u003cinput class=\"text-box single-line\" data-val=\"true\" data-val-number=\"The field OrderId must be a number.\" id=\"OrderId\" name=\"OrderId\" type=\"number\" value=\"0\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"OrderId\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"title":"Parcel Num","field":"Number","filterable":{},"encoded":true,"editor":"\r\n\u003cinput class=\"k-textbox\" data-val=\"true\" data-val-length=\"The field Parcel Num must be a string with a maximum length of 50.\" data-val-length-max=\"50\" data-val-required=\"The Parcel Num field is required.\" id=\"Number\" maxlength=\"50\" name=\"Number\" type=\"text\" value=\"\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Number\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"width":"300px","command":[{"name":"edit","buttonType":"ImageAndText","text":{"cancel":" ","update":" ","edit":" "}},{"name":"destroy","buttonType":"ImageAndText","text":" "}]}],"editable":{"confirmation":"Are you sure you want to remove this Parcel Number?","mode":"inline","create":true,"update":true,"destroy":true},"toolbar":{"command":[{"name":null,"buttonType":"ImageAndText","text":"Add"}]},"dataSource":{"transport":{"prefix":"","read":{"url":""},"update":{"url":"/Order/AddParcel"},"create":{"url":"/Order/AddParcel"},"destroy":{"url":"/Order/RemoveParcel"}},"type":"aspnetmvc-ajax","schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"OrderParcelId","fields":{"OrderParcelId":{"type":"number"},"OrderId":{"type":"number"},"Number":{"type":"string"}}}},"data":{"Data":[{"OrderParcelId":11,"OrderId":1,"Number":"1"}],"Total":1}}});});
</SCRIPT>
The italicized </FORM> tag above should not appear until way further down the page. With the empty datasource grid, the <SCRIPT> tag is not rendered twice and the resulting HTML is valid. I was thinking this is some kind of string escaping issue in the script template, but I can't spot anything wrong....
Please help, as this is blocking a critical part of our application for all IE8 and IE9 users
I have a relatively simple grid in a MVC View that renders perfectly OK on page load when containing no data (in all browsers). But when the data source contains at least one row, the initialization script appears to be rendered twice in the DOM,which causes a sort of empty "phantom" grid to appear below the real one. This also throws off all the remaining DOM elements in the page, as if there is an unclosed tag or invalid HTML somewhere. See attached screenshots. Other grids in this app with a similar configuration also work fine.
Here is my grid config:
@(Html.Kendo().Grid(@Model.OrderViewModel.Parcels)
.Name("OrderViewModel_OrderParcels")
.ToolBar(tb => tb.Create().Text("Add"))
.Columns(c => {
c.Bound(model => model.OrderParcelId).Hidden();
c.Bound(model => model.OrderId).Hidden();
c.Bound(model => model.Number);
c.Command(command => {
command.Edit().Text(" ").UpdateText(" ").CancelText(" ");
command.Destroy().Text(" ");
}).Width(300);
})
.Editable(edit => {
edit.Mode(GridEditMode.InLine);
edit.DisplayDeleteConfirmation("Are you sure you want to remove this Parcel Number?");
})
.DataSource(ds => ds.Ajax()
.Model(m => m.Id(x => x.OrderParcelId))
.Create(x => x.Action("AddParcel", "Order"))
.Update(x => x.Action("AddParcel", "Order"))
.Destroy(x => x.Action("RemoveParcel", "Order"))
.ServerOperation(false))
.Scrollable(scroll => scroll.Height(50))
)
</fieldset></div>
Here is the output (copied from IE Dev Tools > View Source > DOM (Page)):
<DIV class="row">
<FIELDSET>
<LEGEND>Parcels</LEGEND>
<DIV id="OrderViewModel_OrderParcels" class="k-widget k-grid k-secondary" data-role="grid" jQuery111002042388671417229="202">
<DIV class="k-toolbar k-grid-toolbar k-grid-top slvzr-first-child" jQuery111002042388671417229="213">
<A class="k-button k-button-icontext k-grid-add" href="http://localhost:54886/Order/Edit/1?OrderViewModel_OrderParcels-mode=insert"><SPAN class="k-icon k-add"></SPAN>Add</A>
</DIV>
<DIV style="PADDING-RIGHT: 17px" class="k-grid-header">
<DIV class="k-grid-header-wrap">
<TABLE role="grid">
<COLGROUP><COL /><COL style="WIDTH: 300px" /></COLGROUP>
<THEAD class="">
<TR class="">
<TH style="DISPLAY: none" class="k-header slvzr-first-child" scope="col" data-title="Order Parcel Id" data-field="OrderParcelId">
<SPAN class="k-link slvzr-not4046k-state-disabled41">Order Parcel Id</SPAN>
</TH>
<TH style="DISPLAY: none" class="k-header" scope="col" data-title="Order Id" data-field="OrderId">
<SPAN class="k-link slvzr-not4046k-state-disabled41">Order Id</SPAN>
</TH>
<TH class="k-header" scope="col" data-title="Parcel Num" data-field="Number">
<SPAN class="k-link slvzr-not4046k-state-disabled41">Parcel Num</SPAN>
</TH>
<TH class="k-header" scope="col">
<SPAN class="k-link slvzr-not4046k-state-disabled41"> </SPAN>
</TH>
</TR>
</THEAD>
</TABLE>
</DIV>
</DIV>
<DIV style="HEIGHT: 50px" class="k-grid-content" jQuery111002042388671417229="209">
<TABLE role="grid" jQuery111002042388671417229="211">
<COLGROUP><COL /><COL style="WIDTH: 300px" /></COLGROUP>
<TBODY>
<TR role="row" data-uid="aecb476a-cbda-4b2f-9465-92464cde82de">
<TD style="DISPLAY: none" role="gridcell">
11
</TD>
<TD style="DISPLAY: none" role="gridcell">
1
</TD>
<TD role="gridcell">
1
</TD>
<TD role="gridcell">
<A class="k-button k-button-icontext k-grid-edit" href="http://localhost:54886/Order/Edit/1#"><SPAN class="k-icon k-edit"></SPAN></A><A class="k-button k-button-icontext k-grid-delete" href="http://localhost:54886/Order/Edit/1#"><SPAN class="k-icon k-delete"></SPAN></A>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</DIV>
<SCRIPT>
jQuery(function(){jQuery("#OrderViewModel_OrderParcels").kendoGrid({"columns":[{"title":"Order Parcel Id","hidden":true,"field":"OrderParcelId","filterable":{},"encoded":true,"editor":"\u003cinput class=\"text-box single-line\" data-val=\"true\" data-val-number=\"The field OrderParcelId must be a number.\" id=\"OrderParcelId\" name=\"OrderParcelId\" type=\"number\" value=\"0\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"OrderParcelId\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"title":"Order Id","hidden":true,"field":"OrderId","filterable":{},"encoded":true,"editor":"\u003cinput class=\"text-box single-line\" data-val=\"true\" data-val-number=\"The field OrderId must be a number.\" id=\"OrderId\" name=\"OrderId\" type=\"number\" value=\"0\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"OrderId\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"title":"Parcel Num","field":"Number","filterable":{},"encoded":true,"editor":"\r\n\u003cinput class=\"k-textbox\" data-val=\"true\" data-val-length=\"The field Parcel Num must be a string with a maximum length of 50.\" data-val-length-max=\"50\" data-val-required=\"The Parcel Num field is required.\" id=\"Number\" maxlength=\"50\" name=\"Number\" type=\"text\" value=\"\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Number\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"width":"300px","command":[{"name":"edit","buttonType":"ImageAndText","text":{"cancel":" ","update":" ","edit":" "}},{"name":"destroy","buttonType":"ImageAndText","text":" "}]}],"editable":{"confirmation":"Are you sure you want to remove this Parcel Number?","mode":"inline","create":true,"update":true,"destroy":true},"toolbar":{"command":[{"name":null,"buttonType":"ImageAndText","text":"Add"}]},"dataSource":{"transport":{"prefix":"","read":{"url":""},"update":{"url":"/Order/AddParcel"},"create":{"url":"/Order/AddParcel"},"destroy":{"url":"/Order/RemoveParcel"}},"type":"aspnetmvc-ajax","schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"OrderParcelId","fields":{"OrderParcelId":{"type":"number"},"OrderId":{"type":"number"},"Number":{"type":"string"}}}},"data":{"Data":[{"OrderParcelId":11,"OrderId":1,"Number":"1"}],"Total":1}}});});
</SCRIPT>
</FIELDSET>
</DIV>
</FORM>
<SCRIPT>
jQuery(function(){jQuery("#OrderViewModel_OrderParcels").kendoGrid({"columns":[{"title":"Order Parcel Id","hidden":true,"field":"OrderParcelId","filterable":{},"encoded":true,"editor":"\u003cinput class=\"text-box single-line\" data-val=\"true\" data-val-number=\"The field OrderParcelId must be a number.\" id=\"OrderParcelId\" name=\"OrderParcelId\" type=\"number\" value=\"0\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"OrderParcelId\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"title":"Order Id","hidden":true,"field":"OrderId","filterable":{},"encoded":true,"editor":"\u003cinput class=\"text-box single-line\" data-val=\"true\" data-val-number=\"The field OrderId must be a number.\" id=\"OrderId\" name=\"OrderId\" type=\"number\" value=\"0\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"OrderId\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"title":"Parcel Num","field":"Number","filterable":{},"encoded":true,"editor":"\r\n\u003cinput class=\"k-textbox\" data-val=\"true\" data-val-length=\"The field Parcel Num must be a string with a maximum length of 50.\" data-val-length-max=\"50\" data-val-required=\"The Parcel Num field is required.\" id=\"Number\" maxlength=\"50\" name=\"Number\" type=\"text\" value=\"\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Number\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"width":"300px","command":[{"name":"edit","buttonType":"ImageAndText","text":{"cancel":" ","update":" ","edit":" "}},{"name":"destroy","buttonType":"ImageAndText","text":" "}]}],"editable":{"confirmation":"Are you sure you want to remove this Parcel Number?","mode":"inline","create":true,"update":true,"destroy":true},"toolbar":{"command":[{"name":null,"buttonType":"ImageAndText","text":"Add"}]},"dataSource":{"transport":{"prefix":"","read":{"url":""},"update":{"url":"/Order/AddParcel"},"create":{"url":"/Order/AddParcel"},"destroy":{"url":"/Order/RemoveParcel"}},"type":"aspnetmvc-ajax","schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"OrderParcelId","fields":{"OrderParcelId":{"type":"number"},"OrderId":{"type":"number"},"Number":{"type":"string"}}}},"data":{"Data":[{"OrderParcelId":11,"OrderId":1,"Number":"1"}],"Total":1}}});});
</SCRIPT>
The italicized </FORM> tag above should not appear until way further down the page. With the empty datasource grid, the <SCRIPT> tag is not rendered twice and the resulting HTML is valid. I was thinking this is some kind of string escaping issue in the script template, but I can't spot anything wrong....
Please help, as this is blocking a critical part of our application for all IE8 and IE9 users
2 Answers, 1 is accepted
0
Accepted
Hi Aaron,
The observed problem is caused by invalid HTML markup on the page, caused by nested <form> tags.
http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/server-editing
Please use initial Ajax binding, or move the Grid outside your <form>.
Regards,
Dimo
Telerik
The observed problem is caused by invalid HTML markup on the page, caused by nested <form> tags.
http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/server-editing
Please use initial Ajax binding, or move the Grid outside your <form>.
Regards,
Dimo
Telerik
DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.
0
Aaron
Top achievements
Rank 1
Rank 1
answered on 07 Mar 2014, 05:39 PM
Thanks for your quick response. I understand the cause now, but I don't think having to move my grid outside the form is a good solution. Luckily, I just saw this post with the identical issue and a preferable solution, which is changing the default destroy command to a simple link in a Template. Inline edit, grid datasource operations, and client side behavior all work the same, the only difference I see is a separate column for Destroy button vs Create/Update. Works for me!