We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Dynamically load partial view grid (ajax) + ExcelFilter


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)

// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Refreshes the grid data source
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;

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.

3 Replies

JK Jayaprakash Kamaraj Syncfusion Team September 13, 2016 12:10 PM UTC

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.   

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


Jayaprakash K. 

FE Fernando September 16, 2016 11:49 AM UTC


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()


MS Mani Sankar Durai Syncfusion Team September 19, 2016 11:47 AM UTC

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. 
Manisankar Durai. 

Live Chat Icon For mobile
Up arrow icon