telerik

KB Article
Home  Support  Knowledge Base  Category  "Load on demand" grid with static headers inside RadComboBox
(ID#747) "Load on demand" grid with static headers inside RadComboBox
Rating: Not rated
Last Modified: 3/19/2008

Article information

Article relates to

RadGrid & RadComboBox "classic"
RadGrid AJAX & RadComboBox AJAX
Telerik.Web.UI 2007.3.1425 

Created by

Stephen, Telerik

Last modified by

Veskoni, Telerik

HOW-TO
Create "Load on demand" grid with static headers inside RadComboBox

DESCRIPTION
This might be is a swift solution when you want to type a string sequence/number in the combobox input and load data (which matches the given pattern) in a table structure inside the combobox dropdown. The integration between RadGrid and RadComboBox in this case extends the built-in multi-column combobox feature by feeding the combo with data loaded on demand. Furthermore, when you scroll to navigate through the loaded records the table headers will remain static at the top for better user experience.

SOLUTION
The key points are depicted below:

  1. Wrap the grid instance in item template of the combobox (do not forget to add one default item with empty text to the combobox - thus the template will be instantiated properly)
  2. Subscribe to the OnClientDropDownOpening event of the combobox in order to populate the grid with the relevant data.
    Note that in this example the AjaxRequest(eventSource, eventTarget) (ajaxRequest(args) for Prometheus) method will be fired only when the user types more than 2 numbers in the combo input. This prevents loading extremely large number of records at once which will cause unpleasant delays. You can modify this logic or remove it if it is not applicable in your case.
  3. Intercept the ajax request in the RaisePostBackEvent (RadAjaxManager1_AjaxRequest for Prometheus) handler of the page (when the source control is the grid control) and filter the data to display order names which match the specified order id. The pattern typed by the user is passed through the second argument (e.Argument for Prometheus) of the RaisePostBackEvent (RadAjaxManager1_AjaxRequest for Prometheus) handler.
  4. Hook the OnRowClick client event of the grid and retrieve the data from the clicked row through the KeyValues (KeyValues Prometheus) collection of the active row. Finally, display the data in the combobox input invoking the SetText(stringValue) (set_text(stringValue) for Prometheus) method of RadComboBox.

Review the code snippets below for further details or download the sample application attached at the bottom of this article:


<script type="text/javascript"> 
var grid; 
 
function onClientDropDownOpening(sender, eventArgs) 
{ 
    var comboText = sender.get_text(); 
                  
     if(comboText.length > 2) 
     { 
         $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("LoadFilteredData," + comboText); 
     } 
    else 
    { 
        eventArgs.set_cancel(true); 
    } 
} 
 
function gridCreated(sender, eventArgs) 
{ 
    grid = sender; 
} 
 
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); 
} 
</script>         
<telerik:RadComboBox ID="RadComboBox1"  
MarkFirstMatch="true" 
AllowCustomText="true" 
Width="300px" 
DropDownWidth="500px" 
OnClientDropDownOpening="onClientDropDownOpening" 
runat="server"> 
    <CollapseAnimation Duration="200" Type="OutQuint" /> 
    <ExpandAnimation Type="OutQuart" /> 
    <ItemTemplate> 
        <telerik:RadGrid ID="RadGrid1"  
        Width="99%"                     
        runat="server" OnNeedDataSource="RadGrid1_NeedDataSource"> 
            <MasterTableView NoMasterRecordsText=""  
            AutoGenerateColumns="false"  
            ClientDataKeyNames="OrderID,ProductName,UnitPrice" 
            Width="99%"> 
                <Columns> 
                    <telerik:GridBoundColumn HeaderText="OrderID" DataField="OrderID" UniqueName="OrderID"></telerik:GridBoundColumn>  
                    <telerik:GridBoundColumn HeaderText="ProductName" DataField="ProductName" UniqueName="ProductName" /> 
                    <telerik:GridBoundColumn HeaderText="UnitPrice" DataField="UnitPrice" UniqueName="UnitPrice" 
                        DataFormatString="{0:$###,###.##}" /> 
                </Columns> 
            </MasterTableView> 
            <ClientSettings> 
                <ClientEvents OnRowClick="rowClicked" OnGridCreated="gridCreated" /> 
                <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="400px" /> 
            </ClientSettings> 
        </telerik:RadGrid> 
    </ItemTemplate> 
    <Items> 
        <telerik:RadComboBoxItem runat="server" /> 
    </Items> 
</telerik:RadComboBox> 
<telerik:RadAjaxManager ID="RadAjaxManager1"  
runat="server"  
OnAjaxRequest="RadAjaxManager1_AjaxRequest"> 
</telerik:RadAjaxManager> 


VB:

Public Shared connectionString As String = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" + System.Web.HttpContext.Current.Server.MapPath("~/App_Data/Nwind.mdb") 
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load 
        Dim grid As RadGrid = TryCast(RadComboBox1.Items(0).FindControl("RadGrid1"), RadGrid) 
        RadAjaxManager1.AjaxSettings.AddAjaxSetting(RadAjaxManager1, grid) 
    End Sub 
 
    Protected Sub RadAjaxManager1_AjaxRequest(ByVal sender As Object, ByVal e As Telerik.Web.UI.AjaxRequestEventArgs) 
        Dim grid As RadGrid = TryCast(RadComboBox1.Items(0).FindControl("RadGrid1"), RadGrid) 
        If e.Argument.IndexOf("LoadFilteredData") <> -1 Then 
            grid.Rebind() 
        End If 
    End Sub 
    Protected Sub RadGrid1_NeedDataSource(ByVal source As Object, ByVal e As GridNeedDataSourceEventArgs) 
        If RadComboBox1.Text <> "" Then 
            CType(source, RadGrid).DataSource = GetDataTable("SELECT [Order Details].OrderID, Products.ProductName, [Order Details].UnitPrice FROM Products, [Order Details] WHERE [Order Details].OrderID LIKE '" + RadComboBox1.Text + "%'&