Update RadGrid Datasource from Javascript

5 posts, 0 answers
  1. Brad
    Brad avatar
    6 posts
    Member since:
    Aug 2014

    Posted 07 Aug 2014 Link to this post

    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
  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1803 posts

    Posted 12 Aug 2014 Link to this post

    Hello Brad,

    I think that the following online demo and help article could prove helpful for your requirements:
    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Brad
    Brad avatar
    6 posts
    Member since:
    Aug 2014

    Posted 12 Aug 2014 in reply to Konstantin Dikov Link to this post

    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
  5. Brad
    Brad avatar
    6 posts
    Member since:
    Aug 2014

    Posted 13 Aug 2014 Link to this post

    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
  6. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1803 posts

    Posted 15 Aug 2014 Link to this post

    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:
    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017