Dropdown menu in grid rows

[Bil]

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);
        })
    )

[Bil]

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

[Bil]

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.

[Alexander Valchev]

Hello FortisAlberta,

I found an example which demonstrates a similar case:

• http://jsbin.com/osixad/5/edit

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

 

 

[Bil]

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.

[Bil]

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

[Alexander Valchev]

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

 

 

[Bil]

Alexander,

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

Thanks!