Telerik Forums / UI for ASP.NET MVC
This is a migrated thread and some comments may be shown as answers.

Auto save row when moving to the next row

8 Answers 1131 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tim
Top achievements
Rank 1
Tim asked on 12 Aug 2017, 08:47 AM

Hi,

Is there a way to auto save a row when you've finished editing and moved to another next row either by tabbing to the next row or editing a cell on another row?

I'm using InCell mode.

Regards,
Tim

8 Answers, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 15 Aug 2017, 01:52 PM
Hi Tim,

To automatically sync any changes in the Grid, set the autoSync configuration of the DataSource to true.
For example, check this Dojo: http://dojo.telerik.com/AcEHu

Furthermore, syncing the changes will rebind the Grid thus, the current focus will be lost. To overcome this problem, I would suggest checking the approach outlined in this How To article:
I hope the above helps. Do not hesitate to write back if I can assist you with any further information.


Regards,
Preslav
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Tim
Top achievements
Rank 1
answered on 15 Aug 2017, 01:57 PM

Hi Preslav,

Thanks for the update, however, I know how to configure auto-sync. My question was more specific in that I wanted to auto-sync when leaving the row and not the cell.

Regards,

Tim

 

0
Preslav
Telerik team
answered on 15 Aug 2017, 03:01 PM
Hi again,

Thank you for elaborating on the scenario and please excuse me for misunderstanding the first post.

To achieve the desired functionality, I will suggest:
  1. Removing the autoSync configuration.
  2. Handle the edit event of the Grid.
  3. Get the index of the row.
  4. Based on the row index, manually invoke the sync method of the data source.

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-edit
http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-sync

For example, I used and modified the code from the article from my last reply, now it looks like:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>
 
 
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
   
<div id="grid"></div>
 
<script>
  $(function () {
    var crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service",
        dataSource = new kendo.data.DataSource({
          transport: {
            read:  {
              url: crudServiceBaseUrl + "/Products",
              dataType: "jsonp"
            },
            update: {
              url: crudServiceBaseUrl + "/Products/Update",
              dataType: "jsonp"
            },
            destroy: {
              url: crudServiceBaseUrl + "/Products/Destroy",
              dataType: "jsonp"
            },
            create: {
              url: crudServiceBaseUrl + "/Products/Create",
              dataType: "jsonp"
            },
            parameterMap: function(options, operation) {
              if (operation !== "read" && options.models) {
                return {models: kendo.stringify(options.models)};
              }
            }
          },
          batch: true,
          autoSync: false,
          pageSize: 5,
          schema: {
            model: {
              id: "ProductID",
              fields: {
                ProductID: { editable: false, nullable: true },
                ProductName: { validation: { required: true } },
                UnitPrice: { type: "number", validation: { required: true, min: 1} },
                Discontinued: { type: "boolean" },
                UnitsInStock: { type: "number", validation: { min: 0, required: true } }
              }
            }
          }
        });
 
    var rowIndex = null;
    var cellIndex = null;
    var saveButtonClicked = false;
    var editCell = false;
 
    $("#grid").kendoGrid({
      dataSource: dataSource,
      navigatable: true,
      pageable: true,
      height: 300,
      toolbar: ["create", "save", "cancel"],
      columns: [
        "ProductName",
        { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
        { field: "UnitsInStock", title: "Units In Stock", width: 120 },
        { field: "Discontinued", width: 120 },
        { command: "destroy", title: " ", width: 150 }],
      editable: true,
      saveChanges: function(e) {
        saveButtonClicked = true;
      },
      dataBinding: function(e) {
        var current = e.sender.current() || [];
        if (current[0]) {
          cellIndex = current.index();
          rowIndex = current.parent().index();
        }
      },
      edit: function(e){
        var index = e.sender.current().parent().index();
         
        if(rowIndex === null){
          rowIndex = index;
        }else{
          if(rowIndex != index){
            rowIndex = null;
            editCell = true;
             
            e.sender.dataSource.sync();
          }
        }
      },
      dataBound: function(e) {
        if (!isNaN(cellIndex)) {
          e.sender.current(e.sender.tbody.children().eq(rowIndex).children().eq(cellIndex));
          rowIndex = cellIndex = null;
 
          // The code below is needed only when the user clicks on the "Save Changes" button.
          // Otherwise, focusing the table explicitly and unconditionally can steal the page focus.
          if (saveButtonClicked) {
            e.sender.table.focus();
            saveButtonClicked = false;
          }
          if(editCell){
            editCell = false;
             
            e.sender.editCell(e.sender.current());
          }         
        }
      }
    });
  });
</script>
</body>
</html>

For a runnable example, check this Dojo: https://dojo.telerik.com/AcAQi

I hope this helps.


Regards,
Preslav
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Tim
Top achievements
Rank 1
answered on 15 Aug 2017, 03:31 PM

Hi Preslav,

Superb, it works very well, thank you :)

Regards,

Tim

0
Tim
Top achievements
Rank 1
answered on 15 Aug 2017, 03:32 PM

Hi Preslav,

