Multiple Comboboxes in grid

[Dominic]

Hi

I try to reproduce the multiple comboxes demo but my combo are in a radGrid and i cannot find them in the JS functions , somebody have a sample to demonstrate how i can do this ?

Thanks in advance for your help.

[Shinu]

Hi Dominic,

I hope you are using GridDropDownColumns to achieve the desired scenario. If so you try with following approach.

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="AccessDataSource1" GridLines="None"
        OnItemDataBound="RadGrid1_ItemDataBound">
            <HeaderContextMenu EnableTheming="True">
                <CollapseAnimation Duration="200" Type="OutQuint" />
            </HeaderContextMenu>
            <MasterTableView CommandItemDisplay="Top"
             AutoGenerateColumns="False" DataKeyNames="CustomerID" DataSourceID="AccessDataSource1">
                <RowIndicatorColumn>
                    <HeaderStyle Width="20px" />
                </RowIndicatorColumn>
                <ExpandCollapseColumn>
                    <HeaderStyle Width="20px" />
                </ExpandCollapseColumn>
                <Columns>

                <telerik:GridEditCommandColumn>
                </telerik:GridEditCommandColumn>

                    <telerik:GridBoundColumn DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True"
                        SortExpression="CustomerID" UniqueName="CustomerID">
                    </telerik:GridBoundColumn>
                    <telerik:GridDropDownColumn DataSourceID="AccessDataSource1" DataField="CompanyName"
                     HeaderText="c1"
                     ListTextField="CompanyName" ListValueField="CompanyName" DropDownControlType="RadComboBox">
                    </telerik:GridDropDownColumn>
                    <telerik:GridDropDownColumn DataSourceID="AccessDataSource1" DataField="ContactName"
                    HeaderText="c2"
                     ListTextField="ContactName" ListValueField="ContactName" DropDownControlType="RadComboBox">
                    </telerik:GridDropDownColumn>
                </Columns>
            </MasterTableView>
            <FilterMenu EnableTheming="True">
                <CollapseAnimation Duration="200" Type="OutQuint" />
            </FilterMenu>
        </telerik:RadGrid>

CS:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridEditFormItem && e.Item.IsInEditMode)
        {
            GridEditFormItem editForm = (GridEditFormItem)e.Item;
            RadComboBox combo1 = (RadComboBox)editForm["CompanyName"].Controls[0];
            RadComboBox combo2 = (RadComboBox)editForm["ContactName"].Controls[0];
            combo1.OnClientLoad = "combo1Load";
            combo2.OnClientLoad = "combo2Load";
            combo1.OnClientSelectedIndexChanged = "combo1OnClientSelectedIndexChanged";
        }
        else if (e.Item is GridEditFormInsertItem && e.Item.OwnerTableView.IsItemInserted)
        {
            GridEditFormInsertItem editForm = (GridEditFormInsertItem)e.Item;
            RadComboBox combo1 = (RadComboBox)editForm["CompanyName"].Controls[0];
            RadComboBox combo2 = (RadComboBox)editForm["ContactName"].Controls[0];
            combo1.OnClientLoad = "combo1Load";
            combo2.OnClientLoad = "combo2Load";
            combo1.OnClientSelectedIndexChanged = "combo1OnClientSelectedIndexChanged";
        }
    }

JS:

<script type="text/javascript">

            var combo1, combo2;
            function combo1Load(sender, eventArgs)
            {
            combo1=sender;
            }
           function combo2Load(sender, eventArgs)
            {
            combo2=sender;
            }

            function combo1OnClientSelectedIndexChanged(sender, args)
            {
            combo2.get_items().getItem(args.get_item().get_index()).select();
            }


        </script>

Thanks
Shinu.