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

Update of Column Grid while Paging is enabled

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
IDIsActiveCommand
1True[Set Status Button]
2False[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 ?


5 Replies

FM Fabio Melendez October 22, 2014 01:35 PM UTC

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


AS Alan Sangeeth S Syncfusion Team October 23, 2014 12:29 PM UTC

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



FM Fabio Melendez October 23, 2014 02:26 PM UTC

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?



FM Fabio Melendez October 23, 2014 07:27 PM UTC

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.


AS Alan Sangeeth S Syncfusion Team October 24, 2014 05:21 AM UTC

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


Loader.
Up arrow icon