popolate DropDown inside KanbanDialogModels

[Marco Salvatori]

i have this istruction:

DialogCard.Add(new KanbanDialogModels { key = "Status", type = "DropDown" });

how can I populate the dropdown with a list of values?

[Revanth Krishnan]

Hi Marco, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “How can I populate the dropdown inside the Kanban Edit Dialog with a list of values?” 

 

By default, the values of the card will automatically be loaded along with the values. To customize this Kanban edit dialog, the dialogTemplate can be used for the edit card dialog and the dropdowns can be rendered and populated with data. We have prepared a sample for your reference, 

 

Code Snippet: 

<ejs-kanban id="Kanban" keyField="Status" dataSource="@ViewBag.data" dialogOpen="onDialogOpen" created="onKanbanCreated"> 

    . . .  

    <e-kanban-dialogsettings template="#dialogTemplate"></e-kanban-dialogsettings> 

</ejs-kanban> 

 

 

<script id='dialogTemplate' type="text/x-template"> 

    <table> 

        <tbody> 

            <tr> 

                <td class="e-label">ID</td> 

                <td> 

                    <input id="Id" name="Id" type="text" class="e-field" value="${Id}" disabled required /> 

                </td> 

            </tr> 

            <tr> 

                <td class="e-label">Status</td> 

                <td> 

                    <input type="text" name="Status" id="Status" class="e-field" value=${Status} required /> 

                </td> 

            </tr> 

            <tr> 

                <td class="e-label">Assignee</td> 

                <td> 

                    <input type="text" name="Assignee" id="Assignee" class="e-field" value=${Assignee} /> 

                </td> 

            </tr> 

            <tr> 

                <td class="e-label">Priority</td> 

                <td> 

                    <input type="text" name="Priority" id="Priority" class="e-field" value=${Priority} /> 

                </td> 

            </tr> 

            <tr> 

                <td class="e-label">Summary</td> 

                <td> 

                    <textarea type="text" name="Summary" id="Summary" class="e-field" value=${Summary}>${Summary}</textarea> 

                    <span class="e-float-line"></span> 

                </td> 

            </tr> 

        </tbody> 

    </table> 

</script> 

<script> 

    . . . 

    var priorityData = ['Low', 'Normal', 'Critical', 'Release Breaker', 'High']; 

    . . . 

    function onDialogOpen(args) { 

        if (args.requestType !== 'Delete') { 

            var curData = args.data; 

            . . . 

            var priorityObj = new ej.dropdowns.DropDownList({ 

                value: curData.Priority, popupHeight: '300px', 

                dataSource: priorityData, fields: { text: 'Priority', value: 'Priority' }, placeholder: 'Priority' 

            }); 

            priorityObj.appendTo(args.element.querySelector('#Priority')); 

            . . . 

        } 

    } 

    . . . 

</script> 

 

Sample: https://www.syncfusion.com/downloads/support/forum/167648/ze/Kanban_Core_App-1361094116 

 

Please check the above code snippet and the sample and let us know if it satisfies your requirement. 

 

Regards, 

Revanth 

[Marco Salvatori]

inside c# model it's possible?

public class KanbanDialogModels

{

public string text { get; set; }

public string key { get; set; }

public string type { get; set; }

public List DialogCards()

{

List DialogCard = new List();

DialogCard.Add(new KanbanDialogModels { key = "Status", type = "DropDown",  value = new string[] {"Low", "Normal", "Critical", "Release Breaker", "High" }

});

DialogCard.Add(new KanbanDialogModels { key = "Title", type = "TextArea" });

DialogCard.Add(new KanbanDialogModels { key = "Description", type = "TextArea" });

return DialogCard;

}

}

[Gunasekar Kuppusamy]

Hi Marco,  

 

 

Currently, we are validating the reported query and we will update you with further details within two business days on or before 3^rd August. 

 

We appreciate your patience until then. 

 

Regards, 

Gunasekar 

[Gunasekar Kuppusamy]

Hi Marco,

Thanks for the patience,

We have validated your reported query "inside c# model it's possible?"

We have achieved your requirement by using the dialogOpen event using that event we have updated the status dropdown dataSource property.

We have also prepared a sample for your reference

Code snippets:

public class KanbanDialogModels

{

    public string text { get; set; }

    public string key { get; set; }

    public string type { get; set; }

    public string[] value { get; set; }

}

public IActionResult Index()

        {

            ViewBag.data = new KanbanDataModels().KanbanTasks();

            ViewBag.status = new KanbanDataModels().DialogStatus();

            ViewBag.assignee = new KanbanDataModels().AssigneeData();

            ViewBag.priority = new KanbanDataModels().PriorityData();

             List<KanbanDialogModels> DialogCardFields = new List<KanbanDialogModels>();

            DialogCardFields.Add(new Kanba​nDialogModels { text = "ID", key = "Title", type = "TextBox" });

            DialogCardFields.Add(new KanbanDialogModels { key = "Status", type = "DropDown", value = new string[] { "Open", "InProgress", "Testing" } });

            DialogCardFields.Add(new KanbanDialogModels { key = "Assignee", type = "DropDown" });

            DialogCardFields.Add(new KanbanDialogModels { key = "RankId", type = "TextBox" });

            DialogCardFields.Add(new KanbanDialogModels { key = "Summary", type = "TextArea" });

            ViewBag.dialogData = DialogCardFields;​

            return View();

        }

<e-kanban-columns>

<e-kanban-column headerText="To Do" keyField="Open"></e-kanban-column>

<e-kanban-column headerText="In Progress" keyField="InProgress"></e-kanban-column>

<e-kanban-column headerText="Testing" keyField="Testing"></e-kanban-column>

<e-kanban-column headerText="Done" keyField="Close"></e-kanban-column>

</e-kanban-columns>

<e-kanban-cardsettings  headerField="Id" contentField="Summary"></e-kanban-cardsettings>

<e-kanban-dialogsettings fields="@ViewBag.dialogData"></e-kanban-dialogsettings>

</ejs-kanban>

<script>

    function onDialogOpen(args) { 

        args.element.querySelector(".Status_wrapper .e-control.e-dropdownlist").ej2_instances[0].dataSource = this.dialogSettings.properties.fields[1].value;

    }

</script>

Sample: https://www.syncfusion.com/downloads/support/forum/167648/ze/KANBAN~11839221200

Note: You should only map the related value to the corresponding key.

Please check the sample and let us know if the solution helps.

Regards,

Gunasekar

[Marco Salvatori]

good...very good...

but i must remove  .Status_wrapper 

[Gunasekar Kuppusamy]

Hi Marco,

Good day to you.

We have validated your reported query " I must remove  .Status_wrapper"

You can remove the ".Status_wrapper" prefix from the querySelector and directly use the ".e-control.e-dropdownlist".

We have also modified the sample for your reference.

Code snippets:

function onDialogOpen(args) {

    args.element.querySelector(".e-control.e-dropdownlist").ej2_instances[0].dataSource = this.dialogSettings.properties.fields[1].value;

}

Sample: https://www.syncfusion.com/downloads/support/forum/167648/ze/KANBAN~1531445642

Please check the sample and let us know if the sample meet your requirements

Regards,

Gunasekar

[Marco Salvatori]

excellent...

[Gunasekar Kuppusamy]

Hi Marco,  

  

Thanks for the update.  

We are glad that the provided solution resolved the issue. Please let us know if you need further assistance.  

  

Regards,  

Gunasekar