Accessing Old Data Item Values

[Valery]

Hi there,

I am developing an application that uses client-side bound RadGrid's. The grids get refreshed (rebound) each second to a web service method result. Everything works fine with that...

However I was required to color differently cells that change their value. In OnRowDataBound for example can I access the old data item that was bound to the current row in order to compare some of their members?

Alternatively I could probably handle some other event (OnDataBound or OnDataBinding) and store all data items in a javascript collection. But how do I access the collection of retrieved data items?

Best regards,
Valery Dachev.

[Pavlina]

Hello Valery,

To see how to reference the item and the cells properly, please refer to the following article.
Let me know if it gets you started properly.

Best wishes,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Valery]

Здравей, Pavlina,

And thank you for the reply!

Unfortunately this article cannot help me with my problem because I can successfully access the current data items of my grid but I cannot compare them to the data items previously bound to the same row.

So the first question is: How can I access both previous and current data items associated with a certain row and is it possible at all?
The second one: If the above is not possible, how can I iterate through the data items retrieved from the data source?

Best regards,
Valery Dachev.

[Princy]

Hi Valery,

The following help document should help you understand how to retrieve the old values for the edited item using the SavedOldValues property and also the new values using the ExtractValuesFromItem method. Try it out and check if it helps.
Retrieving original values for edited item

Thanks
Princy.

[Valery]

Thank you, Princy,

Sadly no editing and no code-behind. I'm just rebinding the grid client-side so I want to compare the members of a data item before and after rebinding the grid.

Thank you,
Valery.

[Valery]

Here is a simplified markup of what I want to achieve. I've put a "TODO:" comment to what I want to change. Note that this page has no code-behind (as I want everything to happen client-side):

    <telerik:RadScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />
    <telerik:RadGrid ID="Grid1" runat="server">
        <MasterTableView>
            <Columns>
                <telerik:GridBoundColumn DataField="StockCode" HeaderText="Code" HeaderStyle-HorizontalAlign="Left"
                    ItemStyle-HorizontalAlign="Left" />
                <telerik:GridBoundColumn DataField="Date" HeaderText="Date/Time" DataFormatString="{0:d} {0:T}"
                    HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" ItemStyle-CssClass="nobr" />
                <telerik:GridBoundColumn DataField="SharePrice" UniqueName="SharePrice" HeaderText="Share Price"
                    DataFormatString="{0:N3}" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" />
            </Columns>
        </MasterTableView>
        <ClientSettings>
            <DataBinding Location="GridTestService.asmx" SelectMethod="GetTrades" />
            <ClientEvents OnDataBound="OnDataBound" OnRowDataBound="OnRowDataBound" />
        </ClientSettings>
    </telerik:RadGrid>

    <script type="text/javascript">

        var dataItems = new Array();

        function OnDataBound(sender, args) {
            // TODO: iterate through data items and store them in the dataItems array
        }

        function OnRowDataBound(sender, args) {
            var item = args.get_item();
            var dataItem = args.get_dataItem();

            // TODO: retrieve previous data item somehow
            // (whether from the dataItems array or from somewhere else, if available)
            var prevDataItem = dataItem;

            var cell = item.get_cell('SharePrice');
            if (dataItem.SharePrice < prevDataItem.SharePrice)
                cell.className = 'going-down';
            else if (dataItem.SharePrice > prevDataItem.SharePrice)
                cell.className = 'going-up';
            else
                cell.className = '';
        }

        function UpdateGrid() {
            var grid = $find('<%= Grid1.ClientID %>');
            var tableView = grid.get_masterTableView();
            tableView.rebind();
        }

        function OnLoad(sender, args) {
            setInterval(UpdateGrid, 1000);
        }

        Sys.Application.add_load(OnLoad);
    </script>

And here is the web service code:

using System;
using System.Collections;
using System.Collections.Generic;
using System.Web.Script.Services;
using System.Web.Services;
using Telerik.Web.UI;

namespace BMTrader.Web
{
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [ScriptService]
    public class GridTestService : WebService
    {
        private static readonly Dictionary<string, double> Stocks
            = new Dictionary<string, double>
                {
                    {"MSFT", 30.77},
                    {"APPL", 210.97},
                    {"GOOG", 608.26},
                    {"YHOO", 17.17},
                };

        [WebMethod]
        public ArrayList GetTrades(int startRowIndex, int maximumRows,
                                                    List<GridSortExpression> sortExpression,
                                                    List<GridFilterExpression> filterExpression)
        {
            var items = new ArrayList();

            var random = new Random((int)DateTime.Now.Ticks);
            foreach (KeyValuePair<string, double> pair in Stocks)
            {
                var rest = (random.Next() % 3);
                double stockPrice = pair.Value;
                if (rest == 0)
                    stockPrice += random.NextDouble();
                else if (rest == 1)
                    stockPrice -= random.NextDouble();
                var item = new
                            {
                                Date = DateTime.Now.Date,
                                StockCode = pair.Key,
                                SharePrice = stockPrice,
                            };
                items.Add(item);
            }

            return items;
        }

   }
}

[Pavlina]

Hello Valery,

The required functionality could be achieved by handling OnRowDataBound event and save records created initially in an array. After that you can compare these records with the data after rebinding the grid.

More details on RadGrid client-side data-binding might be found below:
http://www.telerik.com/help/aspnet-ajax/client-side-binding.html

Sincerely yours,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Valery]

Hi everyone,

I've managed to achieve what I wanted to. For the sake of everyone else in this forum, I'll describe what I did. Bellow I assume that the "DataKey" member of each data item is a unique key for the collection that is bound.

1. I attached a handler to the client-side onDataBound event which records the last data items that were bound to the grid:

grid.add_dataBound(function(grid, args) {
    var masterTableView = grid.get_masterTableView();
    var dataItems = masterTableView.get_dataItems();

    masterTableView._lastDataItems = new Array();
    for(var i in dataItems) {
        var dataItem = dataItems[i].get_dataItem();
        if(dataItem == null)
            break;
        masterTableView._lastDataItems[dataItem.DataKey] = dataItem;
    }
});

2. I added a javascript function to the grid instance to retrieve the previous data item for a data item (by key):

var masterTableView = grid.get_masterTableView();
masterTableView._lastDataItems = new Array();
masterTableView.getLastDataItem = function(dataItem) {
    return this._lastDataItems[dataItem.DataKey];
}

3. I attached a handler to the client-side onRowDataBound event to change the class name accordingly. In my case it compares the previous and actual values of the "Change" and "ChangePercent" data members to determine:

grid.add_rowDataBound(function(sender, args) {
    var item = args.get_item();
    var masterTableView = sender.get_masterTableView();
    var dataItem = args.get_dataItem();

   item.get_cell("ChangePercent").className = '';
    var lastDataItem = masterTableView.getLastDataItem(dataItem);
    if(lastDataItem != null) {
        if(lastDataItem.ChangePercent != dataItem.ChangePercent)
            item.get_cell("ChangePercent").className += ' changed';
    }
});

[Pavlina]

Hello Valery,

Thank you for sharing your solution in this forum thread - thus you can help other community members who are trying to implement similar solution.

Regards,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.