Update RadGrid Datasource from Javascript

[Brad]

I am working on a program where I want to search for certain criteria in my database and display results in RadGrid.  I have created a WebMethod function that will query my database to get me my results.  My question is how to build result to pass back to Javascript to rebind the datasource?  I am currently storing info into DataTable, but I was reading that you need to have it in JSON format (is this accurate?).  So, once I have created my data in JSON format, how do I pass that over to a Javascript function as a parameter to then set datasource and rebind?

A side question: my boss is wanting this to occur on keypress.  How logical will this be?  Meaning will this be fast enough to continually fire and update on keypress?  So as person types each character of a person's last name in last name text box it continually fires the event and you see the results in the grid continually change as you type.  Thoughts???

Thank You,

Brad

[Konstantin Dikov]

Hello Brad,

I think that the following online demo and help article could prove helpful for your requirements:

• Grid - Programmatic Binding 
• Client-side Binding

As for your other question, maybe it is not a good idea to update the grid on each key stroke and it would be better if you add some logic for initiating the update with some delay (after the user stops writing).

Hope this helps.


Regards,
Konstantin Dikov
Telerik

 

 

[Brad]

Thanks for the reply.  I got part of it figured out just this morning.  I got it to bind my data returned back in JSON.  However, it displays all results.  Meaning it does not maintain my setting of displaying 10 records at-a-time and having paging.  It just displays all.  I see in the code it is querying for X number of records at location based on current page.  However, is there a way to feed it the whole dataset and still maintain 10 displayed records with paging enabled?

Thanks,

Brad

[Brad]

I see that you can do client-side caching, but that does not seem to do quite what I want.  Right now, it looks like you have to go back to server-side to get SQL result and bring back to client.  I would like to initially get all the data and store it client-side.  Then when user sorts or clicks page button, I want to grab from client-side stored data and display next page size of data.  Is there anyway to do this so not to have to keep going back to the server?

Thanks,

Brad

[Konstantin Dikov]

Hello Brad,

I could suggest that you use either RadClientDataSource for binding the grid, which will allow you to retrieve all items initially or to use the Virtualization functionality and set the settings in such manner, so all records will be initially loaded.

In the following help article and demo you could find how the RadClientDataSource is used for getting the desired result:

• Grid - Binding to Telerik ClientDataSource 
• RadClientDataSource - Getting Started

For the virtualization, please refer to our help article "RadGrid - Virtualization". Additionally, the code snippet below demonstrates a simple implementation of the virtualization:

<telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource" AllowPaging="true">
    <ClientSettings>
        <Scrolling AllowScroll="true" EnableVirtualScrollPaging="true"  UseStaticHeaders="true"/>
        <Virtualization EnableVirtualization="true" InitiallyCachedItemsCount="999999" ItemsPerView="20" RetrievedItemsPerRequest="999999"/>
    </ClientSettings>
</telerik:RadGrid>

And the code-behind:

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    DataTable table = new DataTable();
    table.Columns.Add("ID", typeof(int));
    table.Columns.Add("Value1", typeof(int));
    table.Columns.Add("Value2", typeof(int));
    table.Columns.Add("Value3", typeof(int));
    for (int i = 0; i < 5000; i++)
    {
        table.Rows.Add(i, i, i, i);
    }

    (sender as RadGrid).DataSource = table;
}

Hope that the provided information will help you achieve the desired result.



Regards,
Konstantin Dikov
Telerik