change the dropdown DataSource via JavaScript

[fara]

Hello

I sent the list of all products to View with ViewBag.

I want to select the list and change the dropdown DataSource via JavaScript (or JQuery)

I do not want to send to the controller every time via Ajax Query

Is this possible? Can you guide me? Thanks

my list is :

ProductId    ProductName  ProductCategoryId

[Berly Christopher]

Hi Fara, 

  

Greetings from Syncfusion support. 

  

We can change the data source in the JavaScript with help component instance in the value select action. Before that, we need to store the required data source in the variable and assigned to the component’s dataSource property with help of instance. Kindly refer the below code example. 

  

 

<div class="control-wrapper"> 

    <div id="default" style='padding-top:75px;'> 

        <ejs-dropdownlist id="games" dataSource="@ViewBag.data" placeholder="Select a game" popupHeight="220px" select="OnSelect"> 

        </ejs-dropdownlist> 

    </div> 

</div> 

<script> 

    function OnSelect(args) { 

        var DropDownData = @Html.Raw(JsonConvert.SerializeObject(ViewBag.dropData)); 

        this.dataSource = DropDownData; 

        this.fields = { text: "Vegetable", id: "Id" }; 

    } 

</script> 

 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Core_DataSource_Script_166264-1075173701  

  

Regards, 

Berly B.C