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"><imgsrc=@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>