Can't get databound value of dropdownlist

[Osvald László]

Hi,

I would like to ask for your help in solving the following problem:

(sorry for my bad english)

Thx

Attachment: Prepared_error_22a44f3b.zip

[Sureshkumar P]

Hi Osvald,  

 

Greetings from Syncfusion support.  

 

Based on your shared information with sample. We suspect that you want to change the specific list items styles. So, we suggest you change the style of list elements using our open event to achieve your requirement.  

 

Kindly refer the below code example.  

 

<div style="padding:5%;"> 

    @(Html.EJS() 

        .DropDownList("games") 

        .Placeholder("Select a game") 

        .DataSource((IEnumerable<DropdownlistGameList>)ViewBag.data) 

        .Fields(new DropDownListFieldSettings { Text = "Game", Value = "Id" }) 

        .ItemTemplate( 

            "<div><img class=\"empImage\" src=\"/Content/combobox/images/Employees/${Id}.png\"/>" + 

            "<div class=\"ename\"> ${Game} </div></div>") 

        .Open("itemdatabound") 

        .Render()) 

</div> 

 

 

<script> 

    function itemdatabound(args) { 

        // find the list items  

        var itemList = args.popup.element.querySelectorAll(".e-list-item"); 

        for (var item = 0; item < itemList.length; item++) { 

            if (args.popup.element.querySelectorAll(".e-list-item")[item].getAttribute('data-value') === "Game4") { 

                // set the styles with specific condiotions  

                args.popup.element.querySelectorAll(".e-list-item")[item].setAttribute("style", "background-color: #F3C3C3; color: red;"); 

            } 

        } 

    } 

</script> 

 

please check the above sample and let us know whether it suits your requirement. if not please get revert us with details. If we misunderstood your requirement, then please revert us with detailed description. That will help us to provide exact solution as earlier as possible.  

 

Regards, 

Sureshkumar P 

[Osvald László]

Hi Sureshkumar,

It's almost good. It also work well with OPEN, but unfortunately I have to use DATABOUND.
I have attached a project using this. The point is that I want to color the rows according to the status colors.

Thank You!

Regards, Laszlo

Attachment: Prepared_error2_dd3330c6.zip

[Sureshkumar P]

Hi Osvald, 

 

Thanks for your update. We have created the list when open the popup so, we cannot access the list in the databound event. So, we suggest you use the popup open event to color the respective rows.  

 

We have created the sample with open event. Please find the sample here: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Dropdownlist-2026281732  

 

Regards, 

Sureshkumar P 

[Osvald László]

Hi Sureshkumar,

Thanks! Please see how the attached code works, there I can better illustrate the problem.

Regards, Laszlo

Attachment: Prepared_error2_36a4d929.zip

[Sureshkumar P]

Hi Osvald, 

 

Thanks for your update.  

 

We suspect that you want to load the remote data in databound event using datamanager and based on that data you want to showcase the generated list element with background color. So, we suggest you load the data in the databound event, but you cannot access the popup list element in the databound event. So, you can customize the list element using popup open event as like below code example.  

 

<div style="padding:5%;"> 

    @(Html.EJS() 

        .DropDownList("games") 

        .Placeholder("Select a game") 

        .DataSource((IEnumerable<DropdownlistGameList>)ViewBag.data) 

        .Fields(new DropDownListFieldSettings { Text = "Game", Value = "Id" }) 

        .ItemTemplate( 

            "<div><img class=\"empImage\" src=\"/Content/combobox/images/Employees/${Id}.png\"/>" + 

            "<div class=\"ename\"> ${Game} </div></div>") 

        .DataBound("itemdatabound") 

        .Open("popupOpen") 

        .Render()) 

</div> 

 

 

<script> 

    function itemdatabound(args) { 

        var remotedata; 

        var data = new ej.data.DataManager({ 

            url: "/Home/GetAllStatusColor", adaptor: new ej.data.WebApiAdaptor(), offline: true 

        }).executeQuery(new ej.data.Query()) 

            .then(function (e) { 

                remotedata = e.result; 

            }); 

    } 

    function popupOpen(args) { 

        // find the list items  

        var itemList = args.popup.element.querySelectorAll(".e-list-item"); 

        for (var item = 0; item < itemList.length; item++) { 

            if (args.popup.element.querySelectorAll(".e-list-item")[item].getAttribute('data-value') === "Game4") { 

                // set the styles with specific condiotions  

                args.popup.element.querySelectorAll(".e-list-item")[item].setAttribute("style", "background-color: #F3C3C3; color: red;"); 

            } 

        } 

    } 

</script> 

 

Regards, 

Sureshkumar P 

[Osvald László]

Able to resolve this now. Thanks Sureshkumar!

[Sureshkumar P]

Hi Osvald, 

 

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

 

Regards, 

Sureshkumar P