This is a migrated thread and some comments may be shown as answers.

Filtering breaks when grid is inserted into Menu

0 Answers 29 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Jark Monster
Top achievements
Rank 1
Jark Monster asked on 29 Aug 2012, 01:04 PM
I have a menu that I have inserted a grid into.  I use selections in the grid to populate another grid outside of the menu.  All of this is working correctly.

However, I was hit with an extra request of making the items listed in the menu-grid filterable.  I added the tag, but unfortunately, the filter icon does not appear...

I have tried to remove this grid and place it within another area (direct copy/paste, no code change) in the document and the filtering functions correctly.

See attached pictures for extra clarification

I will also note that Sorting works correctly when the grid is inside the menu which makes me think this is in fact a bug and not intentional, but I'm not sure.

For grids within a menu, is the 'filterable()' attribute intentionally neglected?  If so, why and regardless of intentionality, will this change/be fixed in a future release?

Menu Code:
@(Html.Kendo().Menu()
    .Name("ProductBookMenu")
    .OpenOnClick(true)
    .CloseOnClick(true)
    .Items(items =>
    {
        items.Add()
            .Text("Product Book")
            .Content(Html.Partial("ProductBook", Model.ItemModelList).ToHtmlString());
    })
)

Grid Code (ProductBook.cshtml):
@model List<Company.Product.MVC.Models.ItemModel>
@using Kendo.Mvc.UI
 
<script>
function PopulateItemGrid() {
    var productBookGrid = $("#ProductBookGrid").data("kendoGrid");
    var itemGrid = $("#QuoteItemGrid").data("kendoGrid");
 
    productBookGrid.select().each(function () {
        var dataItem = productBookGrid.dataItem($(this));
        itemGrid.dataSource.add(dataItem);
    });
 
    $("#ProductBookMenu").data("kendoMenu").close("#Item1");
}
</script>
 
@(Html.Kendo().Grid(Model)
    .Name("ProductBookGrid")
    .Columns(columns =>
    {
        columns.Bound(i => i.FreightClass).Width(70);
        columns.Bound(i => i.DimensionLength).Width(70);
        columns.Bound(i => i.DimensionWidth).Width(70);
        columns.Bound(i => i.DimensionHeight).Width(70);
        columns.Bound(i => i.DimensionUnitOfMeasure).Width(70);
        columns.Bound(i => i.QuantityQuantityValue).Width(70);
        columns.Bound(i => i.QuantityUnitOfMeasure).Width(70);
        columns.Bound(i => i.WeightWeightValue).Width(70);
        columns.Bound(i => i.WeightUnitOfMeasure).Width(70);
        columns.Bound(i => i.NmfcCode).Width(75);
        columns.Bound(i => i.ItemDescription).Width(150);
    })
    .ToolBar(toolbar =>
    {
        toolbar.Custom().Text("Add").Url("#_").HtmlAttributes(new { onclick = "PopulateItemGrid()" });
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .Resizable(resize => resize.Columns(true))
    .Reorderable(reorder => reorder.Columns(true))
    .DataSource(dataSource => dataSource
        .Ajax()
    )
    .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
)

No answers yet. Maybe you can help?

Tags
Menu
Asked by
Jark Monster
Top achievements
Rank 1
Share this question
or