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.

shruti vyas

Shruti Vyas

Shruti is a technical consultant at Advaiya. With over nine years of experience in the IT industry, Shruti has a passion for data and an ability to understand and analyze it effectively. She shares her insight on various topics such as custom application development, project server customization, client-side scripting etc.

Posted by Advaiya

    Let's connect to make technology work for you.





    Please tick the options most relevant to your business challenges
    Decision makingBusiness productivityCustomer experienceTechnology-led innovationDigital transformation


    [By using this form you agree with the storage and handling of your data by this website.]