This is a migrated thread and some comments may be shown as answers.

Set background and forecolor of a checked item row of checkedbox list control

13 Answers 292 Views
CheckedListBox
This is a migrated thread and some comments may be shown as answers.
Sarin
Top achievements
Rank 1
Sarin asked on 21 May 2018, 07:25 AM

Hi,

I am looking for a sample code to set the background and fore color of a checkedlistbox control. I want to set  fore color as green and background as red if the item is checked . The font style also needs to be changed to bold if the item is checked. Whenever any user the checked any row it has to be highlighted and formatted to according to my need. The same checkedlistbox can have more than one checked rows so all these rows can be in the desired format. I am programatically binding the sql datasource.

Thanks in advance

Sarin

13 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 21 May 2018, 08:27 AM
Hello Sarin,

You can use the VisualItemFormatting event to set the desired styles (it will be triggered when checking items). The following snippet shows how you set the desired colors and font:
Font font = new Font("Segoes UI", 9, FontStyle.Bold);
private void RadCheckedListBox1_VisualItemFormatting(object sender, Telerik.WinControls.UI.ListViewVisualItemEventArgs e)
{
    if (e.VisualItem.Data.CheckState == Telerik.WinControls.Enumerations.ToggleState.On)
    {
        e.VisualItem.ForeColor = Color.Red;
        e.VisualItem.BackColor = Color.Green;
        e.VisualItem.GradientStyle = Telerik.WinControls.GradientStyles.Solid;
        e.VisualItem.Font = font;
    }
    else
    {
        e.VisualItem.ResetValue(LightVisualElement.ForeColorProperty, Telerik.WinControls.ValueResetFlags.Local);
        e.VisualItem.ResetValue(LightVisualElement.BackColorProperty, Telerik.WinControls.ValueResetFlags.Local);
        e.VisualItem.ResetValue(LightVisualElement.FontProperty, Telerik.WinControls.ValueResetFlags.Local);
        e.VisualItem.ResetValue(LightVisualElement.GradientStyleProperty, Telerik.WinControls.ValueResetFlags.Local);
    }
}

I hope this will be useful. Let me know if you have additional questions.

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Sarin
Top achievements
Rank 1
answered on 21 May 2018, 09:57 AM
thank you so much. 
0
Sarin
Top achievements
Rank 1
answered on 21 May 2018, 10:02 AM

i have one question. the same checkedlistbox is bounded with a list(from MS SQL DB). I wants to display image with each item text  which i receive with the same list.the class is provided below for same list Countries. Can you show me how can i bind the image with each item as I dont have a image list separately. 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
 
namespace Common
{
    public class Country
    {
        public string COUNTRY_NAME { get; set; }
        public string COUNTRY_CODE { get; set; }
        public byte[] COUNTRY_FLAG { get; set; }
        public bool ACTIVE { get; set; }
 
        #region Constructors
        public Country()
        {
        }
         
 
        //public override string ToString()
        //{
        //    return COUNTRY_NAME;
        //}
        #endregion
    }
 
    public class Countries : List<Country>
    {
    }
 
}

 

 

 

0
Sarin
Top achievements
Rank 1
answered on 21 May 2018, 10:06 AM

this is how i am binding the datasource. i would like to include the image with each item text

#region VisaCheckCountries
                        radCheckedListBox_VisaCheckCountries.DataSource = null;
                        dbhelper.GetVisaCheckMandatoryCountries(conString, country.COUNTRY_CODE, out VisaCheckCountries, out err);
                        if (VisaCheckCountries != null)
                        {
                            //permittedCountries.Insert(0, new PermittedCountry() { ALLOWED_COUNTRY_CODE = "", ALLOWED_COUNTRY_NAME = "", NATIONALITY_CODE = "", STATUS = false });
                            radCheckedListBox_VisaCheckCountries.DataSource = VisaCheckCountries;
                            foreach (Country cnty in VisaCheckCountries)
                            {
                                this.radCheckedListBox_VisaCheckCountries.ValueMember = "COUNTRY_CODE";
                                this.radCheckedListBox_VisaCheckCountries.DataMember = "COUNTRY_NAME";
                                this.radCheckedListBox_VisaCheckCountries.DisplayMember = "COUNTRY_NAME";
                            }
                            radCheckedListBox_VisaCheckCountries.SelectedIndex = -1;
                            // radDDL_AllowedCountry.SelectedIndex = -1;
                        }
                        else
                            radCheckedListBox_VisaCheckCountries.DataSource = null;
                        #endregion
