Data is not binding when we load second time to ejgrid

[TestChart]

Hi,

First time, data is loading in ejgrid. But when we click the button/link second time the data is not binding to ejgrid.

I tried ejgrid("destroy"), then complete grid itself not showing.

Could you please help me on this.

Thanks,
Mahesh

[Madhu Sudhanan P]

Hi Mahesh,

 

Thanks for using Syncfusion products.

 

After rendering the grid, we can use the “dataSource” method to bind data to the grid. Please refer the below code snippet.

 

//Getting the grid object

var gridobj = $("#Grid").data("ejGrid");

 

//generate new data to bind to grid

var newdata = ej.DataManager(window.gridData).executeLocal(ej.Query().skip(skip).take(10));

 

//After rendering, dataSource method can be used to bind data to the grid

gridobj.dataSource(newdata);

 

 

For your convenience, we have created a simple grid sample which will be bind with different data by clicking a button and a link, and please find the sample from the attachment.

 

Please let us know if you have any queries.

 

Regards,

Madhu Sudhanan. P

Attachment: DatabindinAftrRender_e3e4576c.zip

[TestChart]

Thanks for the quick turn around.

Thanks,
Mahesh

[Madhu Sudhanan P]

Hi Mahesh,

Thanks for your appreciation.

Please get back to us if you require further assistance, we will be happy to help you out.

Regards,
Madhu Sudhanan. P

[sinha]

Hi Mahesh,

I'm trying to rebind the grid on button click. How do i bind the grid for the second time using ViewBag.Grid.

[HttpPost]

        public ActionResult DetailedReceipts(string SO_number, string SO_Account_Authorization_Number, string SO_Line_Manufacturer_Model_Number)

        {

            using (var db = new trackEntities())

            {

                IEnumerable<GlobalGetDetailedReceipts_Result> result = db.GlobalGetDetailedReceipts("SO_number", "SO_Account_Authorization_Number",             "SO_Line_Manufacturer_Model_Number").ToList<GlobalGetDetailedReceipts_Result>();

                ViewBag.Grid = detailedReceiptsReport;

                return View();

            }           

        }

[Ragavee U S]

Hi Sinha,

We analyzed your requirement to rebind data to grid on an external button click event.

We have created a sample, which can be downloaded in the below location.

Sample Link: http://www.syncfusion.com/downloads/support/forum/116411/ze/Sample1465755457

In the above sample, we have returned the JSON data from server side to the ajax success event. In the AJAX success event, have re-rendered the grid with the new dataSource. Please refer to the following code example.

public ActionResult Data()

        {

            var data = EmployeeRepository.GetAllRecords().ToList();

            return Json(data, JsonRequestBehavior.AllowGet);
        }

<script type ="text/javascript">

    function onClick(args) {

        $.ajax({

            url: "/Home/Data",

            type: "POST",           

            success: function (data) {

                var gridData = ej.parseJSON(data);

                var gridModel = $("#Grid").ejGrid("model");

                $("#Grid").data("ejGrid") !== undefined && $("#Grid").ejGrid("destroy")// destroy the grid if already rendered

                gridModel.query = new ej.Query();//clear the queries

                gridModel.dataSource = gridData;//binding the data to grid 

                gridModel.columns = columns;//binding new column object to grid

                //re- render the grid with the changed dataSource

                $("#Grid").ejGrid(gridModel);

            }

        });

    }
</script>

Regards,
Ragavee U S.

[sinha]

Hi Ragavee,

Thanks a lot, that works like a charm!!

But after binding the grid for second time, when i try to save the grid in InlineForm editmode, the UpdateURL path in grid was not calling the action method.

But, For the first time grid binding updating record works well.

Can u pls check this?

Thanks & Regards,

Sinha.

[sinha]

Hi Ragavee ,

I solved myissue.. hope it also helps some one else.

Added .ClientSideEvents(eve => { eve.ActionBegin("save"); }) to grid

<script type="text/javascript">

    var flag = true;

    function save(args) {

        if (args.requestType == "save" && flag) {

            flag = true;

            var record = args.data;

            args.cancel = false;

            $.ajax({

                url: "/DetailedReceipts/DetailedReceiptsUpdate",

                type: "POST",

                data: record,

                success: function (data) {

                    alert('Update Success');

                },

                error: function (e) {

                    args.cancel = true;

                }

            });

        }

        if (flag == false)

            flag = true;

    }

</script>

[Alan Sangeeth S]

Hi Sinha,

If you have used DataManager to bind data to Grid at initial time, then while updating the datasource we need to bind the data to Grid as DataManager. Please refer to the following code example.

gridModel.dataSource = ej.DataManager({json:gridData, updateUrl: "/Home/Update2", adaptor: new ej.remoteSaveAdaptor(), offline:false});//binding the data to grid as DataManager

                gridModel.columns = columns;//binding new column object to grid

                //re- render the grid with the changed dataSource

                $("#Grid").ejGrid(gridModel);

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

Sample: http://www.syncfusion.com/downloads/support/forum/116411/ze/Sample1475875626

In the above sample, we have used “remoteSaveAdaptor” and please find the documentation for further details on remoteSaveAdaptor .

http://help.syncfusion.com/aspnetmvc/datamanager/data-adaptors#remotesave-adaptor

If the above sample does not meet your requirement, then please get back to us with the following details so that we could assist you accordingly.

• Adaptor type that you have used in Grid
• Whether you update difference Model to Grid datasource, on button Click event, or different data with the same model of previous Grid datasource.
• Grid View page code snippets.

Regards,
Alan Sangeeth S