Edit Column "Items Count: ....." | UWP | SfKanban

Hunter · 2019-06-09T19:17:41.9100000+00:00

Hi, Is there anyway to edit the font color/style of the text under the Column title? I tried to find where I could edit the "Item Count: ... | Min: ... " and I was unable to. Thanks!

MK Muneesh Kumar G Syncfusion Team June 10, 2019 07:18 AM UTC

Hi Hunter,

Greetings from Syncfusion.

We have analyzed your requirement and you can achieve this by setting ColumnHeaderTemplate as per the below code snippet.

Code snippet

<syncfusion:SfKanban.ColumnHeaderTemplate>

</StackPanel>

</DataTemplate>

</syncfusion:SfKanban.ColumnHeaderTemplate>

UG: https://help.syncfusion.com/uwp/sfkanban/column#headers

Please let us know if you have any other queries.

Thanks,

Muneesh Kumar G

HU Hunter June 10, 2019 01:52 PM UTC

Thank you for the wonderful code!

How would I go about adding the collapsing columns back? It looks like when I add the template, my Is Expanded is true doesn't do anything on my column, and collapsing doesn't show?

MK Muneesh Kumar G Syncfusion Team June 12, 2019 07:00 AM UTC

Hi Hunter,

Thanks for update, we have analyzed your requirement and we would like to inform you that swim lanes are horizontal categorizations.

This allows you to categorize your current workflow by different projects, teams, users, or whatever you need only in horizontal direction, and it won’t allow vertical categorization(collapse) it is the behavior of our control while swim lane is enabled.

Regards,
Muneesh Kumar G

HU Hunter June 14, 2019 07:37 PM UTC

Thank you :)

Quick question too, with this data template, how do I add all of the original content? Such as the Max, Min, Count with the counting already done as in the samples? Also the collapsing of the column option isn't showing and tried to get it to show

Thanks!

MK Muneesh Kumar G Syncfusion Team June 17, 2019 09:09 AM UTC

Hi Hunter,

Query: How do I add all of the original content? Such as the Max, Min, Count with the counting already done as in the samples?

We have prepared the sample based on your requirement and we have used the default Kanban header template with the style option.

Refer the below code snippet for the better understanding.

Code Snippet [XAML] :

<Page.Resources>

<local:CardCountConverter x:Key="CardCountConverter"/>

</ResourceDictionary>

</Page.Resources>

<kanban:SfKanban.ColumnHeaderTemplate>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<TextBlock x:Name="Header" Text="{Binding Header}"

VerticalAlignment="Center"

FontWeight="Medium"

FontSize="16"

Foreground="Blue"

TextWrapping="NoWrap"

Grid.Row="0"

Margin="0,5,0,5"

Grid.ColumnSpan="1" />

<StackPanel Grid.Row="1" x:Name="WIPPanel"

Grid.Column="0"

Orientation="Horizontal">

<TextBlock Text="{Binding [ItemsCount]}"

Margin="0,2,0,5"

VerticalAlignment="Center"

Foreground="Green"

FontSize="14"

TextWrapping="WrapWholeWords"/>

<TextBlock Text="{Binding CardCount}"

Margin="5,2,0,5"

VerticalAlignment="Center"

Foreground="Black"

FontSize="14"

TextWrapping="WrapWholeWords"/>

<TextBlock Text="{Binding Content, RelativeSource={RelativeSource Mode=TemplatedParent},

ConverterParameter=MinMaxLimit,

Converter={StaticResource CardCountConverter}}"

Margin="0,2,0,5"

Foreground="Red"

VerticalAlignment="Center"

FontSize="14"

TextWrapping="WrapWholeWords" />

</StackPanel>

</Grid>

</DataTemplate>

</kanban:SfKanban.ColumnHeaderTemplate>

