How to Populate Grid Filter with all possible values, when using Server Operations
1 Answer 12 Views
Terry
Top achievements
Rank 1
Terry asked on 26 May 2021, 09:32 PM

I have a grid which has ServerOperations set to TRUE.  The total number of records is very large, so we're only displaying 20 at a time.  One of the columns contains a filter dropdown containing a list of checkboxes for selecting specific values to filter on.  I want the Filter dropdown to include ALL possible values for the user to choose from...not just the ones that are returned for each page.  Is there a recommended approach for doing this?  (I have provided the grid initialization code below...)

 

                @(Html.Kendo().Grid<MemberPopCodeModel>()
                 .AutoBind(false)
                 .Name("MemberPopCodeGrid")
                 .HtmlAttributes(new { @class = "editor-grid" })
                 .Columns(columns =>
                 {
                     columns.Bound(e => e.PopCode.FormattedText).Filterable(ftb => ftb.Multi(true).CheckAll(true).Search(true).BindTo(memberPopCodeListItems)).Sortable(true)
                            .HtmlAttributes(new { @class = "ellipsis-nowrap", title = "#= PopCode.FormattedText #" })
                            .HeaderHtmlAttributes(new { @title = HtmlLocaleHelper.GetLabelTooltip(ManagedCareConstants.Localization.Labels.Fields.PopCode).ToString() })
                            .Title(HtmlLocaleHelper.GetLabelText(ManagedCareConstants.Localization.Labels.Fields.PopCode).ToHtmlString());
                     columns.Bound(e => e.EffectiveDate).ClientTemplate("#= formatReceivedDate(StrEffectiveDate) #").Filterable(true).Sortable(true)
                             .HtmlAttributes(new { @class = "ellipsis-nowrap", title = "#= kendo.format('{0:d}', kendo.parseDate(StrEffectiveDate)) #" })
                             .Filterable(a => a.UI("datePicker"))
                             .HeaderHtmlAttributes(new { @title = HtmlLocaleHelper.GetLabelTooltip(ManagedCareConstants.Localization.Labels.Fields.MemberPopCodeEffectiveDate).ToString() })
                             .Title(HtmlLocaleHelper.GetLabelText(ManagedCareConstants.Localization.Labels.Fields.MemberPopCodeEffectiveDate).ToHtmlString());
                     columns.Bound(e => e.EndDate).ClientTemplate("#= formatReceivedDate(StrEndDate) #").Filterable(true).Sortable(true)
                             .HtmlAttributes(new { @class = "ellipsis-nowrap", title = "#= kendo.format('{0:d}', kendo.parseDate(StrEndDate)) #" })
                             .Filterable(a => a.UI("datePicker"))
                             .HeaderHtmlAttributes(new { @title = HtmlLocaleHelper.GetLabelTooltip(ManagedCareConstants.Localization.Labels.Fields.MemberPopCodeEndDate).ToString() })
                             .Title(HtmlLocaleHelper.GetLabelText(ManagedCareConstants.Localization.Labels.Fields.MemberPopCodeEndDate).ToHtmlString());
                     columns.Bound(e => e.Status).Filterable(ftb => ftb.Multi(true).CheckAll(true).BindTo(new[]{
                                                  new { Status = statusCurrent },
                                                  new { Status = statusFuture },
                                                  new { Status = statusPast },
                                                  new { Status = statusInvalid }
})
                     ).Sortable(false)
                             .HeaderHtmlAttributes(new { @title = HtmlLocaleHelper.GetLabelTooltip(ManagedCareConstants.Localization.Labels.Fields.GlobalPeriodStatus).ToString() })
                             .Title(HtmlLocaleHelper.GetLabelText(ManagedCareConstants.Localization.Labels.Fields.GlobalPeriodStatus).ToHtmlString());
                 })
.Scrollable()
.Resizable(r => r.Columns(true))
.Sortable(s => s
.AllowUnsort(false)
.SortMode(GridSortMode.SingleColumn))
.Events(e => e
.DataBound("popCodeGridDataBound")
.DataBinding("popCodeGridDataBinding")
.FilterMenuInit("onFilterMenuInit")
)
.Filterable(filterable => filterable
.Extra(false)
.Messages(msg => msg.Clear(HtmlLocaleHelper.GetLabelText(CoreConstants.Localization.Labels.Grid.Operators.Clear).ToString()))
.Operators(operators => operators
.ForDate(date => date.Clear()
    .IsEqualTo(HtmlLocaleHelper.GetLabelText(CoreConstants.Localization.Labels.Grid.Operators.EqualTo).ToString())
    .IsGreaterThanOrEqualTo(HtmlLocaleHelper.GetLabelText(CoreConstants.Localization.Labels.Grid.Operators.GreaterThanOrEqualTo).ToString())
    .IsLessThanOrEqualTo(HtmlLocaleHelper.GetLabelText(CoreConstants.Localization.Labels.Grid.Operators.LessThanOrEqualTo).ToString())
    )
)
)
.DataSource(d => d.Ajax()
.ServerOperation(true)
.Events(e => e.Error("onWebApiError"))
.Read(read => read.Url(
ContextHelper.BuildWebApiUrl(ManagedCareConstants.WebApi.Controllers.ManagedCare, ManagedCareConstants.WebApi.Actions.GetMemberPopCode)
).Type(HttpVerbs.Get)
)
.Model(m => m.Id(e => e.PopCodeId))
.Sort(s =>
{
    s.Add("EndDate").Descending();
    s.Add("EffectiveDate").Descending();
    s.Add("PopCode.FormattedText").Ascending();
})
)
.Pageable(pageable => pageable
    .Refresh(true)
    .PageSizes(true)
    .ButtonCount(3)
    .Messages(messages =>
    {
        messages.ItemsPerPage(HtmlLocaleHelper.GetLabelText(CoreConstants.Localization.Labels.Grid.ItemsPerPage).ToString().Trim());
        messages.Next(HtmlLocaleHelper.GetLabelText(CoreConstants.Localization.Labels.Grid.NextPage).ToString().Trim());
        messages.Last(HtmlLocaleHelper.GetLabelText(CoreConstants.Localization.Labels.Grid.LastPage).ToString().Trim());
        messages.Previous(HtmlLocaleHelper.GetLabelText(CoreConstants.Localization.Labels.Grid.PreviousPage).ToString().Trim());
        messages.First(HtmlLocaleHelper.GetLabelText(CoreConstants.Localization.Labels.Grid.FirstPage).ToString().Trim());
        messages.Refresh(HtmlLocaleHelper.GetLabelText(CoreConstants.Localization.Labels.Grid.Refresh).ToString().Trim());
        messages.Display(HtmlLocaleHelper.GetLabelText(CoreConstants.Localization.Labels.Grid.Display).ToString().Trim());
        messages.MorePages(HtmlLocaleHelper.GetLabelText(CoreConstants.Localization.Labels.Grid.MorePages).ToString().Trim());
        messages.Empty(HtmlLocaleHelper.GetLabelText(CoreConstants.Localization.Labels.Grid.Empty).ToString().Trim());
    })
)
.Resizable(r => r.Columns(true))
.Scrollable()
.Selectable(se => se.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
.Sortable(s => s
.AllowUnsort(false)
.SortMode(GridSortMode.SingleColumn)
)
.Selectable(se => se.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
    )

1 Answer, 1 is accepted

Sort by
0
Anton Mironov
Telerik team
answered on 31 May 2021, 02:56 PM

Hello Terry,

Thank you for the code snippets and details provided.

In order to get you up and running, I made a dojo example with the needed implementation. Here is the sample:

In the example above, the server operations are on and the "Last Name" filter is populating with all options from all pages.

Make the needed tests locally and let me know if further assistance is needed.

 

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
Terry
Top achievements
Rank 1
Answers by
Anton Mironov
Telerik team
Share this question
or