JavaScript
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
DEMOS
SUPPORT
FORUM
DOWNLOAD
/ Kanban / How To / Bind header double click event
Search results

Bind header double click event in JavaScript Kanban control

23 Mar 2023 / 1 minute to read

You can bind the header double click event by using the dataBound event at the initial rendering. You can get the column header text when you double click on the headers.

Copied to clipboard
import { Kanban } from '@syncfusion/ej2-kanban';
import { DialogUtility } from '@syncfusion/ej2-popups';
import { closest } from '@syncfusion/ej2-base';
import { kanbanData } from './datasource.ts';

let kanbanObj: Kanban = new Kanban({
    dataSource: kanbanData,
    keyField: 'Status',
    columns: [
        { headerText: 'Backlog', keyField: 'Open' },
        { headerText: 'In Progress', keyField: 'InProgress' },
        { headerText: 'Testing', keyField: 'Testing' },
        { headerText: 'Done', keyField: 'Close' }
    ],
    cardSettings: {
        contentField: 'Summary',
        headerField: 'Id'
    },
    dataBound: function () {
        let headerEle: HTMLElement = document.querySelector('.e-header-row');
        headerEle.addEventListener("dblclick", function (e: Event) {
            let target = closest((<HTMLElement>e.target), '.e-header-cells');
            DialogUtility.alert({
                title: 'Header',
                content: "Double clicked on " + (<HTMLElement>target.querySelector('.e-header-text')).innerText + " header",
                showCloseIcon: true,
                closeOnEscape: true,
                animationSettings: { effect: 'Zoom' }
            });
        });
    }
});
kanbanObj.appendTo('#Kanban');
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Auto Height and Width</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Kanban auto height and width" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-kanban/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
    <script src="systemjs.config.js" type="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="content-wrapper">
            <div id="Kanban"></div>
        </div>
    </div>
</body>

