I am having difficulty modifying the background color of a RadGrid label based on a specific condition

Currently, I am working on a project using RadGrid in ASP.NET. In the RadGrid, I have included labels to display the status of each person. My goal is to change the background color of the label based on whether the status is "available" (green background) or "Not Available" (red background). I attempted to achieve this using JavaScript but faced difficulties accessing each record within the grid.

You can view the HTML code snippet below:

<telerik:GridTemplateColumn DataField="Editor_status" HeaderText="Editor_status" ReadOnly="true">
    <ItemTemplate>
        <asp:Label ID="Editor_status" runat="server" Text='<%# Eval("Editor_status") %>' BackColor="SkyBlue" Font-Size="14px" CssClass="badge badge-pill hvr-grow badge-success"></asp:Label>
    </ItemTemplate>
</telerik:GridTemplateColumn>

I attempted to access the label "Editor_status" using JavaScript as shown below:

<script>
$(document).ready(function () {
    var a = document.getElementById("Editor_status").innerText;
    
    function myFunction() {
        if (a == "Available") {
            window.alert("Available");
        } else {
            window.alert("Not Available");
        }
    }
}</script>

Unfortunately, this approach didn't work as expected and no alert was displayed. As I am still learning JavaScript, any guidance or solutions in either VB.NET or JavaScript would be greatly appreciated. Thank you for your understanding!

Answer №1

You took the if-else block and enclosed it within a function, but it will remain dormant unless you actively invoke it.

Consider this alternative approach:

 <script>
   $(document).ready(function () {
        var status = document.getElementById("Editor_status").innerText
            if (status == "Available") {
                window.alert("Item is available");
            }
            else {
                window.alert("Item is not available");
            }
</script>

Answer №2

      <script>
           $(document).ready(function () {
               var element = document.getElementById('<%=Editor_status.ClientID%>').innerText; 
               executeFunction(element);
           });
           
           function executeFunction(element) {
                if (element == "Available") {
                    window.alert("Item is available");
                }
                else {
                    window.alert("Item is not available");
                }
            }
        </script>


Add this to trigger the function when the document is fully loaded

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

Steps to eliminate the x icon from the text box that appears automatically in Internet Explorer

I'm currently working with a UI5 text box that includes a built-in option for clearing the text using a 'X' button. However, I've noticed that in Internet Explorer, an additional default cross mark is being added alongside the UI5 cros ...

Unexpected error in JavaScript, Curl, and Node interactions

After sending some JSON to a Node server using CURL, I faced an unexpected issue. Even though the data was received successfully and printed using console.log(...), attempting to run JSON.parse(...) resulted in an error: undefined:1 '{command:print ...

What could be causing Next.js middleware to run repeatedly?

Recently, I set up a brand new Next.js project using npx create-next-app@latest --typescript. Upon completing the installation (version 13.3.4), without making any modifications to existing files, I introduced a new file named middleware.ts within the src ...

What is the best way to confirm that a SQL pool has been successfully created in an Express JS?

Currently, I am in the process of developing a restful API using mysql and expressjs. Below is an example showcasing how I send requests to my database: server.js: const express = require('express'), bodyParser = require('body-parser&ap ...

Adjust the width of the inline textarea using HTML and CSS to match that of the input field

Is it possible to create an inline textarea element using CSS that is selectable but still seamlessly integrated into a sentence without specifying the number of columns? Here's an example with a static number of characters (cols="11"): <p>To r ...

What is the best way to conceal a parent element with jquery?

Let's say we have the following HTML structure: <li class="fooli"> <a class="foo" href="javascript:foo(this);">anchor</a> </li> <li class="fooli"> <a class="foo" href="javascript:foo(this);">anchor</a> ...

I need to confirm the validity of minDate and maxDate in a ReactJS component, ensuring that maxDate is always at least 5 years after min

start from today and select a date end 5 years from the starting date I haven't attempted anything yet. Seeking help for a solution. ...

Issues arise when attempting to utilize a jQuery function to call an asp.net web method

In my ASP.NET project, I have a web method that looks like this: [WebMethod] public string getCurrentDate() { return DateTime.Now.ToString(); } My jQuery ajax call to this web method is as follows: $.ajax({ type: "POST", url: "jqueryAjax/Defau ...

Launch a new window with the window.open() method and execute a function on the newly opened window

I am having trouble generating a barcode in a new window using the barcode generator script. Despite trying to use window.focus(), I can't get the barcode to appear in the new window. Any assistance on how to generate the barcode in a separate window ...

Facing a cross-domain problem that is blocking my ajax request to fetch data from my express endpoint

Looking to retrieve and showcase data from my node/exprss file (app.js) on my index.html. Utilizing an ajax request to localhost:3000/turtles in frontend.js, but running into cross domain obstacles. APP.JS FILE var express = require('express'); ...

How can you include a key event handler that specifically looks out for the Space key being pressed?

When a user presses the Enter key (and button is in focus), the button opens. However, I would like to also open the link button when the user presses the space bar. Buttons should be activated using the Space key, while links should be activated with the ...

Is there a way to retrieve YouTube URLs through programming automation?

I'm currently working on a project to automatically retrieve YouTube URLs and incorporate a download button feature. I found a tutorial suggesting the use of 'ytplayer.config.args.url_encoded_fmt_stream.map.split(",");' After attempting to ...

distinguishing the container component from the presentational component within react native

I just started developing apps using React Native and implemented a basic login function with the view and login logic on the same page named HomeScreen.js. However, after reading some articles online, I learned that it's recommended to separate the l ...

Using Mocha with the --watch flag enabled causes issues with ES6 modules and results in error messages

I've been attempting to configure Mocha to automatically monitor for changes in my files using the --watch flag. I have defined two scripts in package.json as follows: "test": "mocha", "test:watch": "mocha --watch ./test ./game_logic" When I run ...

The error message "Uncaught TypeError: Cannot read property 'createDocumentFragment' of null" occurs when using Jquery in Django

Struggling to identify the issue with this code that was previously functioning but started malfunctioning after reorganizing the JavaScript at the bottom of the page. It keeps throwing this error: https://i.sstatic.net/fozqo.jpg The line triggering the e ...

What is the method for utilizing a parameter in a protractor configuration file to select specific steps?

After reading this particular question, I attempted to implement the following: protractor test/features/protractor-conf.js --params.test_set=dev_test as well as protractor-conf.js: exports.config = { // ... specs: [browser.params.test_set+'/ ...

JavaScript layout: Thymealf

I have a unique thymeleaf template like so: <body> <div id="layout"> <!-- Menu toggle --> <a href="#menu" id="menuLink" class="menu-link"> <!-- Hamburger icon --> <span>& ...

Input Box: Show value in one style, but submit it in a different style

Is there a way to show phone numbers on a website formatted as (123) 456-7890, but have the system interpret it as 1234657890 when retrieving myTextBox.Text? My initial thought is that this might involve overriding the text property and modifying it with ...

Accessing the JSON file from the Google Maps Places API using either JavaScript or PHP

In the midst of developing an application, I am working on fetching a list of places near a specific latitude and longitude. After obtaining an API key, inputting it into the browser URL successfully retrieves a JSON file containing the desired places dat ...

Customize Tab indicator styling in Material-UI

Currently, I am attempting to customize the MUI tab by changing the indicator from a line to a background color. Through my research, I discovered that using TabIndicatorProps and setting a style of display:none eliminates the indicator completely. However ...