We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to use DatePicker in Kanban edititems?

Thread ID:





127774 Dec 8,2016 07:52 AM UTC Dec 9,2016 07:11 AM UTC JavaScript 1
Tags: ejKanban
Asked On December 8, 2016 07:52 AM UTC

Can someone direct me to a sample how to use the DatePicker in Kanban edititems?


   editSettings: {
                        editItems: [
                            { field: "Id", editType: ej.Kanban.EditingType.String,validationRules: { required: true, number: true }},
                            { field: "Date", editType: ej.Kanban.EditingType.Date},
                        allowEditing: true,
                        allowAdding: true

editType: ej.Kanban.EditingType.Date does not work for me. It shows a normal textbox only. 



Sarath Kumar P [Syncfusion]
Replied On December 9, 2016 07:11 AM UTC

Hi Marcus,   
Thank you for contacting Syncfusion support.   
To use EJ date picker in Kanban edit items, ej.Kanban.EditingType.DatePicker is the proper type. We have prepared a Kanban editing sample with EJ date picker. Please refer to the below codes.   
window.kbnData = [{ 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, StartDate: new Date(2016, 11, 05) }, { Id: 2, Status: "InProgress", Summary: "Improve application performance", Type: "Improvement", Priority: "Normal", Tags:"Improvement", Estimate: 6, Assignee: "Andrew Fuller", RankId: 1,StartDate: new Date(2016, 11, 09) }, { 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, StartDate:new Date(2016, 11, 14) }, { 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, StartDate: new Date(2016, 11, 19) }, { 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, StartDate:new Date(2016, 11, 25) }];  //Kanban data with date    
$(function () {   
            var data = ej.DataManager(window.kbnData).executeLocal(ej.Query().take(5));   
                    dataSource: data,   
                    isResponsive: true,   
                    columns: [   
                        { headerText: "Backlog", key: "Open" },   
                        { headerText: "In Progress", key: "InProgress"},   
                        { headerText: "Testing", key: "Testing" },   
                        { headerText: "Done", key: "Close" }   
                    keyField: "Status",   
                    allowTitle: true,   
                    fields: {   
                        content: "Summary",   
                        primaryKey: "Id",   
                        title: "StartDate"   
                    editSettings: {   
                        editItems: [   
                            { field: "Id", editType: ej.Kanban.EditingType.String, validationRules: { required: true, number: true } },   
                            { field: "Status", editType: ej.Kanban.EditingType.Dropdown },   
                            { field: "Assignee", editType: ej.Kanban.EditingType.Dropdown },   
                            { field: "StartDate", editType: ej.Kanban.EditingType.DatePicker }, //Use the ‘ej.Kanban.EditingType.DatePicker’ to render EJ date picker in the Kanban edit/add window.   
                            { field: "Estimate", editType: ej.Kanban.EditingType.Numeric, editParams: { decimalPlaces: 2 }, validationRules: { range: [0, 1000] } },   
                            { field: "Summary", editType: ej.Kanban.EditingType.TextArea, validationRules: { required: true } }   
                        allowEditing: true,   
                        allowAdding: true   
                    allowSelection: false   
Refer to the below Sample, Video, and the API documentation for Kanban edit types.   
Please let us know if you need any further help.  
Sarath Kumar P.   


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon