Hi
i am using KendoUi Grid to display the data on my page from a datasource .
Here is the Code for the same .
@using Kendo.Mvc.UI
@model IEnumerable<
Ami.WebRole.Models.FacilityGroupModel
>
@{
ViewBag.Title = "Manage Facility Group ";
}
<
script
type
=
"text/javascript"
>
$(document).ready(function () {
$("form.k-edit-form").kendoValidator();
});
</
script
>
<
style
type
=
"text/css"
>
.k-widget.k-window
{
width: 450px;
height: 250px;
}
</
style
>
<
h2
style
=
"color:Maroon;"
>Manage Facility Group</
h2
> <
hr
/>
<
table
>
<
td
>
<
td
align
=
"center"
>
<
table
>
<
tr
>
<
td
align
=
"left"
>
@using (Html.BeginForm("ManageFacilityGroup", "ManageFacilityGroup", FormMethod.Get))
{
<
fieldset
>
<
table
>
<
tr
>
<
td
>
<
p
>
<
span
><
b
> Name:</
b
></
span
>
</
p
>
</
td
>
<
td
>
<
p
>
@(Html.Kendo().AutoComplete()
.Name("FacilityGroupName")
.DataTextField("FacilityGroupName")
.Filter("Contains")
.IgnoreCase(true)
.DataSource(source =>{
source.Read(read =>
{
read.Action("GetFacilityName", "ManageFacilityGroup")
.Data("onAdditionalData");
})
.ServerFiltering(true);
})
)
<
script
type
=
"text/javascript"
>
function onAdditionalData() {
return {
text: $("#FacilityGroupName").val()
};
}
</
script
>
</
p
>
</
td
>
<
td
align
=
"left"
>
<
span
><
b
>Status:</
b
></
span
>
</
td
>
<
td
>
@(Html.Kendo().DropDownList()
.Name("chkStatus")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<
SelectListItem
>() {
new SelectListItem() {
Text = "All",
Value = "-1"
},
new SelectListItem() {
Text = "Active",
Value = "true"
},
new SelectListItem() {
Text = "InActive",
Value = "false"
}
})
.Value("1")
)
</
td
>
<
td
align
=
"right"
>
<
p
>
<
input
id
=
"Submit1"
type
=
"submit"
value
=
"Search"
/>
</
p
>
</
td
>
</
tr
>
</
table
>
</
fieldset
>
}
</
td
>
</
tr
>
<
tr
>
<
td
align
=
"center"
>
@(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.CustomerName).HtmlAttributes(new { style = "text-align:left;" }).Width(150);
columns.Bound(p => p.FacilityGroupName).HtmlAttributes(new { style = "text-align: left;" }).Width(170).Title("Facility Group Name");
columns.Bound(p => p.StatusName).HtmlAttributes(new { style = "text-align: center;" }).Width(90).Title("Status");
columns.Bound(p => p.CreationDate).HtmlAttributes(new { style = "text-align: right;" }).Width(110).Format("{0:MM/dd/yyyy}");
columns.Command(command => { command.Edit(); }).Width(85);
})
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("FacilityGroupPopUp").Window(window => window.Title("Edit Facility Group").Name("editwindow1")))
.Scrollable()
.Pageable(p => p.PageSizes(true))
.Sortable()
.DataSource(datasource => datasource
.Ajax()
.ServerOperation(false)
.Model(model => model.Id(p => p.FacilityGroupId))
.Read(read => read.Action("ManageFacilityGroup", "ManageFacilityGroup"))
.Update(update => update.Action("Update", "ManageFacilityGroup"))
)
)
</
td
>
</
tr
>
</
table
>
</
td
>
</
td
>
</
table
>
As u can u see i am using a Custom Pop Up editor to edit the records on my Grid.
Here is my Custom Pop Up
@model Ami.WebRole.Models.FacilityGroupModel
@using Kendo.Mvc.UI
<
fieldset
>
@* <
legend
>Edit Facility Group</
legend
>*@
<
table
border
=
"10"
cellpadding
=
"0"
cellspacing
=
"0"
style
=
"border-color:Black; width:350px;"
>
<
tr
>
<
td
colspan
=
"2"
>
@if (ViewData["FailureMessage"] != null)
{
<
div
id
=
"divFailureMsg"
style
=
"height:25px; background-color:#fffeff;visibility:visible ;color:Red"
align
=
"center"
>
@Html.Label(ViewData["FailureMessage"].ToString())
</
div
>
}
else
{
<
div
id
=
"divFailureMsg"
style
=
"visibility:hidden; height:0px;"
>
</
div
>
}
</
td
>
</
tr
>
<
tr
>
<
td
style
=
"width:150px;"
>
@Html.LabelFor(model => model.CustomerName)
</
td
>
<
td
>
@(Html.Kendo().DropDownList()
.Name("CustomerName")
.DataTextField("CustomerName")
.DataValueField("CustomerName")
//.DataValueField("CustomerId")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetCustomer", "ManageFacilityGroup");
});
})
)
</
td
>
</
tr
>
<
tr
>
<
td
>
@Html.LabelFor(model => model.FacilityGroupName)
</
td
>
<
td
>
@Html.TextBoxFor(model => model.FacilityGroupName, new { style = "width:156px;" })
</
td
>
</
tr
>
<
tr
>
<
td
>
@Html.LabelFor(model => model.Description)
</
td
>
<
td
>
@Html.TextAreaFor(model => model.Description, new { style = "width:163px;" })
</
td
>
</
tr
>
<
tr
>
<
td
>
@Html.LabelFor(model => model.status)
</
td
>
<
td
>
@(Html.Kendo().DropDownList()
.Name("StatusName")
.DataTextField("StatusName")
.DataValueField("StatusName")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetStatus", "ManageFacilityGroup");
});
})
)
</
td
>
</
tr
>
</
table
>
</
fieldset
>
Now on my popup i am letting the user edit "Customer Name" ,"Facility Group Name" and "Description" and the "Status".
While updating i am checking whether the updated facility group name doesnt match with any of the already existing names,
Now what i want to achieve is once the facility group name is checked for any duplicacy the name should be updated but if there is any duplicacy the record should not get updated and the edit popup window should remain intact with the proper error message.
In my case the record is not being updated on duplicacy but the edit pop up window gets closed automatically.
Help!!!