Using RadComboBox with AutoComplete as a custom editor in RadGrid

 

Article information
Article relates to	RadComboBox v2.x+, RadGrid v.3.x+ RadControls AJAX (Prometheus) Telerik.Web.UI 2007.3.1425
Created by	Stephen, Telerik
Last modified by	Veskoni, Telerik

HOW-TO
Use RadComboBox with enabled AutoComplete as a custom editor in RadGrid

DESCRIPTION
In some situations the developer may need to load combobox items "on demand" in a dropdown grid column editor. This is useful when presenting large number of items in that dropdown list.




SOLUTION
You can use one of the following approaches:

• The built-in GridDropDownColumn which now supports RadComboBox. The combo is populated using the WebService.
• GridTemplateColumn with RadComboBox added to the EditItemTemplate section. The combo is populated in the ItemsRequested event handler.

Both methods are used in the attached zip project (620_Combo_In_Grid_Autocomplete_WEB.UI).




SOLUTION
If you would like to use RadComboBox with its LoadOnDemand feature as an editor in RadGrid, you will need to set configure an external page (ExternalCallBackPage) for the combobox inside the grid's template column to ensure that its integrated AJAX support will work as expected on user typing:

1. this ExternalCallBackPage should be a normal ASP.NET aspx page
2. it should contain only one instance of RadComboBox
3. the ID of the ExternalCallBackPage's combobox should match the ID of the combobox initiating the request (the one in the grid's template column)
4. once the page is created, you can wire the ItemsRequested event handler of the external combobox and write your custom logic, the same way you would do otherwise.
5. finally, set the ExternalCallBackPage property of the original combobox to the name of the callback (streamer) page. The path is relative to the current path of the parent page (e.g. no path is needed if the streamer page is in the same folder - just the name of the file).

You can configure the template combobox instance as a custom editor for the grid column by:

1. wiring the CreateColumnEditor event of RadGrid
2. instantiating your custom class which extends the default GridDropDownColumnEditor class. For further reference you can review these online resources:
   RadControls as grid custom editors
   how to define custom column editor 

Finally, on update command you can reference the ContainerControl of your custom editor instance (which is the table cell holding the combobox editor) to extract the value selected by the user. Then you can update the grid data source with the new entries and refresh the control to reflect the changes.

Note: Grid's AJAX mode is switched on to optimize performance.

You can find a working project in the attached zip project (620_Combo_In_Grid_Autocomplete.zip)

                   

Files