How to Populate Grid Filter with all possible values, when using Server Operations

[Terry]

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

[Anton Mironov]

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:

• https://dojo.telerik.com/@anton.mironov/uWuXuSeP

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