Multiselect people picker using Kendo UI with a large dataset

Multiselect people picker using Kendo UI with a large dataset

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 number of records in the dropdown.

.html page– On .html page we just put a <select /> with id.

<select id=”ddl_GI_AdditionalAuthorsContributor”></select>

.js file- In js file we implement the multiselect. This is an edit form, so we must display the current additional author values as default selection (If u don’t have default values then assign them blank). To implement default selection, we need to get all the current additional authors’ values, separate them by a comma and pass them in our custom function as a parameter.

var multiselect = $(“#ddl_GI_AdditionalAuthorsContributor”).data(“kendoMultiSelect”);

 

//resAdditionalAuthor is holding the values of current additional authors in comma separated form.

if ($scope.AdditionalAuthorsContributorsID != null && $scope.AdditionalAuthorsContributorsID != “”)

{

$scope.dsAdditionalAuthList = JSON.parse(resAdditionalAuthor.getAdditionalAuthorByProjectIdResult);

authArraySelected = $scope.AdditionalAuthorsContributorsID.split(‘,’);

angular.forEach(authArraySelected, function (item, index) {

SelectedPpl.push(item);

});

}

 

 

Function Calling

//Below are the parameters for the custom function

//1. The id of the control which we want to make multiselect

//2. An array of additional current authors user objects which needs to be displayed as selected on load

//3. Current Additional author’s userID’s in comma separated form.

GETPostService.searchPeopleMultiselect(“ddl_GI_AdditionalAuthorsContributor”, SelectedPpl, $scope.dsAdditionalAuthList);

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.

var multiselect = $(“#” + inputId).data(“kendoMultiSelect”);

if (multiselect == undefined) {

$(“#” + inputId).kendoMultiSelect({

dataTextField: “UserDisplayName”,

dataValueField: “UserADId”,

dataSource: siteUsers,

minLength: 3,

filtering: onFiltering,

value: SelectedPpl,

placeholder: “Please type three characters and press enter”,

 

valueTemplate: ‘<span class=”selected-value” style=”background-image: url(\’#: data.UserImageUrl #\’)”></span><span>#: data.UserDisplayName #</span>’,

 

template: ‘<span class=”k-state-default” style=”background-image: url(\’#: data.UserImageUrl #\’)”></span>’ +'<span class=”k-state-default”><h3>#: data.UserDisplayName #</h3># if (data.UserEmailAddress != null) {#<p>#: data.UserEmailAddress #</p># }if (data.UserDepartment != null) {#<p><span>#: data.UserDepartment #</span># }if (data.UserCountry != null) {# <span> #: data.UserCountry #</span></p># } #</span>’, });

 

 

  • 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.

$(‘#’ + inputId).data().kendoMultiSelect.input.on(‘keydown’, function (e) {

if (e.keyCode == 13) {

if (canFilter == true) {

var multiselectppl = $(“#” + inputId).data(“kendoMultiSelect”);

var alreadySearched = multiselectppl.value();

var userFilter = “”;

angular.forEach(alreadySearched, function (item, index) {

userFilter = userFilter + “,” + item

});

selectedPeoplefilter = userFilter.substring(1, userFilter.length)

console.log(multiselectppl.value());

var input = multiselectppl.input[0].value;

console.log(input);

if (input.length >= 3) {

displayLoading();

var dataToSend = {

“UserDepartment”: “All”, “FilterString”: input, “AlreadySearchedUser”: selectedPeoplefilter

};

$.when(postDataWCFAsync(“getUserDataWithFilterMultiple”, dataToSend))

.then(function (resPeople) {

var siteUsers = JSON.parse(resPeople);

multiselectppl.setDataSource(siteUsers);

multiselectppl.open();

hideLoading();

});

}

else {

alert(minThreeLetterMsg);

 

var multiselectppl = $(“#” + inputId).data(“kendoMultiSelect”);

multiselectppl.close();

}

}

else {

alert(minThreeLetterMsg);

 

var multiselectppl = $(“#” + inputId).data(“kendoMultiSelect”);

multiselectppl.close();

}

}

else {

var multiselectppl = $(“#” + inputId).data(“kendoMultiSelect”);

multiselectppl.close();

}

});

 

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.

Let's connect to make technology work for you.





Project Portfolio ManagementCloud AdoptionAdaptive BIDigital WorkspaceConsulting


Posted by Shruti Vyas

Shruti has more than five years of experience in application development. She is currently working as an EPM Developer with Advaiya. Her responsibilities include project development, deployment, troubleshooting and client communication. Shruti has gained an extensive experience working on Project Server Customization and Reporting. She also possesses good knowledge in technologies including - SharePoint, SQL Server, Power BI, SSRS, among others.

Related Posts:

No Comments

    Leave a Reply

    Your email address will not be published.

    *
    *

    15 + fourteen =