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. Image for the cookie policy date

How to use DatePicker in Kanban edititems?

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. 



1 Reply

SK Sarath Kumar P Syncfusion Team 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.   

Live Chat Icon For mobile
Up arrow icon