Sets or gets the columnRenderer property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKanban #myKanban 
            [width]='"100%"' [height]='"100%"' [source]='dataAdapter' [columns]='columns' [columnRenderer]="columnRenderer">
        </jqxKanban>
    `
})
 
export class AppComponent {
    fields: any[] =
    [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
    ];
    
    source: any =
    {
        localData:
        [
            { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
            { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
            { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
        ],
        dataType: 'array',
        dataFields: this.fields
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Backlog', dataField: 'new', maxItems: 10 }
    ];
}

interface KanbanColumns {
     text?: String;
     dataField?: String;
     maxItems?: Number;
     collapsible?: Boolean;
     collapseDirection?: KanbanCollapseDirection;
     headerElement?: Any;
     collapsedHeaderElement?: Any;
     iconClassName?: String;
}

Sets or gets the columns property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKanban #myKanban 
            [width]='"100%"' [height]='"100%"' [source]='dataAdapter' [columns]='columns'>
        </jqxKanban>
    `
})
 
export class AppComponent {
    fields: any[] =
    [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
    ];
    
    source: any =
    {
        localData:
        [
            { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
            { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
            { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
        ],
        dataType: 'array',
        dataFields: this.fields
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Backlog', dataField: 'new', maxItems: 10 }
    ];
}

Sets or gets the connectWith property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKanban #myKanban 
            [width]='"100%"' [height]='"100%"' [source]='dataAdapter' [columns]='columns' [connectWith]="'#jqxKanban2'">
        </jqxKanban>
    `
})
 
export class AppComponent {
    fields: any[] =
    [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
    ];
    
    source: any =
    {
        localData:
        [
            { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
            { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
            { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
        ],
        dataType: 'array',
        dataFields: this.fields
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Backlog', dataField: 'new', maxItems: 10 }
    ];
}

Sets or gets the headerHeight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKanban #myKanban 
            [width]='"100%"' [height]='"100%"' [source]='dataAdapter' [columns]='columns' [headerHeight]="50">
        </jqxKanban>
    `
})
 
export class AppComponent {
    fields: any[] =
    [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
    ];
    
    source: any =
    {
        localData:
        [
            { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
            { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
            { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
        ],
        dataType: 'array',
        dataFields: this.fields
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Backlog', dataField: 'new', maxItems: 10 }
    ];
}

Sets or gets the headerWidth property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKanban #myKanban 
            [width]='"100%"' [height]='"100%"' [source]='dataAdapter' [columns]='columns' [headerWidth]="50">
        </jqxKanban>
    `
})
 
export class AppComponent {
    fields: any[] =
    [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
    ];
    
    source: any =
    {
        localData:
        [
            { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
            { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
            { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
        ],
        dataType: 'array',
        dataFields: this.fields
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Backlog', dataField: 'new', maxItems: 10 }
    ];
}

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKanban #myKanban 
            [width]='"100%"' [height]='"100%"' [source]='dataAdapter' [columns]='columns'>
        </jqxKanban>
    `
})
 
export class AppComponent {
    fields: any[] =
    [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
    ];
    
    source: any =
    {
        localData:
        [
            { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
            { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
            { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
        ],
        dataType: 'array',
        dataFields: this.fields
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Backlog', dataField: 'new', maxItems: 10 }
    ];
}

Sets or gets the itemRenderer property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKanban #myKanban 
            [width]='"100%"' [height]='"100%"' [source]='dataAdapter' [columns]='columns' [itemRenderer]="itemRenderer">
        </jqxKanban>
    `
})
 
export class AppComponent {
    fields: any[] =
    [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
    ];
    
    source: any =
    {
        localData:
        [
            { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
            { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
            { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
        ],
        dataType: 'array',
        dataFields: this.fields
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Backlog', dataField: 'new', maxItems: 10 }
    ];
}

Sets or gets the ready property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKanban #myKanban 
            [width]='"100%"' [height]='"100%"' [source]='dataAdapter' [columns]='columns' [ready]="ready">
        </jqxKanban>
    `
})
 
export class AppComponent {
    fields: any[] =
    [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
    ];
    
