This is a migrated thread and some comments may be shown as answers.

Save Kendo Grid batch edit from external button

1 Answer 1920 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jagbir
Top achievements
Rank 1
Jagbir asked on 11 Mar 2020, 04:54 AM

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>

 

1 Answer, 1 is accepted

Sort by
0
Petar
Telerik team
answered on 12 Mar 2020, 02:17 PM

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.
Tags
Grid
Asked by
Jagbir
Top achievements
Rank 1
Answers by
Petar
Telerik team
Share this question
or