Requirement- In one of our projects we were working on Kendo UI, Angular and, jQuery where we had WCF service as the middle layer and SQL as database. Here we came across a situation where there were more than 75,000 users in the user table. While implementing kendo multiselect for an additional author on page load, drop down became unresponsive and there was an error message due to the huge size of the dataset.
We tried to implement kendo’s default server-side filtering, but we were not able to achieve a remarkable improvement in the performance.
Solution- We have customized kendo’s multiselect control as people picker, where the user writes three or more characters in the search box and presses enter. The system will make a service call and lists down the limited n.
Function Implementation and Description-
We have implemented the below steps in the function-
· We are getting below details of the users from service –
UserImageUrl
UserDisplayName
UserEmailAddress
UserDepartment
UserCountry
· Create a kendo multiselect control with the specified id and set its default selected value from the second parameter and data source with the third parameter
Function Implementation and Description-
We have implemented the below steps in the function-
- We are getting below details of the users from service
UserImageUrl
UserDisplayName
UserEmailAddress
UserDepartment
UserCountry
- Create a kendo multiselect control with the specified id and set its default selected value from the second parameter and data source with the third parameter.
· For filtering, we are calling the onFiltering function. This function prevents the default filtering behavior of multiselect and makes the global variable canFilter = true when the length of the text we search exceeds 3.
function onFiltering(e) {
e.preventDefault();
canFilter = true;
}
- When the user clicks enter, it makes a service request and sets the data source for multiselect.
- Every time the user selects a value from this multi select we are reading all the previously selected values and passing them in the service call.
- The service is returning all the matching records + all the records which were previously selected.
- After getting the data from service, we are updating the data source of multi select.
This is the method adopted to create a common generic function in a common js file. So, if you want to implement a multiselect people picker anywhere in the application, you just need to call this function with default values and control id.