Code Snippet [C#]:

public class CardCountConverter : IValueConverter

{

public object Convert(object value, Type targetType, object parameter, string language)

{

if (parameter != null && parameter.Equals("SwimlaneCardCount"))

{

int itemsCount = (int)value;

if (itemsCount == 0 || itemsCount == 1)

{

return value + " " + "Item";

}

return value + " " + "Items";

}

ColumnTag columnTag = value as ColumnTag;

if (columnTag == null)

{

return string.Empty;

}

if (columnTag.Minimum > -1 && columnTag.Maximum > -1)

{

return " | " + "Min" + " " + columnTag.Minimum + " / "

+ "Max" + " " + columnTag.Maximum;

}

else if (columnTag.Maximum > -1)

{

return " | " + "Max" + " " + columnTag.Maximum;

}

else if (columnTag.Minimum > -1)

{

return " | " + "Min" + " " + columnTag.Minimum;

}

else

{

return string.Empty;

}

public object ConvertBack(object value, Type targetType, object parameter, string language)

{

return value;

}

The sample can be downloaded from the link below.

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/KanbanTemplate-1948232478

Query: Also the collapsing of the column option isn't showing and tried to get it to show.

As we said we said in our previous update, SfKanban won’t allow vertical categorization(collapse) it is the behavior of our control while swim lane is enabled

But we will consider this a feature request. If you could confirm some specific details, it would help us to implement the feature in line with your requirement.

Please review the following screen shot of the feature and let us know if it conforms to your requirement. If our definition of this feature is different from your requirement, then let us know the specific details, so that we can work towards fulfilling your requirement.

Regards,

Muneesh Kumar G.

HU Hunter June 17, 2019 03:50 PM UTC

Hi!

Thank you for your reply.

I'm sorry if I didn't word it correctly, I do not need collapsing columns in swimlane. I actually swapped to the basic view without the Assignee property, so I'm no longer using swimlane. (Until the late June update from the bug feedback I left from other forum)

This column header template works great, but seeing as I'm not using swimlane anymore, how do I add the collapsing rows to that template?

MK Muneesh Kumar G Syncfusion Team June 18, 2019 09:05 AM UTC

Hi Hunter,

We have prepared the sample based on your requirement and you can achieve your requirement by replacing the below DataTemplate for the Kanban header with template provided in the last update.

Code Snippet [XAML]:

<kanban:SfKanban.ColumnHeaderTemplate>

<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<TextBlock x:Name="Header" Text="{Binding Header}"

VerticalAlignment="Center"

FontWeight="Medium"

FontSize="16"

Foreground="Blue"

TextWrapping="NoWrap"

Grid.Row="0"

Margin="0,5,0,5"

Grid.ColumnSpan="1" />

<StackPanel Grid.Row="1" x:Name="WIPPanel"

Grid.Column="0"

Orientation="Horizontal">

<TextBlock Text="{Binding [ItemsCount]}"

Margin="0,2,0,5"

VerticalAlignment="Center"

Foreground="Green"

FontSize="14"

TextWrapping="WrapWholeWords"/>

<TextBlock Text="{Binding CardCount}"

Margin="5,2,0,5"

VerticalAlignment="Center"

Foreground="Black"

FontSize="14"

TextWrapping="WrapWholeWords"/>

<TextBlock Text="{Binding Content, RelativeSource={RelativeSource Mode=TemplatedParent},

ConverterParameter=MinMaxLimit,

Converter={StaticResource CardCountConverter}}"

Margin="0,2,0,5"

Foreground="Red"

VerticalAlignment="Center"

FontSize="14"

TextWrapping="WrapWholeWords" />

</StackPanel>

<Border Grid.Column="1" x:Name="CollapsedIcon" Background="Transparent"

Grid.Row="1">

<Path Data="M172.444,310.778 L158.444,317.111 L171.222,324.222"

Stretch="Fill" HorizontalAlignment="Right"

Stroke="#FF595959"

StrokeThickness="2"

StrokeLineJoin="Miter"

UseLayoutRounding="False"

Width="7" Height="14">

<Path.RenderTransform>

<CompositeTransform x:Name="RotateTransform"

Rotation="0"/>

</Path.RenderTransform>

</Path>

</Border>

</Grid>

</DataTemplate>

</kanban:SfKanban.ColumnHeaderTemplate>

The sample can be downloaded from the link below.

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/KanbanTemplate631806286

Feel free to contact us if you need any further assistance on this.

Regards,
Muneesh Kumar G.

HU Hunter June 18, 2019 05:07 PM UTC

Hi!

Thank you for that helpful snippet. I was able to achieve what I was looking to do with it. Lastly, when I collapse the column, the title column when collapsed is still a dark color even after changing the other textfields to White foreground. How do I change the color of the sideways title on the collapsed column?

HU Hunter June 18, 2019 05:23 PM UTC

So, for instance, if I collapse my "In Progress" column, then when the text turns to the side and says "In Progress[0]" but is black. I was looking to get it to white text because I have a dark Acrylic brush for the background

HU Hunter June 18, 2019 06:36 PM UTC

^^ Here's a screenshot for my above comments. It wanted it in a zip folder so I just added the picture to the folder and zipped it.

Let me know if you need any additional context :)

Essentially, I just want that "In Progress[0]" to be white along with the other text

Attachment: KanbanPicExample_271767ac.zip

HU Hunter June 19, 2019 05:51 PM UTC

Hi,

Hope everyone's day is going well.

Has anyone been able to figure out my above comments with changing the text color of the "In Progress[0]" when the column is collapsed?

MK Muneesh Kumar G Syncfusion Team June 20, 2019 12:05 PM UTC

Hi Hunter,

We have prepared the sample based on your requirement and you can achieve your requirement by using the creating the CustomKanbanColumn class and provided the template for the collapsed header.

Please refer the below code snippet for understanding.

Code Snippet [XAML]:

…

</ControlTemplate>

public class CustomKanbanColumn : KanbanColumn

{

#region Fields

private ControlTemplate collapsedTemplate;

private ControlTemplate expandedTemplate;

#endregion

#region ctor

public CustomKanbanColumn()

{

PointerReleased += KanbanColumnAdv_PointerReleased;

expandedTemplate = KanbanDictionaries.GenericCommonDictionary["ExpandedTemplate"] as ControlTemplate;

collapsedTemplate = KanbanDictionaries.GenericCommonDictionary["CollapsedTemplate"] as ControlTemplate;

}

#endregion

#region Properties

public new bool IsExpanded

{

get { return (bool)GetValue(IsExpandedProperty); }

set { SetValue(IsExpandedProperty, value); }

}

..

private void KanbanColumnAdv_PointerReleased(object sender, PointerRoutedEventArgs e)

{

if (e.OriginalSource is Border &&

((e.OriginalSource as Border).Name == "CollapsedIcon"))

{

IsExpanded = false;

}

else if (!IsExpanded)

{

IsExpanded = true;

}

#endregion

}

The sample can be downloaded from the link below.

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/KanbanTemplate1434780780

Feel free to contact us if you need any further assistance on this.

Regards,
Muneesh Kumar G.

HU Hunter June 20, 2019 03:41 PM UTC

Hi,

Thank you so much for your help! I think that might have been the last thing I was having troubles with besides the bug report I have opened.

I appreciate your teams time and patience with my issues and for your helpful examples to help me get done what I needed.

Is this bug still on track to be in the late June update? Link is here: https://www.syncfusion.com/feedback/6804/swimline-cards-not-gets-refereshed

Also, does your team offer any deals for college students for the fully open sourced software?

Thank you!

- Hunter

HU Hunter June 21, 2019 03:10 AM UTC

Hi again,

Actually, after running the sample a couple times there seems to be a bug in collapsed view, see the attached screenshots. After a few runs and collapsing of the columns sometimes, it'll randomly do this. I've downloaded a few fresh copies of that project you posted last and they all did it after a few times. I even tried to uncomment some of the logic in the class that was commented out. The clicking for the collapse was a little off from the icon, at least on my end 🤔

Please let me know if you need any additional context.

Regards,
Hunter

Attachment: Kanban_CollapseBug_43d07635.zip

MK Muneesh Kumar G Syncfusion Team June 21, 2019 11:43 AM UTC

Hi Hunter,

Query: After a few runs and collapsing of the columns sometimes

We have checked the reported problem in the sample that we have updated. It works fine with collapsed template.

Image output:

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/KanbanTemplate1434780780

Since we are not aware of your exact application scenario, we were not able to reproduce this issue at our end, so can you please revert us by modifying the sample based on your application or could you please provide us your application. This will be helpful for us to investigate further and provide you a better solution at the earliest.

Query: Is this bug still on track to be in the late June update?

Bug has been fixed and it will available in our upcoming volume 2 release and it has been planned to release at this end of the June 2019. We appreciate patience until then.

Query: Also, does your team offer any deals for college students for the fully open sourced software?

We have forwarded this query to our sales team. They will contact you for the further details.

Regards,

Muneesh Kumar G

HU Hunter June 21, 2019 12:44 PM UTC

Hi,

Thank you for your helpful information :)

That is strange it didn't do it on your end. I didn't modify your template when it did it to me 🤔 When I get a minute at work, I'll download your newest sample to see if I can reproduce the issue and track what I am doing to get to it!

I just pushed my test branch to github for my project, so if you want to download that branch as a .zip or clone it to try it and see if that issue shows for you; I just ran it again and it does show. Whenever I run that one, that text always messes up as in the photo I provided.

Link: https://github.com/hjohnson12/KanbanBoardUWP/tree/update_collapsedColumnTemplate

Also, thank you for the update on the bugfix and student deal's question. You're very helpful :)

IM Iyyappan Mani Syncfusion Team June 25, 2019 01:39 PM UTC

Hi Hunter,

We have checked your application and you can overcome this issue by making the below changes in the provided template in your application.

Code Snippet [XAML]:

Before changes:

<TextBlock

Margin="{Binding Converter={StaticResource CollapsedHeaderMarginConverter}, RelativeSource={RelativeSource Mode=Self}}"

….

Text="{TemplateBinding Title}">

…

</TextBlock>

</Canvas>

</Grid>

After Changes:

<TextBlock

….

Text="{TemplateBinding Title}"

Margin="{Binding Converter={StaticResource CollapsedHeaderMarginConverter}, RelativeSource={RelativeSource Mode=Self}}">

…

</TextBlock>

</Canvas>

</Grid>

Need to set the margin after the text binding.

We have modified the sample based on your requirement.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/KanbanBoardUWP1783112503

Please revert us for any other queries.

Regards,

Iyyappan M.

HU Hunter June 28, 2019 02:24 PM UTC

Thank you, that fixed my problem for the text rendering :)

MK Muneesh Kumar G Syncfusion Team June 29, 2019 07:25 AM UTC

Hi Hunter,

Thanks for the update.

We are glad to know that the given solution works. Please let us know if you need any further assistance.

