Change RadComboBox ClientSide

[Dany V]

Hi, basically what I want to do is to change the selectedValue of a RadComboBox, depending the value set on a RadNumericTextBox, this controls are inside a grid when a row is edited.

I have two ClientDataKeyNames (MIN and MAX), so what I want to is to have an event in client side that fires when the value of the radNumericTextBox change, then catch the new value, check if its between MIN and MAX, if its true change the selectedValue of radComboBox to "TRUE" and if not change it to "FALSE"

Hope you can help me!!! =D

Thanks in advance

[Princy]

Hello Daniel,

Since the RadComboBox is in editform, one easy method is to use HiddenFields for storing correspnding DataItem index and RadComboBox ClientID. Then in OnValueChanged client event of RadNumericTextBox access the corresponding DataKeyValue using ItemIndex and set the selected value of RadComboBox accordingly. Sample code is given below for your reference.

ASPX:

<telerik:RadGrid ID="RadGrid2" OnItemCreated="RadGrid1_ItemCreated" . . . . . .
    <MasterTableView runat="server" EditMode="EditForms" ClientDataKeyNames="MIN,MAX" . . . . .
        <Columns>
              . . . . . .. . . .
            <telerik:GridTemplateColumn>
                <EditItemTemplate>
                    <telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server">
                        <ClientEvents OnValueChanged="ValueChanged" />
                    </telerik:RadNumericTextBox>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn>
                <EditItemTemplate>
                    <telerik:RadComboBox ID="RadComboBox1" runat="server">
                        <Items>
                            <telerik:RadComboBoxItem Text="True" Value="0" />
                            <telerik:RadComboBoxItem Text="False" Value="1" />
                        </Items>
                    </telerik:RadComboBox>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

  <asp:HiddenField ID="HiddenField1" runat="server" />
  <asp:HiddenField ID="HiddenField2" runat="server" />

C#:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
   {
      if (e.Item is GridEditFormItem && e.Item.IsInEditMode)
       {
           GridEditFormItem editItem = (GridEditFormItem)e.Item;
           RadComboBox combo = (RadComboBox)editItem.FindControl("RadComboBox1");
           HiddenField1.Value = combo.ClientID;
           HiddenField2.Value = editItem.ItemIndex.ToString();
        }
   }

Java Script:

<script type="text/javascript">
      function ValueChanged(sender, args)
     {
        var rowIndex = document.getElementById('HiddenField2').value;
        var grid = $find("<%=RadGrid1.ClientID %>");
        var MasterTable = grid.get_masterTableView();
        var row = MasterTable.get_dataItems()[rowIndex];
        var min = row.getDataKeyValue("MIN");
        var max = row.getDataKeyValue("MAX");
        var combo = $find(document.getElementById('HiddenField1').value);
        if (min < args.get_newValue() && args.get_newValue() < max)
        {
            combo.findItemByText("True").select();
        }
        else
            combo.findItemByText("False").select();
    }
</script>

Thanks,
princy.

[Dany V]

Hi Princy,

Since I'm using Batch Update and I don't want to create 2 extra fields for each row, I change the way I get DataItem index and  the control, but I guess is not working properly, this is the code I'm using....

<script type="text/javascript">
<!--
    function onClientValueChanged(sender, args) {
        var rowIndex = (sender.get_element().parentNode.parentNode).parentNode.rowIndex;
        var grid = $find("<%=RG_Preguntas.ClientID %>");
        var MasterTable = grid.get_masterTableView();
        var row = MasterTable.get_dataItems()[rowIndex];
        var min = row.getDataKeyValue("MINIMO");
        var max = row.getDataKeyValue("MAXIMO");
        var combo = MasterTable.get_dataItems()[rowIndex].findControl("RCB_SINO");
        var valor = args.get_newValue();
        if (valor > min && valor < max) {
            combo.findItemByText("TRUE").select();
        } else
            combo.findItemByText("FALSE").select();
    }
-->
</script>

I think that the problem is the way I get the combo control....can you help me??

Thanks!