Hi,
I have two controls(datepicker and dropdown) outside of the Kendo Grid, I want to send the selected values of those two controls to the controller along with the Grid values on click of save changes of the Kendo Grid.
Could you please help me how to pass those values along with Create or Update Action of Kendo Grid, or If I can bind those values creating hidden columns in the grid, as these values would be required in all the rows while updating.
Below is my view :
@{
ViewBag.Title = Project.Web_v5.Framework.PageTitleHelper.GetPageTitle("PigPriceEdit", Request.Url.AbsolutePath);
Layout = "~/Views/Shared/_Layout_v2.cshtml";
var sess = new aplCustomerPortal.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">
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 showEdit(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
window.location.href = '@Url.Action("PigPriceEdit", "MarketingPigPrice")' + '?pModelId=' + dataItem.id + '&pContactId=@ViewBag.ContactId';
}
$(function () {
kendo.culture("en-AU");
});
$("#bEdit").click(function () {
window.location.href = '@Url.Action("PigPriceEdit", "MarketingPigPrice")' + '&pContactId=@ViewBag.ContactId';
});
</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").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.PigStateList, "Value", "Key"), "-- Select One --", new { @class = "form-control", required = "required", validationmessage = "State is required", placeholder = "State", tabindex = "3", @id = "state", 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="bClearData" class="btn btn-sm btn-default" type="button">Clear 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_pigprice_data>
()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.pig_type).Title("Pig Type");
columns.Bound(p => p.pig_weight).Title("Pig 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:1250px;" })
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.Group(g => g.Add(p => p.pig_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.pig_type).Editable(false);
model.Field(p => p.pig_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("Editing_Create", "MarketingPigPrice", new { id = ViewBag.ContactId })
.Read(read => read.Action("PigPriceEdit_Read", "MarketingPigPrice", new { id = ViewBag.ContactId }))
.Update("Editing_Update", "MarketingPigPrice")
.Destroy("Editing_Destroy", "MarketingPigPrice")
)
)
<br />
</div>
<br />
</div>
</form>
</div>
1 Answer, 1 is accepted
Hi Jagbir,
In order to send additional values to the Create or Update Grid actions it is recommended to specify a Data option for the respective action. Then a JavaScript function can be executed and will return the relevant information that will be passed to the Controller. The article below describes the approach. The example shows the Read action, however, the same approach is applicable for Create and Update.
Regards,
Viktor Tachev
Progress Telerik