Kendo Multi Select AJAX POST Request

[Anvita]

Hi,

I want to create the kendo multi-select using jquery ajax. Using ajax I have sent the request to the server every time when a user types a letter in multi-select. So for that, I have created this Script that is attached below :-

var searchTerm = params.term && params.term != "" ? params.term : islNewsArticle2LastSearchTerm;

var payload ={
  "valueFilters": [
    {
      "field": "preDistLocationIds",
      "values": [
        "2787"
      ]
    },
    {
      "field": "distLocationIds",
      "values": []
    },
    {
      "field": "createdByLocationLevelId",
      "values": []
    },
    {
      "field": "taskLevelId",
      "values": [
        "118"
      ]
    }
  ],
  "rangeFilters": [
    {
      "greaterThanOrEqual": "2022-06-11",
      "field": "startDate"
    },
    {
      "lessThanOrEqual": "2022-07-11",
      "field": "endDate"
    }
  ],
  "sorts": [],
  "limit": 50,
  "q": '+searchTerm+ '
};


var new1 = new kendo.data.DataSource({
  transport: {
                    read: function(s) {
                        $.ajax({
                             delay: 350, // wait 250 milliseconds before triggering the request
                             url: "https://"+'@Session.OrgUrl~'+"/searchapi/taskviews/tasklist",
                             type: "post",
                             data: JSON.stringify(payload),
							 dataType: 'json',
							 contentType: "application/json",
							 beforeSend: function(req) {
           req.setRequestHeader('Authorization', "Bearer @Session.AuthToken~");
       },           
        processResults: function (data) {   
                //console.log("results: "+data.results.length);
                var res = [];
                if(data && data.results){
                    for(var i  = 0 ; i < data.results.length; i++) {
                        res.push({id: data.results[i].objectId, text: data.results[i].title});
                    }
                }
                return {
                    results: res
                }
            },
			complete: function(){
            }
                        });
                    }
                }
});
$("#islTasks").kendoMultiSelect({
        placeholder: "Select Tasks...",
        filter: "contains",
        autoBind: false,
    dataValueField: "objectId",
    dataTextField : "title",
    dataSource : new1
});

Now I am not able to select the value that which user types in multi-select.  So Can anybody help me with this how can I get the multi-select value using jquery and pass it to the variable payload inside "q" 

The basic functionality I want is that when a user searches any term a request sends to the server. This is the payload data that i have to passv i.e,

{
  "valueFilters": [
    {
      "field": "preDistLocationIds",
      "values": [
        "2787"
      ]
    },
    {
      "field": "distLocationIds",
      "values": []
    },
    {
      "field": "createdByLocationLevelId",
      "values": []
    },
    {
      "field": "taskLevelId",
      "values": [
        "118"
      ]
    }
  ],
  "rangeFilters": [
    {
      "greaterThanOrEqual": "2022-06-11",
      "field": "startDate"
    },
    {
      "lessThanOrEqual": "2022-07-11",
      "field": "endDate"
    }
  ],
  "sorts": [],
  "limit": 50,
  "q": '+searchTerm+ '
}

Here q in the last include the value that which user search. Can anybody help me with this 

[Lyuboslav]

Hello Anvita,

I would suggest you check the article regarding ServerFiltering in our documentation. Also, you could see the dojo I modified for you, where I added the below snippet code  to "dataSource" property:

serverFiltering: true

I also changed the type of ajax request to "get":

 transport: {
                read: {
                  url: "your url",
                  type:"get"
....
}

I hope this will help you.

Regards,
Lyuboslav
Progress Telerik