How to use DatePicker in Kanban edititems?

[schuersted]

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

e.g.:

   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. 

Thx 

Marcus

[Sarath Kumar P]

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.   

    

[JS]   

    

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));   

            $("#Kanban").ejKanban(   

                {   

                    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.   

    

Sample: http://jsplayground.syncfusion.com/0fsyjvp5   

    

Video: http://www.syncfusion.com/downloads/support/forum/127774/ze/KbnDatepicker182189234   

    

API Documentation: https://help.syncfusion.com/api/js/ejkanban#members:editsettings-edititems-edittype   

    

Please let us know if you need any further help.  

  

Regards,   

    

Sarath Kumar P.