LoadOnDemand loading when the data source is located on the client

Thread is closed for posting
1 posts, 0 answers
  1. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 17 Sep 2012 Link to this post

    Requirements

    RadControls version  Telerik.Web.UI.2012.3.912 
    .NET version 4.0 
    Visual Studio version 2010 
    programming language C# 
    browser support

    all browsers supported by RadControls


    PROJECT DESCRIPTION
    Using the usual load on demand has its downsides, especially when there are multiple combos bound to the very same data source. Hitting the datasource multiple times with each request is not exactly what one would expect. On the other hand, the server-side binding without load on demand has the performance downside, where multiple combos try to create their child items at page load and this leads to a very slow start up time.

    Having this in mind, one possible solution is to ship the required data on the client at page load and only bind the combos  as one opens the drop down. What I mean is that upon opening the drop down, one can bind the combo on the client using batch insert. This is kind of LoadOnDemand loading where the data source is located on the client, so the burden of hitting the database is no longer.
    Here is the code used in the sample:
    protected void Page_Init(object sender, EventArgs e)
       {
           var list = new List<RadComboBoxItemData>(100);
     
           for (var i = 0; i < 100; i++)
           {
               list.Add(new RadComboBoxItemData()
               {
                   Text = i.ToString(),
                   Value = "val"+ i.ToString()
               });
           }
     
           var serializer = new JavaScriptSerializer();
           DataSource.Value = serializer.Serialize(list);
       }
    <script type="text/javascript">
           var $ = $telerik.$,
               comboDataSource = null;
     
           function opening(sender, args) {
           
               if (comboDataSource === null)
                   comboDataSource = $.parseJSON($("#DataSource").val()); 
                
               sender._addNewItems("", comboDataSource);
           }
        
       </script>
    <asp:HiddenField runat="server" ID="DataSource" />
       <telerik:RadComboBox runat="server" ID="RadComboBox1" OnClientDropDownOpening="opening">
       </telerik:RadComboBox>
     
       <telerik:RadComboBox runat="server" ID="RadComboBox2" OnClientDropDownOpening="opening">
       </telerik:RadComboBox>
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.