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

[Sarin]

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

[Dimitar]

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

[Sarin]

thank you so much. 

[Sarin]

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>
    {
    }

}

[Sarin]

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

[Dimitar]

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

[Sarin]

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.

[Dimitar]

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

[Sarin]

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 [/quote]

[Dimitar]

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

[Sarin]

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?

[Dimitar]

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

[Sarin]

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);
        }

[Dimitar]

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