Update Cell Contents with JavaScript

9 posts, 1 answers
  1. Terry
    Terry avatar
    31 posts
    Member since:
    Jun 2016

    Posted 04 Aug Link to this post

    I have an MVC grid that has an Ajax datasource with InCell editing.  After the grid loads we want to be able to update the contents of cells with JavaScript.  So the user will enter a value in a textbox.  Click a button that will execute JavaScript.  The JavaScript will then update the cells in the grid with the value from the textbox.  The idea being that this will save the user from typing the same value into every cell. 

    Below is the JavaScript function I have.  It's looping through the grid and changing the value in cell named "NonOutageCost".  If I don't refresh the grid - then I don't see that the value has changed until I click in the cell.  After I click in the cell - then it shows me the value the JavaScript function set.  But it doesn't show the red dirty flag indicator.  If I refresh the grid - then it shows me the value the JavaScript function set.  But it doesn't show me the red dirty flag indicator.

    Is there a way to have a JavaScript function that is executed by a button click change the cell contents and set the dirty flag indicator?  If so, could you show me an example.  I've spent a lot of time researching this and looking at the documentation.  But I haven't found an example like this.  Most of the examples I saw show doing something like this in a databound event.  But that won't work in this case.  Thanks for your help.

            function myFunction() {
                alert("Function executes when button is clicked");           
                var vgrid = $("#grid").data("kendoGrid");
                //Getting grid items
                var items = vgrid.dataSource.data();
                alert("length = " + items.length);
                alert("Non Outage Cost = " + ($('#NonOutageCostInput').val()));
                for (i = 0; i < items.length; i++) {
                    var item = items[i];
                  
                    if ($('#NonOutageCostInput').val() > 0) { 
                        item.NonOutageCost = $('#NonOutageCostInput').val(); 
                    }
                }
                //Refresh will change the row values - but the dirty flag isn't set - so the Save Changes doesn't update the database
                //alert("before refresh");
                //$("#grid").data("kendoGrid").refresh();
            }

  2. Terry
    Terry avatar
    31 posts
    Member since:
    Jun 2016

    Posted 04 Aug in reply to Terry Link to this post

    I've been able to get the value to show the changes by using the .set command.  But I still can't figure out how to get the dirty flag to set.  I've tried a lot of things - but no luck.  This http://blog.codebeastie.com/kendo-grid-javascript-data-manipulation/ article discusses what I'm trying to do.  But I can't get the dirty flag to set when I do it like he's doing.
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1800 posts

    Posted 08 Aug Link to this post

    Hello Terry,

    When you change values manually in the dataSource, those change are not made in the Grid itself, so the dirty indication for the cell with the changed value will not be added automatically. When you use the set method you will have to manually add the dirty indicator class to the TD element, right after you change the value:
    .k-dirty-cell

    If other questions arise, please do not hesitate to contact us again.


    Regards,
    Konstantin Dikov
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Terry
    Terry avatar
    31 posts
    Member since:
    Jun 2016

    Posted 08 Aug in reply to Konstantin Dikov Link to this post

    Could you show me how to change the TD element?  I'm spinning through the items in the datasource.  I just don't know how to then get to the TD element.  Below is my javascript code.  I've spent many hours trying to figure this out - but no luck.  It would be great if you could show me how to get to the TD element from where I change the values in the datasource.  Thanks.

     

            function myFunction() {
                alert("Function executes when button is clicked");           
                var vgrid = $("#grid").data("kendoGrid");
                var rows = vgrid.tbody.children();
               
                var columns = vgrid.columns;
       
                //Getting grid items
                var items = vgrid.dataSource.data();

                 for (i = 0; i < items.length; i++) {
                     var item = items[i];
                   
                    if ($('#NonOutageCostInput').val() > 0) { 
                        item.set("NonOutageCost", $('#NonOutageCostInput').val());                   
                    }
                   
      //I tried this and it didn't work - can you show me how to get to the TD Element
      var row = $(rows[i]);
                    var cell = row.children().eq(4);
                    cell.addClass("k-dirty-cell");
                    $('<span class="k-dirty"/>').prependTo(cell);
     
                 }
            }

     

  6. Answer
    Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1800 posts

    Posted 10 Aug Link to this post

    Hello Terry,

    Following is a dojo example demonstrating such implementation:
    Hope this helps.


    Regards,
    Konstantin Dikov
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Terry
    Terry avatar
    31 posts
    Member since:
    Jun 2016

    Posted 10 Aug in reply to Konstantin Dikov Link to this post

    Konstantin - thank you.  That is exactly what I was looking for.  It appears you wrote the solution you showed me specifically for me.  I really appreciate that.

    I do have one question that I don't understand.  You have a for loop for the data.  And another for loop for the dirty flag.  How come those loops have to be separate?  I tried to combine the two for loops into one loop.  But when I did that - the dirty flag didn't change.  Unless I clicked on the button a second time.  So I have 2 for loops like your example.  This doesn't make sense to me.  Do you know why it works this way? 

  8. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1800 posts

    Posted 12 Aug Link to this post

    Hello Terry,

    You need to ensure that all changes to the dataSource are applied, before moving to the dirty flags, because on each change the Grid will be rendered again. Another thing to have in mind is that the first loop is going trough all items in the dataSource, but the second loop is traversing the items on the current page only.


    Best Regards,
    Konstantin Dikov
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. Terry
    Terry avatar
    31 posts
    Member since:
    Jun 2016

    Posted 26 Aug in reply to Konstantin Dikov Link to this post

    I have another question about this.  How do I look at individual cell values in the grid?

    My use case is to click a button that executes a JavaScript function.  The JavaScript function spins through the grid and changes data.  Konstantin showed me how to do this and it works.  So now I want to expand the use case.  Instead of just updating all of the rows in the grid.  I want to look a another column in the grid to determine if I should update the grid. 

    Konstantin showed me how to set the datasource value and the grid value.  I have to have 2 loops.  One loop for datasource, and the other loop for HTML to set the dirty flag.  But as I'm spinning through the grid, how do I look at the contents of another cell? 

    The command to update a cell in the datasource is this: items[i].set("SpringCost", $('#SpringCostInput').val());   I'm struggling how to evaluate the contents of another column.  I tried items[I].getElementByID("SelectionField"), but that didn't work.

    The command to update a cell in the HTML is:  $(rows[i].cells[4]).addClass("k-dirty-cell");  How would I look at the contents of a column called "SelectionField" in this loop?

  10. Terry
    Terry avatar
    31 posts
    Member since:
    Jun 2016

    Posted 27 Aug in reply to Terry Link to this post

    Nevermind - got this working now.  Here's what I did.  If anyone sees a better way then please let me know.

    In the datasource - the way to look at an individual field is:   items[i].YourFieldName

    In the HTML grid data - the way to look at an individual field is: $(rows[i].cells[9]).text()

Back to Top
UI for ASP.NET MVC is VS 2017 Ready