Adding Dropdown inside Row Edit Template using Infragistics WebDataGrid

Question

I have a WebDataGrid which includes a WebDropDown in the Row Edit template The webDropdown is linked to one of the columns as shown

<Template>
  <div style="background-color:white;border:1px solid black;">
  COMP_ID:<asp:TextBox ID="control_COMP_ID" runat="server"></asp:TextBox>
  <br/>
  COMP_NAME_EN:<asp:TextBox ID="control_COMP_NAME_EN" runat="server"></asp:TextBox>
  <br/>
  COMP_TYPE:<ig:WebDropDown ID="cmbCompTypes" runat="server" Width="200px"
                                        DataSource="<%#GetCompanyTypes()%>"
                                        TextField="TYPE_NAME_EN"
                                        ValueField ="TYPE_ID"
                                        ></ig:WebDropDown>
  <br/>
  <asp:Button ID="buttonOK" runat="server" OnClientClick="return" Text="OK" UseSubmitBehavior="False" />
  <asp:Button ID="buttonCancel" runat="server" CausesValidation="False" OnClientClick="return" Text="Cancel" UseSubmitBehavior="False" />
  </div>
</Template>

When Opening the row edit template, I need the dropdown selected value to be set based on the current column value. I did not fine any post which discuss this topic. Thank you Imad Z

score 1 · Answer 1 · answered Jan 17 '17 at 15:17

I have created a sample for you in order to show you how to use WebDataGrid RowEditingTemplate and WebDropDown bound to the column value.

It is important to use the RowEditingClientBindings:

<ig:RowEditingClientBinding ColumnKey="Item0" ControlID="Item0" GetValueJavaScript="$find({ClientID}).get_currentValue()"
          SetValueJavaScript="$find({ClientID}).set_currentValue({value}, true)" />

Code snippet:

<ig:WebDataGrid ID="WebDataGrid1" runat="server" Height="350px" Width="649px" AutoGenerateColumns="true"
    ...
    <ig:RowEditingTemplate CancelButton="buttonCancel" OKButton="buttonOK" EditModeActions-MouseClick="Double">
        <ClientBindings>
            <ig:RowEditingClientBinding ColumnKey="Item0" ControlID="Item0" GetValueJavaScript="$find({ClientID}).get_currentValue()"
                SetValueJavaScript="$find({ClientID}).set_currentValue({value}, true)" />
        </ClientBindings>
        <RowEditingClientEvents TemplateClosed="WebDataGrid1_RowEditing_TemplateClosed" />
        <Template>
            <div style="background-color: white; border: 1px solid black;">
                Value:
                <ig:WebDropDown ID="Item0" runat="server"
                    Width="200px">
                    <Items>
                        <ig:DropDownItem Value="Item0" Text="Item0" />
                        <ig:DropDownItem Value="Item1" Text="Item1" />
                        <ig:DropDownItem Value="Item2" Text="Item2" />
                    </Items>
                </ig:WebDropDown>
                <br />
                <asp:Button ID="buttonOK" runat="server" OnClientClick="return" Text="OK" UseSubmitBehavior="False" />
                <asp:Button ID="buttonCancel" runat="server" CausesValidation="False" OnClientClick="return"
                    Text="Cancel" UseSubmitBehavior="False" />
            </div>
        </Template>
    </ig:RowEditingTemplate>
    ...

Have a look at the sample. I hope you will find it useful.

Adding Dropdown inside Row Edit Template using Infragistics WebDataGrid

1 Answers1