We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Conditional Formatting

Thread ID:

Created:

Updated:

Platform:

Replies:

129766 Apr 3,2017 12:37 AM UTC Apr 5,2017 12:06 PM UTC LightSwitch HTML 5
loading
Tags: DropDownList
Jesus I. Santin
Asked On April 3, 2017 12:37 AM UTC

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 [Syncfusion]
Replied On April 3, 2017 10:45 AM UTC

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
Replied On April 3, 2017 01:08 PM UTC

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 [Syncfusion]
Replied On April 4, 2017 10:46 AM UTC

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
Replied On April 4, 2017 01:07 PM UTC

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 [Syncfusion]
Replied On April 5, 2017 12:06 PM UTC

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>      
   
  
  
  
  
  
  
  
  
  
  
 
 
 
 
 
  
Regards,  
Karthikeyan V.


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;