What is the best way to set a value for a specific column using JavaScript in a RadGrid?

One of my requirements involves having a Radgrid where all rows are always in edit mode. Specifically, I am looking to implement a functionality in one of the columns where after an item is edited, all rows in that column should take on the same value. Here is the structure of the column:

  <telerik:GridTemplateColumn HeaderText="Opis" HeaderStyle-Width="125px" ItemStyle-Width="120px"
                            UniqueName="poz_nazwa">
                            <ItemTemplate>
                                <%#DataBinder.Eval(Container.DataItem, "poz_nazwa")%>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <telerik:RadTextBox runat="server" ID="Rtopis" DataTextField="poz_nazwa" DataValueField="poz_nazwa"
                                    Width="120px" Text='<%#Bind("poz_nazwa") %>' onfocus="javascript:podp(this.id);"
                                    AutoCompleteType="Disabled" onpropertychange="Opisblur()">
                                </telerik:RadTextBox>
                            </EditItemTemplate>
                        </telerik:GridTemplateColumn>

My current approach is not working and here is what I have attempted:

        function OpisBlur() {
            if (event.propertyName == 'value') {
                var grid = $find("<%=RadGPozycje.ClientID %>");
                var masterTableView = grid.get_masterTableView();
                var iloop;
                if (masterTableView != null) {
                    var gridItems = masterTableView.get_dataItems();
                    var i;
                    for (i = 0; i < gridItems.length; ++i) {
                        var gridItem = gridItems[1];
                        var cell = gridItem.get_cell("poz_nazwa");
                        var controlsArray = cell.getElementsByTagName('input');
                        if (controlsArray.length > 0) {
                            var rdo = controlsArray[0];
                            rdo.value = "valueofchangeditem";                         
                        }
                    }
                }
            } 
        }

My approach has two main issues:

  1. I am only changing the selected item, not all items. Additionally, when attempting to use masterTableView.get_editItems(), IE reports that there is no such method.
  2. This code triggers a stack overflow since the function occurs on property change and within it, I am changing the property itself.

Can you provide a solution or guidance on how to implement the desired functionality?

Answer №1

Is it possible to add a label or another element with a specific className to the ItemTemplate column? This way, could we easily update all elements on the page that share the same class with a new value?

$('.poz_nazwaClass').val("valueofchangeditem");    

If jQuery is not being utilized, one alternative could be adding a tag and using element.getElementsByTagName('poz_nazwaTag') to iterate through the elements.

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

Expanding and shrinking the index within a specific circular boundary in JavaScript

I'm dealing with a circular range of ASCII values from a to z, where each letter corresponds to a number between 97 and 122. I have no issue with increasing the value within this range, but I am struggling when it comes to decreasing it. For example ...

Performing a Javascript query to update the value in a spreadsheet with Selenium integration

How can I set a cell value using JavaScript in Selenium when the element has been created using spreadjs and I am unable to access the element's value? string query = "GcSpread.Sheets.findControl(document.getElementById(\"" + _sheetName + "&bsol ...

Generating and Importing Graphics through Iterations in Javascript

I apologize for my lack of experience in this matter. Can someone please guide me on how to utilize a loop to load images? For instance, could you show me how to rewrite the code below using a loop to automate the process? function loadImages() { let ...

What could be causing my if-else statement to malfunction in JavaScript?

I'm working on a form where certain conditions need to be met based on the selected order type. For instance, if a market order is chosen, the stop price and limit price should default to zero and become read-only fields. Similarly, selecting a limit ...

Tips on showcasing a collection of orders stored in a database using Vue.js

After successfully updating my orders post payment, I am wondering how I can showcase them on my Vue front end. Below is the HTML template displaying the list of orders made: <template> <div> <div v-for="order in orders&quo ...

Efficiently adding values to a variable with the forEach method

I'm encountering an issue with displaying data from a JSON file similar to the one below: Currently, "checked" is set to null. I aim to update it to true within the steps array using a forEach loop. JSON data snippet: { "id": 4, "process": { ...

Execute a single test from a particular test suite using Jest

Within my file named "test-file-1", I have several describes (test suites) with distinct names, each containing tests that may share similar names across different test suites. In order to run a single test suite or test, I enter the following command: n ...

Using regular expressions in Javascript to extract decimal numbers from a string for mathematical operations

I'm currently working on a Vue method where I extract information from a WordPress database. The data retrieved sometimes contains unnecessary text that I want to filter out. Using the prodInfo variable, the input data looks something like this: 2,5k ...

Utilize Symfony filtering alongside AJAX functionality with the added feature of the KnpPaginatorBundle

When filtering data using ajax, I encounter an issue with pagination in Symfony and KnpPaginatorBundle. The pagination works fine when displaying the data without any filters. However, after applying a filter using ajax, clicking on page 2 of the paginati ...

Unique loading of images without duplication

Hello everyone! I came across a script that loads images sequentially into my div element. It's working well, but I'd like to make it load random images without repeating any until all have been shown. As a newbie in this area, I've made so ...

approach for extracting values from nested objects using specified key

There are objects in my possession that contain various nested objects: let obj = { nestedObject: { key: value } } or let obj2 = { nestedObject2: { nestedObject3: { key2: value2 } } } and so on. Retrieving the values from these objects i ...

Present a pop-up notification box with a countdown of 30 seconds prior to the expiration of a session timeout in JSF

Our task is to create a timeout window that appears 30 seconds before the session expires. If the user remains inactive, they will be automatically redirected to the home page. We already have the maximum allowed duration of inactivity defined. I would l ...

ES6 Set enables the storage of multiple occurrences of arrays and objects within

Review the script below. I'm currently testing it on Chrome. /*create a new set*/ var items = new Set() /*add an array by declaring its type as an array*/ var arr = [1,2,3,4]; items.add(arr); /*display items*/ console.log(items); // Set {[1, 2, 3, ...

Trouble with top attribute functionality within animate function

Why does the top attribute in the animate function of JQuery not seem to work, while the opacity attribute functions correctly in the code snippet below? $(function() { $(window).on('scroll', function() { ...

Scripting issues detected in Safari and Microsoft Edge browsers

I recently finished developing an AngularJs Application that works flawlessly on Google Chrome and Mozilla Firefox. However, upon testing it on Safari and IE-11, I encountered errors in the console. One particular piece of code that causes issues is used ...

Unexpected values being returned by Javascript/jQuery variables

Struggling with understanding scope in JavaScript, like many others before me. It can be quite challenging to navigate through the code at times. I've reviewed previous discussions on this topic, but I'm still having trouble applying it to my spe ...

How come the mouseover effect on the div remains even after the mouse has been removed?

How can I keep the original CSS class when the mouse moves away? function highlight( x, y) { var sel=document.getElementById(y); sel.style.borderBottom= "2px solid "+x; sel.style.opacity="1"; sel.style.transition="all eas ...

How can we dynamically navigate to the next line within the Material UI DataGrid component when space is limited?

Currently, I am working with the datagrid component from material ui. I have retrieved some data from a database and am attempting to pass it to the datagrid component. However, I have noticed that certain fields contain long strings which do not fully app ...

What is the best way to use jQuery to toggle the visibility of a <panel>?

My objective is to display a panel with two labels on a button click, but I'm facing issues achieving this functionality. When I click on the button (id=Button1), the panel (id=anspanel) should appear, but it remains hidden even after clicking the but ...

Are you facing issues with jQuery Ajax failing to respond?

On my webpage, I have a function that is supposed to call an ASP.NET webservice. It seems like the function is executing, but nothing happens on the page. Below is the code for the function: $("#BlogSelectList li a").click(function () { var str = ($(t ...