Regards,

Muneesh Kumar G.

HU Hunter June 29, 2019 07:36 PM UTC

Hi Muneesh,

Hope you're well today!

I happened to try out the new Vol 2 Beta to see about my Swimlane bug issue. I installed the package and tested, and it still seems to persist. I let everyone know on my bug report that I linked to this thread (I think you did as well) but it seems as if it's been deleted? Or I'm unable to access it.

Just thought I'd check and see!

Thanks,
Hunter

MK Muneesh Kumar G Syncfusion Team July 2, 2019 10:45 AM UTC

Hi Hunter,

Sorry for the inconvenience caused.

This issue will be fixed in our upcoming volume 2 main release, which is scheduled mid of July 2019.

Until then you can resolve this problem by referring assemblies from license build installed location.

C:\Program Files (x86)\Syncfusion\Essential Studio\Universal Windows\<Version>\Assemblies for Universal Windows\10.0

Regards,
Muneesh Kumar G.

HU Hunter July 3, 2019 02:26 PM UTC

Hi Muneesh,

Thank you, that is no problem! :)

Also, another question having to do with these last few changes. So, using the above code and templates for the collapsing columns and all, how would I be able to let the user create custom columns that will look exactly like the ones declared using XAML in the examples?

HU Hunter July 3, 2019 02:33 PM UTC

^^ Let me add some context to the above comment.

So, I would like to start the program and let the user create columns after typing the column name, min/max numbers etc., and then press a button to create. Is there a preferred way to do this using your control so nothing breaks using the KanbanModel?

MK Muneesh Kumar G Syncfusion Team July 6, 2019 11:28 AM UTC

Hi Hunter,

We have modified your sample based on your requirement. Now, you can select the NewColumn item from the File menu bar to create the new custom column by providing details shown in the dialog box. Please download the sample from the following location.

Sample: https://www.syncfusion.com/downloads/support/forum/145139/ze/KanbanBoardUWP-30947997.zip

Code Snippet:

private async void NewColumn_Click(object sender, RoutedEventArgs e)

{

CustomKanbanColumn customKanbanColumn = new CustomKanbanColumn();

CustomColumnDialog newColumnTaskDialog = new CustomColumnDialog

{

Model = null,

Kanban = kanbanBoard,

KanbanColumn = customKanbanColumn,

PrimaryButtonText = "Create",

IsSecondaryButtonEnabled = false

};

await newColumnTaskDialog.ShowAsync(); // Dialog open

kanbanBoard.Columns.Add(customKanbanColumn);

}

<ContentDialog.Resources>

<ResourceDictionary.MergedDictionaries>

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</ContentDialog.Resources>

<ContentDialog.Background>

<AcrylicBrush

BackgroundSource="HostBackdrop"

TintColor="{ThemeResource RegionColor}"

TintOpacity="0.6" />

</ContentDialog.Background>

<Grid>

<TextBox

x:Name="title"

Header="Title:"

IsEnabled="True"

Text="{x:Bind KanbanColumn.Title, Mode=TwoWay}" />

