Hello, 

I have a grid defined like this:

And I would like to be able to access the ID of the items in my template. This doesn't work at the moment and I'm unable to find an example that does what I'm trying to achieve.

Is there any way to achieve my requirement? So basically the command column contains a button with the ellipsis icon and when we click this button get a dropdown which contains some actions that are possible, such as edit, and if I click on edit, I should be redirected to the details action of the controller for the correct ID. You can see in attachment what it looks like. So the look and feel is fine, it's just being able to get the ID to create the action link correctly.

Thanks!

Hi Luc,

I am not sure I've understood the exact use-case scenario of the template used for the custom command button. I am attaching a project that uses a popup window to display the row data of a given row the template that is loaded is defined as follows:

<script type="text/x-kendo-template" id="template">
    <div id="details-container">
        <h2>#= OrderID # #= Freight #</h2>
        <em>#= OrderDate #</em>
        <dl>
            <dt>ShipName: #= ShipName #</dt>
            <dt>ShipCity: #= ShipCity #</dt>
        </dl>
        <a href="/Blabla/Details/id=#=OrderID#">Edit</a>
    </div>
</script>

The marked in the yellow line is the code that will be generated from:

@(Html.ActionLink("Edit", "Details", "Blabla", new { id = "#: OrderID#" });

The marked in yellow line demonstrates the way we can build a link that contains a data passed to a Kendo template.  

Please edit the attached project in a way the scenario you are working on can be reproduced and send it back to me, so I could further investigate the case and provide relevant feedback. 

Regards,
Petar
Progress Telerik

Hi Petar,

any progress on this?

Cheers,

Luc

Hi Luc,

The desired functionality is not supported by the Grid component. The closest to the desired functionality that could be implemented uses the approach demonstrated in this demo. If the custom command is defined as:

columns.Command(c => c.Custom("CustomButton").Click("onClick")).Width(180);

Then on click on the CustomButton in the Grid, we will be able to get the current Grid row using the following function:

    function onClick(e) {
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        console.log(dataItem.OrderID);
    }

There is a Feature request submitted about the functionality you asked for. This request could be found on this link: https://feedback.telerik.com/kendo-jquery-ui/1359161-pass-data-row-data-field-data-to-the-template-for-custom-command-in-the-grid. You can vote for the request. The more votes a given request has, the bigger the chance for its implementation is. 

I am attaching a project demonstrating the described above functionality. When you click on a given CustomButton the ProductID of the row will be printed in the console. This id could be used for further navigation. 

Regards,
Petar
Progress Telerik

thanks for the reply Petar :)

That feature request being 5 years old, I guess the chance of it ever seeing the day is rather slim ;(

one more thing then regarding this topic: is it possible to display buttons that just have an icon and no text ? Apparently telerik wants me to provide a name in Custom(), if I use \0 then there's nothing displayed but the click event does not work. If i use space and tab, both click events are called. If I use the text method with an empty string then it still displays what I passed to the Custom() method...

Hi Luc,

The desired functionality could be realized with a little hack. If we define the custom commands like:

        columns.Command(c =>
            {
              c.Custom("c1").Click("onResultGridEdit").IconClass("k-icon k-i-copy");
              c.Custom("c2").Click("onResultGridEdit1").IconClass("fas fa-check-circle");
            }).Width(70);

Then on the DataBound event, we can do the following:

        $.each($(".k-command-cell .k-grid-c1"), function (index, value) {
            value.innerHTML = value.innerHTML.slice(0, value.innerHTML.length - 2);
        })

        $.each($(".k-command-cell .k-grid-c2"), function (index, value) {
            value.innerHTML = value.innerHTML.slice(0, value.innerHTML.length - 2);
        })

Where the marked in yellow is the length of the symbols in each name of a custom command. In this example the names are "c1" and "c2" and this is why the yellow highlighted numbers above are "2". 

I am attaching a modified version of the previous project that demonstrates the usage of the above code. 

I hope the above resolves the issue with the "No name" commands.

Regards,

Petar
Progress Telerik

just in case someone is interested in a solution for my initial question, I ended up being able to implement it, and here's how I did it:

I guess if my grid was not selectable, it would have been more complicated, but this solution works pretty well for my use case.

The buildLink javascript function can then do whatever you want based on your data item.

Hi Luc,

Thank you for sharing the solution with the community! If will surely be useful for someone. 

Regards,
Petar
Progress Telerik