Setting DropDownList in script by Guid value

[Michael Lambert]

I'm trying to set the selected item in a ejs-dropdownlist by setting its value in script in a razor app.  The value is a guid.

Setting the dropdownlist up:

        public IEnumerable Statuses = null;

        public void OnGet()
        {
            Statuses = res.Status.OrderBy(a=>a.Sort).Select(a => new { text = a.NameShort, value = a.StatusId }).ToList();  //StatusId is a guid
        }

CSHTML--------

        <div class="col-md-3">
            <ejs-dropdownlist id="ddlOfcStatus" dataSource="@Model.Statuses" placeholder="Select Status" />
     
That all works...

This is the change function of another listbox

    function ofcChange(args) {   //
        if (args.e == null)
            return;

        //var listObj = document.getElementById('ddlOfficers').ej2_instances[0];
        $.ajax({
            url: 'Officers/?handler=OfficerInfo',
            type: 'GET',
            dataType: 'json',
            data: {
                OfcID: args.value
            },
            headers: {
                RequestVerificationToken:
                    $('input:hidden[name="__RequestVerificationToken"]').val()
            }
        })
            .done(function (result) {
                        document.getElementById('ddlOfcStatus').ej2_instances[0].value = result.StatusId;  //This does not set the selected item even though the value is present in the datasource

            })
    }
//Here is the function in the ajax call..

        public JsonResult OnGetOfficerInfo(Guid OfcID)
        {
            Officer = res.Officers.Where(a => a.OfficerId == OfcID).FirstOrDefault();  //this returns a table with a StatusId column of type guid.
            return new JsonResult(Officer);
        }

[Prince Oliver]

Hi Michael, 

Greetings from Syncfusion support. 

From your shared code, we could infer that you require to assign the value and reflect the changes in the control immediately. In that case, we suggest you call the dataBind method once the value is assigned. Please refer the following code. 

function ofcChange(args) {   // 

    if (args.e == null) 

        return; 

    //var listObj = document.getElementById('ddlOfficers').ej2_instances[0]; 

    $.ajax({ 

        url: 'Officers/?handler=OfficerInfo', 

        type: 'GET', 

        dataType: 'json', 

        data: { 

            OfcID: args.value 

        }, 

        headers: { 

            RequestVerificationToken: 

                $('input:hidden[name="__RequestVerificationToken"]').val() 

        } 

    }) 

    .done(function (result) { 

        var obj = document.getElementById('ddlOfcStatus').ej2_instances[0]; 

        obj.value = result.StatusId; 

        obj.dataBind(); // call the dataBind method 

 

    }) 

} 

Please let us know if you need any further assistance on this. 

Regards, 

Prince 

[Michael Lambert]

Actually I forgot to add the field declaration.  Work perfectly after that:

            <ejs-dropdownlist id="ddlOfcStatus" dataSource="@Model.Statuses" placeholder="Select Status">
                <e-dropdownlist-fields text="text" value="value"></e-dropdownlist-fields>
            </ejs-dropdownlist>
 Thanks,

Mike

[Prince Oliver]

Hello Mike, 

Thank you for the update. We are glad that the issue is resolved in your end. Let us know if you need any further assistance on this. 

Regards, 

Prince