accessing row data from custom command template

10 posts, 0 answers
  1. Luc
    Luc avatar
    27 posts
    Member since:
    Jan 2013

    Posted 19 Nov 2019 Link to this post

    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!

  2. Petar
    Admin
    Petar avatar
    436 posts

    Posted 21 Nov 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Luc
    Luc avatar
    27 posts
    Member since:
    Jan 2013

    Posted 21 Nov 2019 Link to this post

    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!



  4. Luc
    Luc avatar
    27 posts
    Member since:
    Jan 2013

    Posted 25 Nov 2019 in reply to Petar Link to this post

    Hi Petar,

     

    any progress on this?

     

    Cheers,

    Luc

  5. Petar
    Admin
    Petar avatar
    436 posts

    Posted 25 Nov 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  6. Luc
    Luc avatar
    27 posts
    Member since:
    Jan 2013

    Posted 26 Nov 2019 in reply to Petar Link to this post

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

  7. Luc
    Luc avatar
    27 posts
    Member since:
    Jan 2013

    Posted 26 Nov 2019 in reply to Petar Link to this post

    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);
  8. Petar
    Admin
    Petar avatar
    436 posts

    Posted 27 Nov 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  9. Luc
    Luc avatar
    27 posts
    Member since:
    Jan 2013

    Posted 20 Dec 2019 Link to this post

    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.

  10. Petar
    Admin
    Petar avatar
    436 posts

    Posted 20 Dec 2019 Link to this post

    Hi Luc,

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

    Regards,
    Petar
    Progress Telerik

    Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
Back to Top