Grid Dialog Template

[Shima]

Hi

I'm trying to set a dialog template for my grid referring to this documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit.html#dialoginline-template . but it doesn't work; When i click Add or Edit toolbar,  just an empty dialog appears instead of partial view. also this error occurs: constants.js:78 Uncaught DOMException: Failed to execute 'querySelector' on 'Element': '[name=]' is not a valid selector.

[Shima]

I noticed something; I have a column template in my grid too, When i delete it, the dialog works fine with no error. What should i do to have the dialog template and the column template both??

this is my code:

<div class="control-section">

<ejs-grid id="Grid" dataSource="ViewBag.dataSource" actionComplete="actionComplete" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true">

<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" template='#dialogtemplate'></e-grid-editSettings>

<e-grid-pagesettings pageCount="5 "></e-grid-pagesettings>

<e-grid-columns>

<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" validationRules="@(new { required=true})" width="150"></e-grid-column>

<e-grid-column field="CustomerID" headerText="Customer Id" validationRules="@(new { required=true})" width="150"></e-grid-column>

<e-grid-column field="EmployeeID" headerText="Employee Id" validationRules="@(new { required=true})" width="150"></e-grid-column>

<e-grid-column headerText="Row Number" template="#columnTemplate" width="150"></e-grid-column>

</e-grid-columns>

</ejs-grid>

</div>

<script id="columnTemplate" type="text/x-template">

<span>${getRowNumber(data)}</span>

</script>

<script>

function getRowNumber(data) {

return data.index;

}

</script>

<script id='dialogtemplate' type="text/x-template">

<div id="dialogTemp">

</div>

</script>

<script>

function actionComplete(args) {

if (args.requestType === 'add') {

var ajax = new ej.base.Ajax({

url: "/Home/AddPartial", //render the partial view

type: "POST",

contentType: "application/json",

data: JSON.stringify({ value: args.rowData })

});

ajax.send().then(function (data) {

appendElement(data, args.form); //Render the edit form with selected record

args.form.elements.namedItem('OrderID').focus();

}).catch(function (xhr) {

console.log(xhr);

});

}

}

function appendElement(elementString, form) {

form.querySelector("#dialogTemp").innerHTML = elementString;

var script = document.createElement('script');

script.type = "text/javascript";

var serverScript = form.querySelector("#dialogTemp").querySelector('script');

script.textContent = serverScript.innerHTML;

document.head.appendChild(script);

serverScript.remove();

}

</script>

[Mohammed Farook J]

Hi Shima, 

 

Thanks for contacting Syncfusion support. 

 

Query: When i click Add or Edit toolbar,  just an empty dialog appears instead of partial view. also this error occurs: constants.js:78 Uncaught DOMException: Failed to execute 'querySelector' on 'Element': '[name=]' is not a valid selector. I have a column template in my grid too, When i delete it, the dialog works fine with no error. 

 

We have validated your query and we found that “dialog template is not working properly when grid contains column template” as a bug and logged report for the same. The fix for the issue will be available on any of our upcoming release. 

 

 

Regards, 

J Mohammed Farook 

 

[Shima]

Thanks

Could you please tell me an approximate date for fixing this bug?

[Mohammed Farook J]

Hi Shima,  

 

This fix  ‘dialog template is not working properly when grid contains column template’ will be included in our next patch release on October 17^th 2018.  Until then we appreciate your patience. 

 

 

Regards, 

J Mohammed Farook