Failed of init a TreeGrid in bootstrap modal-dialog which is dynamic loaded

Question

What i wanted is click a button and open a bootstrap modal-dialog which is dynamic load from server and append to <body> and show.

in currentPage, a button onclick even code is

var dialog = $('<div class="modal fade" id="editDialog" tabindex="-1" role="dialog" aria-labelledby="editDialogTitleLabel"></div>');

dialog.load("/Role/Authorize", rowData, function (response, status, xhr) { });

$("body").append(dialog);

dialog.modal({

backdrop: 'static'

});

the url "/Role/Authorize" return a PartialView with a viewmodel, the PartialView code is

@model WDPMis.Web.ViewModels.AuthorizeRoleViewModel

<h4 class="modal-title" id="editDialogTitleLabel">Role Authorize</h4>

</div>

<h5>Function List</h5>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

</div>

and in RoleAuthorize.js has init the treeview.

$(document).ready(function () {

initModuleTreeGrid();

});

function initModuleTreeGrid() {

var dm = ej.DataManager({

url: "/Module/DataSource",

adaptor: "UrlAdaptor"

});

$('#ModuleTreeGridContainer').ejTreeGrid({

dataSource: dm,

isResponsive: true,

selectedRowIndex: 0,

sizeSettings: {

height: '200px',

width: '400px'

},

allowSorting: true,

sortSettings: { sortedColumns: [{ field: "CodeOrdinal" }] },

treeColumnIndex: 0,

idMapping: "ID",

parentIdMapping: "ParentID",

selectionSettings: {

selectionType: ej.TreeGrid.SelectionType.Checkbox,

selectionMode: ej.TreeGrid.SelectionMode.Row,

enableSelectAll: false,

enableHierarchySelection: true

},

columns: [

{ field: "Name", headerText: "Name", headerTextAlign: "center", type: "string" },

{ field: "Code", headerText: "Code", headerTextAlign: "center", type: "string" },

{ field: "CodeOrdinal", headerText: "CodeOrdinal", headerTextAlign: "center", type: "string" },

{ field: "Description", headerText: "Description", headerTextAlign: "center", type: "string" },

{ field: "ID", isPrimaryKey: true, visible: false },

{ field: "ParentID", visible: false }

],

});

var treeObject = $("#ModuleTreeGridContainer").ejTreeGrid("instance");

treeObject.updateCheckboxColumn('Name');

}

the problem is treegrid can only be shown at first time of the button-click.

rare can be shown at second time but the positon is error,

from browser tools i can see the RoleAuthorize.js not called from the second time.

i changed the code to mvc method like @(Html.EJ().TreeGrid("ModuleTreeGridContainer") ........ but it doesn't work too.

what's wrong with the above code?

thanks a lot!

Benny · Answer

in the button click, i code for 'hidden.bs.modal' event of bootstrap modal-dialog and remove the dialog element which has appended to body

var dialog = $('<div class="modal fade" id="editDialog" tabindex="-1" role="dialog" aria-labelledby="editDialogTitleLabel"></div>');

dialog.load("/Role/Authorize", rowData, function (response, status, xhr) { });

$("body").append(dialog);

dialog.modal({

backdrop: 'static'

}).on('shown.bs.modal', function (event) {

// $('#Name').focus();

}).on('hidden.bs.modal', function (event) {

dialog.remove();

});

Jayakumar Duraisamy · Answer

Hi Benny, 
We have analyzed the reported issue and it is due to TreeGrid definition was not re-initialized after remove and dynamically append the dialog element to the <body>. 
In hidden.bs.model event, you have removed the dialog element from the body, during this action TreeGrid element rendered inside the dialog also removed from the DOM.  
When we remove the TreeGrid element from the DOM, TreeGrid instance was destroyed. So we need to re-initialize the TreeGrid when we add dialog element into the body dynamically.  
You can re-initialize the TreeGrid by calling the method “initModuleTreeGrid” after rendering the dialog element. 
If the given solution doesn’t resolve the reported issue, please share your sample and it will helpful for us to provide an exact solution for this issue. 
Please let us know if you require any other assistance on this. 
Regards, 
Jayakumar D