We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Default value not displaying when using DataManager with UrlAdaptor

Thread ID:

Created:

Updated:

Platform:

Replies:

149299 Nov 20,2019 11:16 PM UTC Nov 25,2019 04:29 AM UTC JavaScript - EJ 2 6
loading
Tags: MultiSelect
Nayt Grochowski
Asked On November 20, 2019 11:16 PM UTC

My page has a MultiSelect control setup with a DataManager using a UrlAdapter to query the server (1000's of records) for selecting items in the drop down list.

I am storing the selected values in session state so that when I return to the page, I can maintain the values selected - I am passing it in using the "value" attribute when I create the MultiSelect, and it sets the values so when my search runs, it has that the correct settings, but the display is empty - there is nothing showing as selected.

How can I either have it ping the end point of the UrlAdapter to fetch the values to display, or since I also store the "displayed values" for use elsewhere, can I manually inject that so I don't have to ping the server?

Nayt Grochowski
Replied On November 20, 2019 11:58 PM UTC

FYI - when I set the "value" attribute - it is showing that ID (which is not helpful since we show names for the text value) - and even then the search stops working when that value is there, making the control unusable.

I also attempted to use the "addItem" method, created an array of values that match the "fields" definition I have setup, and it blows up with a null reference exception inside DropDownBase when I call it - so no luck there.

Sevvandhi Nagulan [Syncfusion]
Replied On November 21, 2019 01:44 PM UTC

Hi Nayt,  
 
Greetings from Syncfusion support. 
 
We have checked the reported requirement. While using the MultiSelect component with UrlAdaptor, the fetches correctly and displaying in the MultiSelect component. Please check the below sample, 



We suspect that the cause of the issue is dataSource not loaded properly in the application. Because if the data not available In the dataSource, then corresponding text value will be shown also, Id will be displayed. 

Query 1: How can I either have it ping the end point of the UrlAdapter to fetch the values to display, or since I also store the "displayed values" for use elsewhere, can I manually inject that so I don't have to ping the server? 
 
If need to make the request again to the server then, kindly refer the below code. 

  var data= new DataManager({ 
            url: 'http://localhost:56237/Home/UrlDatasource', 
            adaptor: new UrlAdaptor , 
            crossDomain: true 
        }); // Making the request to server 
     listObj.dataSource = data;  // Set the dataSource to component 
    listObj.dataBind(); // Call the dataBind to reflect the changes 


Query 2: I also attempted to use the "addItem" method, created an array of values that match the "fields" definition I have setup, and it blows up with a null reference exception inside DropDownBase when I call it - so no luck there. 
 
Also, we have added the new item using the addItem() public method. Kindly refer the below code, 
 
    document.getElementById('btn').addEventListener('click',function(){ 
  listObj.addItem({ShipCountry: 'America',CustomerID:'AMR'}); 
}) 
 
If still issue persists, kindly revert below details that help us to provide solution at earliest. 
 
  1. Issue reproducing sample
  2. Code snippet
  3. If possible modify the above sample to replicate the issue

Regards, 
Sevvandhi N 


Nayt Grochowski
Replied On November 21, 2019 05:41 PM UTC

Installed and tested the example you included (FYI - had to update web.config to allow CORS) - and sure it selects a the two items included since the query runs with no parameters and returns everything. 

This is not going to work in a real world system where I have THOUSANDS of records that can be searched - there is no way I would have the endpoint return everything - we limit the response and force you to do a keyword search to narrow the output - so the example and current approach is unacceptable.


Now if the initial query included the "values" so the endpoint could be modified to just return the selected values - then that is a much better approach.

Sevvandhi Nagulan [Syncfusion]
Replied On November 22, 2019 12:52 PM UTC

Hi Nayt,  
 
We have prepared the sample with server side only returns the selected values alone. Please find the code below, 
 
In the frond end we have send the selected values using addParams method in query, 
 
    let value: string[] = ['ALFKI','ANATR','BOLID','BLONP'] 
    // initialize MultiSelect component 
    let listObj: MultiSelect = new MultiSelect({ 
        // bind the DataManager instance to dataSource property 
        dataSource: new DataManager({ 
            url: 'http://localhost:56237/Home/UrlDatasource', 
            adaptor: new UrlAdaptor , 
            crossDomain: true 
        }), 
        query: new Query().select(['ShipCountry', 'CustomerID']).take(10).addParams('additionalParams', JSON.stringify(value)), 
        // map the appropriate columns to fields property 
        fields: { text: 'ShipCountry', value: 'CustomerID' }, 
        // set the placeholder to MultiSelect input element 
        placeholder: 'Select name', 
        // sort the resulted items 
        sortOrder: 'Ascending', 
      value: ['ALFKI','ANATR','BOLID','BLONP'] 
    }); 
    listObj.appendTo('#remote'); 
 
Server side code snippet 
 
public JsonResult UrlDatasource([FromBody]Data dm, string additionalParams) 
        { 
            var val = OrdersDetails.GetAllRecords(); 
            var Data = val.ToList(); 
            var count = val.Count(); 
            string[] splitResult = new string[] { }; 
            if (dm.where != null) 
            { 
                Data = (from cust in Data 
                        where cust.ShipCountry.ToLower().StartsWith(dm.@where[0].value.ToString()) 
                        select cust).ToList(); 
            } 
            if (additionalParams != null) 
            { 
                string[] seperators = { "[", "]", "," }; 
                string replace = additionalParams.Replace("\"", ""); 
                splitResult = replace.Split(seperators, StringSplitOptions.RemoveEmptyEntries); 
            } 
            if (dm.take != 0) 
                Data = Data.Take(dm.take).ToList(); 
            List<OrdersDetails> filterItem = new List<OrdersDetails>(); 
            if (splitResult.Length != 0) 
            { 
            for (var i = 0; i<splitResult.Length; i++) 
            { 
                    var filter = Data.Where(j => j.CustomerID.Equals(splitResult[i])).ToList(); 
                                     filterItem.Add(filter[0]); 
            } 
} 
            else 
            { 
                filterItem = null; 
            } 
            return Json(filterItem); 
        } 
 
 
 


 

Regards, 
Sevvandhi N 


Nayt Grochowski
Replied On November 22, 2019 05:26 PM UTC

Yeah that is what I was looking for - refactored my code to support this approach and the "default" value is coming up correctly now, thank you!

Sevvandhi Nagulan [Syncfusion]
Replied On November 25, 2019 04:29 AM UTC

Hi Nayt, 
  
Thanks for your update. Please get back to us if you need further assistance on this. 
  
Regards, 
 Sevvandhi N


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon