[Solved] grid.submitChanges Problem

[Ofer]

Dear telerik staff,
On our current project, we are trying to implement a button outside the grid, which will call the grid.submitChanges, so we would be able to retrieve the data off the grid.
The logic behind the decision, is to allow the user to select in check boxes,  the records he wants to update or delete, and will do a batch of CRUD operations.

Our problem is that when we try and register our button with a jquery function: we

function SaveGrid() {
		var grid = $('#Grid_Docs').data('tGrid');
		grid.submitChanges();
	};


we receive the following error: "Object doesn't support property or method 'submitChanges'
even though we have the script
<script type="text/javascript" src="/Clalbit.GM.MVC/Scripts/telerik.grid.editing.js"></script>

And all the other scripts needed for the telerik grid to work, in our code.

This is similiar to this case: 
http://www.telerik.com/community/forums/aspnet-mvc/grid/telierik-how-to-fire-batch-edit-submit-from-outside-grid.aspx#1742717

Do you have any pointers to give us, in order to fix this problem ?

Sincerely yours,
Ofer Levy

[Petur Subev]

Hello Ofer,

The submitChanges client method is only available when your Grid is configured to use batch editing. In other editing modes the changes are automatically submitted. You should not have any problem using the version you selected (2011.3 1115). If this is not the case please provide a working sample reproducing the problem so we can check what causes it.

Regards,
Petur Subev
the Telerik team

[Ofer]

Dear Petur,
First of all thank you for your quick answer, I managed to get the code working and get from the view to the controller using my jquery function.
My problem right now, is that by using my button to reach the controller, I get null in all my IEnumerablems.
While with using a toolbar button that is created from the grid, I get data.

My Grid:

@(Html.Telerik().Grid<Clalbit.GM.MVC.Controllers.Helpers.ViewModels.DocEntity>(@Model)
                        .Name("Grid_Docs")
                        .ClientEvents(events => events.OnSubmitChanges("SaveGrid"))
                        .Columns(Cols =>
                        {
                            Cols.Bound(Col => Col.Choice)
                                .ClientTemplate("<input type='checkbox' name='checkedRecords' value='<#= Choice #>' />")
                                .Template(@<text> <input name="checkedRecords"
                                                         type="checkbox"
                                                         value="@item.Choice"
                                                         title="checkedRecords"
                                                         @if (item.Choice)
                                                         {
                                                            <text> checked="checked" </text>
                                                         }
                                                         /></text>)
                                .Title("")
                                .Width("5%");
                            Cols.Bound(Col => Col.Alert)
                                .Title("")
                                .Width("4%");
                            Cols.Bound(Col => Col.DocType)
                                .Format("{0}")
                                .Title("Doc Type")
                                .Width("12%");
                            Cols.Bound(Col => Col.View)
                                .Title("")
                                .Sortable(false)
                                .Width("5%");
                            Cols.Bound(Col => Col.DocID)
                                .Format("{0:g}")
                                .Title("DocId")
                                .Width("11%");
                            Cols.Bound(Col => Col.UpdateDate)
                                .Format("{0:MM.dd.yyyy}")
                                .Title("Update Date")
                                .Width("14%");
                            Cols.Bound(Col => Col.Policy_Id)
                                .Format("{0:g}")
                                .Title("Policy")
                                .Width("9%");
                            Cols.Bound(Col => Col.MovementType)
                                .Title("Movement type")
                                .Width("14%");
                            Cols.Bound(Col => Col.Rating)
                                .Title("Rating")
                                .Width("8%");
                        })
                        .DataBinding(data => data.Ajax().Select("_Docs_AjaxBind", "Tik", new RouteValueDictionary { { "TikId", ViewData["TikId"] }, { "DocId", ViewData["DocId"] } })
                                                        .Delete("_Docs_AjaxBatch", "Tik")
                                                        .Update("_Docs_AjaxBatch", "TIk"))
                        .DataKeys(keys => { keys.Add(p => p.DocID); })
                        .DataKeys(keys => { keys.Add(p => p.ConnectID); })
                        .DataKeys(keys => { keys.Add(p => p.ConnectTypeValue); })
                        .Editable(editing => editing.Mode(GridEditMode.InCell))
                        .HtmlAttributes(new { @style = "width:465px;" })
                        .PrefixUrlParameters(false)
                        .Scrollable(scroll => scroll.Height("230px"))
                        .Sortable()
                        .ToolBar(commands => commands.SubmitChanges().ButtonType(GridButtonType.ImageAndText).ImageHtmlAttributes(new {style="margin-left:0"})))

