Bind click/ double click to Header column text

[Devinitely]

Hi,

Is it possible to detect a click or double click on Blazor Kanban Header column text and bind an action to this event? For example, editing the header text on double click?

[Vinitha Jeyakumar]

Hi Claire, 

 

 

Greetings from Syncfusion support 

 

 

We have validated your query “Bind click/ double click to Header column text” 

 

There is no in-built click event to the Kanban columns header text. But, your requirement to editing the header text on double click can be achieved by using the Header Template for Kanban Columns. In that template, you can use the In-Place Editor component for the header text field, where you can edit the text on double click. We have also prepared a sample for your reference, 

 

Code snippet: 

<SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks"> 

    <KanbanColumns> 

        <KanbanColumn KeyField="@(new List<string>() {"Open"})"> 

            <Template > 

                @{ 

                    KanbanColumn column = (KanbanColumn)context; 

                    <div class="header-template-wrap"> 

                        <div class="header-icon e-icons @column.KeyField[0]"></div> 

                        <div class="header-text"> 

                        <SfInPlaceEditor @bind-Value="@Header1" TValue="string" Mode="@Mode" EditableOn="@EditableOn" Type="Syncfusion.Blazor.InPlaceEditor.InputType.Text" SubmitOnEnter="true"> 

                                <EditorComponent> 

                                  <SfTextBox @bind-Value="@Header1"></SfTextBox> 

                                </EditorComponent> 

                        </SfInPlaceEditor></div> 

                    </div> 

                     

                } 

            </Template> 

        </KanbanColumn> 

        . . . 

           . . . 

             . . . 

    </KanbanColumns> 

    <KanbanCardSettings HeaderField="Id" ContentField="Summary"></KanbanCardSettings> 

</SfKanban> 

@code { 

    private RenderMode Mode = RenderMode.Inline; 

    private EditableType EditableOn = EditableType.DoubleClick; 

    private string Header1 = "Backlog"; 

} 

<style type="text/css"> 

    .e-inplaceeditor .e-editable-value-container .e-editable-value { 

        border-bottom: none; 

        font-size: 14px; 

    } 

 

    .e-inplaceeditor .e-editable-value-container { 

        padding: 0px; 

    } 

</style> 

 

Sample: https://www.syncfusion.com/downloads/support/forum/168883/ze/Kanban_headerText1036643098 

 

Please check the code snippet and sample and let us know if it satisfies your requirement. 

 

Regards, 

Vinitha