InCell Editing - Saving when stepping out of cell

10 posts, 1 answers
  1. IT
    IT avatar
    7 posts
    Member since:
    Jan 2010

    Posted 11 Jul 2012 Link to this post

    Hi! I'm using the KendoUI Grid with MVC 4.  I'm trying to figure out how to automagically save the cell data when I step out of the cell.  I can get it to save using a "Save" button and batch editing, but my requirements are such that they don't want to have to press the "Save" button.

    Thanks for your help in advance.
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 12 Jul 2012 Link to this post

    Hi Stephanie,

    This could be easily achieved via the Save event of the Grid and the dataSource sync objec i.e. .Events(ev=>ev.Save("function(e){this.dataSource.sync()}"))

    Kind Regards,
    Petur Subev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. IT
    IT avatar
    7 posts
    Member since:
    Jan 2010

    Posted 12 Jul 2012 Link to this post

    OK, the sync is happening before the grid registers that the field has changed.  The original data is passed back to the server, not the updated data. When I try to update the same cell again, it passes the first edit through to the controller.

    What am I missing?

    .cshtml:
    @(Html.Kendo()
    .Grid<TestKendoGrid.Models.myTransaction>()
      .Name("Grid")
      .Editable(editable => editable.Mode(GridEditMode.InCell))
      .Columns(columns =>
          {
             columns.Bound(o => o.TranDt).Width(150);
             columns.Bound(o => o.Description).Width(300);
             columns.Bound(o => o.Category).Width(125);
             columns.Bound(o => o.Amount).Width(100).Format("{0:c}");
             columns.Bound(o => o.TranID);
             columns.Command(command => command.Destroy()).Width(200);
          })
      .DataSource(dataSource => dataSource
          .Ajax()
          .Model(model => model.Id(p => p.TranID))
          .Events(events => events.Error("error_handler"))
          .Create(create => create.Action("_CreateTransactionKendo", "Home"))
          .Read(read => read.Action("_SelectTransactionsKendo", "Home"))
          .Update(update => update.Action("_SaveTransactionKendo", "Home"))
          .Destroy(destroy => destroy.Action("_DeleteTransactionKendo", "Home"))
          .Batch(true))
      .Pageable()
      .ToolBar(commands => { commands.Create(); commands.Save(); })
      .Events(ev => ev.Save("function(e) { this.dataSource.sync() }"))
    )

    Controller:
    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult _SaveTransactionKendo([DataSourceRequest]DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<myTransaction> txns)
    {
        List<myTransaction> list = (List<myTransaction>)TempData["trans"];
        if (txns != null && ModelState.IsValid)
        {
            myTransaction txn = txns.First();
            string id = txn.TranID;
            var target = list.Find(p => p.OFXTranID == id);
            if (target != null)
            {
                target.Description = txn.Description;
                target.Category = txn.Category;
                target.Amount = txn.Amount;
            }
        }
     
        TempData["trans"] = list;
     
        return Json(ModelState.ToDataSourceResult());
    }

  4. Answer
    Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 13 Jul 2012 Link to this post

    Hi again Spephanie,

    Yes it seems that the sync occurs before the model changes - you could use setTimeout to execute the update when the model has changed:
    i.e.
    .Events(ev => ev.Save(@"function(e){
                        setTimeout(function(){
                            $('#YourGrid').data('kendoGrid').dataSource.sync()
                        }
                )}"))

    Let me know if further questions arise.

    Kind regards,
    Petur Subev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. IT
    IT avatar
    7 posts
    Member since:
    Jan 2010

    Posted 13 Jul 2012 Link to this post

    Thanks, Petur!  setTimeout did the trick.
  6. Anish
    Anish avatar
    2 posts
    Member since:
    Oct 2012

    Posted 03 Oct 2012 Link to this post

    Hi Petur,

    I have a validation enabled on a cell fr numerics...on entering text to it it show a validation error ..but still allowing me to save the data from grid ..this save button is outside the grid, not the inbuilt update ..

    so bottomline... if I have any invalid data still the data is getting saved with old values ..PLS HELP :)
  7. Princess
    Princess avatar
    11 posts
    Member since:
    Feb 2012

    Posted 14 Dec 2012 Link to this post

    I was able to follow @Anish and @Petur solution but when I'm retrieving the values on the controller all fields was null but when I look on the Firebug all the changes on the model was their. Am I doing something wrong?

    @(Html.Kendo().Grid<PDMS.Models.Temp_File_Upload.TempFileUploadCreate>()
            .Name("Grid")
            .Columns(columns =>
            {
                columns.Bound(c => c.ID).Hidden(true)
                    .ClientTemplate("#= ID #" +
                        "<input type='hidden' name='TempFileUploadCreate[#= index(data)#].ID' value='#= ID #' />");
                columns.Bound(c => c.ProjectFolderID)
                    .ClientTemplate("#= ProjectFolderID #" +
                        "<input type='hidden' name='TempFileUploadCreate[#= index(data)#].ProjectFolderID' value='#= ProjectFolderID #' />");
                columns.Bound(c => c.FileName)
                    .ClientTemplate("#= FileName #" +
                        "<input type='hidden' name='TempFileUploadCreate[#= index(data)#].FileName' value='#= FileName #' />");
                columns.Bound(c => c.GeneratedFileName).Hidden(true)
                    .ClientTemplate("#= GeneratedFileName #" +
                        "<input type='hidden' name='TempFileUploadCreate[#= index(data)#].GeneratedFileName' value='#= GeneratedFileName #' />");
                columns.Bound(c => c.Tag)
                    .ClientTemplate("#= Tag #" +
                        "<input type='hidden' name='TempFileUploadCreate[#= index(data)#].Tag' value='#= Tag #' />");
                columns.Command(command => {
                      command.Destroy().HtmlAttributes("<div class='k-button'><span class='k-icon k-edit'></span></div>").Text(" ");
                      command.Edit().HtmlAttributes("<div class='k-button'><span class='k-icon k-delete'></span></div>").Text(" ");
                }).Width(80);
            })
            .Editable(editable => editable.Mode(GridEditMode.InCell))
            .Pageable(p => p
                        .Refresh(true))
            .Sortable()
            .Scrollable()
            .Selectable(selectable => selectable.Type(GridSelectionType.Cell) )
            .DataSource(datasource => datasource            
                .Ajax()                                     
                .Events(events =>
                {
                    events.Error("error_handler");             
                })                        
                .Model(model =>
                {                
                    model.Id(p => p.ID);
                    model.Field(p => p.FileName).Editable(false);
                    model.Field(p => p.GeneratedFileName).Editable(false);
                })            
                .Read("FileDetails_Read", "File").Model(model =>
                {
                    model.Field(p => p.ID).Editable(false);
                    model.Field(p => p.FileName).Editable(false);
                })
                .Update("FileDetails_Update","File")
                .Destroy("FileDetails_Destroy", "File")
                )   
            .Events(events =>
            {
                
                events.Save("onGridSave");

            })     
            )
    <script type="text/javascript">
      
      
            // alert("save");
            // when triggered save changes
    //        //alert("done na ba?");
        function onGridSave(e) {
            setTimeout(function () {
                $("#Grid").data("kendoGrid").dataSource.sync();
            });
        }
        
        function index(dataItem) {
            var data = $("#Grid").data("kendoGrid").dataSource.data();

            return data.indexOf(dataItem);
        }

        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);
            }
        }


    </script>

    //Controller

     [AcceptVerbs(HttpVerbs.Post)]
            public ActionResult FileDetails_Update([DataSourceRequest] DataSourceRequest request,[Bind(Prefix ="models")] PDMS.Models.Temp_File_Upload.TempFileUploadCreate entity)
            {
                
                var isSuccess = tempFileRepository.Update(entity.ID, entity.Tag ,User.Identity.Name.ToString());
                //var isSuccess = tempFileRepository.Update(entity);

                return Json(ModelState.ToDataSourceResult());            
            }
  8. Princess
    Princess avatar
    11 posts
    Member since:
    Feb 2012

    Posted 14 Dec 2012 Link to this post

    Ok, my problem is fixed. I forgot to change the client template absolute to my models name. Thanks for this thread!
  9. Jonathan Copelton
    Jonathan Copelton avatar
    4 posts
    Member since:
    Sep 2009

    Posted 09 Jun 2015 in reply to Petur Subev Link to this post

    Hi would you have any idea how you could do this in a grid hierarchy where the sub grids use #=Id# in their control name i.e.

    .Name("Unitgrid_#=Id#")

     Thanks

     

  10. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2311 posts

    Posted 10 Jun 2015 Link to this post

    Hello Jonathan,

    I covered the question in the support thread on the same topic. You could use the autoSync option of the dataSource.

    Regards,
    Dimiter Madjarov
    Telerik
    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
Back to Top