Strange that I have one grid instance where I created a custom ClientRowTemplate, as I needed to display an image and other info...
I have 2 custom command buttons, one to show Item Details, and another to Copy Item details, basically pointing to distinct jQuery functions that get the id of the record in the row then redirect to a specific controller action.
It seems that regardless of which button is clicked, the first function is being fired...
Here is the grid markup...
@(Html.Kendo().Grid<LibEquipmentApp.ViewModels.SimpleItemViewModel>()
.Name("ManageItems")
.Columns(columns =>
{
columns.Bound(p => p.EItemID).Width(0).Visible(false);
columns.Bound(p => p.ECatID)
.Width(0)
.Visible(false);
columns.Bound(p => p.ImgPath)
.Filterable(false)
.Width(80)
.Title("Photo");
columns.Bound(p => p.EItemName)
.Width(240)
.Title("Item Name");
columns.Bound(p => p.SDBBarcode)
.Width(100)
.Title("Barcode #");
columns.Command(command => { command.Custom("Details").Click("showDetails"); command.Custom("Copy").Click("showCopy"); }).Width(140);
})
.ClientRowTemplate(
"<tr class='k-std' data-imgpath='#: ImgPath #'>" +
"<td >" +
"<img class='img-responsive' src='" + Url.Content("~/Images/EqImg/") + "#:data.ImgPath#' alt='#: data.EItemName #' />" +
"</td>" +
"<td class='details'>" +
"<span class='name'>#: EItemName# </span>" +
"</td>" +
"<td class='details'>" +
"#: SDBBarcode #" +
"</td>" +
"<td class='details'>" +
"<a class='k-button k-button-icontext k-grid-Details'><span>Details</span> </a>" +
"<a class='k-button k-button-icontext k-grid-Details'><span>Copy</span> </a>" +
"</td>" +
"</tr>"
)
.ClientAltRowTemplate(
"<tr class='k-altz' data-imgpath='#: ImgPath #'>" +
"<td >" +
"<img class='img-responsive' src='" + Url.Content("~/Images/EqImg/") + "#:data.ImgPath#' alt='#: data.EItemName #' />" +
"</td>" +
"<td class='details'>" +
"<span class='name'>#: EItemName # </span>" +
"</td>" +
"<td class='details'>" +
"#: SDBBarcode #" +
"</td>" +
"<td class='details'>" +
"<a class='k-button k-button-icontext k-grid-Details'><span>Details</span> </a>" +
"<a class='k-button k-button-icontext k-grid-Details'><span>Copy</span> </a>" +
"</td>" +
"</tr>"
)
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.StartsWith("Starts with")
.IsEqualTo("Is equal to")
.IsNotEqualTo("Is not equal to")
.Contains("Contains")
))
)
.Pageable()
.Navigatable()
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "height:600px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => { events.Error("error_handler"); events.RequestEnd("onRequestEnd"); })
.Model(model =>
{
model.Id(p => p.EItemID);
})
.Read(read => read.Action("Items_Read", "Admin"))
)
)
And here are the functions....
<script type="text/javascript">
function showDetails(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var id = dataItem.EItemID;
$.ajax({
url: "/Admin/ManageItem",
//send current record ID to the server
data: { id: dataItem.EItemID },
error: function () {
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);
}
},
success: function (data) {
window.location = '/Admin/ItemDetails?id=' + id;
}
})
}
function showCopy(e) {
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var id = dataItem.EItemID;
$.ajax({
url: "/Admin/CopyItem",
//send current record ID to the server
data: { id: dataItem.EItemID },
error: function () {
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);
}
},
success: function (data) {
window.location = '/Admin/CopyItem?id=' + id;
}
})
}
function selectedIndexChanged(e) {
var value = this.value();
var grid = $("#ManageItems").data("kendoGrid");
if (value) {
grid.dataSource.filter({ field: "ECatID", operator: "eq", value: value });
} else {
grid.dataSource.filter({});
}
return;
}
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 onRequestEnd(e) {
$(".ref-success").load(window.location + " .ref-success")
}
</script>
The showDetails() function is always being fired... Any help would be greatly appreciated! Thanks!
1 Answer, 1 is accepted
Rank 2
I figured this one out... When using AJAX for the datasource binding, the only way to have custom routes is by having a link to the specific controller action embedded in the template, and not by calling a different function on click...
As such, on the custom commands I removed the Click function calls and hardcoded the URLS as follows:
"<a class='k-button k-button-icontext k-grid-Details' href='"+ Url.Action("ManageItem", "Admin") + "?id=#: data.EItemID #'>Details</a>"
"<a class='k-button k-button-icontext k-grid-Details' href='"+ Url.Action("CopyItem", "Admin") + "?id=#: data.EItemID #'>Copy</a>"
this did the trick, if anyone finds it useful.