Multiple Custom Commands in ClientRowTemplate with different functions attached, always fires the same function on click

2 posts, 0 answers
  1. Sergiu
    Sergiu avatar
    16 posts
    Member since:
    Jun 2012

    Posted 05 Jun 2015 Link to this post

    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!

  2. Sergiu
    Sergiu avatar
    16 posts
    Member since:
    Jun 2012

    Posted 08 Jun 2015 in reply to Sergiu Link to this post

    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.

Back to Top