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.
Unfortunately, activation email could not send to your email. Please try again.

How to use DatePicker in Kanban edititems?

Thread ID:

Created:

Updated:

Platform:

Replies:

127774 Dec 8,2016 02:52 AM Dec 9,2016 02:11 AM JavaScript 1
loading
Tags: ejKanban
schuersted
Asked On December 8, 2016 02:52 AM

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 [Syncfusion]
Replied On December 9, 2016 02:11 AM

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.   
    
    
    
    
Please let us know if you need any further help.  
  
Regards,   
    
Sarath Kumar P.   


CONFIRMATION

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.

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.

;