ejGrid capacity planning

[Mike Smith]

I am loading 75,000 records (with 15 columns of 20,550,2872 characters) in about a minute through json transfer. I chunk the response writes in 10,000 packets to avoid out of memory errors. If I increase the records I am finding that the browser is closing the connection and I am unable to flush the output buffer. I noticed that the entire result set is loaded to the client.

To fix this do you have examples for doing "smart paging", i.e. when I change the page number I can retrieve just the current page data (about 20 records)? I would need to update the page number, handle sorting and editing events, and get the total record count for the navigation controls. Does such an example exist?

Also, I am interested in implementing "editing" in place with ejGrid. Do you have another example of editing in place that I can learn from ?

Thanks, 

-Mike

[Alan Sangeeth S]

Hi Mike,

 

Thanks for using Products.

 

We are glad to let you know that we have created a sample based on your requirement and the same can be downloaded from below link.

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/UrlAdaptor1316899268.zip

 

In the above sample using DataManager we can bind data from server-side to Grid with On-demand Paging.  And during sorting operation in Grid, sorted column details will be passed to server-side DataManager class by which we can perform sorting on data. Please refer the following code snippets.

("#Grid").ejGrid({

                dataSource:ej.DataManager({ url: "Home/DataSource", updateUrl: "Home/Update", insertUrl: "Home/Insert", removeUrl: "Home/Delete", adaptor: "UrlAdaptor" }),

...

})

 

public ActionResult DataSource(DataManager dm)

        {

           

            var DataSource = OrderRepository.GetAllRecords();

            DataResult result = new DataResult();

//To take only current page records

            result.result = DataSource.Skip(dm.Skip).Take(dm.Take).ToList();

            result.count = DataSource.Count();

            return Json(result, JsonRequestBehavior.AllowGet);

        }

 

Also to bind the edited records in server-side we can use “updateUrl” property DataManager. Please refer the following code snippets.

("#Grid").ejGrid({

                dataSource:ej.DataManager({ url: "Home/DataSource", updateUrl: "Home/Update", insertUrl: "Home/Insert", removeUrl: "Home/Delete", adaptor: "UrlAdaptor" }),

...

})

public ActionResult Update(EditableOrder value)

        {

            OrderRepository.Update(value);

            var data = OrderRepository.GetAllRecords();

            return Json(data, JsonRequestBehavior.AllowGet);

        }

Please refer the following Online sample link for further reference on Editing in Grid.

http://js.syncfusion.com/demos/web/#!/azure/grid/Editing

Please let us know if you need any further assistance.

Regards,
Alan Sangeeth S

 

[Mike Smith]

Hi Mike,

 

Thanks for using Products.

 

We are glad to let you know that we have created a sample based on your requirement and the same can be downloaded from below link.

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/UrlAdaptor1316899268.zip

 

In the above sample using DataManager we can bind data from server-side to Grid with On-demand Paging.  And during sorting operation in Grid, sorted column details will be passed to server-side DataManager class by which we can perform sorting on data. Please refer the following code snippets.

("#Grid").ejGrid({

                dataSource:ej.DataManager({ url: "Home/DataSource", updateUrl: "Home/Update", insertUrl: "Home/Insert", removeUrl: "Home/Delete", adaptor: "UrlAdaptor" }),

...

})

 

public ActionResult DataSource(DataManager dm)

        {

           

            var DataSource = OrderRepository.GetAllRecords();

            DataResult result = new DataResult();

//To take only current page records

            result.result = DataSource.Skip(dm.Skip).Take(dm.Take).ToList();

            result.count = DataSource.Count();

            return Json(result, JsonRequestBehavior.AllowGet);

        }

 

Also to bind the edited records in server-side we can use “updateUrl” property DataManager. Please refer the following code snippets.

("#Grid").ejGrid({

                dataSource:ej.DataManager({ url: "Home/DataSource", updateUrl: "Home/Update", insertUrl: "Home/Insert", removeUrl: "Home/Delete", adaptor: "UrlAdaptor" }),

...

})

public ActionResult Update(EditableOrder value)

        {

            OrderRepository.Update(value);

            var data = OrderRepository.GetAllRecords();

            return Json(data, JsonRequestBehavior.AllowGet);

        }

Please refer the following Online sample link for further reference on Editing in Grid.

http://js.syncfusion.com/demos/web/#!/azure/grid/Editing

Please let us know if you need any further assistance.

Regards,
Alan Sangeeth S

 

Thanks for this. Your sample has helped a lot. 

However I am getting a slightly different behavior on the Edit function. 

When click edit I get the keys shown in the text boxes replacing their original values. 

Otherwise, our ejGrids appear to be the same.