    source: any =
    {
        localData:
        [
            { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
            { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
            { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
        ],
        dataType: 'array',
        dataFields: this.fields
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Backlog', dataField: 'new', maxItems: 10 }
    ];
}

Sets or gets the rtl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKanban #myKanban 
            [width]='"100%"' [height]='"100%"' [source]='dataAdapter' [columns]='columns' [rtl]="true">
        </jqxKanban>
    `
})
 
export class AppComponent {
    fields: any[] =
    [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
    ];
    
    source: any =
    {
        localData:
        [
            { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
            { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
            { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
        ],
        dataType: 'array',
        dataFields: this.fields
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Backlog', dataField: 'new', maxItems: 10 }
    ];
}

Sets or gets the source property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKanban #myKanban 
            [width]='"100%"' [height]='"100%"' [source]='dataAdapter' [columns]='columns'>
        </jqxKanban>
    `
})
 
export class AppComponent {
    fields: any[] =
    [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
    ];
    
    source: any =
    {
        localData:
        [
            { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
            { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
            { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
        ],
        dataType: 'array',
        dataFields: this.fields
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Backlog', dataField: 'new', maxItems: 10 }
    ];
}

Sets or gets the resources property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKanban #myKanban 
            [width]='"100%"' [height]='"100%"' [source]='dataAdapter' [columns]='columns' [resources]="resources">
        </jqxKanban>
    `
})
 
export class AppComponent {
    fields: any[] =
    [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
    ];
    
    source: any =
    {
        localData:
        [
            { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
            { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
            { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
        ],
        dataType: 'array',
        dataFields: this.fields
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Backlog', dataField: 'new', maxItems: 10 }
    ];
}

Sets or gets the template property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKanban #myKanban 
            [width]='"100%"' [height]='"100%"' [source]='dataAdapter' [columns]='columns' [template]="template">
        </jqxKanban>
    `
})
 
export class AppComponent {
    fields: any[] =
    [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
    ];
    
    source: any =
    {
        localData:
        [
            { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
            { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
            { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
        ],
        dataType: 'array',
        dataFields: this.fields
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Backlog', dataField: 'new', maxItems: 10 }
    ];
}

Sets or gets the templateContent property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKanban #myKanban 
            [width]='"100%"' [height]='"100%"' [source]='dataAdapter' [columns]='columns' [templateContent]="templateContent">
        </jqxKanban>
    `
})
 
export class AppComponent {
    fields: any[] =
    [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
    ];
    
    source: any =
    {
        localData:
        [
            { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
            { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
            { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
        ],
        dataType: 'array',
        dataFields: this.fields
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Backlog', dataField: 'new', maxItems: 10 }
    ];
}

Sets or gets the theme property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKanban #myKanban 
            [width]='"100%"' [height]='"100%"' [source]='dataAdapter' [columns]='columns' [theme]="'energyblue'">
        </jqxKanban>
    `
})
 
export class AppComponent {
    fields: any[] =
    [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
    ];
    
    source: any =
    {
        localData:
        [
            { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
            { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
            { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
        ],
        dataType: 'array',
        dataFields: this.fields
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Backlog', dataField: 'new', maxItems: 10 }
    ];
}

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKanban #myKanban 
            [width]='"100%"' [height]='"100%"' [source]='dataAdapter' [columns]='columns'>
        </jqxKanban>
    `
})
 
export class AppComponent {
    fields: any[] =
    [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
    ];
    
    source: any =
    {
        localData:
        [
            { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
            { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
            { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
        ],
        dataType: 'array',
        dataFields: this.fields
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Backlog', dataField: 'new', maxItems: 10 }
    ];
}

This event is triggered when jqxKanban column is clicked.

Code examples

Bind to the columnAttrClicked event of jqxKanban.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKanban #myKanban (onColumnAttrClicked)="ColumnAttrClicked($event)"
            [width]='"100%"' [height]='"100%"' [source]='dataAdapter' [columns]='columns'>
        </jqxKanban>
    `
})
 
export class AppComponent {
    ColumnAttrClicked(event: any): void 
    {
        // Do Something
    }

