JavaScript allows for the insertion of values into either a textbox or dropdown menu

Is there a way to restrict the client from inserting both of these fields: either selecting from a textbox (selected Column) or choosing a value from a dropdown menu (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>

https://i.sstatic.net/1dRfA.png

Preferable Approach: utilizing clientside events.

javascriptasp.nettelerikradcomboboxradtextbox

Answer №1

Take a look at the code snippet provided below.

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function UpdateValue(obj, event) {
            var id = obj.get_id();
            var targetId = obj.get_id().replace("txtSelected", "cmbSelected");
            var comboBox = $telerik.findComboBox(targetId);
            if (obj.get_value() != "")
                comboBox.clearSelection();
        }
        function SelectedIndexChanged(obj, event) {
            var id = obj.get_id();
            var targetId = obj.get_id().replace("cmbSelected", "txtSelected");
            var textBox = $telerik.findTextBox(targetId);
            textBox.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="UpdateValue" />
                </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="SelectedIndexChanged">
                    <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>

If you have any questions or concerns, feel free to ask.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigating within a React application - rendering JSX components based on URL parameters

As I work on developing a web-app with a chapter/lesson structure, I have been exploring ways to handle the organization of lessons without storing HTML or React code in my database. One idea I had was to save each lesson as a .jsx file within a folder str ...

javascriptnode.jsreactjsroutes

Django does not support running JavaScript natively

Wondering how to incorporate JavaScript into Django for creating chained forms? My first step was simply trying to understand how to run JavaScript. I've placed a basic main.js file in the static folder. I included a link to main.js in the header of ...

javascripthtmldjango

What are the potential drawbacks of combining the useState hook with Context API in React.js?

Within my code, I establish a context and a provider in the following manner. Utilizing useState() within the provider enables me to manage state while also implementing functions passed as an object to easily destructure elements needed in child component ...

javascriptreactjsreact-reduxstate-management

Having Trouble with Angular 6 Subject Subscription

I have created an HTTP interceptor in Angular that emits a 'string' when a request starts and ends: @Injectable({ providedIn: 'root' }) export class LoadingIndicatorService implements HttpInterceptor { private loadingIndicatorSour ...

javascriptangulartypescriptobservablereactivex

Infinite scrolling with a dynamic background

Hi there, I am working on my website and trying to create a smooth transition between sections similar to the one demonstrated here:. The challenge I'm facing is that the backgrounds of my sections cannot be fixed; they need to have background-attachm ...

javascriptjqueryhtmlcssparallax

How do I assign a background image to a rectangle using JointJs?

What is the best way to customize the background image of a rectangle in my JointJs project? ...

javascriptjqueryjointjs

A custom script developed to detect the presence of the numeric combination "11" and promptly notify the

I am attempting to develop a unique chrome extension that detects typing errors in orders. For example, if the user accidentally types "11" instead of "1", an alert should be triggered. However, I am encountering an issue where the script is running in an ...

javascriptgoogle-chromekeycode

Use $parse to extract the field names that include the dot character

Suppose I have an object with a field that contains a dot character, and I want to parse it using $parse. For instance, the following code currently logs undefined - var getter = $parse('IhaveDot.here'); var context = {"IhaveDot.here": 'Th ...

javascriptangularjs

What exactly does the term "library" refer to in the context of jQuery, a JavaScript

I'm confused about the concept of a library - when it comes to jQuery, can it be described as a large file containing multiple plugins that are pre-made and ready for use? ...

javascriptjquery

When the value of a Formcontrol is changed using valueAccessor.writeValue(), it remains unchanged

Encountering a similar issue as seen in this stack overflow post, but the solution provided isn't resolving the issue. Perhaps you can offer assistance on that thread. In my scenario, I have created a directive for formatting phone numbers: import { ...

javascriptangularfrontenddirective

Discover a method to conceal an element within a <div> by monitoring mouseover events in a separate <div> container

<div id="one-id"> <div id="some">Information</div> <div id="control"> <div id="value-1"> <img id="image-one-id" /> <img id="image-two-id" /> ...

javascriptprototype

Directing a controller assignment in AngularJS 1.2 via a directive

Transitioning from angularJS 1.0 to 1.2 has presented a challenge for me when it comes to assigning a controller to a directive with a distinct scope, without explicitly defining the controller in my HTML using ng-controller. Let's look at this scena ...

javascriptangularjs

Is it possible to automate a query to an API through PHP and store the results on a local drive?

Recently, I created a webpage that fetches data from an API. However, the response time from the server is quite slow, taking around 10-20 seconds to retrieve the information. To mitigate cross-domain issues, I have set up a PHP proxy for the JavaScript re ...

javascriptphp

Using JQuery: Executing a callback function at the end of each loop following the ajax call

How can I implement a callback for each loop iteration after an AJAX call is completed? Here is my code: Scenario: Suppose I have 3 values - X, Y, Z. Initially, I take the X value, send it to Django views where I use the requests module to retrieve some ...

javascriptjqueryajax

Understanding the concept of hoisting in JavaScript for global variables and functions

I've been curious about hoisting. I understand that if a global function shares the same name as a global variable, the function will overwrite the variable's name. Is this correct? Here is an example code snippet. (function() { console.log ...

javascripthoisting

Is there a jQuery or Javascript alternative to CSS Counter?

Can a counter be implemented that changes the text of a tag directly using jQuery/Javascript? For example, if there were two tags like this: <a>hello</a> <a>bye</a> After executing the jQuery/JS function, the result would be: < ...

javascriptjqueryhtmlcss

Tips for fetching integer numbers in a string in JavaScript in sequential order starting from the left side

Within an input element, users are required to input the price of a product. <input size=10 type="text" id="prd_price" title="prd_price" name="prd_price"> Users have the ability to enter Currency Symbols along with other characters, and we cannot ...

javascripthtmlinputnumberssequence

Unable to locate a React component module that has been published

After successfully publishing a React component to NPM, I encountered an issue when trying to use it in another project - I couldn't find the module! Module not found: Can't resolve 'react-subreddit-posts' in '/Users/kyle.calica/C ...

javascriptreactjsnpmwebpack

Find the value of a JavaScript string variable using an alternative name

My latest JavaScript function is designed to fetch JSON data from either a server or local files on any browser. This piece of code processes JSON from two sources: an XMLHttpRequest response, or a variable imported via script. In the case of the latter, ...

javascriptjsonglobal-variablesevalalias

What steps can be taken to enable automatic playback for this slider?

After downloading the slider from this site, I've been attempting to enable autoplay on this slider but have not had any success. Can anyone provide guidance on how I can achieve this? I've tried modifying the code below without achieving the des ...

javascriptjqueryhtmlcss