Filtering breaks when grid is inserted into Menu

1 posts, 0 answers
  1. Jark Monster
    Jark Monster avatar
    46 posts
    Member since:
    Jan 2012

    Posted 29 Aug 2012 Link to this post

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

Back to Top