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
@(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>
</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>
<button id="bSave" type="button">Save Data</button>
</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>