0
Dimitar
Telerik team
answered on 21 May 2018, 11:22 AM
Hi Sarin,

You can use the event VisualItemFormatting event again and set the image. Here is a sample code:
private void RadCheckedListBox1_VisualItemFormatting(object sender, Telerik.WinControls.UI.ListViewVisualItemEventArgs e)
{
    var array = (e.VisualItem.Data.DataBoundItem as Country).COUNTRY_FLAG;
    e.VisualItem.Image = ByteToIamge(array);
 
}

Let me know if I can assist you further.
 
Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Sarin
Top achievements
Rank 1
answered on 21 May 2018, 11:29 AM

Thank you so much Dimitar. when i put the provided code but the flags is replacing the text. please find the attachment. What i want is item text with country flag as a prefix(small icon).

I also have a rad dropdownlist of countries which also needs to display the item with small flags as prefix to that items. Could you provide sample for both.

0
Dimitar
Telerik team
answered on 21 May 2018, 12:02 PM
Hi Sarin,

It appears that the image is too large. You can get a smaller one like this:
e.VisualItem.Image = ByteToIamge(array).GetThumbnailImage(20,20,null,IntPtr.Zero);
 
Let me know how this works for you.

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Sarin
Top achievements
Rank 1
answered on 21 May 2018, 12:15 PM

Thanks alot, it worked like a charm. But the issue at the moment is as the database call taking all countries flags to be loaded then converted from byte array to image. this is causing lot of delay to display the flags in the checkedlistbox control. Do you have any best recommended solution for this ? I have a dropdownlist and two checkedlistbox control in my form and all of them needs to display the country flags. and one event associated to each control which also rebinding the lists to these countries. that mean when even i added a new country to the list boxes it is rebinding and showing the countries > dropdownlist index change also do the same operation. So i want a best recommended solution for this . Please provide a sample code if you such any recommendation for quick understanding.

 

[quote]Dimitar said:Hi Sarin,

It appears that the image is too large. You can get a smaller one like this:

e.VisualItem.Image = ByteToIamge(array).GetThumbnailImage(20,20,null,IntPtr.Zero);
 
Let me know how this works for you.

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
[/quote]
0
Dimitar
Telerik team
answered on 22 May 2018, 05:31 AM
Hi Sarin,

Yes, the event is fired multiple times and there is no point to converting the image every time. What you can do is set the image after the items are added to the CheckedListBox. This way you will c9onvert the images only once:
protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e);
    foreach (var item in radCheckedListBox1.Items)
    {
        var array = (item.DataBoundItem as Country).COUNTRY_FLAG;
        item.Image = ByteToIamge(array).GetThumbnailImage(20, 20, null, IntPtr.Zero);
    }
}

Do not hesitate to contact us if you have other questions.
 
Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Sarin
Top achievements
Rank 1
answered on 22 May 2018, 06:52 AM
Thanks alot Dimitar. As I am loading the checkedlistbox control  items during the dropdownlist index changed event, I believe I should set the imagesin this event. Right?
0
Dimitar
Telerik team
answered on 22 May 2018, 07:41 AM
Hi Sarin,

If you are setting the data source at runtime you can use the ItemDataBound event to set the image:
private void RadCheckedListBox1_ItemDataBound(object sender, Telerik.WinControls.UI.ListViewItemEventArgs e)
{
    var array = (e.Item.DataBoundItem as Country).COUNTRY_FLAG;
    e.Item.Image = ByteToIamge(array).GetThumbnailImage(20, 20, null, IntPtr.Zero);
}

The items still may not be loaded if you do this directly after setting the data source. 

I hope this will be useful.  

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Sarin
Top achievements
Rank 1
answered on 22 May 2018, 08:23 AM

i tried both ways and it is working well. first method dropdown index chnaged event and second one checkedlistbox itemdatabound event. anyways thanks alot.