Please see the attached document. Thanks,

Attachment: grid_problem_f519073c.zip

[Mike Smith]

I think I figured this out. 

Keys cannot be starting with a numeric but must have starting with alpha character: Key1, Key2, etc. After I replaced 

[{ field: "1", headerText: "Record Id", width: 100 }

with

[{ field: "Key1", headerText: "Record Id", width: 100 }

I get the original values remaining in the text box to edit.

Also, there must be a primary key defined for the data via the column definition:  

isPrimaryKey: true

Otherwise, the entire first row's values replace the selected row's values during edit.

[Alan Sangeeth S]

Hi Mike,

 

We are sorry for the inconvenience caused.

 

We have confirmed that the issue “In Grid column correct values are not binding during editing if the field name is numeric” is a defect. We have logged defect report for this and the fix for this issue will be included in 2014 Volume 2 Service Pack 3 release which will be available in end of September, 2014.

 

Please let us know if you have any queries.

Regards,
Alan Sangeeth S

[Mike Smith]

Thanks for looking into this.

I do have one follow up. My ejGrid datasource looks like this according to your sample.

 dataSource: ej.DataManager({ url: "Home/GetProductListData", updateUrl: "Home/Update", insertUrl: "Home/Insert", removeUrl: "Home/Delete", adaptor: "UrlAdaptor" }),

However, I find that to support editing and paging as in the sample code, I am unable to post additional parameters to the action. For example, I would like to pass a category parameter to GetProductListData but since the DataManager url is static I cannot. Previously, I was implementing the action call with ajax where I could pass "category=toys" to this action. But this limited me for editing and paging using your sample code.

Can you suggest a way of passing additional parameters to my action method (Home/GetProductListData) using the dataSource DataManager url mechanism above? This would be greatly appreciated. Thanks,

[Alan Sangeeth S]

Hi Mike,

 

Thanks for the update.

 

We would like to let you know that we can pass additional parameters to the server-side by adding the same to the Grid “query” property in “actionBegin” event of Grid. Please refer the following code snippets.

$("#Grid").ejGrid({
...
actionBegin:"beginHandler"

        });

});

 

function beginHandler(args) {

        args.model.query.addParams("category", 3)

}

 

For your convenience we have created a sample and the same can be downloaded from below link.

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/UrlAdaptor_(2)-1433878765.zip

 

 Please let us know if you need any further assistance.

 

Regards,
Alan Sangeeth S

[Mike Smith]

Nice. Thanks a lot.

[Alan Sangeeth S]

Hi Mike,

 

Thanks for the update.

 

We are happy to hear that your requirement has been achieved.

 

Please let us know if you need any further assistance. We will be happy to help you out.

 

Regards,
Alan Sangeeth S

[Mike Smith]

Hi, I have expanded on the example a bit but cannot accomplish what I need to do. I am interested in making the column array more dynamic as in snippet below. However, the grid does not refresh and display the new column header information. I have tried to refresh the grid but always have a problem refreshing its data. The synchronization between my ajax call and the DataManager ajax call is problematic. Is there any way to force a DataManager data refresh from the notice callback below. This does not seem to work either in the callback.

 $("#Grid").ejGrid("instance")._dataManager.dataSource.url = "Home/GetProductListData";

Here is the async request to the controller:

  asyncRequest("POST", "/Home/GetColumnHeaders", notice, "value="some value");

Here is the callback:

var resultcol;

 function notice(e) {

            resultcol = JSON.parse(e.responseText);

           $("#Grid").ejGrid.columns = resultcol;

        }

$(function () {

            $("#Grid").ejGrid({

                dataSource:ej.DataManager({ url:"Home/DataSource/", updateUrl: "Home/Update", insertUrl: "Home/Insert", removeUrl: "Home/Delete", adaptor: "UrlAdaptor" }),

                allowPaging: true,

                allowSorting:true,

                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },

                toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },

                columns: resultcol,

                actionBegin:"beginHandler"

        });

    });

   

[Mike Smith]

One additional finding on the previous post: even if the resultcol variable is set to new values, the grid retains the initial values. It would be helpful to be able to reset the columns based on new values in the resultcol variable.

[Alan Sangeeth S]

Hi Mike,

 

Thanks for the update.

 

We suggest you to use ‘AutoGenerate columns’ feature of Grid to render all columns from Grid dataSource. We can enable ‘AutoGenerate columns’ feature by simply not mentioning the columns property of Grid. And to dynamically add more columns, we suggest you to destroy the grid and then re-render the Grid control. Please refer the following code snippets.

<input type="button" value="AddMoreColumns" onclick="AddColHandler()" />

 

