Dropdown menu in grid rows

8 posts, 1 answers
  1. Bil
    Bil avatar
    27 posts
    Member since:
    Aug 2012

    Posted 12 Mar 2014 Link to this post

    Hi guys,

    I'm trying to embed a dropdown menu (bootstrap) inside a grid on the first column of each bound row (basically creating a menu for each item). It works but the menu is hidden behind the next row down so there's something to do with the markup of the grid overlapping the markup of the menu.

    Here's the markup:

    @(Html.Kendo().Grid<Listing>()
            .Name("grid")
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("RefreshTable", "HomeController"))
            )
            .Columns(columns =>
            {
                columns.Bound(x => x.Number)
                    .Width(120)
                    .Template(@<text></text>)
                    .ClientTemplate(
                        "<div class='btn-group'>" +
                        "<button type='button' class='btn btn-default btn-sm dropdown-toggle' data-toggle='dropdown'><span id='selectedTagType'>#= Number#</span> <span class='caret'></span></button>" +
                        "<ul class='dropdown-menu' role='menu'>" +
                        "<li><a onclick='editRecord();'></a>Edit</li>" +
                        "<li><a onclick='activateRecord();'></a>Activate</li>" +
                        "<li><a onclick='transferRecord();'></a>Transfer</li>" +
                        "</ul>" +
                        "</div>"
                    );
                columns.Bound(x => x.TypeDescription);
                columns.Bound(x => x.PhoneNumber);
            })
        )
  2. Bil
    Bil avatar
    27 posts
    Member since:
    Aug 2012

    Posted 13 Mar 2014 Link to this post

    Here's an image of the menu rendered so you can see it's there in the page when I click on the button but hidden behind the rows of the grid. I've tried doing things like tweaking the z-index and other things but the grid keeps rendering on top of the menu.

    Thanks
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Bil
    Bil avatar
    27 posts
    Member since:
    Aug 2012

    Posted 13 Mar 2014 Link to this post

    Here's an image of the menu rendered in Chrome. The menu is there (after clicking on the button in the first column) but hidden behind the grid. I've tried things like setting the z-index but nothing is allowing me to get the menu to display over top of the grid.

    Thanks.
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 14 Mar 2014 Link to this post

    Hello FortisAlberta,

    I found an example which demonstrates a similar case:
    The important part is the style section:
    #grid .k-grid-content, #grid tr td {
        overflow:visible;
    }
      
    #grid .k-grid-header {
        padding-right: 0 !important;
    }

    First rule will make the menu visible, the second one is used to fix the layout of the Grid (.k-grid-content container does not have a scroller now).

    The trick is to remove the overflow: hidden rule applied to Grid cells which prevents the menu from being visible.
    I hope this information will help.

    Regards,
    Alexander Valchev
    Telerik
     

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

     
  6. Bil
    Bil avatar
    27 posts
    Member since:
    Aug 2012

    Posted 14 Mar 2014 in reply to Alexander Valchev Link to this post

    Hi Alexander,

    Thanks for the link. This helps (I was able to get the menu to appear). The bootstrap menu isn't quite working so I've changed it to use the Kendo menu which is close enough. The problem is that the example shows a fixed text for each kendo menu item whereas I'm trying to set the menu text for each row to the value of the first column in that row. I'm sure the kendo grid documentation will help but trying to figure that out.
  7. Bil
    Bil avatar
    27 posts
    Member since:
    Aug 2012

    Posted 14 Mar 2014 in reply to Alexander Valchev Link to this post

    Getting menu to appear in a grid seems okay but frankly it just feels like a lot of javascript hacking going on here. I was able to get the menu to appear but two unanswered questions are a) how do I get the value from the first column of each row to populate the each menu as the text and b) how do I get the selected rows data when selecting a menu operation.

    Here's the markup that works but like I said, it all feels like a lot of hacking, string compares, etc. The MVC wrappers should allow me to do this in my Razor so I have access to my view models, etc. but I can't figure how to do this (embedding a Menu inside a Grid column).

    This doesn't seem like an overly complicated request (having a set of operations applied to each row of data) so maybe I'm using the wrong components to do this? I don't see too many options with grid columns other than a text template (and action but they seem to only be tied to editing records, not custom actions).

    In any case, here's the updated markup that gets me a menu applied to each row but no idea how to get the values out of the grid other than doing tedious jquery traversal.

    @using Kendo.Mvc.UI
     
    <style>
        #grid .k-grid-content, #grid tr td
        {
            /* this makes the menu visibile */
            overflow: visible;
        }
    </style>
     
    @section grid
    {
        @(Html.Kendo().Grid<CustomerViewModel>()
              .Name("grid")
              .DataSource(dataSource => dataSource
                  .Ajax()
                  .Read(read => read.Action("RefreshTable", "Customer"))
              )
              .Columns(columns =>
              {
                  columns.Bound(x => x.Name)
                      .Width(120)
                      .ClientTemplate("<ul class='menu'></ul>");
                  columns.Bound(x => x.PhoneNumber);
              })
              .Events(events => events.DataBound("buildMenu"))
            )
     
    }
     
    @section scripts
    {
        <script>
            function buildMenu() {
                $(".menu").kendoMenu({
                    dataSource: [{
                        text: "foo", // TODO how to get the rows first column value here?
                        items: [
                            { text: "Operation 1" },
                            { text: "Operation 2" },
                            { text: "Operation 3" }
                        ]
                    }],
                    select: function(e) {
                        var operation = $(e.item).text();
                        // TODO how to get the current row data here?
                        switch(operation) {
                            case "Operation 1":
                                alert("Delete");
                                break;
                                 
                            case "Operation 2":
                                alert("Add");
                                break;
                                 
                            case "Operation 3":
                                alert("Edit");
                                break;
                        }
                    }
                });
            }
        </script>
    }
  8. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 18 Mar 2014 Link to this post

    Hello FortisAlberta,

    This help article explains how to use a Kendo UI widget (menu) inside a Grid client column template (Razor syntax).
    I updated the jsBin sample to demonstrate how to get the grid row, dataItem and menu's selected operation inside the select event. Please check it and let me know if you have any further questions: http://jsbin.com/osixad/40/edit

    Regards,
    Alexander Valchev
    Telerik
     

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

     
  9. Bil
    Bil avatar
    27 posts
    Member since:
    Aug 2012

    Posted 26 Mar 2014 in reply to Alexander Valchev Link to this post

    Alexander,

    Ahh, perfect. That's exactly what I need. I was missing the .ToClientTemplate part and didn't realize it was there.

    Thanks!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready