Update of Column Grid while Paging is enabled

[Fabio Melendez]

I have a grid that has paging enabled

I am utilizing AJAX to make a call tot he server and return me back the model for the row I just updated based on a Button Command

The Success AJAX Method then looks for the element in the Grid Model based on the index used and updates the property and then a Grid Refresh is issued.

This approach works great if the element is on the first page, but if the element is on the second page of the grid the UI is not reflecting the change

So for example if I have a grid that has the following columns

ID	IsActive	Command
1	True	[Set Status Button]
2	False	[Set Status Button]

[1][2][3] ....

Let's say I am on Page [2] of the grid and I click on the [Set Status Button] on Row 2, this fires the Ajax Command and returns me the actual success call, then I go and update the Column names IsActive with True and tell the Grid to refresh. I see the value is updated in the Grid Model but the UI does not reflect the change, it only reflects the change if I am on page [1] of the grid.

How can I solve this problem ?

[Fabio Melendez]

Any Help on this item ????? It is blocking us from been able to use the grid

[Alan Sangeeth S]

Hi Fabio,

 

We regret to let you know that we are unable to reproduce the issue in our end. 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/131094/Sample-1998420515.zip

 

 

In the above sample we have button in Unbound Column, which when clicked sends ajax post to server-side and in ajax success we are updating the “Verified” column value of the current record.

 

 

Could you please reproduce the issue in the above sample and send us back or send us more information about the issue so that we could sort out the cause of the issue and provide you a response as early as possible.

 

 

Please let us know if you have any queries.

 

Regards,
Alan Sangeeth S

[Fabio Melendez]

Thank you for the sample, though it is different from what I am trying to accomplish, I am using MVC.

What I have is a Grid

@(Html.EJ().Grid<MerchantsViewModel>("MerchantsGrid")

.Datasource((IEnumerable<object>)Model.Merchants)                          

.AllowPaging()

.PageSettings(settings => settings.PageSize(6))

.AllowSorting()

.AllowMultiSorting()

.AllowFiltering()

.FilterSettings(filter => { filter.ShowFilterBarStatus().StatusBarWidth(500).FilterBarMode(FilterBarMode.Immediate); })

.Columns(col =>

{

col.Field("Name").HeaderText("Name").Width(200).Add();

col.Field("MerchantSettingsRecord.MerchantAddress").HeaderText("Email").Width(200).Add();

col.Field("DeviceCount").HeaderText("Devices").Width(80).TextAlign(TextAlign.Center).Template(true).TemplateID("#colDevicesTemplate").Add();

col.Field("TransactionCount").HeaderText("Transactions").Width(100).TextAlign(TextAlign.Center).Template(true).TemplateID("#colTransactionsTemplate").Add();

col.Field("IsActive").HeaderText("Active").Width(80).TextAlign(TextAlign.Center).Add();

col.Field("DateCreated").HeaderText("Date Created").Width(120).Format("{0:MM/dd/yyyy}").Add();

col.HeaderText("Action").Width(150).TextAlign(TextAlign.Center).Template(true).TemplateID("#colActionsTemplate").Add();

})

)

The Column Templates are

<script type="text/x-jsrender" id="colDevicesTemplate">

<span class="label-hyperlink" title="Devices" onclick="onclickDevicesImpersonate(this)">{{:DeviceCount}}</span>

</script>

<script type="text/x-jsrender" id="colTransactionsTemplate">

<span class="label-hyperlink" title="Transactions" onclick="onclickTransactionsImpersonate(this)">{{:TransactionCount}}</span>

</script>

<script type="text/x-jsrender" id="colActionsTemplate">

<span class="icon-image" title="Edit Merchant" onclick="onclickEdit(this)"><img src="Content/Images/Edit.png" alt="E" /></span>

<span class="icon-image" title="Impersonate Merchant" onclick="onclickUserImpersonate(this)"><img src="Content/Images/Impersonate.png" alt="I" /></span>

<span class="icon-image" title="Change Merchant Status" onclick="onclickStatus(this)"><img src="Content/Images/Status.png" alt="S" /></span>

</script>

My Status Ajax Call looks like this

function onclickStatus(e) {

var grid = $("#MerchantsGrid").ejGrid("instance");

var index = $(e).closest("tr").index();

var record = grid.getCurrentViewData()[index];

var data = {

index: index,

model: record,

};

$.ajax({

type: "POST",

url: '@Url.Action("SetMerchantStatus", "Merchants")',

contentType: "application/json; charset=utf-8",

data: JSON.stringify(data),

dataType: "json",

success: successFunc,

error: errorFunc

});

}

And my Success Function looks like this

function successFunc(data, status) {

var model = $("#MerchantsGrid").ejGrid("model");

var record = model.dataSource[data.data.index];

record.IsActive = data.data.model.IsActive;                      

refreshMerchantGrid();

}

my Refresh Grid function looks like this

function refreshMerchantGrid() {

var model = $("#MerchantsGrid").ejGrid("model");

$("#MerchantsGrid").ejGrid("refreshContent");

}

So as you can see my scenario is somewhat different, can you look at my sample and tell me what am I missing or what am I doing wrong?

[Fabio Melendez]

Never mind I figured it out, when I was trying to do the update on the AJAX success function I was not referencing the Grid Instance, I was just updating the model which does not fire the refresh of the grid in the UI.

[Alan Sangeeth S]

Hi Fabio,

 

Thanks for the update.

 

We are happy to hear that your issue has been resolved.

 

Please let us know if you need any further assistance.

 

Regards,
Alan Sangeeth S