RadGrid for ASP.NET AJAX
Contents
RadControls for ASP.NET AJAX

The Load-on-demand Grid in ComboBox demo shows how to embed a RadGrid control in the template of a RadComboBox. This might be is a swift solution when you want to let users type a string sequence in the combobox input and load data (which matches the given pattern) in a table structure inside the combobox drop-down list. The integration between RadGrid and RadComboBox extends the built-in multi-column combobox feature by feeding the combo with data loaded on demand. When you scroll to navigate through the loaded records, the table headers remain static at the top for a better user experience.

Load-on-demand grid in combo

The ASPX file declares a combo box with an ItemTemplate that includes the RadGrid control. The RadComboBox has an OnClientDropDownOpening handler to generate an AJAX request (using a RadAjaxManager control on the same page) that binds the grid when the drop-down list opens. The RadGrid in the template has an OnRowClick event handler for setting the combo box text when the user clicks on a row:

CopyASPX
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"
  Width="75px" Transparency="15">
  <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'
    style="border: 0; margin-top: 100px;" /></telerik:RadAjaxLoadingPanel>
<telerik:RadComboBox ID="RadComboBox1" Width="320px" runat="server" MarkFirstMatch="True"
  AllowCustomText="True" OnClientDropDownOpening="HandleOpen" Skin="Telerik" ExpandAnimation-Type="None"
  CollapseAnimation-Type="None">
  <ItemTemplate>
    <telerik:RadGrid ID="RadGrid1" Width="315px" runat="server" Skin="Telerik" OnNeedDataSource="RadGrid1_NeedDataSource">
      <MasterTableView NoMasterRecordsText="" AutoGenerateColumns="False" DataKeyNames="OrderID,ProductName,UnitPrice"
        Width="278px" ClientDataKeyNames="OrderID,ProductName,UnitPrice" TableLayout="Fixed">
        <Columns>
          <telerik:GridBoundColumn HeaderText="OrderID" DataField="OrderID" UniqueName="OrderID">
            <HeaderStyle Width="75px" />
          </telerik:GridBoundColumn>
          <telerik:GridBoundColumn HeaderText="ProductName" DataField="ProductName" UniqueName="ProductName">
            <HeaderStyle Width="138px" />
          </telerik:GridBoundColumn>
          <telerik:GridBoundColumn HeaderText="UnitPrice" DataField="UnitPrice" UniqueName="UnitPrice"
            DataFormatString="{0:$###,###.##}">
            <HeaderStyle Width="65px" />
          </telerik:GridBoundColumn>
        </Columns>
      </MasterTableView>
      <ClientSettings>
        <ClientEvents OnRowClick="RowClicked"></ClientEvents>
        <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="300px" />
      </ClientSettings>
    </telerik:RadGrid>
  </ItemTemplate>
  <Items>
    <telerik:RadComboBoxItem runat="server" Text=" "></telerik:RadComboBoxItem>
  </Items>
</telerik:RadComboBox>

The grid's OnRowClick handler ("RowClicked") gets the values from the clicked row and assigns them as the text of the combo box. The combobox's OnClientDropDownOpening handler ("HandleOpen") gets a reference to the AJAX manager and initiates an AJAX request, passing in the string the user entered:

CopyJavaScript
function RowClicked(sender, args) {
  var cellValues = args.getDataKeyValue("OrderID") + ", " + args.getDataKeyValue("ProductName") + ", $" + args.getDataKeyValue("UnitPrice");
  var combo = $find("<%= RadComboBox1.ClientID %>");
  setTimeout(function () { combo.set_text(cellValues); }, 50);
}
function HandleOpen(sender, args) {
  var comboText = sender.get_text();
  if (comboText.length > 2) {
    setTimeout(function () { $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("LoadFilteredData," + comboText); }, 0);
  }
  else {
    args.set_cancel(true);
  }
}

In the code-behind, the Page_Load event handler adds an AJAX setting for the grid to the AJAX manager (now that the templated control is created). The AjaxRequest handler for the RadAjaxManager forces the grid to rebind. The NeedDataSource event handler of the grid binds it based on the string in the combobox: