Conditional Formatting

[Jesus I. Santin]

Hello,

I would like to apply some conditional css  formatting on a dropdown list. I would like to search for the conditional formatting value on a column of the collection, like this:

        var first = contentItem.children[0]; 

        var label = first.children[0].valueModel.name;

        var value = first.children[1].valueModel.name;

        var formattingValue = first.children[2].valueModel.name;

For example: items with formattingValue  = 1 will have a font-weight: 600 and formattingValue  = 2 will have a font-weight: 600 and font-color: blue

Any help would be appreciated,

Thanks in advance,

Jesús I. Santín

[Karthikeyan Viswanathan]

Hi Jesus,   

   

 Thanks for contacting Syncfusion support.   

   

You can apply the CSS using cssClass property. Please refer to the below code snippet:   

   

<code>   

input.ejDropDownList({   

            dataSource: contentItem.value.data,   

            width: "100%",   

            fields: { text: label, value: value },            }   

        });   

        var formattingValue = first.children[2].valueModel.name;   

        var inst = input.ejDropDownList("instance");   

        if (formattingValue == 2)   

            inst.option("cssClass", "formatting2");   

        if (formattingValue == 1)   

            inst.option("cssClass", "formatting1");   

   

</code>   

<code>   

<style>   

        .formatting1 .e-input{   

            font-weight:600;   

        }   

        .formatting2 .e-input{   

            font-weight:600 !important;   

            color:blue !important;   

        }   

    </style>   

</code>   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

 

 

Note: You can import your customized theme into the Theme studio and customize the colors and download.   

   

Try the Theme Studio for customized theme: http://js.syncfusion.com/themestudio/    

   

Refer the help document for Theme Studio: https://help.syncfusion.com/js/theme-studio    

   

   

Regards,   

Karthikeyan V.  

 

[Jesus I. Santin]

Thank you very much Karthikeyan Viswanathan,

Your solution is close to achieve the requirements, nevertheless, the format is applied to the input label, and not to each item on the list. The general idea is to use a kind of "category" field for each item on the list (this "category" css is defined on   var formattingValue = first.children[2].valueModel.name).

Based on your code, I can set the general input css with:

  contentItem.value.oncollectionchange = function (){

        var first = contentItem.children[0]; 

        var label = first.children[0].valueModel.name;

        var value = first.children[1].valueModel.name;

        if (input.hasClass('e-dropdownlist')){input.ejDropDownList('destroy');}

        input.ejDropDownList({dataSource: contentItem.value.data,

            fields: {

                text: label, value: value

            },

            cssClass: "formatting2",

        });

 }

If I use the code you suggested, but I do not get the desired formatting on each specific item of the list, I think it should be very close to it. 

Thanks for your answer and the resources, kind regards,

Jesús

[Karthikeyan Viswanathan]

Hi Jesus,    

      

You can apply CSS for each specific item of list using to add the additional field for formatting data. And you can retrieve the corresponding formatting class using args.itemId in Dropdown list change event. Please refer to the below code snippet:    

    

<code>    

input.ejDropDownList({ 

            dataSource: contentItem.value.data, 

            width: "100%", 

            fields: { text: label, value: value }, 

                       cssClass: "formatting2", 

            change: function (args) { 

                this.option("cssClass",contentItem.value.data[args.itemId].formattingClass);            } 

        }); 

     

</code>    

    

    

    

    

    

    

    

    

    

    

 

    

 

 

 

 

 Regards,    

[Jesus I. Santin]

Thank you Karthikeyan,

Your approach is good but, I am afraid it doesnt work as you expected: 

- it needs a change on the list to apply the css (it should  applied when the list is populated with items, not when it changes the value of the selected item).

- the css is not applied to each specific item but to every item based on the value of the selected item.

Thanks anyway for your time and efforts,

Regards,

Jesús

[Karthikeyan Viswanathan]

Hi Jesus,      

        

We have prepared a sample based on specific CSS for every pop list items not a selected item. Please refer to the below code snippet:      

      

<code>      

      var first = contentItem.children[0];   

        var label = first.children[0].valueModel.name;  

        var value = first.children[1].valueModel.name;  

        if (input.hasClass('e-dropdownlist')){input.ejDropDownList('destroy');}  

        input.ejDropDownList({dataSource: contentItem.value.data,  

            fields: { text: value, value: value },  

            template: '<span style="${FormatCSS}" class="${FormatClass}"> ${FormatText} </div>',  

            change: function (args) { contentItem.value.selectedItem = contentItem.value.data[args.itemId];} });  

</code>      

   

  

  

  

  

  

  

  

  

  

  

 

 

 

 

 

Sample link:http://www.syncfusion.com/downloads/support/forum/129766/DROPDO~11616198811.ZIP    

  

Regards,  

Karthikeyan V.