My Button:

@Ajax.ActionLink("Remove", "_Docs_AjaxBatch", "Tik", new { }, new AjaxOptions { OnSuccess = "SaveGrid" }, new { @class = "accountTable_btn" })

The Jquery Code:

function SaveGrid() {
    var grid = $('#Grid_Docs').data('tGrid');
    grid.submitChanges();
};

The Controller Code:

public ActionResult _Docs_AjaxBatch([Bind(Prefix = "inserted")]IEnumerable<DocEntity> insertedDocs,
                                            [Bind(Prefix = "updated")]IEnumerable<DocEntity> updatedDocs,
                                            [Bind(Prefix = "deleted")]IEnumerable<DocEntity> deletedDocs)
        {
            TikViewModel TikVM = new TikViewModel();

            if (insertedDocs != null)
            {
                foreach (var doc in insertedDocs)
                {
                    // perform insert
                }
            }

            if (updatedDocs != null)
            {
                foreach (var doc in updatedDocs)
                {
                    //perform update
                }
            }

            if (deletedDocs != null)
            {
                foreach (var doc in deletedDocs)
                {
                    //perform delete
                }
            }

            return View(new GridModel(TikVM.Docs));
        }

What can I do to solve this ?

[Petur Subev]

Hi Ofer,

If I understand your scenario correctly you want to call the submitChanges method of the grid with a button outside the Grid.
To do so you can use the following approach:

<button class='t-button' onclick='performSubmit()'>Submit changes</button>

<script type="text/javascript">
    function performSubmit() {
        var grid = $('#Grid_Docs').data('tGrid');
        grid.submitChanges();
    };
</script>

Also if you want to send additional values to the action method handling the update request please check this thread.
I hope this helps.



Kind regards,
Petur Subev
the Telerik team

[Ofer]

Dear Petur,
Thank you for your replay, I managed using your advice to fix my problem.

Although now I am facing another related question, and that is, if it's possible to do a Batch Delete using an external button.
I tried to find documentation about this subject, but from what I can see, you only allow delete per row, and not in batch.
I thought about retrieving the values from your grid using Jquery and posting it back to the controller and iterate through the data to create a batch delete, but I'm still new in the field of Jquery, so I don't know how to manage something like that.

Sincerely yours,
Ofer Levy  

[Petur Subev]

Hello Ofer,

Generally speaking when using batch editing the action method handling the update need to handle the deleted objects as shown in this demo. So the same button which submits the changes will cause the Gird to send information about which objects are marked as deleted.

All the best,
Petur Subev
the Telerik team

[Rajalakshmi]

Hello Telerik Team,
I have the same problem discussed in this forum. I  need to show some success/failure messages after grid has been submitted. 
I use incell editing mode and the grid is submitted through an external html button. am calling grid.submitchanges() on button click event. The controller method does create success/failure messages but i cannot get it on the view. I basically need some sort of return value or callback from submitchanges method. Is there a way to do it? Pls help.

Sample code:
view:

@(Html.Telerik().Grid(Model.OrderData)
             .Name("GridData").HtmlAttributes(new { @class = "GridData" })
        .DataKeys(keys => keys.Add(c => c.Number1).RouteKey("Number1"))
        .ToolBar(commands =>
        {
            commands.Insert();

        })


   .DataBinding(dataBinding => dataBinding.Ajax()
   .Select("Select", "Order")
   .Update("Save", "Order")

       )

   .Columns(columns =>
   {
       columns.Bound(c => c.Number1).Title("").Width(200);

       columns.Bound(c => c.Number2).Title("").Width(200);



       columns.Command(c => { c.Delete();  }).Width(200);

   })
                         .Editable(editing => editing.Mode(GridEditMode.InCell))
                         .ClientEvents(events => events.OnSubmitChanges("onSubmitChanges"))

                         .Sortable()
                         .KeyboardNavigation()


                         )

Javascript:

function doSubmit() {

 var grid = $("#GridData").data("tGrid")<br>
grid.submitChanges();

// HOW TO GET SUCCESS MESSAGES AFTER THIS CALL & DISPLAY IN THE VIEW?
}

[Kapil]

Hello Rajlaxmi,

Were you able to find a solution to your problem as I need to do the same thing???

Thanks