DropDownList - change ServerFiltering based on initial call to load data

[Ursus]

Hi

I am using the @Html.Kendo.DropDownList in a MVC application (.NET Core). The code works perfectly. I have a weird request though. I get my data from a backend system which cannot filter any fields that are less than 1001 entries long (long story but unfortunately true) - so this is what happens: the page loads and then calls source.read to get the first 1001 entries - this works perfectly each time. If the user then does as typeahead search in a field that is < 1001 entries the search does not work i.e. the DB returns all the entries again. If there are more that 1001 entries all is well. My question is this: is there a way for me to change the    

    .ServerFiltering(true);

to 

    .ServerFiltering(false);

at runtime? 

 

My idea is that once the initial data has been loaded I check how many entries have been received and then set the .ServerFiltering flag appropriately. 

 

Alternatively I could load all the dropdown first (before showing the page) and then have an if statement on the .cshtml file => this would/has worked but it experience is worse for the users - using ServerFiltering (true) loads the page and the users see the spinning blue thingy and know that data is being loaded (I can have up to 100 dropdown on the page (the users decide how many per page themselves)), otherwise, once they have pressed open they need to wait while the dropdown are being loaded.

 

Thank you in advance for any help given.

Ursus

 

@(Html.Kendo().DropDownList()
                                           .Name(kendoFieldName)
                                           .MinLength(3)
                                           .Value(Model.Fields[i].Values[j])
                                           .HtmlAttributes(new {style = "width: 100%"})
                                           .Filter(FilterType.Contains)
                                           .DataSource(source =>
                                           {
                                               source.Read(read =>
                                               {
                                                   read.Action("TypeAhead", "Document", new
                                                   {
                                                       docId = Model.DocId,
                                                       docType = Model.DocType,
                                                       fieldNumber = Model.Fields[i].FieldIndex, 
                                                       row = j
                                                   });
                                               })
                                               .ServerFiltering(true);
                                           })
                                    )

 

 

[Plamen]

Hello Ursus,

In such case you can just set the .ServerFiltering(false) that will still trigger the initial read request. You can pass the desired parameters to is so the initial filtering is correct and load all the items that you need on the client and then DropDownList will just use its internal client filtering by default.

Regards,
Plamen
Progress Telerik

[Ursus]

Thank you for your answer but I think I did not get my idea across correctly. 

I want to change the .ServerFiltering to true in certain cases after the initial read request - i.e. if I get 1000 records back from the initial read request (in my case this means that there are more records) - I then need to set .ServerFiltering to true for *this* field. Is that explained better? 

[Ivan Danchev]

Hi Ursus,

Thank you for providing more details on your scenario.

You can enable/disable ServerFiltering based on the number of returned records, as shown in the snippet below:

Handle the DropDownList's DataBound event:

.Events(e =>
{
   e.DataBound("onDataBound");
})

In the handler set the dataSource serverFiltering option conditionally:

function onDataBound(e) {
	var records = e.sender.dataSource.data().length;

	if (records > 1001) {
		e.sender.dataSource.options.serverFiltering = true;
	}
	else {
		e.sender.dataSource.options.serverFiltering = false;
	}
}

Give this a try and let us know whether it results in the expected behavior.

Regards,
Ivan Danchev
Progress Telerik

[Ursus]

Hi Ivan

Thank you very much, that solved my problem 😊 

Cheers

Ursus