Modify an attribute in a dropdownlistbox

[Osvald László]

Dear Support,

How do I change the html-div-class attributes (background-color, color, etc.) in the dropdownlistbox's ValueTemplate - from Ajax?
(ActionComplete? I don't know.)
Sample (div-class: box or ename):

Dropdown (etc. Girl2 text: Red, dropdown's background-color: yellow):

Thanks,

Regards, Laszlo

[Sureshkumar P]

Hi Osvald, 

 

Greetings from Syncfusion support.  

 

Based on your shared information, we suspect that you want to load the class for value template with each value. We have created the sample based on your requirement.  

 

Kindly refer the below code example.  

 

@Html.EJS().DropDownList("employees").DataSource((IEnumerable<GameList>)ViewBag.data).Placeholder("Select an employee").PopupHeight("270px").Fields(new DropDownListFieldSettings { Value = "Game" }).ItemTemplate( 

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

                  "<div style=\"width:100%;height:100%;\"><div class=\"name ${Class} \"> ${Game} </div></div>").Render() 

 

 

<style> 

    .e-ddl .e-blue { 

        background-color: yellow !important; 

        color: blue !important; 

    } 

    .e-ddl .e-red { 

        background-color: yellow !important; 

        color: red !important; 

    } 

 

    .e-ddl .e-green { 

        background-color: yellow !important; 

        color: green !important; 

    } 

 

    .e-ddl .e-yellow { 

        background-color: gray !important; 

        color: yellow !important; 

    } 

 

    .e-ddl .e-orange { 

        background-color: yellow !important; 

        color: orange !important; 

    } 

</style> 

 

[Model] 

 

public class GameList 

    { 

        public string Id { get; set; } 

        public string Game { get; set; } 

 

        public string Class { get; set; } 

 

        public List<GameList> GameLists() 

        { 

            List<GameList> game = new List<GameList>(); 

            game.Add(new GameList { Id = "Game1", Game = "American Football", Class="e-red" }); 

            game.Add(new GameList { Id = "Game2", Game = "Badminton", Class="e-green" }); 

            game.Add(new GameList { Id = "Game3", Game = "Basketball", Class="e-blue" }); 

            game.Add(new GameList { Id = "Game4", Game = "Cricket" , Class="e-yellow"}); 

            game.Add(new GameList { Id = "Game5", Game = "Football", Class="e-orange" }); 

            return game; 

        } 

 

    } 

 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication11618779475  

 

Could you please check the above sample and let us know whether this is fulfilling your requirement or get back to us if you need further assistance. 

 

Regards, 

Sureshkumar P 

[Osvald László]

Hi Sureshkumar,

Thank you for your reply!

Actually, I would need a solution that adjusts colors through a script (ActionComplete?), dynamically.
Pre-recorded colors cannot be used.
I should pass color codes (etc. # 808080)

Thanks,
Regards,Laszlo

[Sureshkumar P]

Hi Osvald, 

 

Thanks for your update.  

 

Based on your shared information, we suspect that you want to add the style to valuetemplate element. you can achieve your requirement using change event.  

 

Kindly refer the below code example.  

@Html.EJS().DropDownList("employees").DataSource((IEnumerable<GameList>)ViewBag.data).Change("onChange").Placeholder("Select an employee").PopupHeight("270px").Fields(new DropDownListFieldSettings { Value = "Game" }).ItemTemplate( 

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

                  "<div style=\"width:100%;height:100%;\"><div class=\"name \"> ${Game} </div></div>").Render() 

 

<script> 

    function onChange(args) { 

        if (args.itemData.Id = "Game3") { 

            var valueTemplateItem = document.querySelector(".e-input-value .name"); 

            valueTemplateItem.classList.add('e-blue'); 

        } 

    } 

</script> 

<style> 

    .e-ddl .e-blue { 

        background-color: yellow !important; 

        color: blue !important; 

    } 

    .e-ddl .e-red { 

        background-color: yellow !important; 

        color: red !important; 

    } 

 

    .e-ddl .e-green { 

        background-color: yellow !important; 

        color: green !important; 

    } 

 

    .e-ddl .e-yellow { 

        background-color: gray !important; 

        color: yellow !important; 

    } 

 

    .e-ddl .e-orange { 

        background-color: yellow !important; 

        color: orange !important; 

    } 

</style> 

 

 

Regards, 

Sureshkumar P 

[Osvald László]

Hi Sureshkumar,

Thanks for Your update.
The code is starting to approach the full solution, now I have tried this:

 function popupClose(args) {

        if (args.itemData.Id = 1) {

            var valueTemplateItem = document.querySelector(".e-input-value .name");

            valueTemplateItem.classList.setAttribute("style", "background-color: red"); //Not good

            //valueTemplateItem.setAttribute("style", "background-color: red"); //Not good

        } 

    }

Now the problem is that the list does not close. Only at id = 1, but then it does not color the background either.
The point is, I can’t use a pre-built style (.e-ddl).
There may be documentation, where are the built-in SF-styles described?

Thanks,
Regards, László

[Sureshkumar P]

Hi Osvald, 

 

Thanks for your update.  

 

Based on your shared code example. We suspect that you have changed the valuetemplate element style in the close event. We suggest you the itemdata will not available in the close event argument. We suggest you check the value property before update the style in your selected data.  

 

Kindly refer the code example.  

 

@Html.EJS().DropDownList("employees").DataSource((IEnumerable<GameList>)ViewBag.data).Close("popupClose").Placeholder("Select an employee").PopupHeight("270px").Fields(new DropDownListFieldSettings { Value = "Game" }).ItemTemplate( 

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

                  "<div style=\"width:100%;height:100%;\"><div class=\"name \"> ${Game} </div></div>").Render() 

 

<script> 

 

     function popupClose(args) { 

        if (this.value == "Basketball") { 

            var valueTemplateItem = document.querySelector(".e-input-value .name"); 

            valueTemplateItem.setAttribute("style", "background-color: red");  

        }  

    } 

</script> 

 

 

Regards, 

Sureshkumar P 

[Osvald László]

Hi Sureshkumar,

Thanks!

Unfortunately, this solution is not good yet.

I have attached the prepared example project, please try this.

The drop-down list doesn't close either.

Thank You,

Regards,
Laszlo

Attachment: DD_Remote_e995bdf5.zip

[Sureshkumar P]

Hi Osvald, 

 

Thanks for your update.  

 

Based on your shared information with sample. We found you have set the color code using change event. And you have gotten the valuetemplate element with wrong class name.  

Kindly refer the code example.  

 

 

@(Html.EJS().DropDownList("games") 

        .Placeholder("Select a game") 

        .DataSource((IEnumerable<GameList>)ViewBag.gamelist) 

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

        .ItemTemplate("<div><div class=\"box\"></div>" + "<div class=\"ename\"> ${Game} </div></div>") 

        .ValueTemplate("<div><div class=\"box\"></div>" + "<div class=\"ename\"> ${Game} </div></div>") 

        .Open("popupOpen").Change("popupClose").Render()) 

 

 

<script> 

 

         var colorData = @Html.Raw(Json.Encode(ViewBag.colorlists)); 

 

     

        function popupClose(args) { 

            console.log("VALUE: " + this.Value); //Its value is always: 1 

            if (args.itemData.Id == 2) { 

                var valueTemplateItem = document.querySelector(".e-input-value .ename"); 

                valueTemplateItem.setAttribute("style", "background-color: red"); 

            } 

 

    } 

</script> 

 

We have created the sample with your attached code example. Please find the sample here: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CurencyCodeNumeric-1193751223  

 

Regards, 

Sureshkumar P