#:{0}#
#:{0}#
',\n defaultButtons: [\n 'delete',\n 'edit'\n ]\n });\n var TaskBoardEditPane = TaskBoardPane.extend({\n init: function (taskboard, options, dataItem) {\n var that = this;\n options = extend({}, options.editable, {\n dataTitleField: options.dataTitleField,\n dataDescriptionField: options.dataDescriptionField,\n messages: options.messages,\n states: options.states\n });\n that.formSettings = extend(that.formSettings, {\n items: [\n {\n field: options.dataTitleField,\n label: options.messages[options.dataTitleField]\n },\n {\n field: options.dataDescriptionField,\n label: options.messages[options.dataDescriptionField]\n }\n ]\n }, options.form);\n TaskBoardPane.fn.init.call(that, taskboard, options, dataItem);\n that.element.addClass(TaskBoardPane.styles.edit);\n },\n defaultButtons: [\n 'cancel',\n 'saveChanges'\n ],\n formSettings: { buttonsTemplate: '' },\n _buildHeaderTemplate: function () {\n var that = this;\n return kendo.format(that.headerTemplate, that.options.messages.edit + ' #:' + that.options.dataTitleField + '#');\n },\n _renderContent: function () {\n var that = this, options = that.options, styles = TaskBoardPane.styles, formSettings = options.form || that.formSettings, formLabelId = kendo.guid(), element = $('').attr('role', 'form').attr('aria-labelledby', formLabelId);\n that.header.find(DOT + styles.headerText).attr('id', formLabelId);\n that.content.append(element);\n that.form = new Form(element, extend({}, formSettings, { formData: that._dataItem }));\n that.form.element.find('input').focus();\n }\n });\n var TaskBoardCreatePane = TaskBoardEditPane.extend({\n init: function (taskboard, options, dataItem, resources, column) {\n var that = this, columnStatusField = options.columnSettings.dataStatusField, firstColumn = taskboard.columnsDataSource.view().at(0), status = column ? column[columnStatusField] : firstColumn[columnStatusField], clone = extend({}, dataItem);\n dataItem = taskboard.dataSource.add();\n dataItem.set(options.dataStatusField, status);\n for (var key in clone) {\n dataItem.set(key, clone[key]);\n }\n TaskBoardEditPane.fn.init.call(that, taskboard, options, dataItem, resources);\n },\n _buildHeaderTemplate: function () {\n var that = this;\n return kendo.format(that.headerTemplate, that.options.messages.createNewCard);\n },\n defaultButtons: [\n 'cancel',\n 'create'\n ]\n });\n extend(kendo.ui.taskboard, {\n Pane: TaskBoardPane,\n panes: {\n Preview: TaskBoardPreviewPane,\n Edit: TaskBoardEditPane,\n Create: TaskBoardCreatePane\n }\n });\n extend(true, kendo.ui.taskboard.Pane, { styles: TaskBoardPaneStyles });\n }(window.kendo.jQuery));\n return window.kendo;\n}, typeof define == 'function' && define.amd ? define : function (a1, a2, a3) {\n (a3 || a2)();\n}));\n(function (f, define) {\n define('taskboard/keyboard', ['kendo.core'], f);\n}(function () {\n (function ($, undefined) {\n var kendo = window.kendo, Observable = kendo.Observable, proxy = $.proxy, extend = $.extend, DOT = '.', NS = DOT + 'kendoKeboardManager', KEYDOWN = 'keydown', ACTION = 'action';\n var Keyboard = Observable.extend({\n init: function (element) {\n var that = this;\n that.register = {};\n that.element = element;\n that._attachEvents();\n Observable.fn.init.call(that);\n },\n registerShortcut: function (selector, shortcut, options) {\n var that = this;\n if (!that.register[selector]) {\n that.register[selector] = [];\n }\n if (shortcut.keyCode && isNaN(shortcut.keyCode) && shortcut.keyCode.toUpperCase) {\n shortcut.keyCode = shortcut.keyCode.toUpperCase().charCodeAt(0);\n }\n that.register[selector].push({\n shortcut: extend({\n keyCode: null,\n ctrlKey: false,\n shiftKey: false,\n altKey: false\n }, shortcut),\n options: options\n });\n },\n _attachEvents: function () {\n var that = this, handler = proxy(that._handler, that);\n that.element.on(KEYDOWN + NS, handler);\n },\n _handler: function (ev) {\n var that = this, target = $(ev.target), shortcuts, action;\n for (var selector in that.register) {\n if (target.is(selector)) {\n shortcuts = that.register[selector];\n action = that._getAction(shortcuts, ev);\n if (action) {\n that._trigger(action, ev);\n break;\n }\n }\n }\n },\n _trigger: function (action, ev) {\n var that = this, target = $(ev.target);\n if (action.command) {\n that.trigger(ACTION, extend({}, ev, {\n command: action.command,\n options: extend({}, { target: target }, action.options)\n }));\n }\n if (action.handler) {\n action.handler(ev);\n }\n },\n _getAction: function (shortcuts, ev) {\n var that = this;\n for (var i = 0; i < shortcuts.length; i++) {\n if (that._compareShortcut(shortcuts[i].shortcut, ev)) {\n return shortcuts[i].options;\n }\n }\n },\n _compareShortcut: function (shortcut, ev) {\n var that = this;\n for (var key in shortcut) {\n var result = false;\n switch (key) {\n case 'ctrlKey':\n result = shortcut[key] !== that._getShortcutModifier(ev);\n break;\n default:\n result = shortcut[key] !== ev[key];\n break;\n }\n if (result) {\n return false;\n }\n }\n return true;\n },\n _getShortcutModifier: function (ev) {\n var mac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;\n return mac ? ev.metaKey : ev.ctrlKey;\n },\n destroy: function () {\n var that = this;\n that.element.off(NS);\n }\n });\n extend(kendo.ui.taskboard, { KeyboardManager: Keyboard });\n }(window.kendo.jQuery));\n return window.kendo;\n}, typeof define == 'function' && define.amd ? define : function (a1, a2, a3) {\n (a3 || a2)();\n}));\n(function (f, define) {\n define('kendo.taskboard', [\n 'taskboard/toolbar',\n 'taskboard/column',\n 'taskboard/card',\n 'taskboard/cardmenu',\n 'taskboard/commands',\n 'taskboard/pane',\n 'taskboard/keyboard',\n 'kendo.data'\n ], f);\n}(function () {\n var __meta__ = {\n id: 'taskboard',\n name: 'TaskBoard',\n category: 'web',\n description: 'The TaskBoard widget displays cards.',\n depends: [\n 'data',\n 'sortable',\n 'dialog',\n 'form',\n 'menu',\n 'toolbar'\n ]\n };\n var TaskBoardStyles = {\n wrapper: 'k-taskboard',\n header: 'k-taskboard-header',\n content: 'k-taskboard-content',\n toolbar: 'k-taskboard-toolbar k-toolbar-flat',\n columnsContainer: 'k-taskboard-columns-container',\n card: 'k-taskboard-card',\n column: 'k-taskboard-column',\n selected: 'k-state-selected',\n disabled: 'k-state-disabled',\n ignoreDrag: 'k-taskboard-drag-ignore'\n };\n var preventDefault = function (ev) {\n ev.preventDefault();\n };\n (function ($, undefined) {\n var kendo = window.kendo, Widget = kendo.ui.Widget, DataSource = kendo.data.DataSource, extend = $.extend, ui = kendo.ui, proxy = $.proxy, isArray = $.isArray, isPlainObject = $.isPlainObject, GENERIC = '_generic', DOT = '.', MOVE = 'move', MOVE_START = 'moveStart', MOVE_END = 'moveEnd', SELECT = 'select', EXECUTE = 'execute', ACTION = 'action', CHANGE = 'change', ERROR = 'change', DATABINDING = 'dataBinding', DATABOUND = 'dataBound', EDIT_CARD = 'editCard', SAVE_CARD = 'saveCard', DELETE_CARD = 'deleteCard', EDIT_COLUMN = 'editColumn', SAVE_COLUMN = 'saveColumn', DELETE_COLUMN = 'deleteColumn', COLUMNSDATABINDING = 'columnsDataBinding', COLUMNSDATABOUND = 'columnsDataBound';\n var TaskBoard = Widget.extend({\n init: function (element, options) {\n var that = this;\n Widget.fn.init.call(that, element, options);\n element = that.wrapper = that.element;\n that._sortableIdentifier = that.element.attr('id') || kendo.guid();\n that._wrapper();\n that._columnsDataSource();\n that._initResources();\n that._dataSource();\n that._initToolbar();\n that._initCardMenu();\n that._initKeyboard();\n if (that.options.autoBind) {\n that.load();\n }\n kendo.notify(that);\n },\n events: [\n MOVE,\n MOVE_START,\n MOVE_END,\n CHANGE,\n EXECUTE,\n SELECT,\n DATABINDING,\n DATABOUND,\n COLUMNSDATABINDING,\n COLUMNSDATABOUND,\n EDIT_CARD,\n SAVE_CARD,\n DELETE_CARD,\n EDIT_COLUMN,\n SAVE_COLUMN,\n DELETE_COLUMN\n ],\n options: {\n name: 'TaskBoard',\n autoBind: true,\n height: 600,\n width: '100%',\n toolbar: true,\n dataStatusField: 'status',\n dataTitleField: 'title',\n dataDescriptionField: 'description',\n dataCategoryField: 'category',\n dataOrderField: null,\n cardMenu: true,\n editable: true,\n selectable: true,\n reorderable: true,\n previewPane: true,\n search: { operator: 'contains' },\n dataSource: [],\n columns: [],\n columnSettings: {\n dataStatusField: 'status',\n dataTextField: 'text',\n dataOrderField: null\n },\n resources: [],\n messages: {\n edit: 'Edit',\n createNewCard: 'Create new card',\n create: 'Create',\n search: 'Search',\n previewCard: 'Preview card',\n addCard: 'Add card',\n editCard: 'Edit card',\n deleteCard: 'Delete Card',\n addColumn: 'Add column',\n editColumn: 'Edit column',\n deleteColumn: 'Delete column',\n close: 'Close',\n cancel: 'Cancel',\n 'delete': 'Delete',\n saveChanges: 'Save changes',\n title: 'Title:',\n description: 'Description:',\n newColumn: 'New column',\n deleteColumnConfirm: 'Are you sure you want to delete this column?',\n deleteCardConfirm: 'Are you sure you want to delete this card?'\n }\n },\n items: function () {\n var that = this, result = $([]);\n for (var key in that._columns) {\n $.merge(result, that._columns[key].cards());\n }\n return result;\n },\n itemsByStatus: function (status) {\n var that = this, result = that._getColumn(status).cards();\n return result;\n },\n itemsByColumn: function (columnElm) {\n var that = this, column = that._getColumnByElement(columnElm);\n if (column) {\n return column.cards();\n }\n },\n load: function () {\n var that = this, fetchPromises = [];\n that._progress(true);\n fetchPromises.push(that.columnsDataSource.fetch());\n for (var key in that.resources) {\n fetchPromises.push(that.resources[key].dataSource.fetch());\n }\n $.when.apply(null, fetchPromises).then(proxy(that.dataSource.read, that.dataSource));\n },\n dataItem: function (cardElm) {\n var that = this, dataSource = that.dataSource, uid;\n cardElm = $(cardElm);\n uid = cardElm.attr(kendo.attr('uid'));\n return dataSource.getByUid(uid);\n },\n columnDataItem: function (columnElm) {\n var that = this, columnsDataSource = that.columnsDataSource, uid;\n columnElm = $(columnElm);\n uid = columnElm.attr(kendo.attr('uid'));\n return columnsDataSource.getByUid(uid);\n },\n columns: function () {\n var that = this, result = $([]);\n for (var key in that._columns) {\n $.merge(result, that._columns[key].element);\n }\n return result;\n },\n columnByStatus: function (status) {\n return this._getColumn(status).element;\n },\n select: function (card, toggle) {\n var that = this;\n if (!card) {\n return that.element.find(DOT + TaskBoard.styles.card + DOT + TaskBoard.styles.selected).eq(0);\n }\n card = $(card);\n toggle = toggle !== false;\n if (toggle) {\n that.element.find(DOT + TaskBoard.styles.card + DOT + TaskBoard.styles.selected).removeClass(TaskBoard.styles.selected);\n }\n card.toggleClass(TaskBoard.styles.selected, toggle);\n },\n previewCard: function (cardElement) {\n var that = this, options = that.options, args = that._extendExecArgs({ target: cardElement });\n if (options.previewPane) {\n that._openPane(extend({ pane: 'Preview' }, args));\n }\n },\n editCard: function (cardElement) {\n var that = this, options = that.options, args;\n cardElement = $(cardElement);\n args = that._extendExecArgs({ target: cardElement });\n if (options.editable) {\n that._openPane(extend({ pane: 'Edit' }, args));\n }\n },\n saveCard: function () {\n var that = this;\n that.dataSource.sync();\n },\n deleteCard: function (cardElement) {\n var that = this, card = that.dataItem(cardElement);\n that.dataSource.remove(card);\n that.dataSource.sync();\n },\n addCard: function (dataItem) {\n var that = this, options = that.options, args = { card: dataItem };\n if (options.editable) {\n that._openPane(extend({ pane: 'Create' }, args));\n }\n },\n addColumn: function (index, data) {\n var that = this, columnSettings = extend(true, {}, that.options.columnSettings, {\n messages: that.options.messages,\n states: that._buildStates(),\n sortableIdentifier: that._sortableIdentifier\n }), newColumn, model, column;\n if (isNaN(index) && !data) {\n data = index;\n index = null;\n }\n model = that.columnsDataSource._createNewModel(data);\n index = isNaN(index) || index === null ? that.columnsDataSource.data().length : index;\n column = that.columns().eq(index);\n that.columnsDataSource.insert(index, model);\n newColumn = new ui.taskboard.NewColumn(columnSettings, model);\n if (isNaN(index) || !column.length) {\n that.columnsContainer.append(newColumn.element);\n } else {\n column.before(newColumn.element);\n }\n newColumn.bind(ACTION, that.executeCommand.bind(that));\n },\n editColumn: function (columnElement) {\n var that = this;\n columnElement = $(columnElement);\n that._getColumnByElement(columnElement).edit();\n },\n saveColumn: function () {\n var that = this;\n that.columnsDataSource.sync();\n },\n deleteColumn: function (columnElement) {\n var that = this, column = that.columnDataItem(columnElement);\n that.columnsDataSource.remove(column);\n that.columnsDataSource.sync();\n },\n registerShortcut: function (selector, shortcut, options) {\n var that = this;\n that.keyboardManager.registerShortcut(selector, shortcut, options);\n },\n enable: function (cardElement, toggle) {\n cardElement = $(cardElement);\n cardElement.toggleClass(TaskBoard.styles.disabled, toggle === false);\n cardElement.attr('aria-disabled', toggle === false);\n },\n enableByColumn: function (columnElement, toggle) {\n var that = this;\n columnElement = $(columnElement);\n that.itemsByColumn(columnElement).each(function (index, card) {\n that.enable(card, toggle);\n });\n },\n readOnly: function (cardElement, toggle) {\n cardElement = $(cardElement);\n toggle = toggle !== false;\n cardElement.find('[' + kendo.attr('command') + ']').toggleClass(TaskBoard.styles.disabled, toggle);\n cardElement.find('a,button').toggleClass(TaskBoard.styles.disabled, toggle);\n cardElement.toggleClass(TaskBoard.styles.ignoreDrag, toggle);\n cardElement.attr('aria-readonly', toggle);\n },\n readOnlyByColumn: function (columnElement, toggle) {\n var that = this;\n columnElement = $(columnElement);\n that.itemsByColumn(columnElement).each(function (index, card) {\n that.readOnly(card, toggle);\n });\n },\n setDataSource: function (dataSource) {\n var that = this;\n that.options.dataSource = dataSource;\n that._dataSource();\n if (that.options.autoBind) {\n that.dataSource.read();\n }\n },\n setColumnsDataSource: function (dataSource) {\n var that = this;\n that.options.columns = dataSource;\n that._columnsDataSource();\n if (that.options.autoBind) {\n that.columnsDataSource.fetch(function () {\n that._renderCards(that.dataSource.view());\n });\n }\n },\n _getColumn: function (status) {\n return this._columns[status];\n },\n _getColumnByElement: function (columnElement) {\n var that = this;\n columnElement = $(columnElement);\n for (var key in that._columns) {\n if (that._columns[key].element[0] === columnElement[0]) {\n return that._columns[key];\n }\n }\n },\n _openPane: function (options) {\n var that = this, pane = new ui.taskboard.panes[options.pane](that, extend({}, that.options, { states: that._buildStates() }), options.card, that.resources, options.column), focusableElement, keyboardManager;\n if (that.pane) {\n that._closePane();\n }\n that.pane = pane;\n that.content.after(that.pane.element);\n that.content.css('margin-right', that.pane.element.width() + parseInt(that.pane.element.css('paddingLeft'), 10));\n that.pane.bind(ACTION, that.executeCommand.bind(that));\n that.pane.keyboardManager = keyboardManager = new ui.taskboard.KeyboardManager(that.pane.element);\n keyboardManager.bind(ACTION, that.executeCommand.bind(that));\n keyboardManager.registerShortcut('*', { keyCode: kendo.keys.ESC }, { command: 'ClosePaneCommand' });\n keyboardManager.registerShortcut('*', { keyCode: kendo.keys.ENTER }, {\n command: 'SaveChangesCommand',\n options: { card: that.pane._dataItem }\n });\n focusableElement = that.pane.element.find('input');\n if (!focusableElement.length) {\n focusableElement = that.pane.element.find('button');\n }\n setTimeout(function () {\n focusableElement.eq(0).focus();\n }, 0);\n },\n _closePane: function () {\n var that = this;\n if (that.pane) {\n that.pane.keyboardManager.destroy();\n that.pane.unbind(ACTION);\n that.pane.destroy();\n delete that.pane;\n that.content.css('margin-right', '');\n }\n },\n _wrapper: function () {\n var that = this, options = that.options, styles = TaskBoard.styles, headerElm = '', contentElm = '', colsContainer = '';\n that.element.addClass(styles.wrapper).width(options.width).height(options.height).attr('role', 'application');\n that.header = $(headerElm).appendTo(that.element);\n that.content = $(contentElm).appendTo(that.element);\n that.columnsContainer = $(colsContainer).appendTo(that.content);\n },\n _initToolbar: function () {\n var that = this, styles = TaskBoard.styles, options = that.options, toolbarElm = $(''), toolbarOptions = isArray(options.toolbar) ? { items: options.toolbar } : options.toolbar;\n if (options.toolbar === false) {\n return;\n }\n toolbarOptions = extend({}, toolbarOptions, {\n taskboard: this,\n messages: options.messages,\n action: that.executeCommand.bind(that),\n states: that._buildStates()\n });\n that.header.append(toolbarElm);\n that.toolbar = new ui.taskboard.ToolBar(toolbarElm, toolbarOptions);\n },\n _buildStates: function () {\n var that = this;\n return {\n isEditable: that._isEditable(),\n isReorderable: that._isReorderable(),\n isSelectable: that._isSelectable(),\n isReadOnly: !that._isReorderable() && !that._isEditable(),\n isDisabled: !that._isReorderable() && !that._isEditable() && !that._isSelectable(),\n isSearchable: that._isSearchable(),\n notLocalColumns: !(that.columnsDataSource.transport instanceof kendo.data.LocalTransport),\n isRtl: kendo.support.isRtl(that.wrapper)\n };\n },\n _isSearchable: function () {\n return !!this.options.search;\n },\n _isEditable: function () {\n return !!this.options.editable;\n },\n _isReorderable: function () {\n return !!this.options.reorderable;\n },\n _isSelectable: function () {\n return !!this.options.selectable;\n },\n executeCommand: function (args) {\n var that = this, commandName = args.command, commandOptions = extend({ taskboard: this }, isPlainObject(args.options) ? that._extendExecArgs(args.options) : { value: args.options }), command = ui.taskboard.commands[commandName] && new ui.taskboard.commands[commandName](commandOptions);\n if (!that.trigger(EXECUTE, args)) {\n if (command) {\n command.exec();\n } else {\n window.console.warn(kendo.format('Trying to use {0} command, but such is not available in the kendo.ui.taskboard.commands namespace!', commandName));\n }\n }\n },\n _extendExecArgs: function (args) {\n var that = this, target = args.draggableEvent ? args.item : args.target, columnElm, cardElm, columnDataItem, cardDataItem;\n if (args.card) {\n target = that.items().filter(function (idx, elm) {\n return $(elm).attr(kendo.attr('uid')) === args.card.get('uid');\n });\n }\n if (!target || !(target && target.length)) {\n return args;\n }\n columnElm = args.columnElement || (target.is(DOT + TaskBoard.styles.column) ? target : target.parents(DOT + TaskBoard.styles.column));\n columnDataItem = that.columnsDataSource.getByUid(columnElm.data(kendo.ns + 'uid'));\n cardElm = target.is(DOT + TaskBoard.styles.card) ? target : target.closest(DOT + TaskBoard.styles.card);\n cardDataItem = that.dataSource.getByUid(cardElm.data(kendo.ns + 'uid'));\n return extend(args, {\n card: cardDataItem,\n cardElement: cardElm.length ? cardElm : undefined,\n column: columnDataItem,\n columnElement: columnElm.length ? columnElm : undefined\n });\n },\n _select: function (card, toggle) {\n var that = this;\n if (toggle === null) {\n toggle = true;\n }\n if (!that.trigger(SELECT, { card: card })) {\n that.select(card, toggle);\n that.previewCard(card);\n }\n },\n _columnsDataSource: function () {\n var that = this, options = that.options, columnSettings = options.columnSettings, columnsDataSource = options.columns;\n columnsDataSource = isArray(columnsDataSource) ? { data: columnsDataSource } : columnsDataSource;\n if (columnSettings.dataOrderField && !columnsDataSource.sort) {\n columnsDataSource.sort = {\n field: columnSettings.dataOrderField,\n dir: 'asc'\n };\n }\n if (!columnsDataSource.schema) {\n var fields = {};\n fields[columnSettings.dataStatusField] = {\n type: 'string',\n defaultValue: function () {\n return kendo.guid().split('-')[0];\n }\n };\n fields[columnSettings.dataTextField] = { type: 'string' };\n if (columnSettings.dataOrderField) {\n fields[columnSettings.dataOrderField] = { type: 'number' };\n }\n columnsDataSource.schema = { model: { fields: fields } };\n }\n if (that.columnsDataSource && that._columnsChangeHandler) {\n that.columnsDataSource.unbind(CHANGE, that._columnsChangeHandler);\n that.columnsDataSource.unbind(CHANGE, that._columnsErrorHandler);\n } else {\n that._columnsChangeHandler = proxy(that._columnsDataSourceChange, that);\n that._columnsErrorHandler = proxy(that._error, that);\n }\n that.columnsDataSource = DataSource.create(columnsDataSource).bind(CHANGE, that._columnsChangeHandler).bind(ERROR, that._columnsErrorHandler);\n },\n _columnsDataSourceChange: function (ev) {\n var that = this, view = that.columnsDataSource.view(), columnSettings = extend(true, {}, that.options.columnSettings, {\n messages: that.options.messages,\n states: that._buildStates(),\n sortableIdentifier: that._sortableIdentifier\n }), statusField = columnSettings.dataStatusField;\n if (ev.action && ev.action !== 'sync') {\n return;\n }\n if (that.trigger(COLUMNSDATABINDING, ev)) {\n return;\n }\n that._progress(true);\n that._columns = {};\n that.columnsContainer.html('');\n for (var i = 0; i < view.length; i++) {\n var data = view[i];\n var status = data[statusField] || GENERIC;\n var column;\n column = that._columns[status] = new ui.taskboard.Column(columnSettings, data);\n that.columnsContainer.append(column.element);\n column.bind(ACTION, that.executeCommand.bind(that));\n column.bind(MOVE, proxy(that._move, that));\n column.bind(MOVE_END, proxy(that._moveEnd, that));\n column.bind(MOVE_START, proxy(that._moveStart, that));\n column.bind(CHANGE, proxy(that._changeOrder, that));\n that._tabindex(column.element);\n }\n if (ev.action === 'sync' || ev.action === undefined) {\n that._renderCards(that.dataSource.view());\n }\n that._progress(false);\n that.trigger(COLUMNSDATABOUND, ev);\n },\n _move: function (ev) {\n this.trigger(MOVE, this._extendExecArgs(ev));\n },\n _moveEnd: function (ev) {\n this.trigger(MOVE_END, this._extendExecArgs(ev));\n },\n _moveStart: function (ev) {\n this.trigger(MOVE_START, this._extendExecArgs(ev));\n },\n _changeOrder: function (ev) {\n this.trigger(CHANGE, this._extendExecArgs(ev));\n },\n _dataSource: function () {\n var that = this, options = that.options, dataSource = options.dataSource;\n dataSource = isArray(dataSource) ? { data: dataSource } : dataSource;\n if (options.dataOrderField && !dataSource.sort) {\n dataSource.sort = {\n field: options.dataOrderField,\n dir: 'asc'\n };\n }\n if (!dataSource.schema) {\n var fields = {};\n fields[options.dataStatusField] = { type: 'string' };\n fields[options.dataTitleField] = { type: 'string' };\n fields[options.dataDescriptionField] = { type: 'string' };\n fields[options.dataCategoryField] = { type: 'string' };\n if (options.dataOrderField) {\n fields[options.dataOrderField] = { type: 'number' };\n }\n dataSource.schema = { model: { fields: fields } };\n }\n if (that.dataSource && that._changeHandler) {\n that.dataSource.unbind(CHANGE, that._changeHandler);\n that.dataSource.unbind(ERROR, that._errorHandler);\n } else {\n that._changeHandler = proxy(that._change, that);\n that._errorHandler = proxy(that._error, that);\n }\n that.dataSource = DataSource.create(dataSource).bind(CHANGE, that._changeHandler);\n },\n _change: function (ev) {\n var that = this;\n if (ev.action && ev.action !== 'sync') {\n return;\n }\n if (that.trigger(DATABINDING, ev)) {\n return;\n }\n that._progress(true);\n that._clearColumns();\n that._renderCards(that.dataSource.view());\n that._closePane();\n that.trigger(DATABOUND, ev);\n that._progress(false);\n },\n _error: function () {\n this._progress(false);\n },\n _renderCards: function (data) {\n var that = this;\n for (var i = 0; i < data.length; i++) {\n that._renderCard(data[i]);\n }\n },\n _renderCard: function (card) {\n var that = this, options = extend({}, that.options, { states: that._buildStates() }), statusField = options.dataStatusField, status = card[statusField] || GENERIC;\n if (status && that._columns[status]) {\n card = new ui.taskboard.Card(options, card, that.resources);\n that._columns[status].addCard(card.element);\n that._tabindex(card.element);\n }\n },\n _clearColumns: function () {\n var that = this;\n for (var key in that._columns) {\n that._columns[key].empty();\n }\n },\n _initCardMenu: function () {\n var that = this, options = that.options, cardMenuOptions = isArray(options.cardMenu) ? { items: options.cardMenu } : options.cardMenu;\n cardMenuOptions = extend({}, {\n messages: options.messages,\n target: that.columnsContainer,\n filter: '.k-taskboard-card-menu-button',\n action: that.executeCommand.bind(that),\n showOn: 'click',\n alignToAnchor: true,\n states: that._buildStates()\n }, cardMenuOptions);\n if (options.cardMenu === false) {\n return;\n }\n that.cardMenu = new ui.taskboard.CardMenu('