Save Kendo Grid batch edit from external button

2 posts, 0 answers
  1. Jagbir
    Jagbir avatar
    2 posts
    Member since:
    Mar 2020

    Posted 10 Mar 2020 Link to this post

    Hi Team,

    I have a Kendo grid in batch edit mode and want to save the changes using a Submit button on the form as I also need to validate two other controls outside the Kendo Grid on the click of button. Could you please please advise how can I disable the save button on Grid toolbar and use a Custom button on form to save the Grid changes.

    I have tried using javascript function but not working. Below is my view :

    @{
        ViewBag.Title = Project.Web_v5.Framework.PageTitleHelper.GetPageTitle("PriceEdit", Request.Url.AbsolutePath);
        Layout = "~/Views/Shared/_Layout_v2.cshtml";
        var sess = new CustomerPortal.SessionManagement();
    }
    <style>

        #grid .k-grid-header, .k-grid-header .k-header {
            color: palevioletred;
            font-size: large;
        }

        #inputvaluesbox {
            height: 25px;
            width:70%;
            margin:0;
        }
        .k-edit-cell input {
            width: 100%;
        }
    </style>
    @section Scripts
    {
        <script type="text/javascript">

            @*$(document).ready(function () {
                $("#datepicker").closest(".k-widget")
                    .attr("id", "datepicker_wrapper");

                var datepicker = $("#datepicker").data("kendoDatePicker");

                    datepicker.value(@ViewBag.WeekEndDate);
                });*@

            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 () {
                kendo.culture("en-AU");
            });

             $("#bEdit").click(function () {
                    window.location.href = '@Url.Action("PriceEdit", "MarketingPrice")'  + '&pContactId=@ViewBag.ContactId';
              });

            function additionalData() {
                return {
                    stateVal: $('#selectedstate option:selected').text(),
                    weekendVal: $('#datepicker').val()
                };
            }

            $("#grid").kendoGrid({
                edit: function (e) {
                    $(e.container).find(".k-grid-create").click(
                        function () {
                            var res = confirm("update item"); 
                            if (!res) {
                                event.preventDefault();
                                return false
                            }
                        })
                }
            });

            $("#bSave").on("click", function () {
                $("#Segment").data("kendoGrid").saveChanges();
            });
        </script>
    }

    <div class="col-md-12">
        <form>

            <div class="form-group col-md-12">
                <br />
                <h3 class="panel-title">
                    Form Type : Buyer
                </h3>
            </div>
            <div class="col-md-12">
                <div>
                    <table>
                        <tr>
                            <td>
                                <h3>
                                    Week End Date&nbsp;
                                    @(Html.Kendo().DatePicker().Name("datepicker").Value(ViewBag.WeekEndDate).Format("dd/MM/yyyy").DisableDates(DayOfWeek.Sunday, DayOfWeek.Monday, DayOfWeek.Tuesday, DayOfWeek.Wednesday, DayOfWeek.Thursday, DayOfWeek.Saturday).HtmlAttributes(new { required = "required", validationmessage = "Week End is required", style = "width:100%;", placeholder = "dd/MM/yyyy" }))
                                    <br />
                                </h3>
                            </td>
                            <td>
                                &nbsp;&nbsp;&nbsp;
                            </td>
                            <td>
                                <h3>
                                    State
                                    @Html.DropDownList("StateList", new SelectList(ViewBag.StateList, "Key","Value", ViewBag.State), new { @class = "form-control", required = "required", validationmessage = "State is required", placeholder = "State", tabindex = "3", @id = "selectedstate", style = "width:250%; height:35px;" })
                                </h3>
                                <p>


                                </p>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="text-right btn-toolbar">
                <button id="bLoadPrevious" class="btn btn-sm btn-default" type="button">Fill Last Week’s Figures</button>&nbsp; &nbsp;
                <button id="bSave" type="button">Save Data</button>&nbsp; &nbsp;
            </div>
            <br />
            <br />
            <div class="form-group col-md-12">
                <div style="width:100%;overflow:auto;">
                    @(Html.Kendo().Grid<Project.Core.EF.weekly_price_data>
        ()
        .Name("Segment")
        .Columns(columns =>
        {
            columns.Bound(p => p._type).Title(" Type");
            columns.Bound(p => p._weight).Title(" Weight").Width(140);
            columns.Bound(p => p.price_type).Title("Price Type").Width(140);
            columns.Bound(p => p.price).Title("Price(cent/kg)").Width(50);
            columns.Bound(p => p.number_traded).Title("Numbers").Width(50);
        })
            .ToolBar(toolbar =>
            {
                toolbar.Save();
            })
            .Editable(editable => editable.Mode(GridEditMode.InCell))
            .HtmlAttributes(new { style = "height:1100px;" })
            .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .Group(g => g.Add(p => p._type))
            .PageSize(50)
            .ServerOperation(false)
            .Model(model =>
            {
                model.Id(p => p.id);
                model.Field(p => p.id).Editable(false);
                model.Field(p => p.week_end_date);
                model.Field(p => p.state);
                model.Field(p => p._type).Editable(false);
                model.Field(p => p._weight).Editable(false);
                model.Field(p => p.price_type).Editable(false);
                model.Field(p => p.price);
                model.Field(p => p.number_traded);

            })
            .Events(events => events.Error("error_handler"))
            .Create(create => create.Action("Editing_Create", "MarketingPrice", new { id = ViewBag.ContactId }).Data("additionalData"))
            .Read(read => read.Action("PriceEdit_Read", "MarketingPrice", new { id = ViewBag.ContactId, pModelId = ViewBag.pModelId }))
            .Update(read => read.Action("Editing_Update", "MarketingPrice", new { id = ViewBag.ContactId }).Data("additionalData"))
            .Destroy("Editing_Destroy", "MarketingPrice")
            )
            )
        <br />
    </div>
                <br />
            </div>

        </form>
    </div>

     

  2. Petar
    Admin
    Petar avatar
    437 posts

    Posted 12 Mar 2020 Link to this post

    Hi Jagbir,

    If you want to disable the "Save" button you can use the following code:

    $('.k-grid-save-changes').addClass("k-state-disabled");

    If you want to remove the button you can use the following CSS definition:

    .k-grid-save-changes {
        display:none;
    }
    

    Attached to my reply you will find a runnable project that demonstrates how we can save the Grid data from outside using its saveChanges method. There is a button outside the Grid and here is the code executed on its click:

        $("#save").click(function () {
            $("#grid").data("kendoGrid").saveChanges();
        });

    You can use the above function to validate the fields you want and if the validation passes you can save the Grid changes and submit the form using the jQuery submit method

    Regards,
    Petar
    Progress Telerik

    Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
Back to Top