Bug in Column filter when Title is set. Order is wrong

1 Answer 96 Views
Grid
Sean
Top achievements
Rank 1
Sean asked on 29 May 2021, 02:46 PM

When I dynamically add in a column and set the title the order in the column filter is wrong. Clicking on "1" in the Column filter disabled "4" which is the 5th column in the loop. However if I remove the Title, then it works as expected. I need to set the Title for my usage. Originally I tried setting the title to an actual text value but that is when I found the order was messed up.


            @(Html.Kendo().Grid<InventoryItemViewModel>()
    .Name("InventoryItemGrid")
    .Columns(columns =>
    {
    columns.Bound(c => c.InventoryItemId).Title("ID").ClientTemplate("#=kendo.toString(InventoryItemId, '000000')#").Media("(min-width: 1200px)").Filterable(ftb => ftb.Multi(true));
    columns.Bound(c => c.Name).Media("(min-width: 1200px)").Filterable(ftb => ftb.Multi(true));
    columns.Bound(c => c.Description).Title("Description").Media("(min-width: 1200px)").Filterable(ftb => ftb.Multi(true));
    columns.Bound(c => c.InventoryItemTypeName).Title("Type").Media("(min-width: 1200px)").Filterable(ftb => ftb.Multi(true));
    columns.Bound(c => c.WetTonnes).ClientTemplate("<span class='source-#=WetTonnesSource#'>#=WetTonnes#</span>").Media("(min-width: 1200px)");
    columns.Bound(c => c.MoisturePercent).ClientTemplate("<span class='source-#=MoisturePercentSource#'>#=MoisturePercent#</span>").Media("(min-width: 1200px)");
    columns.Bound(c => c.CoarseFineRatio).ClientTemplate("<span class='source-#CoarseFineRatioSource#'>#=CoarseFineRatio#</span>").Title("Coarse Percentage").Media("(min-width: 1200px)");
    for (int x = 0; x < 6; x++)
    {
        columns.Bound(c => x).Title(x.ToString()).ClientTemplate(x.ToString());
    }


    columns.Bound(c => c.IsBlended).Media("(min-width: 1200px)").Filterable(ftb => ftb.Multi(true));
    columns.Bound(c => c.Status).ClientTemplate("#=statusTemplate(data)#").Media("(min-width: 1200px)").Filterable(ftb => ftb.Multi(true));

    columns.Bound(c => c.CreatedDate).Media("(min-width: 1200px)").Format("{0:g}").Hidden(true);
    columns.Bound(c => c.CreatedBy).Media("(min-width: 1200px)").Hidden(true);
    columns.Bound(c => c.LastUpdatedDate).Media("(min-width: 1200px)").Format("{0:g}").Hidden(true);
    columns.Bound(c => c.LastUpdatedBy).Media("(min-width: 1200px)").Hidden(true);
    columns.Template(@<text></text>).ClientTemplate("#=resColTemplate(data)#").Title("Details").Media("(max-width: 1200px)");
    })
    .Sortable()
    .Scrollable(s=>s.Height("auto"))
    .Filterable()
    .ColumnMenu(c=>c.Columns(true))
    .Excel(excel => excel
        .FileName("Inventory Item Export.xlsx")
        .Filterable(true)
        .AllPages(true)
        .ProxyURL(Url.Action("Excel_Export_Save", "InventoryItems"))
    )
    .ToolBar(t=>
    {

        t.Template(@<text>
            <div class="toolbar">
                 <label class="k-grid-title-label">Items</label>
<div class="k-grid-toolbar-btns">
<button type="button" class="btn btn-secondary btn-sm" id="ExcludeFilter" data-exclude-state="excluded">
<i class="fa fa-filter" aria-hidden="true"></i>
Exclude Archived
</button>
                     <button id="export" class="btn btn-secondary btn-sm"><i class="fas fa-file-excel"></i></button>
@if (PLS.Library.Authorize.AuthorizeUser(PLS.Models.Enum.AccessLevel.Create, PLS.Models.Enum.SystemSection.Inventory))
{
<a class="btn btn-primary btn-sm"  href="@Url.Action("Create", "InventoryItems", new { Area = "Inventory" })">
Create
</a>
}
</div>
<div class="k-grid-toolbar-search">
<span class="k-textbox k-grid-search k-display-flex">
<input autocomplete="off" placeholder="Search..." title="Search..." class="k-input">
<span class="k-input-icon"><i class="fa fa-search" aria-hidden="true"></i></span>
</span>
</div>
           </div>
            </text>);
    })
    .Search(search =>
    {
        search.Field(f => f.InventoryItemId);
        search.Field(f => f.Name);
        search.Field(f => f.Description);
        search.Field(f => f.InventoryItemTypeName);
        search.Field(f => f.Status);
        search.Field(f => f.WetTonnes);
        search.Field(f => f.CoarseFineRatio);
        search.Field(f => f.MoisturePercent);
    })
    .Pageable(pageable => pageable
        .Refresh(true)
        .PageSizes(true)
        .ButtonCount(5)
    )
    .Selectable(selectable =>
    {
        selectable.Mode(GridSelectionMode.Single);
        selectable.Type(GridSelectionType.Row);
    })
    .Resizable(resize => resize.Columns(true))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("InventoryItems_Read", "InventoryItems"))
        .Sort(sort =>
        {
            sort.Add(f => f.StatusId).Ascending();
            sort.Add(f => f.CreatedDate).Ascending();
        })
        .PageSize(10).ServerOperation(false)
        .Filter(f => f.Add(x => x.Status).IsNotEqualTo("Archived"))
    )
)


 

1 Answer, 1 is accepted

Sort by
0
Anton Mironov
Telerik team
answered on 02 Jun 2021, 11:57 AM

Hi Sean,

Thank you for the code snippet and details provided.

I tried to reproduce the described faulty behavior and on my side, the Column menu is working as expected. Find attached a sample project with the needed implementation included.

The fastest route to getting you up and running is if you could provide a runnable, isolated, sample project. Examining this project will let us replicate the issue locally and further troubleshoot it. The attached project could be used as a template.

Looking forward to hearing back from you.

 

Kind Regards,
Anton Mironov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Sean
Top achievements
Rank 1
Answers by
Anton Mironov
Telerik team
Share this question
or