Set Default Values

[Sarosh Wadia]

Hi!

I am using the Multi-Select Control in an ASP.NET Core 2.0 App.

<ejs-multiselect id="selectService" placeholder="Select one or more Services" popupHeight="200px" mode="CheckBox" showSelectAll="true" hideSelectedItem="true" openOnClick="true" dataSource="@Model.SelectedServiceCol" allowFiltering="true" showClearButton="true">
 <e-multiselect-fields value="ServiceID" text="Name"></e-multiselect-fields>
</ejs-multiselect>

I have two questions:

1] How can I pre-select a few Values in the Multi-Select Control using either ViewBag.MyDefaultValues or in JavaScript?

MyDefaultValues: (ServiceID  & Name are both string values)

-----------------------------

ServiceID     Name

-----------------------------

1                    Service A

2                    Service B

3                    Service C

4                    Service D

5                    Service E

I have tried :

var oService = document.getElementById('selectService').ej2_instances[0];

oService.value = "1,5"; // To pre-select "Service A" & "Service E" in the Control 

1] How can I change the filter to use "Contains" rather than "StartsWith" when users start to type in the Control?

Thanks

Thanks

[Ilakkiya Baskar]

Hi Sarosh Wadia,   

  

Thank you for contacting Syncfusion Support.  

  

Query 1: How can I pre-select a few Values in the Multi-Select Control using either ViewBag.MyDefaultValues or in JavaScript?   

   

We suggest you to give values in string array type for setting default values in the MultiSelect component. Please refer to the below code block.   

[View]   

   

<ejs-multiselect id="games" dataSource="@ViewBag.data" tagging="onTagging" placeholder="Favorite Sports" value="@ViewBag.value" mode="Default">   

        <e-multiselect-fields value="Id" text="Game"></e-multiselect-fields>   

    </ejs-multiselect>   

[Controller]   

public IActionResult chipcustom()   

        {   

            ViewBag.value = new string[] { "Game1", "Game4", "Game7" };   

            ViewBag.data = new GameList().GameLists();   

            return View();   

        }   

   

  

Please refer to the below documentation.   

https://ej2.syncfusion.com/aspnet/documentation/multi-select/chip-customization.html?syntax=tag   

   

Query 2: How can I change the filter to use "Contains" rather than "StartsWith" when users start to type in the Control?   

   

We suggest you to use filtering event to change the filter type for the MultiSelect component. Please refer to the code block below.   

 

function onFiltering(e) {        var data = document.getElementById("customer").ej2_instances[0];        // load overall data when search key empty.        if (e.text == '')            e.updateData(data.dataSource);        else {            var query = new ej.data.Query().select(['ContactName', 'CustomerID']).take(6);            query = (e.text !== '') ? query.where('ContactName', 'startswith', e.text, true) : query; // you can change the filter type using query object            e.updateData(data.dataSource, query);        }    }

 

Please refer to the below documentation.  

https://ej2.syncfusion.com/aspnet/documentation/multi-select/filtering.html?syntax=tag#change-the-filter-type   

   

Let us know if there is any concern, we will be happy to assist you.   

   

  

Regards,   

Ilakkiya B   

[Sarosh Wadia]

Hi!

Query 1: and Query2: Worked as per your suggestion! Thanks

For Query 1: My problem is that I need to set the value in javascript in the View: in the onAppointmentWindowOpen(args)  function of the Schedule Control.

I tried this but the default values are not being set for the control. What am I doing wrong?

function onAppointmentWindowOpen(args) {

var oService = document.getElementById('selectService').ej2_instances[0];

var SelectedServices = "1,5"; // Acutally the data comes from args.appointment.SelectedServices// As per my example below

var str_array = SelectedServices.replace(/["']/g, "").split(',');

oService.value = str_array;

}

Do I need to refresh the oService object so I can see the default values selected in the control?

Thanks

[Ilakkiya Baskar]

Hi Sarosh Wadia, 

Thank you for your details.We analyzed your query.  We suspect that the value field mapping is wrong. Please check the below code, 

<div class="control-section"> 

    <div id='local-data'> 

        <div class='control-wrapper'> 

            <h4> Local Data</h4> 

            <ejs-multiselect id="local" placeholder="Select" dataSource="@ViewBag.localdata" popupHeight="200px" mode="CheckBox" showSelectAll="true" hideSelectedItem="true" openOnClick="true" allowFiltering="true" showClearButton="true"> 

                <e-multiselect-fields text="Name" value="ServiceId"></e-multiselect-fields> 

            </ejs-multiselect> 

            

        </div> 

    </div> 

    <div class="control-section"> 

        <div class="schedule-wrapper"> 

            <ejs-schedule id="schedule" height="550" popupOpen="onAppointmentWindowOpen" selectedDate="new DateTime(2018, 2, 15)" eventRendered="OnEventRendered"> 

                <e-schedule-eventsettings dataSource="@ViewBag.appointments"></e-schedule-eventsettings> 

            </ejs-schedule> 

        </div> 

    </div> 

 

    <script type="text/javascript"> 

        function OnEventRendered(args) { 

            var scheduleObj = document.getElementById('schedule').ej2_instances[0]; 

            var categoryColor; 

            var start = new Date(args.data.StartTime).setHours(0, 0, 0, 0); 

            var end = new Date(args.data.EndTime).setHours(0, 0, 0, 0); 

            if (args.data.IsAllDay) { 

                categoryColor = '#8e24aa'; 

            } 

            else if (start !== end) { 

                categoryColor = '#f57f17'; 

           } 

            else { 

                categoryColor = '#7fa900'; 

            } 

            if (scheduleObj.currentView === 'Agenda') { 

                args.element.firstChild.style.borderLeftColor = categoryColor; 

            } 

            else { 

                args.element.style.backgroundColor = categoryColor; 

            } 

        } 

        function onAppointmentWindowOpen(args) { 

            var msObject = document.getElementById("local").ej2_instances[0]; 

            var SelectedServices = "3,2"; 

            var str_array = SelectedServices.replace(/["']/g, "").split(','); 

 

            msObject.value = str_array; // set the value 

        } 

    

    </script> 

In the attached sample, on popupOpen event, we set the value as per in the update. 

Please check the below sample, 

http://www.syncfusion.com/downloads/support/forum/137474/ze/MutliSelect357517511 

If you face any other issue,  please let us know. Kindly share about the details whether you change the dataSource dynamically. 

 We will be happy to assist you. 

Regards, 

Ilakkiya B 

[Sarosh Wadia]

Hi!

That worked perfectly!

Thanks

[Ilakkiya Baskar]

Hi Sarosh Wadia,   

  

Most welcome.  

  

Please let us know if you need any assistance.   

  

Regards   

Ilakkiya B