accessing row data from custom command template

[Luc]

Hello, 

I have a grid defined like this:

01.@(Html.Kendo().Grid(data)
02.      .Name("Results")
03.      .Pageable()
04.      .Sortable()
05.      .Events(e => e.DataBound("onSearchResultsDataBound"))
06.      .Columns(columns =>
07.      {
08.        columns.Bound(r => r.Name).Title("The Name").Width(60);
09.        columns.Bound(r => r.Publisher).Title("A Publisher").Width(60);
10.        columns.Command(c => c.Custom("CustomButton").TemplateId("commandsTemplate")).Width(70);
11.      })
12.)
13.
14.<script id="commandsTemplate" type="text/x-kendo-template">
15.    <div class='dropdown'>
16.        <button class='btn' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'><i class='fas fa-ellipsis-h'></i> </button>
17.        <div class='dropdown-menu dropdown-menu-right' aria-labelledby='dropdownMenuButton'>
18.            @(Html.ActionLink("Edit", "Details", "Blabla", new { id = "#: ID#" }, new { @class = "dropdown-item" }))
19.        </div>
20.    </div>
21.</script>

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!

[Petar]

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

[Luc]

Hi Petar and thanks for the answer!



I have updated the project which you will find attached to this post. I've setup the template so that the command column looks the way I want. There's a little bug I don't know why, it works in my main project, but when you click on the ellipsis the first time it doesn't trigger the dropdown, so just click twice, and then you see the dropdown with the edit item, and as you can see from the code I would like the edit link to direct me to /Home/Details/{id} where id is the OrderID of the row.



Unfortunately I am not allowed to attach the new project because it is too large. I am apparently only allowed to attach up to 2MB. So I did a diff of your original project with mine and here are the changes:

Views/Shared/_Layout.cshtml      modified

Views/Home/Index.cshtml            modified

Views/Home/Details.cshtml          new

Controllers/HomeController.cs     modified

Content/main.css                          new

so just take my files and put them in your solution and you should be able to get what I am getting.



Thanks!

[Luc]

Hi Petar,

 

any progress on this?

 

Cheers,

Luc

[Petar]

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

[Luc]

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 ;(

[Luc]

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...

 

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

[Petar]

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

[Luc]

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:

01.@(Html.Kendo().Grid<SearchResultModel>()
02.    .Name("Results")
03.    .Pageable()
04.    .Sortable()
05.    .Selectable()
06.    .Resizable(resize => resize.Columns(true))
07.    .Events(e => e.DataBound("onSearchResultsDataBound").Change("onSearchResultsChange"))
08.    .Columns(async columns =>
09.    {
10.      columns.Bound(r => r.A).Title().Width(100);
11.      columns.Bound(r => r.B).Title().Width(100);
12.      columns.Bound(r => r.C).Title().Width(100);
13.      columns.Bound(r => r.D).Title().Width(220);
14.      columns.Command(c => c.Custom("CustomButton").TemplateId("commandsTemplate")).Width(70);
15.    })
16.    .DataSource(dataSource => dataSource
17.          .Ajax()
18.          .PageSize(Constants.DefaultPageSize)
19.          .Sort(o => o.Add(m => m.Organization))
20.          .Read(read => read.Action(nameof(BlablaController.Query), BlablaController.ControllerName, new
21.          {
22.            culture = Localizer.CultureName
23.          }).Data("onResultsGridAdditionalData"))
24.    ))
25.
26.
27.<script id="commandsTemplate" type="text/x-kendo-template">
28.    <div class='dropdown'>
29.        <button class='btn' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'><i class='fas fa-ellipsis-h'></i> </button>
30.        <div class='dropdown-menu dropdown-menu-right' aria-labelledby='dropdownMenuButton'>
31.            <a href="" role="editButton" class="dropdown-item">Edit</a>
32.        </div>
33.    </div>
34.</script>
35.
36.
37.<script>
38.  function onSearchResultsChange() {
39.    var selection = this.select();
40.    var closestTr = $("tr[data-uid='" + selection.data().uid + "']");
41.    var editLink = closestTr.children().last().find("a[role='editButton']")[0];
42.    editLink.href = buildLink(this.dataItem(selection));
43.  }
44.</script>

 

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.

[Petar]

Hi Luc,

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

Regards,
Petar
Progress Telerik