CODEWITHSUNDEEP
javascriptjquerykendo-uikendo-griddatasource
CMartins
CMartins

Reputation: 3293

Batch update Kendo UI Grid Changing values dynamically

I have this Kendo ui grid bind to a table. This grid have Batch edit features active. It means that I can change values directly on the grid cells and save it.

What I would like to accomplish is running a loop thru each line change the displayed values in some columns on the client side and then hit the save button.

This is what I have in my grid:

 @(Html.Kendo().Grid<TokenEncrypt.Models.SellerEntity>()
  .Name("grid")

  .Columns(columns =>
  {
      columns.Bound(c => c.Name);
      columns.Bound(c => c.EntityId);
      columns.Bound(c => c.SellerEntityTypeId);
      columns.Bound(c => c.CompanyId);
      columns.Bound(c => c.IsActive);
      columns.Bound(c => c.AwsAccessKeyId);
      columns.Bound(c => c.SecretAccessKey);
  })
  .HtmlAttributes(new { style = "height: 500px;" })
  .Scrollable()      
  .Editable(editable => editable.Mode(GridEditMode.InCell))
  .ToolBar(toolbar =>
  {
       toolbar.Save();
  })


  .DataSource(dataSource => dataSource
      .Ajax()
      .Read(read => read.Action("SellerEntities_Read", "Grid"))
      .Update(update => update.Action("SellerEntities_Ubdate", "Grid"))
      .Batch(true)
      .Model(model =>

      {
          model.Id(c => c.EntityId);
      }
      )

      )

        )

This what I have in my loop: (I don't have a clue how to remove the value and put the new one in the grid cell.

 function gridChange() {

    var grid = $("#grid").data("kendoGrid");
    grid.dataSource.read();
    var count = grid.dataSource.total();
    $("#countElement").html('Encrypting ' + count + ' Lines');

    // get data from the grid
    var gridData = $("#grid").data().kendoGrid.dataSource.view();
    var grid = $("#grid").data("kendoGrid");
    // loop rows
    for (i = 0; i < count; i++) {

        str = gridData[i].EntityId;
        EntityIdhash = CryptoJS.SHA256(str);

        // remove old value
        // enter new value

        console.log('EntityId: ' + gridData[i].EntityId + '\n'); 
        console.log('EntityId encrypted: ' + EntityIdhash + '\n'); 

    }

};

Upvotes: 0

Views: 2018

Answers (1)

Keith
Keith

Reputation: 4137

Here's what you can do (without seeing any HTML):

$('#save').on('click', function () {
    success();
})

function success() {
    var storedValues = [];
    var gridData = $("#grid").data().kendoGrid.dataSource.data();
    for (var i = 0; i < gridData.length; i++) {
        if (gridData[i].EntityId) {
            storedValues.push({
                cellValue: gridData[i].EntityId,
            });
        }
    }
    var inputData = { yourVariable: JSON.stringify(storedValues) };
    $.ajax({
        cache: false,
        type: 'POST',
        url: "/YourController/Here",
        data: inputData
    }).done(function (data) {
       // success here
            $('#grid').data('kendoGrid').refresh();
        }
    });
};

Upvotes: 1

Related Questions