Search code examples
javascriptasp.nettelerikradcomboboxradtextbox

Enable either texbox or dropdown value to be inserted javascript

How can i only allow the client to insert either of these two fields.Either Textbox (selected Column) or Value from dropdown (selected Column) but only one field is allowed in a gridview.

<asp:GridView ID="gvMedia" DataSourceID ="dsMedia" SkinID="GridviewSkin" runat="server" AutoGenerateColumns="false" AllowSorting="true"  GridLines="Vertical" Width="700px" CellPadding="2" PageSize="50">
  <Columns>
   <asp:TemplateField HeaderText="Selected">
      <ItemTemplate>
         <telerik:RadTextBox runat="server" ID="txtSelected" Width="80px" MaxLength="10" onkeypress="return NumberOnly(this)">
          </telerik:RadTextBox>
         <asp:Label ID="lblOr" runat="server" Text='or'></asp:Label>
         <telerik:RadComboBox ID="cmbSelected" CssClass="ComboBox" runat="server" Width ="50px" Height="100px">
           <Items>
             <telerik:RadComboBoxItem runat="server" Text="" Value="" />
             <telerik:RadComboBoxItem runat="server" Text="100%" Value="100%" />
             <telerik:RadComboBoxItem runat="server" Text="50%" Value="50%" />
           </Items>
         </telerik:RadComboBox>
       </ItemTemplate>
  </asp:TemplateField>
 </Columns>
<EditRowStyle BackColor="#99FF66" />
<SelectedRowStyle BackColor="#FFFF99" />
</asp:GridView>

enter image description here

Preferred Method : using clientside events.

Solution

  • Please try with the below code snippet.

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function ValueChanged(obj, eve) {
            var id = obj.get_id();
            var tarid = obj.get_id().replace("txtSelected", "cmbSelected");
            var combo = $telerik.findComboBox(tarid);
            if (obj.get_value() != "")
                combo.clearSelection();
        }
        function ClientSelectedIndexChanged(obj, eve) {
            var id = obj.get_id();
            var tarid = obj.get_id().replace("cmbSelected", "txtSelected");
            var txt = $telerik.findTextBox(tarid);
            txt.set_value("");
        }
    </script>
</telerik:RadCodeBlock>
<asp:GridView ID="gvMedia"
    runat="server" AutoGenerateColumns="false" AllowSorting="true" GridLines="Vertical" Width="700px" CellPadding="2" PageSize="50">
    <Columns>
        <asp:TemplateField HeaderText="Selected">
            <ItemTemplate>
                <telerik:RadTextBox runat="server" ID="txtSelected" Width="80px" MaxLength="10">
                    <ClientEvents OnValueChanged="ValueChanged" />
                </telerik:RadTextBox>
                <asp:Label ID="lblOr" runat="server" Text='or'></asp:Label>
                <telerik:RadComboBox ID="cmbSelected" CssClass="ComboBox" runat="server" Width="50px" Height="100px"
                    OnClientSelectedIndexChanged="ClientSelectedIndexChanged">
                    <Items>
                        <telerik:RadComboBoxItem runat="server" Text="" Value="" />
                        <telerik:RadComboBoxItem runat="server" Text="100%" Value="100%" />
                        <telerik:RadComboBoxItem runat="server" Text="50%" Value="50%" />
                    </Items>
                </telerik:RadComboBox>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <EditRowStyle BackColor="#99FF66" />
    <SelectedRowStyle BackColor="#FFFF99" />
</asp:GridView>

    Let me know if any concern.