Dynamically load partial view grid (ajax) + ExcelFilter

[Fernando]

Hello,

I'm developing a MVC5 page which contains 5 Syncfusion grids (partial views) that are loaded dynamically via ajax. 

If I follow the js/api/grid example, the InsertURL/UpdateURL/DeleteURL are lost (code below)

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Refreshes the grid data source
gridObj.dataSource(data); 
</script>

So I chose to manually set the datamanager's json after the ajax call ended:

success: function (result1) {

                      var obj1 = $("#Grid").ejGrid("instance")

                      // Retrieves the datasource and overwrites only the json array (doesn't overwrite the Insert/Update/Delete URL)

                      obj1._dataManager.dataSource.json = result1;

                      obj1.refreshContent();

}

Doing that, the grid works fine but the ExcelFilter stops working. 

Everytime the user clicks the filter button, js console shows the message "ej.web.all.min.js:59911 Uncaught TypeError: Cannot read property 'width' of null"

Inspecting the "ej.web.all.min" js file, apparently the "_dialogContainer" is null as shown below:

y = this._isExcelFilter ? this._excelFilter._dialogContainer.width() : y;

Could you provide an example that dynamically loads syncfusion grids (which are partial views) and doesn't overwrite the Insert/Update/Delete URLs/ExcelFilter?

Thanks in advance.

[Jayaprakash Kamaraj]

Hi Fernando, 

Thank you for contacting Syncfusion support. 

Query  : Everytime the user clicks the filter button, js console shows the message "ej.web.all.min.js:59911 Uncaught TypeError: Cannot read property 'width' of null" 

While binding empty dataSource in grid we need to specify type in column property.   

We have already discussed this problem in our knowledge base. Please refer the below Knowledgebase document.   

Knowledgebase document : https://www.syncfusion.com/kb/3539/error-in-filter-menu-number-date-and-boolean-columns-have-incorrect-operators 

We have created a sample based on your query, please refer to the below link.   

Link: http://www.syncfusion.com/downloads/support/forum/125927/ze/SampleApp1217912082 

Regards, 

Jayaprakash K. 

[Fernando]

Hi,

Specifying the column type didn't work. 

Manually initializing the widget on the grid container didn't work either, but I got it working using the code below:

success: function (result1) {

var obj1 = $("#Grid").ejGrid("instance")

var dataManager1 = ej.DataManager({

insertUrl: '@Url.Action("GridInsert", "ControllerName")',

updateUrl: '@Url.Action("GridUpdate", "ControllerName")',

removeUrl: '@Url.Action("GridDelete", "ControllerName")',

offline: false,

json: result1,

adaptor: new ej.remoteSaveAdaptor()

});

obj1.dataSource(dataManager1);

}

[Mani Sankar Durai]

Hi Fernando, 

 

We are sorry for the inconvenience caused, 

 

When datatSource of the grid is instance of ejDataManager and if you would like to refresh/bind new data to grid, we suggest you to bind the new dataSource as instance of ejDatamanager as in your previous update. So you can use the code to achieve your requirement. 

 

Please let us know if you need further assistance. 

 

Regards, 

Manisankar Durai.