function AddColHandler() {

        var obj = $("#Grid").ejGrid("instance");

        obj.destroy()

        addCol = true,

                $("#Grid").ejGrid({

dataSource: ej.DataManager({ url: "Home/DataSource/?newCol=true", updateUrl: "Home/Update", insertUrl: "Home/Insert", removeUrl: "Home/Delete", adaptor: "UrlAdaptor" }),                    allowPaging: true,

                    allowSorting: true,

                    editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },

                    toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },

                    actionBegin: "beginHandler",

                    actionComplete: "complete"

                })

    }

 

function beginHandler(args) {

        if (addCol == true)

        args.model.query.addParams("newCol", true)

 

    }

 

 

Also in AutoGenerate Columns Grid, since we cannot specify Primary Key column in columns property of Grid, we have added the primaryKey at the ‘actionComplete’ event of Grid. Please refer the following code snippets.

 

function complete(args) {

        if (args.requestType == "refresh") {

            var cols = this.model.columns.filter(function (e) { return (e.field == "OrderID") })[0];

            var index = $.inArray(cols, this.model.columns);

            this.model.columns[index].isPrimaryKey = true;

        }

    }

$("#Grid").ejGrid({

...

actionComplete:"complete"

        });

 

For your convenience we have created a sample and the same can be downloaded from below link.

Sample: http://www.syncfusion.com/downloads/support/directtrac/129706/EJGrid1699577499.zip

 

In the above sample on a button click event we have destroyed grid and re-rendered it with modified value for the url property of Grid DataManager to get additional columns.

 

Please let us know if you need any further assistance.

Regards,
Alan Sangeeth S

[Mike Smith]

Hi, Thanks for this. All is good. 

I do have a couple of quick follow up questions:

1) Where are these documented?

 var obj = $("#Grid").ejGrid("instance");

 obj.destroy();

2) I am using AutoGenerate column as suggested along with setting primary key in actionComplete. However, I do miss setting headerText, width and other column attributes. Is there any work-around for adding this functionality back in?

Thanks,

[Alan Sangeeth S]

Hi Mike,

 

Thanks for the update.

 

Query 1: “Documentation for Grid destroy”

 

Please find the details about “destroy” method of Grid in the following online documentation.

 

http://help.syncfusion.com/UG/JS_CR/ejGrid.html#destroy

 

Query 2: “headerText, width and other column attributes”

 

We suggest you to set headerText, Width and other attributes in “actionComplete” event of Grid using “columns” method of grid. Please refer the following code snippets.

$("#Grid").ejGrid({
...
actionComplete:"complete"

});

 

function complete(args) {

...

$.each(args.model.columns, function (e, val) {

val.headerText = val.field + " Column";

if (val.field == "Freight") {

val.editType = "numericedit";

val.textAlign = "right";

}

})

creat = false;

gridObj.columns(args.model.columns);

}

}

 

For your convenience we have created a sample and the same can be downloaded from below link.

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/EJGrid826932419.zip

 

Please let us know if you have any queries.

 

Regards,
Alan Sangeeth S

[Mike Smith]

Hi, Thanks for this. However, my original intent is to avoid putting column names into the script code and instead put them into a variable, e.g. resultcol. So while your example may allow me to set column attributes like headerText, it does not provide enough flexibility that I can get with a variable or even AutoGenerate method. Previously I was retrieving column-based json with a separate ajax call. However, this becomes very complicated for timing when the grid data and column data can refresh the grid and be rendered. Any ideas?

[Alan Sangeeth S]

Hi Mike,

 

We have modified the sample based on your requirement (“setting grid column properties using ajax post results”) and the same can be downloaded from below link.

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/130131/EJGrid8269324191179122326.zip

 

In the above sample, at “load” event of Grid, we are setting Grid column properties from the ajax post result. Please refer the following code snippets.

$("#Grid").ejGrid({
...

load:"load",

})

 

function load(args) {

        $.ajax({

            url: "Home/ColumnData",

            type: "Post",

            data: { newCol: addCol },

            async:false, //To prevent further execcution before setting column properties

            success: function (e) {

                 args.model.columns= e;

            }

        })

}

 

public ActionResult ColumnData(bool newCol)

        {

            List<object> gridCol = new List<object>();

            ...

            foreach (var temp in columns)

            {

                ...

                object obj = new { field = temp.Name, headerText = temp.Name + "Column", editType = colType, textAlign = align, visible = true };

 

                gridCol.Add(obj);

            }

            return Json(gridCol, JsonRequestBehavior.AllowGet);

 

        }

 

If we misunderstood your requirement please get back to us with more information so that we could provide you a response as early as possible.

 

 Please let us know if you have any queries.

Regards,
Alan Sangeeth S