Cards

23 Sep 20204 minutes to read

The default elements of a card can be customized using the below properties of KanbanModel.

• Title - Used to set the title of a card.
• ImageURL - Used to set the image URL of a card. The image will be displayed at right side in default card template.
• Category - Used to set the category of a card. Based on the category the cards will be added to the respective columns.
• Description - Used to set the description text of a card.
• ColorKey - Used to specify the indicator color key. The Color value of the corresponding Key should be added in IndicatorColorPalette collection of SfKanban.
• Tags - Used to specify the tags of a card. The tags will be displayed at bottom in default card template.
• ID - Used to set the ID of a card.

c#

new KanbanModel()
{
    ID = 1,
    Title = "iOS - 1002",
    ImageURL = "Image1.png",
    Category = "Open",
    Description = "Analyze customer requirements",
    ColorKey = "Red",
    Tags = new string[] { "Incident", "Customer" }
});

Following code snippet is used to define the colors for each key.

c#

List<KanbanColorMapping> colorModels = new List<KanbanColorMapping>();
colorModels.Add(new KanbanColorMapping("Green", Color.Green));
colorModels.Add(new KanbanColorMapping("Red", Color.Red));
colorModels.Add(new KanbanColorMapping("Aqua", Color.Aqua));
colorModels.Add(new KanbanColorMapping("Blue", Color.Blue));
kanban.IndicatorColorPalette = colorModels;

Template

You can replace the entire card template with your own design using SfKanban.KanbanDelegate ‘s GetItemViewCell override method . The following code snippet and screenshot illustrates this.

c#

public class CustomDelegate : KanbanDelegate
{
	public override UIView GetItemViewCell(KanbanColumn column, object data, int position)
	{
	    KanbanModel model = (KanbanModel)data;

		UIView cell = new UIView();
		cell.BackgroundColor = UIColor.Gray;

		UILabel title = new UILabel();
		title.TextColor = UIColor.White;
		title.Text = model.Title;
		title.Font = UIFont.SystemFontOfSize(20);

		UITextView desc = new UITextView();
		desc.TextColor = UIColor.White;
		desc.Text = model.Description;
		desc.BackgroundColor = UIColor.Clear;
		desc.UserInteractionEnabled = false;
		desc.Font = UIFont.SystemFontOfSize(16);

		UIImageView avatar = new UIImageView();
		avatar.Image = UIImage.FromFile(model.ImageURL);

		title.Frame = new CoreGraphics.CGRect(10, 10, 250, 25);
		desc.Frame = new CoreGraphics.CGRect(2, 40, 170, 75);
		avatar.Frame = new CoreGraphics.CGRect(185, 45, 60, 60);

		cell.AddSubview(title);
		cell.AddSubview(desc);
		cell.AddSubview(avatar);

		return cell;
	}
}	

public partial class ViewController : UIViewController
{
	private SfKanban kanban;

	public override void ViewDidLoad()
	{
		base.ViewDidLoad();

		kanban = new SfKanban();
		kanban.Delegate = new CustomDelegate();
		kanban.ColumnWidth = 280;
	}
}