Version

Using WebDropDown as an editor provider for WebDataGrid

Before You Begin

WebDropDown™ can be used as an editor provider for WebDataGrid™ to show a drop-down list of items for cell values with all other WebDropDown features.

What You Will Accomplish

You will learn how to use WebDropDown as the DropDownProvider in WebDataGrid.

Follow these Steps

  1. From the Visual Studio™ Toolbox, drag and drop a ScriptManager component , a SqlDataSource component and a WebDataGrid control onto the form.

  2. Bind the WebDataGrid to ProductID, ProductName, SupplierID,CategoryID and QuantityPerUnit of Products table of the Northwind database using SqlDataSource1. For more information on doing this, see the Getting Started with WebDataGrid topic.

  3. In the Visual Studio property window, locate the EditorProviders property and click the ellipsis (…) button to launch the Edit Grid Editor Providers Designer.

  4. Click the + button and select DropDownProvider from the drop-down list of editor providers available.

  5. Leave the ID for the editor as DropDownProvider1. You will need this ID later when setting the editor for a column.

WebDataGrid Using WebDropDown as an editor provider for WebDataGrid 01.png
  1. Expand the EditorControl property and set the following properties :

Property Value

DataSourceID

SqlDataSource1

DropDownOrientation

BottomLeft

TextField

ProductName

ValueField

ProductID

  1. Click Apply and OK to close the designer.

  2. Locate the Behaviors property and click the ellipsis (…) button to launch the Edit Grid Behaviors dialog.

  3. Check the Cell Editing behavior in the list on the left to enable editing.

  4. Locate the ColumnSettings property in the property grid on the right and click the ellipsis (…) button to launch the Column Setting dialog.

  5. Configure WebDataGrid to use the DropDownProvider for editing of the ProductName column.

    • Add a column setting by clicking the add item button.

    • Set the ColumnKey property as ProductName.

    • Set the EditorID property to DropDownProvider1 from the drop-down list of available providers.

    • Click Apply and OK to close the Column Setting dialog.

    • Click Apply and OK to close the Edit Grid Behaviors dialog.

WebDataGrid Using WebDropDown as an editor provider for WebDataGrid 02.png
  1. Save and run your application. You will observe that when you enter edit mode in a cell of the ProductName column you will see a drop-down list of items similar to the following image:

WebDataGrid Using WebDropDown as an editor provider for WebDataGrid 03.png