This is a migrated thread and some comments may be shown as answers.

Best way to handle filter as you type with large dataset?

6 Answers 604 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Kjell
Top achievements
Rank 1
Kjell asked on 27 Jan 2012, 11:54 PM
Up until now I have been using your Silverlight tools /w a vb.net service as the backend.  I have a couple dropdown menus which can have up to 100,000 values in them.  I don't populate those lists or retrieve the data until the user starts to type.  I do that by handling the onkeyDown event and quering the webservice, which returns 20 results at a time.

I just started playing with your kendo combobox, I am not that good at javascript but so far it has been going ok, I am impressed with the tools.  I have my menus populating properly, from a REST web service, using mostly my same back end code, but at the moment I am not doing any filtering.  I know that I can filter at the combobox level, but how do I filter at the webservice so it doesn't have to return all the data?  Sorry if I missed this in the documentation, I am very new to this and appreceivate your assistance.

6 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 31 Jan 2012, 10:08 AM
Hi Kjell,

 
In order to achieve your goal you will need to set false to the autoBind property and define the minLength property. You also will need to enable serverPaging of the DataSource. You can also check this online demo.

Regards,
Georgi Krustev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Kjell
Top achievements
Rank 1
answered on 05 Feb 2012, 10:41 PM
How does the filter value get passed to the web service?  For example to query my service in the browser, the url is   'wsRest.svc/clients/{filter}' .... The code below works for a jquery autocomplete box, but I am not sure how to translate that over to KendoUI.  I do have it working fine without a filter, so I don't think there is a problem with the data being returned, but no luck so far with the filtering. 

$("#searchclient").width(350).height(30).autocomplete({
            source: function (request, response) {
                 
                var url = "wsRest.svc/clients/" + $("#searchclient").val();
 
                $.ajax({                    
                    url: url,
                    dataType: "json",
                    success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                label: item.text,
                                value: item.text
                            }
                        }));
                    },
                    error: function (xhr, textStatus, errorThrown) {
                        alert(xhr.status);
                        alert(errorThrown);
                    }
                });
            },
            minLength: 1
        });

0
Georgi Krustev
Telerik team
answered on 06 Feb 2012, 12:06 PM
Hello,

 
The dataSource will append field, operator and value to the URL as a query params:

  1. filter[filters][0][field]:
    Name (dataTextField)
  2. filter[filters][0][operator]:
    contains
  3. filter[filters][0][value]:
    T (input value)

One options is to handle this params on the server manually. Other option is to use data property of the transport.read and pass additional values to the server. Please note that values in the data will be append to the query string.

Kind regards,
Georgi Krustev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Kjell
Top achievements
Rank 1
answered on 06 Feb 2012, 07:14 PM

Thanks, I am starting to understand now.  Sorry for being dense but I just need a little more help, I think the piece I am missing is how do I define my URITemplate to properly pick up the filter?


<OperationContract()> _
<WebInvoke(Method:="GET", BodyStyle:=WebMessageBodyStyle.Bare, ResponseFormat:=WebMessageFormat.Json, UriTemplate:="clients/?value={filter}")>
Function LookupClients(ByVal filter As String) As IList(Of wsRest.GenericMenuItem)


I tried a few different things but it always comes in as "Nothing"

0
Accepted
Georgi Krustev
Telerik team
answered on 08 Feb 2012, 10:35 AM
Hello Kjell,

 
One possible options is to change the Uri template like this:

UriTemplate:="clients/?filter[filters][0][value]={filter}"

The other options is to use current UriTemplate and use data property of the DataSource:
var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            // the remote service URL
            url: "http://search.twitter.com/search.json",
            // additional parameters sent to the remote service
            data: {
                value: function() {
                    return $("#searchFor").val();
                }
            }
        }
    }
})


Regards,
Georgi Krustev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Kjell
Top achievements
Rank 1
answered on 08 Feb 2012, 08:03 PM
Thanks Georgi.  I used your second suggestion and then changed it from a combobox to an autocomplete, it is working properly now :)
Tags
ComboBox
Asked by
Kjell
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Kjell
Top achievements
Rank 1
Share this question
or