Custom editing pass row data item to javascript function and then update columns

9 posts, 1 answers
  1. Tausif
    Tausif avatar
    10 posts
    Member since:
    Nov 2014

    Posted 26 Nov 2014 Link to this post

    Hi,

    I have a couple of columns on a grid, some are editable and others are not. I want to be able to click in cell and change its value and then tab out of the cell.
    Once I have tabbed out of a cell I want to be able to get that cell row and then pass that to a controller to perform a calculation and then return and update the grid. I need to pass the data item back to the controller I do not want to use the aggregates sum, count etc as my calculations are more complicated.

    I have seen the following example:

    http://www.telerik.com/forums/working-with-bound-data-on-client-side

    But this doesn't really work as I expected, can you explain how I can achieve the above, I'm using Telerik MVC Grid. Thanks

    Below is the code I'm trying to get to work.

    Would it be possible to have a sample project?


    @model IEnumerable<InlineEditing.Models.ProductViewModel>

      @(Html.Kendo().Grid(Model)
        .Name("gridCustom")
        .Columns(columns =>
        {
            columns.Bound(p => p.ProductID).Width(120);
            columns.Bound(p => p.ProductName).Width(400);
            columns.Bound(p => p.UnitPrice).Width(120);
            columns.Bound(p => p.UnitsInStock).Width(120);
            columns.Bound(p => p.Total).Width(120);
        })
        //.ToolBar(toolBar =>
        //    {
        //        toolBar.Create();
        //        toolBar.Save();
        //    })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Pageable()
        .Sortable()
        .Scrollable()
        .Navigatable()
        //.HtmlAttributes(new { style = "height:430px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .ServerOperation(false)
            .Events(events => events.Change("Edit"))
            .Model(model =>
            {
                model.Id(p => p.ProductID);
                model.Field(p => p.ProductID).Editable(false);
                model.Field(p => p.Total).Editable(false);
            })
            .PageSize(20)
            .Read(read => read.Action("EditingCustom_Read", "Home"))
            .Create(create => create.Action("EditingCustom_Create", "Home"))
            .Update(update => update.Action("EditingCustom_Update", "Home"))
            .Destroy(destroy => destroy.Action("EditingCustom_Destroy", "Home"))
            
        )
    )



  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1444 posts

    Posted 28 Nov 2014 Link to this post

    Hello Tausif,

    This could be done by subscribing to the Grid's save event, which is triggered when closing the modified cell. For example: 
    function onSave(e){
      $.ajax({
        url: "/someController",
        data: e.values,
        success: function(response) {
          e.model.set(response.fieldName, response.value);
        }
      });
    }

    Regards,
    Alexander Popov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. Tausif
    Tausif avatar
    10 posts
    Member since:
    Nov 2014

    Posted 28 Nov 2014 in reply to Alexander Popov Link to this post

    Hi Alexander,

    I don't see the save event when I create a event i.e.:

      .Events(events => events.save

    or 

     .Destroy(update => update.Action("EditingInline_Destroy", "Home"))
    .Save 

    There is no option for save?

    How do you run the save event when you tab out of a cell?

    Sorry I might be missing something but its unclear to me.

    Thanks










  4. Alexander Popov
    Admin
    Alexander Popov avatar
    1444 posts

    Posted 28 Nov 2014 Link to this post

    Hi Tausif,

    The save event is part of the Grid's configuration and should not be mistaken with the DataSource's events. For example: 
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()   
        .Name("Grid")   
        .Events(e=>e.Save("onSave"))
        .DataSource(ds=>ds.Ajax()
            .Events(..)
        )


    Regards,
    Alexander Popov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Tausif
    Tausif avatar
    10 posts
    Member since:
    Nov 2014

    Posted 28 Nov 2014 in reply to Alexander Popov Link to this post

    Hi,

    Got the function to run when saving but the e.values is undefined when I pass this to the controller any ideas why?

    function onSave(e) {
          
            console.log(e.values);

            $.ajax({
                type: "POST",
                url: "Home/Save",
                data: e.values,
                success: function (response) {
                    e.model.set(response.fieldName, response.value);
                }
            });
        }
  6. Alexander Popov
    Admin
    Alexander Popov avatar
    1444 posts

    Posted 02 Dec 2014 Link to this post

    Hello Tausif,

    I am not exactly sure why the e.values argument is undefined, it seems to work as expected in this example. Would you please check it and let me know if I am doing something differently? 

    Regards,
    Alexander Popov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. Tausif
    Tausif avatar
    10 posts
    Member since:
    Nov 2014

    Posted 02 Dec 2014 in reply to Alexander Popov Link to this post

    Hi,

    The only difference I can see is with the data: {json: JSON.stringify(e.values)}.

    The e.values still null looks as if its not getting passed through correctly.

    My code is below, can you tell if I'm doing something incorrectly?

    @model IEnumerable<InlineEditing.Models.ProductViewModel>
    <div>
    @(Html.Kendo().Grid(Model)
        .Name("grid")
             .Events(e => e.Save("onSave"))
             
             .Columns(columns =>
                {
                    //columns.AutoGenerate(true);
                    columns.Bound(p => p.ProductID);
                    columns.Bound(p => p.ProductName);
                    columns.Bound(p => p.UnitPrice).Width(100);
                    columns.Bound(p => p.UnitsInStock).Width(100);
                    columns.Bound(p => p.Total).Width(100);
                    columns.Command(command => { command.Edit(); });
                    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(190);
                })
        .ToolBar(toolbar => toolbar.Create())
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .Pageable()
        .Sortable()
        .Scrollable()
        
            //.HtmlAttributes(new { style = "height:430px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Events(events => events.Error("error_handler"))

            //.Model(model => model.Id(p => p.ProductID))
            .Model(model =>
            {
                model.Id(p => p.ProductID);
                model.Field(p => p.Total).Editable(false);


            })
            .Create(update => update.Action("EditingInline_Create", "Home"))
            .Read(read => read.Action("EditingInline_Read", "Home"))
            .Update(update => update.Action("EditingInline_Update", "Home")).Events(events => events.RequestEnd("FinishedUpdating"))
            .Destroy(update => update.Action("EditingInline_Destroy", "Home"))


        )
    )

    </div>
    <script type="text/javascript">
        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 FinishedUpdating(e)
        {
            if (e.type === "update") {
                $('#GridPartialDiv').load('/Home/GridPartial');
            }
        }

        function onSave(e) {
          
            console.log( e.values);

            $.ajax({
                type: "POST",
                url: "Home/Save",
                data: { json: JSON.stringify(e.values) },
                success: function (response) {
                    e.model.set(response.fieldName, response.value);
                }
            });
        }



    </script>                   
                            
  8. Tausif
    Tausif avatar
    10 posts
    Member since:
    Nov 2014

    Posted 02 Dec 2014 in reply to Tausif Link to this post

    the values are in e.model not e.values, I can see what i'm changing now just need to pass this to the controller.
  9. Answer
    Alexander Popov
    Admin
    Alexander Popov avatar
    1444 posts

    Posted 04 Dec 2014 Link to this post

    Hello again Tausif,

    The e.values argument is available when the Grid uses InCell editing, as suggested by the code in your first post. I've noticed that your latest configuration uses InLine edit mode, which explains why the e.values argument is undefined. 

    Regards,
    Alexander Popov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top