I have a Listview with two templates, one for show the rows info and another for edit mode. My problem is: every time i click in update or delete always triggers the create event and with cancel delete the row... What I'm doing wrong?
this code is in my view
<
script
type
=
"text/x-kendo-template"
id
=
"listViewTmpl"
>
<
div
class
=
"product-view k-widget"
>
<
div
class
=
"edit-buttons"
>
<
a
class
=
"k-button k-button-icontext k-edit-button"
href
=
"\\#"
><
span
class
=
"k-icon k-edit"
></
span
></
a
>
<
a
class
=
"k-button k-button-icontext k-delete-button"
href
=
"\\#"
><
span
class
=
"k-icon k-delete"
></
span
></
a
>
</
div
>
<
dl
>
<
dt
>Nominee:</
dt
>
<
dd
>#:NomineeName#</
dd
>
</
dl
>
<
input
type
=
"hidden"
name
=
"NomineeTitle"
value
=
"#:NomineeTitle#"
/>
<
input
type
=
"hidden"
name
=
"NomineeDeptId"
value
=
"#:NomineeDeptId#"
/>
<
input
type
=
"hidden"
name
=
"NomineeId"
value
=
"#:NomineeId#"
/>
</
div
>
</
script
>
<
div
class
=
"NomineeRight"
>
<
a
id
=
"addNominee"
title
=
"Add Nominee to the list"
><
img
src=@Url.Content("~/img/rnr_add_item.png")
alt
=
"Add nominee"
/><
strong
> Add Nominee</
strong
></
a
>
@(Html.Kendo().ListView<
X.Models.NomineeInfo
>()
.Name("NomineeList")
.TagName("div")
.ClientTemplateId("listViewTmpl")
.Editable(edit => edit.TemplateName("NomineeEditTmpl"))
.Events(ev =>
{
ev.Save("checkData");
ev.Cancel("cancelEdit");
ev.Remove("removeElem");
})
.DataSource(dataSource =>
{
dataSource.Events(ev => ev.Sync("listviewSync"));
dataSource.Model(m => m.Id("NomineeId"));
dataSource.Create(create => create.Action("NomineeListViewCreate", "Nominate"));
dataSource.Read(read => read.Action("NomineeListViewRead", "Nominate"));
dataSource.Update(update => update.Action("NomineeListViewUpdate", "Nominate"));
dataSource.Destroy(destroy => destroy.Action("NomineeListViewDestroy", "Nominate"));
})
)
</
div
>
this is my edit template
@model X.Models.NomineeInfo
<
div
class
=
"product-view k-widget"
>
<
div
class
=
"edit-buttons"
>
<
a
class
=
"k-button k-button-icontext k-update-button"
href
=
"\\#"
><
span
class
=
"k-icon k-update"
></
span
></
a
>
<
a
class
=
"k-button k-button-icontext k-cancel-button"
href
=
"\\#"
><
span
class
=
"k-icon k-cancel"
></
span
></
a
>
</
div
>
<
dl
>
<
dt
>Employee</
dt
>
<
dd
>
<
input
type
=
"text"
class
=
"k-textbox"
data-bind
=
"value:NomineeName"
name
=
"NomineeName"
style
=
"width:150px"
/>
</
dd
>
<
dt
>Job Title</
dt
>
<
dd
>
<
input
type
=
"text"
class
=
"k-textbox"
data-bind
=
"value:NomineeTitle"
name
=
"NomineeTitle"
style
=
"width:150px"
/>
</
dd
>
<
dt
>Department</
dt
>
<
dd
>
@(Html.Kendo().DropDownList()
.Name("NomineeDeptId")
.SelectedIndex(@Model.NomineeDeptId)
.HtmlAttributes(new { style = "width:150px" })
.DataTextField("DeptName")
.DataValueField("DeptID")
.OptionLabel("Select a Dept")
.DataSource(ds => ds
.Read(
read => read.Action("GetDepartments", "Utility")
)
)
)
</
dd
>
</
dl
>
</
div
>
js
// validate the information before save
function
checkData(elem)
{
if
(elem.model.NomineeName ===
""
)
{
elem.preventDefault();
createNotification(
"Please enter a valid Nominated Name."
,
"error"
);
}
else
if
(elem.model.NomineeDeptId === 0)
{
elem.preventDefault();
createNotification(
"Please enter a valid Department."
,
"error"
);
}
}
// cancel the listview edit mode
function
cancelEdit(elem)
{
//var listView = $("#NomineeList").data("kendoListView");
//listView.cancel();
elem.preventDefault();
listView.dataSource.read();
}
function
removeElem(elem)
{
//var listView = $("#NomineeList").data("kendoListView");
console.log(
"remove"
);
console.log(elem);
}
// send the listview to read from server every time it sync
function
listviewSync()
{
this
.read();
}
<
script
type
=
"text/x-kendo-template"
id
=
"listViewTmpl"
>
<
div
class
=
"product-view k-widget"
>
<
div
class
=
"edit-buttons"
>
<
a
class
=
"k-button k-button-icontext k-edit-button"
href
=
"\\#"
><
span
class
=
"k-icon k-edit"
></
span
></
a
>
<
a
class
=
"k-button k-button-icontext k-delete-button"
href
=
"\\#"
><
span
class
=
"k-icon k-delete"
></
span
></
a
>
</
div
>
<
dl
>
<
dt
>Nominee:</
dt
>
<
dd
>#:NomineeName#</
dd
>
</
dl
>
<
input
type
=
"hidden"
name
=
"NomineeTitle"
value
=
"#:NomineeTitle#"
/>
<
input
type
=
"hidden"
name
=
"NomineeDeptId"
value
=
"#:NomineeDeptId#"
/>
<
input
type
=
"hidden"
name
=
"NomineeId"
value
=
"#:NomineeId#"
/>
</
div
>
</
script
>
@*<
div
class
=
"NomineeLeft"
>
<
a
id
=
"addNominee"
><
img
src=@Url.Content("~/img/rnr_add_item.png")
alt
=
"Add nominee"
/><
strong
>Add Nominee</
strong
></
a
>
</
div
>*@
<
div
class
=
"NomineeRight"
>
<
a
id
=
"addNominee"
title
=
"Add Nominee to the list"
><
img
src=@Url.Content("~/img/rnr_add_item.png")
alt
=
"Add nominee"
/><
strong
> Add Nominee</
strong
></
a
>
@(Html.Kendo().ListView<
RewardSystemMvc.Models.NomineeInfo
>()
.Name("NomineeList")
.TagName("div")
.ClientTemplateId("listViewTmpl")
.Editable(edit => edit.TemplateName("NomineeEditTmpl"))
//.Pageable(page => page.ButtonCount(1))
//.HtmlAttributes(new { style = "height:150px;overflow: auto;" })
.Events(ev =>
{
ev.Save("checkData");
ev.Cancel("cancelEdit");
ev.Remove("removeElem");
})
.DataSource(dataSource =>
{
dataSource.Events(ev => ev.Sync("listviewSync"));
dataSource.Model(m => m.Id("NomineeId"));
dataSource.Create(create => create.Action("NomineeListViewCreate", "Nominate"));
dataSource.Read(read => read.Action("NomineeListViewRead", "Nominate"));
dataSource.Update(update => update.Action("NomineeListViewUpdate", "Nominate"));
dataSource.Destroy(destroy => destroy.Action("NomineeListViewDestroy", "Nominate"));
})
)
</
div
>