</html>
Copied to clipboard
export let kanbanData: Object[] = [
    {
        'Id': 1,
        'Status': 'Open',
        'Summary': 'Analyze the new requirements gathered from the customer.',
        'Type': 'Story',
        'Priority': 'Low',
        'Tags': 'Analyze,Customer',
        'Estimate': 3.5,
        'Assignee': 'Nancy Davloio',
        'RankId': 1
    },
    {
        'Id': 2,
        'Status': 'InProgress',
        'Summary': 'Improve application performance',
        'Type': 'Improvement',
        'Priority': 'Normal',
        'Tags': 'Improvement',
        'Estimate': 6,
        'Assignee': 'Andrew Fuller',
        'RankId': 1
    },
    {
        'Id': 3,
        'Status': 'Open',
        'Summary': 'Arrange a web meeting with the customer to get new requirements.',
        'Type': 'Others',
        'Priority': 'Critical',
        'Tags': 'Meeting',
        'Estimate': 5.5,
        'Assignee': 'Janet Leverling',
        'RankId': 2
    },
    {
        'Id': 4,
        'Status': 'InProgress',
        'Summary': 'Fix the issues reported in the IE browser.',
        'Type': 'Bug',
        'Priority': 'Release Breaker',
        'Tags': 'IE',
        'Estimate': 2.5,
        'Assignee': 'Janet Leverling',
        'RankId': 2
    },
    {
        'Id': 5,
        'Status': 'Testing',
        'Summary': 'Fix the issues reported by the customer.',
        'Type': 'Bug',
        'Priority': 'Low',
        'Tags': 'Customer',
        'Estimate': '3.5',
        'Assignee': 'Steven walker',
        'RankId': 1
    },
    {
        'Id': 6,
        'Status': 'Close',
        'Summary': 'Arrange a web meeting with the customer to get the login page requirements.',
        'Type': 'Others',
        'Priority': 'Low',
        'Tags': 'Meeting',
        'Estimate': 2,
        'Assignee': 'Michael Suyama',
        'RankId': 1
    },
    {
        'Id': 7,
        'Status': 'Validate',
        'Summary': 'Validate new requirements',
        'Type': 'Improvement',
        'Priority': 'Low',
        'Tags': 'Validation',
        'Estimate': 1.5,
        'Assignee': 'Robert King',
        'RankId': 1
    },
    {
        'Id': 8,
        'Status': 'Close',
        'Summary': 'Login page validation',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Validation,Fix',
        'Estimate': 2.5,
        'Assignee': 'Laura Callahan',
        'RankId': 2
    },
    {
        'Id': 9,
        'Status': 'Testing',
        'Summary': 'Fix the issues reported in Safari browser.',
        'Type': 'Bug',
        'Priority': 'Release Breaker',
        'Tags': 'Fix,Safari',
        'Estimate': 1.5,
        'Assignee': 'Nancy Davloio',
        'RankId': 2
    },
    {
        'Id': 10,
        'Status': 'Close',
        'Summary': 'Test the application in the IE browser.',
        'Type': 'Story',
        'Priority': 'Low',
        'Tags': 'Testing,IE',
        'Estimate': 5.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 3
    },
    {
        'Id': 11,
        'Status': 'Validate',
        'Summary': 'Validate the issues reported by the customer.',
        'Type': 'Story',
        'Priority': 'High',
        'Tags': 'Validation,Fix',
        'Estimate': 1,
        'Assignee': 'Steven walker',
        'RankId': 1
    },
    {
        'Id': 12,
        'Status': 'Testing',
        'Summary': 'Check Login page validation.',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Testing',
        'Estimate': 0.5,
        'Assignee': 'Michael Suyama',
        'RankId': 3
    },
    {
        'Id': 13,
        'Status': 'Open',
        'Summary': 'API improvements.',
        'Type': 'Improvement',
        'Priority': 'High',
        'Tags': 'Grid,API',
        'Estimate': 3.5,
        'Assignee': 'Robert King',
        'RankId': 3
    },
    {
        'Id': 14,
        'Status': 'InProgress',
        'Summary': 'Add responsive support to application',
        'Type': 'Epic',
        'Priority': 'Critical',
        'Tags': 'Responsive',
        'Estimate': 6,
        'Assignee': 'Laura Callahan',
        'RankId': 3
    },
    {
        'Id': 15,
        'Status': 'Open',
        'Summary': 'Show the retrieved data from the server in grid control.',
        'Type': 'Story',
        'Priority': 'High',
        'Tags': 'Database,SQL',
        'Estimate': 5.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 4
    },
    {
        'Id': 16,
        'Status': 'InProgress',
        'Summary': 'Fix cannot open user’s default database SQL error.',
        'Priority': 'Critical',
        'Type': 'Bug',
        'Tags': 'Database,Sql2008',
        'Estimate': 2.5,
        'Assignee': 'Janet Leverling',
        'RankId': 4
    },
    {
        'Id': 17,
        'Status': 'Testing',
        'Summary': 'Fix the issues reported in data binding.',
        'Type': 'Story',
        'Priority': 'Normal',
        'Tags': 'Databinding',
        'Estimate': '3.5',
        'Assignee': 'Janet Leverling',
        'RankId': 4
    },
    {
        'Id': 18,
        'Status': 'Close',
        'Summary': 'Analyze SQL server 2008 connection.',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Grid,Sql',
        'Estimate': 2,
        'Assignee': 'Andrew Fuller',
        'RankId': 4
    },
    {
        'Id': 19,
        'Status': 'Validate',
        'Summary': 'Validate databinding issues.',
        'Type': 'Story',
        'Priority': 'Low',
        'Tags': 'Validation',
        'Estimate': 1.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 1
    },
    {
        'Id': 20,
        'Status': 'Close',
        'Summary': 'Analyze grid control.',
        'Type': 'Story',
        'Priority': 'High',
        'Tags': 'Analyze',
        'Estimate': 2.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 5
    },
    {
        'Id': 21,
        'Status': 'Close',
        'Summary': 'Stored procedure for initial data binding of the grid.',
        'Type': 'Others',
        'Priority': 'Release Breaker',
        'Tags': 'Databinding',
        'Estimate': 1.5,
        'Assignee': 'Steven walker',
        'RankId': 6
    },
    {
        'Id': 22,
        'Status': 'Close',
        'Summary': 'Analyze stored procedures.',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Procedures',
        'Estimate': 5.5,
        'Assignee': 'Janet Leverling',
        'RankId': 7
    },
    {
        'Id': 23,
        'Status': 'Validate',
        'Summary': 'Validate editing issues.',
        'Type': 'Story',
        'Priority': 'Critical',
        'Tags': 'Editing',
        'Estimate': 1,
        'Assignee': 'Nancy Davloio',
        'RankId': 1
    },
    {
        'Id': 24,
        'Status': 'Testing',
        'Summary': 'Test editing functionality.',
        'Type': 'Story',
        'Priority': 'Normal',
        'Tags': 'Editing,Test',
        'Estimate': 0.5,
        'Assignee': 'Nancy Davloio',
        'RankId': 5
    },
    {
        'Id': 25,
        'Status': 'Open',
        'Summary': 'Enhance editing functionality.',
        'Type': 'Improvement',
        'Priority': 'Low',
        'Tags': 'Editing',
        'Estimate': 3.5,
        'Assignee': 'Andrew Fuller',
        'RankId': 5
    }
];
Kanban / Styling And Appearance
Kanban / Dynamically Change columns