<TextBox

x:Name="category"

Header="Category:"

IsEnabled="True"

Text="{x:Bind KanbanColumn.Categories, Mode=TwoWay}" />

<TextBox

x:Name="minItemCount"

Header="Min_Limit:"

IsEnabled="True"

Text="{x:Bind KanbanColumn.MinimumLimit, Mode=TwoWay}" />

<TextBox

x:Name="maxItemcount"

Header="Max_Limit:"

IsEnabled="True"

Text="{x:Bind KanbanColumn.MaximumLimit, Mode=TwoWay}" />

</StackPanel>

</ScrollViewer>

</Grid>

</ContentDialog>

Please let us know if you need further assistance on this.

Regards,

Muneesh Kumar G.

HU Hunter replied to Muneesh Kumar G December 10, 2021 05:54 PM UTC

Hello Team,

I've gotten around to adding the new column feature in my application, and it seems to work as expected on Debug x64 mode, but when I run it in my application on Release x64 mode it doesn't seem to populate the columns. I followed the above example as well and wasn't too sure what the issue may be - months ago when I had time to work on it I came across a dependency property issue but it hasn't popped up since. Any ideas? The link to the repo is the following and the latest commit contains the work for adding a new column in Board.xaml.cs inside of ConfigureBoardColumns(): https://github.com/hjohnson12/Kanban-Tasker

Thanks team!!

GM Gayathri Manickam Syncfusion Team December 13, 2021 12:40 PM UTC

Hi Hunter,

This is a general update to let you know that our support team has taken out your query. We will update you the complete status on or before 15th December 2021.

Regards,

Gayathri M

DD Devakumar Dhanapoosanam Syncfusion Team December 16, 2021 03:19 AM UTC

Hi Hunter,

We need some more time to validate the reported issue and we will update further details on December 17, 2021.

Regards,

Devakumar D

DD Devakumar Dhanapoosanam Syncfusion Team December 20, 2021 03:58 AM UTC

Hi Hunter,

Sorry for the delay. Still, we need some more time to find the root cause of reported issue at our end and we will update complete details on December 21, 2021.

Regards,

Devakumar D

YP Yuvaraj Palanisamy Syncfusion Team December 22, 2021 03:45 AM UTC

Hi Hunter,

Thanks for your patience.

On further analysis of the reported problem “KanbanColumn isnot rendered in Release mode”, you can resolve this in the sample level by adding the following code in your application. Please find the code example below.

NewColumnDialog.xam.cs

public CustomKanbanColumn KanbanColumn { get; set; }

BoardView.xaml.cs

private void AddColumnButton_Click(object sender, RoutedEventArgs e)

{

AddColumn();

}

private async Task AddColumn()

{

var dialog = new NewColumnDialog();

var result = await dialog.ShowAsync();

if (result == ContentDialogResult.Primary)

{

var columnName = dialog.ColumnName;

var maxTaskLimit = dialog.MaxTaskLimit;

//Verify variable data is in correct format

if (ViewModel.Columns.Any(x => x.ColumnName.Equals(columnName)))

{

ViewModel.ShowInAppNotification("A column with that name already exists");

return;

}

else if (columnName == "" || maxTaskLimit == 0)

{

ViewModel.ShowInAppNotification("Please fill out the required fields");

return;

}

// Continue with creating column

var column = ViewModel.CreateColumn(columnName, maxTaskLimit);

CustomKanbanColumn newColumn = new CustomKanbanColumn()

{

Title = column.ColumnName,

Categories = column.ColumnName,

CollapsedColumnTemplate = this.Resources["CollapsedColumnTemplate"] as ControlTempla

MaximumLimit = column.MaxTaskLimit

};

var myBinding = new Binding()

{

Path = new PropertyPath("ColumnName"),

Source = column,

Mode = BindingMode.TwoWay,

UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged

};

var myBinding2 = new Binding()

{

Path = new PropertyPath("MaxTaskLimit"),

Source = column,

Mode = BindingMode.TwoWay,

UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged

};

// Set bindings

newColumn.SetBinding(KanbanColumn.TitleProperty, myBinding);

newColumn.SetBinding(KanbanColumn.CategoriesProperty, myBinding);

newColumn.SetBinding(KanbanColumn.MaximumLimitProperty, myBinding2);

// Add to kanban columns

kanbanBoard.Columns.Add(newColumn);

}

We hope to resolve this code example at your end. Please let us know if you have any further assistance.

Regards,

Yuvaraj.