//first method       
private void radDDL_SourceCountry_SelectedIndexChanged(object sender, Telerik.WinControls.UI.Data.PositionChangedEventArgs e)
        {
            if (radDDL_SourceCountry.SelectedIndex != 0)
            {
                permittedCountries = null;
                Country country = null;
                string err = string.Empty;
                dbhelper.GetCountryCode(conString, radDDL_SourceCountry.SelectedItem.Text, out country, out err);
                if (country != null)
                {
                    if (radDDL_SourceCountry.SelectedIndex != 0)
                    {
                        #region PermittedCountries
                        radCheckedListBox_AllowedCountries.DataSource = null;
                        dbhelper.GetPermittedCountries(conString, country.COUNTRY_CODE, out permittedCountries, out err);
                        if (permittedCountries != null)
                        {
                            this.radCheckedListBox_AllowedCountries.DataSource = permittedCountries;
                            foreach (PermittedCountry cnty in permittedCountries)
                            {
                                this.radCheckedListBox_AllowedCountries.ValueMember = "ALLOWED_COUNTRY_CODE";
                                this.radCheckedListBox_AllowedCountries.DataMember = "ALLOWED_COUNTRY_NAME";
                                this.radCheckedListBox_AllowedCountries.DisplayMember = "ALLOWED_COUNTRY_NAME";
                            }
                            radCheckedListBox_AllowedCountries.SelectedIndex = -1;
 
                            foreach (var item in radCheckedListBox_AllowedCountries.Items)
                            {
                                var array = (item.DataBoundItem as PermittedCountry).ALLOWED_COUNTRY_FLAG;
                                item.Image = ByteArraytoImage(array).GetThumbnailImage(20, 14, null, IntPtr.Zero);
                            }
                        }
                        else
                            radCheckedListBox_AllowedCountries.DataSource = null;
                        #endregion
 
                        #region VisaCheckCountries
                        radCheckedListBox_VisaCheckCountries.DataSource = null;
                        dbhelper.GetVisaCheckMandatoryCountries(conString, country.COUNTRY_CODE, out VisaCheckCountries, out err);
                        if (VisaCheckCountries != null)
                        {
                            //permittedCountries.Insert(0, new PermittedCountry() { ALLOWED_COUNTRY_CODE = "", ALLOWED_COUNTRY_NAME = "", NATIONALITY_CODE = "", STATUS = false });
                            radCheckedListBox_VisaCheckCountries.DataSource = VisaCheckCountries;
                            foreach (Country cnty in VisaCheckCountries)
                            {
                                this.radCheckedListBox_VisaCheckCountries.ValueMember = "COUNTRY_CODE";
                                this.radCheckedListBox_VisaCheckCountries.DataMember = "COUNTRY_NAME";
                                this.radCheckedListBox_VisaCheckCountries.DisplayMember = "COUNTRY_NAME";
                            }
                            radCheckedListBox_VisaCheckCountries.SelectedIndex = -1;
                             
                            foreach (var item in radCheckedListBox_VisaCheckCountries.Items)
                            {
                                var array = (item.DataBoundItem as Country).COUNTRY_FLAG;
                                item.Image = ByteArraytoImage(array).GetThumbnailImage(20, 14, null, IntPtr.Zero);
                            }
 
                        }
                        else
                            radCheckedListBox_VisaCheckCountries.DataSource = null;
 
 
                        #endregion
 
                    }
                }
            }
 
        }
 
//second method
private void radCheckedListBox_AllowedCountries_ItemDataBound(object sender, ListViewItemEventArgs e)
        {
            var array = (e.Item.DataBoundItem as PermittedCountry).ALLOWED_COUNTRY_FLAG;
            e.Item.Image = ByteArraytoImage(array).GetThumbnailImage(20, 14, null, IntPtr.Zero);
        }
0
Dimitar
Telerik team
answered on 22 May 2018, 08:29 AM
Hi Sarin,

I am glad that this is working fine now. Do not hesitate to contact us if you have other questions.
 
Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
CheckedListBox
Asked by
Sarin
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Sarin
Top achievements
Rank 1
Share this question
or