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:
Grid Code (ProductBook.cshtml):
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))
)