    fields: any[] =
    [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
    ];
    
    source: any =
    {
        localData:
        [
            { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
            { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
            { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
        ],
        dataType: 'array',
        dataFields: this.fields
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Backlog', dataField: 'new', maxItems: 10 }
    ];
}
							
						

This event is triggered when jqxKanban column is collapsed.

Code examples

Bind to the columnCollapsed event of jqxKanban.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKanban #myKanban (onColumnCollapsed)="ColumnCollapsed($event)"
            [width]='"100%"' [height]='"100%"' [source]='dataAdapter' [columns]='columns'>
        </jqxKanban>
    `
})
 
export class AppComponent {
    ColumnCollapsed(event: any): void 
    {
        // Do Something
    }

    fields: any[] =
    [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
    ];
    
    source: any =
    {
        localData:
        [
            { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
            { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
            { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
        ],
        dataType: 'array',
        dataFields: this.fields
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Backlog', dataField: 'new', maxItems: 10 }
    ];
}
							
						

This event is triggered when jqxKanban column is expanded.

Code examples

Bind to the columnExpanded event of jqxKanban.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKanban #myKanban (onColumnExpanded)="ColumnExpanded($event)"
            [width]='"100%"' [height]='"100%"' [source]='dataAdapter' [columns]='columns'>
        </jqxKanban>
    `
})
 
export class AppComponent {
    ColumnExpanded(event: any): void 
    {
        // Do Something
    }

    fields: any[] =
    [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
    ];
    
    source: any =
    {
        localData:
        [
            { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
            { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
            { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
        ],
        dataType: 'array',
        dataFields: this.fields
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Backlog', dataField: 'new', maxItems: 10 }
    ];
}
							
						

This event is triggered when some element of an item is clicked.

Code examples

Bind to the itemAttrClicked event of jqxKanban.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKanban #myKanban (onItemAttrClicked)="ItemAttrClicked($event)"
            [width]='"100%"' [height]='"100%"' [source]='dataAdapter' [columns]='columns'>
        </jqxKanban>
    `
})
 
export class AppComponent {
    ItemAttrClicked(event: any): void 
    {
        // Do Something
    }

    fields: any[] =
    [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
    ];
    
    source: any =
    {
        localData:
        [
            { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
            { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
            { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
        ],
        dataType: 'array',
        dataFields: this.fields
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Backlog', dataField: 'new', maxItems: 10 }
    ];
}
							
						

This event is triggered when an item is moved.

Code examples

Bind to the itemMoved event of jqxKanban.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKanban #myKanban (onItemMoved)="ItemMoved($event)"
            [width]='"100%"' [height]='"100%"' [source]='dataAdapter' [columns]='columns'>
        </jqxKanban>
    `
})
 
export class AppComponent {
    ItemMoved(event: any): void 
    {
        // Do Something
    }

    fields: any[] =
    [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
    ];
    
