Xin chào các bạn, bài viết hôm nay mình sẻ tiếp tục hướng dẫn các bạn cách sử dụng Combobox Edit kết hợp Template HTML trên Devexpress version 22.2.3

[DEVEXPRESS] How to use Combobox Edit HTML Template

Trong bài này, mình sẽ demo load danh sách tất cả các nước trên thế giới vào Combobox Edit.

Cách load dữ liệu từ file json vào, bạn có thể download file JSON và hình ảnh các lá cờ flag country ở cuối bài viết.

Hình ảnh demo ComboboxEdit Country Select:

Các bước thực hiện các bạn có thể theo dõi video youtube bên dưới để thực hiện.

Source code C#:

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.IO;
using System.Linq;
using System.Net;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace ComboboxEditHTMLTemplate
{
    public partial class Form1 : DevExpress.XtraEditors.XtraForm
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            var countryJson = File.ReadAllText("flag/country.json");
            // parse json string to list object country using lib newtonsoft
            var listCountry = JsonConvert.DeserializeObject<List<Country>>(countryJson);
            var binddingList = new BindingList<Country>(listCountry);
            cb_country.Properties.Items.AddRange(binddingList);
            cb_country.SelectedIndex = 100;

        }        

        public class Country {
            public string Name { get; set; }
            public string Image { get; set; }
            public string Shortname { get; set; }
            public string PhoneCode { get; set; }
            public Image Photo { get; set; }
            public Image PhotoOrigin { get; set; }

            public Country(string name, string image, string phonecode)
            {
                //Property image is a url 
                Name = WebUtility.HtmlDecode( name);
                PhoneCode = $"+{phonecode}";
                var imageLoaded = LoadImageFromURI(image).Result;
                PhotoOrigin = imageLoaded;
                Photo = ResizeImage(imageLoaded, 48, 48);
              
            }

            public Image ResizeImage(Image image, int width, int height)
            {
                var destRect = new Rectangle(0, 0, width, height);
                var destImage = new Bitmap(width, height);

                destImage.SetResolution(image.HorizontalResolution, image.VerticalResolution);

                using (var graphics = Graphics.FromImage(destImage))
                {
                    graphics.CompositingMode = CompositingMode.SourceCopy;
                    graphics.CompositingQuality = CompositingQuality.HighQuality;
                    graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
                    graphics.SmoothingMode = SmoothingMode.HighQuality;
                    graphics.PixelOffsetMode = PixelOffsetMode.HighQuality;

                    using (var wrapMode = new ImageAttributes())
                    {
                        wrapMode.SetWrapMode(WrapMode.TileFlipXY);
                        graphics.DrawImage(image, destRect, 0, 0, image.Width, image.Height, GraphicsUnit.Pixel, wrapMode);
                    }
                }

                return destImage;
            }

            public Task<Image> LoadImageFromURI(string uri) {
                var task = Task.Run(() =>
                {
                    var bitmap = Bitmap.FromFile("flag/" +uri);
                    return bitmap; // 48px has declare in html css
                });

                return task;
            }



            //override function tostring for show selected item in combobox edit
            public override string ToString()
            {
                return $"({PhoneCode}) {Name}";
            }
        }

        private void btnGetCountry_Click(object sender, EventArgs e)
        {
            var countrySelected = cb_country.SelectedItem as Country;

            picCountry.Image = countrySelected.PhotoOrigin;
            lblCountry.Text = countrySelected.Name;
        }

        private void cb_country_SelectedIndexChanged(object sender, EventArgs e)
        {
            btnGetCountry_Click(null, null);
        }
    }
}

Thanks for watching!

DOWNLOAD SOURCE