Default value not displaying when using DataManager with UrlAdaptor

[Nayt Grochowski]

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]

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]

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, 

Frond end sample Link: https://stackblitz.com/edit/cpbym1?file=index.ts 

Back end sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1-43948028 

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]

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]

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); 

        } 

 

 

 

Frond end Sample Link: https://stackblitz.com/edit/vpmcgt-2f3pg5?file=index.ts 

Back end Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1-621873775 

 

Regards, 

Sevvandhi N 

[Nayt Grochowski]

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]

Hi Nayt, 

  

Thanks for your update. Please get back to us if you need further assistance on this. 

  

Regards, 

 Sevvandhi N