    source: any =
    {
        localData:
        [
            { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
            { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
            { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
        ],
        dataType: 'array',
        dataFields: this.fields
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Backlog', dataField: 'new', maxItems: 10 }
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKanban #myKanban 
            [width]='"100%"' [height]='"100%"' [source]='dataAdapter' [columns]='columns'>
        </jqxKanban>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myKanban') myKanban: jqxKanbanComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myKanban.addItem(0,[object Object]);
    }

    fields: any[] =
    [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
    ];
    
    source: any =
    {
        localData:
        [
            { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
            { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
            { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
        ],
        dataType: 'array',
        dataFields: this.fields
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Backlog', dataField: 'new', maxItems: 10 }
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKanban #myKanban 
            [width]='"100%"' [height]='"100%"' [source]='dataAdapter' [columns]='columns'>
        </jqxKanban>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myKanban') myKanban: jqxKanbanComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myKanban.destroy();
    }

    fields: any[] =
    [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
    ];
    
    source: any =
    {
        localData:
        [
            { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
            { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
            { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
        ],
        dataType: 'array',
        dataFields: this.fields
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Backlog', dataField: 'new', maxItems: 10 }
    ];
}
							
						

interface KanbanColumns {
     text?: String;
     dataField?: String;
     maxItems?: Number;
     collapsible?: Boolean;
     collapseDirection?: KanbanCollapseDirection;
     headerElement?: Any;
     collapsedHeaderElement?: Any;
     iconClassName?: String;
}

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKanban #myKanban 
            [width]='"100%"' [height]='"100%"' [source]='dataAdapter' [columns]='columns'>
        </jqxKanban>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myKanban') myKanban: jqxKanbanComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myKanban.getColumn();
    }

    fields: any[] =
    [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
    ];
    
    source: any =
    {
        localData:
        [
            { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
            { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
            { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
        ],
        dataType: 'array',
        dataFields: this.fields
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Backlog', dataField: 'new', maxItems: 10 }
    ];
}
							
						

interface KanbanSource {
     id?: Number;
     status?: String;
     text?: String;
     content?: Any;
     tags?: String;
     color?: String;
     resourceId?: Any;
     className?: String;
}

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKanban #myKanban 
            [width]='"100%"' [height]='"100%"' [source]='dataAdapter' [columns]='columns'>
        </jqxKanban>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myKanban') myKanban: jqxKanbanComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myKanban.getColumnItems();
    }

    fields: any[] =
    [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
    ];
    
    source: any =
    {
        localData:
        [
            { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
            { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
            { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
        ],
        dataType: 'array',
        dataFields: this.fields
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Backlog', dataField: 'new', maxItems: 10 }
    ];
}
							
						

interface KanbanSource {
     id?: Number;
     status?: String;
     text?: String;
     content?: Any;
     tags?: String;
     color?: String;
     resourceId?: Any;
     className?: String;
}

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKanban #myKanban 
            [width]='"100%"' [height]='"100%"' [source]='dataAdapter' [columns]='columns'>
        </jqxKanban>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myKanban') myKanban: jqxKanbanComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myKanban.getItems();
    }

    fields: any[] =
    [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
    ];
    
    source: any =
    {
        localData:
        [
            { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
            { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
            { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
        ],
        dataType: 'array',
        dataFields: this.fields
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Backlog', dataField: 'new', maxItems: 10 }
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKanban #myKanban 
            [width]='"100%"' [height]='"100%"' [source]='dataAdapter' [columns]='columns'>
        </jqxKanban>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myKanban') myKanban: jqxKanbanComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myKanban.removeItem(0);
    }

    fields: any[] =
    [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
    ];
    
    source: any =
    {
        localData:
        [
            { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
            { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
            { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
        ],
        dataType: 'array',
        dataFields: this.fields
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Backlog', dataField: 'new', maxItems: 10 }
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxKanban #myKanban 
            [width]='"100%"' [height]='"100%"' [source]='dataAdapter' [columns]='columns'>
        </jqxKanban>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myKanban') myKanban: jqxKanbanComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myKanban.updateItem(0,[object Object]);
    }

    fields: any[] =
    [
        { name: 'id', type: 'string' },
        { name: 'status', map: 'state', type: 'string' },
        { name: 'text', map: 'label', type: 'string' },
        { name: 'tags', type: 'string' },
        { name: 'color', map: 'hex', type: 'string' },
        { name: 'resourceId', type: 'number' }
    ];
    
    source: any =
    {
        localData:
        [
            { state: 'new', label: 'Combine Orders', tags: 'orders, combine', hex: '#5dc3f0', resourceId: 3 },
            { state: 'new', label: 'Change Billing Address', tags: 'billing', hex: '#f19b60', resourceId: 1 },
            { state: 'new', label: 'One item added to the cart', tags: 'cart', hex: '#5dc3f0', resourceId: 3 }
        ],
        dataType: 'array',
        dataFields: this.fields
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Backlog', dataField: 'new', maxItems: 10 }
    ];
}