Superb, it works very well, thank you.

Regards,

Tim

0
Tim
Top achievements
Rank 1
answered on 16 Aug 2017, 06:27 AM

Hi Preslav,

It appears I was a little hasty in my response as I now get some string effects - every time I click in a cell (this cell has a DropDownList) then click another row the grid performs the sync but it also refocuses back to row 1 even though I've applied all the changes you demonstrated.

I am using MVC, would this make any difference?

Could you provide an MVC example?

Regards,

Tim

0
Preslav
Telerik team
answered on 17 Aug 2017, 10:24 AM
Hello Tim,

Using the MVC wrappers should not make any difference. I was not able to replicate the problem with DropDownList editor in an MVC Grid.

For a base, I used the "Grid / Editing custom editor" demo:
Now, the code in the "editing_custom.cshtml" page looks like:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.Category).ClientTemplate("#=Category.CategoryName#").Width(180);
        columns.Bound(p => p.UnitPrice).Width(130);
        columns.Command(command => command.Destroy()).Width(150);
    })
    .ToolBar(toolBar =>
    {
        toolBar.Create();
        toolBar.Save();
    })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Events(e=> {
        e.SaveChanges("saveChanges");
        e.DataBinding("dataBinding");
        e.Edit("edit");
        e.DataBound("dataBound");
    })
    .Pageable()
    .Sortable()
    .Navigatable()
    .Scrollable()
    .HtmlAttributes(new { style = "height:550px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .ServerOperation(false)
        .Events(events => events.Error("error_handler"))
        .Model(model =>
        {
            model.Id(p => p.ProductID);
            model.Field(p => p.ProductID).Editable(false);
            model.Field(p => p.Category).DefaultValue(
                ViewData["defaultCategory"] as Kendo.Mvc.Examples.Models.CategoryViewModel);
        })
        .PageSize(20)
        .Read(read => read.Action("EditingCustom_Read", "Grid"))
        .Create(create => create.Action("EditingCustom_Create", "Grid"))
        .Update(update => update.Action("EditingCustom_Update", "Grid"))
        .Destroy(destroy => destroy.Action("EditingCustom_Destroy", "Grid"))
    )
)
 
<script type="text/javascript">
    var rowIndex = null;
    var cellIndex = null;
    var saveButtonClicked = false;
    var editCell = false;
 
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function() {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
 
    function saveChanges(e) {
        saveButtonClicked = true;
    }
 
    function dataBinding(e) {
        var current = e.sender.current() || [];
        if (current[0]) {
            cellIndex = current.index();
            rowIndex = current.parent().index();
        }
    }
 
    function edit(e){
        var index = e.sender.current().parent().index();
         
        if(rowIndex === null){
            rowIndex = index;
        }else{
            if(rowIndex != index){
                rowIndex = null;
                editCell = true;
             
                e.sender.dataSource.sync();
            }
        }
    }
    function dataBound(e) {
        if (!isNaN(cellIndex)) {
            e.sender.current(e.sender.tbody.children().eq(rowIndex).children().eq(cellIndex));
            rowIndex = cellIndex = null;
 
            // The code below is needed only when the user clicks on the "Save Changes" button.
            // Otherwise, focusing the table explicitly and unconditionally can steal the page focus.
            if (saveButtonClicked) {
                e.sender.table.focus();
                saveButtonClicked = false;
            }
            if(editCell){
                editCell = false;
             
                e.sender.editCell(e.sender.current());
            }         
        }
    }
 
 
</script>

If the above does not help, in order to continue my investigation, could you please prepare and share an isolated Dojo that clearly replicates the problem? If sending a Dojo is not doable, you can send us an MVC project.

Regards,
Preslav
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Stefan
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 04 Nov 2022, 10:32 AM

Hi,

this works well when switching rows inside the grid, but unfortunately it doesn't work when leaving the grid, or when using any of the function buttons (NEW, DELETE) inside the grid.

Is there any way we could handle these cases easily too, in the given scenario?

Anton Mironov
Telerik team
commented on 08 Nov 2022, 09:15 AM

Hi Stefan,

In order to achieve the desired behavior, I would recommend using the "focusout" event for the Telerik UI Grid:

In the event handler, save the Grid changes:

Give a try to the approach above and let me know if this approach is achieving the desired result.


Kind Regards,
Anton Mironov

Stefan
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 25 Nov 2022, 08:49 AM

Hi Anton,

thx, but unfortunately the focusout-event for the grid seems to fire always, even when clicking another cell in the same row. How would we go about using it in this scenario?

Anton Mironov
Telerik team
commented on 29 Nov 2022, 08:28 AM

Hi Stefan,

Could you please send me a dojo example of your implementation? This way I will have the needed information about the Edit Mode and the configuration of the Grid.

Looking forward to hearing back from you.

Best Regards,
Anton Mironov

Tags
Grid
Asked by
Tim
Top achievements
Rank 1
Answers by
Preslav
Telerik team
Tim
Top achievements
Rank 1
Stefan
Top achievements
Rank 1
Iron
Iron
Veteran
Share this question
or