Edit kanban card using a separate view

[Sam Tran]

Hi,

When I double click a card, I want to open a dialog that contains a view (or partial view).

I couldn't find in documentation how to do that.

thank you.

[Buvana Sathasivam]

Hi Sam, 

Thanks for using Syncfusion Products. 

We have achieved your requirement using dialog template, by rendering partial view in it.  You can use dialog editing template support to edit the fields that are not bound to EditItems.  You can edit the cards using dialog template form, set EditMode as DialogTemplate and specify the template id to DialogTemplate property of EditSettings.  In the attached sample, we have created _PartialPage1.cshtml for template content.  Please refer the following code. 

KanbanFeatures.cshtml 

@(Html.EJ().Kanban("Kanban") 

              .EditSettings(edit => 

                          { 

                              edit.AllowAdding(true) 

                                  .AllowEditing(true) 

                                  .DialogTemplate("#template") 

                                  .EditMode(KanbanEditMode.DialogTemplate); 

                          }) 

              .ClientSideEvents(eve => eve.ActionComplete("complete")) 

) 

<script> 

    function complete(args) { 

        if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "dialogtemplate") {   

            $("#Estimate").ejNumericTextbox({ value: parseFloat($("#Estimate").val()), width: "175px", height: "34px", decimalPlaces: 2 }); 

            $("#Assignee").ejDropDownList({ width: '175px' }); 

            $("#Status").ejDropDownList({ width: '175px' }); 

            $("#Priority").ejDropDownList({ width: '175px' }); 

            if (args.requestType == "beginedit" || args.requestType == "add") { 

                $("#Assignee").ejDropDownList("setSelectedValue", args.data['Assignee']); 

                $("#Priority").ejDropDownList("setSelectedValue", args.data['Priority']); 

                $("#Status").ejDropDownList("setSelectedValue", args.data['Status']); 

            } 

            $(".e-field").css({ 'width': '175px', 'text-align': 'left' }); 

        } 

    } 

</script> 

 

<div id="template" style="display: none"> 

    @{ 

        Html.RenderPartial("_PartialPage1");  // Specify Kanban dialog content into Partial view page 

    } 

</div>   

_PartialPage1.cshtml 

<table cellspacing="10" style="border-spacing: 11px;"> // To specify content of dialog template 

    <tr> 

        <td style="text-align: right;"> 

            Id 

        </td> 

        <td style="text-align: left"> 

            <input id="Id" name="Id" value="{{: Id}}" class="e-field e-ejinputtext valid e-disable" style="text-align: right; width: 175px; height: 28px" disabled="disabled" /> 

        </td> 

        <td style="text-align: right;"> 

            Status 

        </td> 

        <td style="text-align: left"> 

            <select id="Status" name="Status"> 

                <option value="Close">Close</option> 

                <option value="InProgress">InProgress</option> 

                <option value="Open">Open</option> 

                <option value="Testing">Testing</option> 

            </select> 

        </td> 

    </tr> 

    <tr> 

        <td style="text-align: right;"> 

            Estimate 

        </td> 

        <td style="text-align: left"> 

            <input type="text" id="Estimate" name="Estimate" value="{{:Estimate}}" /> 

        </td> 

        <td style="text-align: right;"> 

            Assignee 

        </td> 

        <td style="text-align: left"> 

            <select id="Assignee" name="Assignee"> 

                <option value="Nancy Davloio">Nancy Davloio</option> 

                <option value="Andrew Fuller">Andrew Fuller</option> 

                <option value="Janet Leverling">Janet Leverling</option> 

                <option value="Margaret hamilt">Margaret hamilt</option> 

                <option value="Steven walker">Steven walker</option> 

                <option value="Michael Suyama">Michael Suyama</option> 

                <option value="Robert King">Robert King</option> 

                <option value="Laura Callahan">Laura Callahan</option> 

            </select> 

        </td> 

    </tr> 

    <tr> 

        <td style="text-align: right;"> 

            Tags 

        </td> 

        <td style="text-align: left"> 

            <input id="Tags" name="Tags" value="{{: Tags}}" class="e-field e-ejinputtext valid" style="width: 175px; height: 28px" /> 

        </td> 

        <td style="text-align: right;"> 

            Priority 

        </td> 

        <td style="text-align: left"> 

            <select id="Priority" name="Priority"> 

                <option value="Low">Low</option> 

                <option value="High">High</option> 

                <option value="Critical">Critical</option> 

                <option value="Normal">Normal</option> 

                <option value="Release Breaker">Release Breaker</option> 

            </select> 

        </td> 

    </tr> 

    <tr> 

        <td style="text-align: right;"> 

            Summary 

        </td> 

        <td style="text-align: left"> 

            <textarea id="Summary" name="Summary" class="e-ejinputtext" value="{{: Summary}}" style="width: 270px; height: 95px">{{: Summary}}</textarea> 

        </td> 

    </tr> 

</table> 

For your convenience, we have prepared a simple sample with your requirement. Refer the sample link.        

Sample: http://www.syncfusion.com/downloads/support/forum/134464/ze/SyncfusionMvcApplication61-164303870  

    

To know more about ejKanban control, please refer the following link.       

UG link: https://help.syncfusion.com/aspnetmvc/kanban/editing#edit-modes  

 

Regards, 

Buvana S. 

[Sam Tran]

Hi Buvana,

Thanks for your help!

My partial view needs to load additional data that is not part of the card object; how can I modify your example so that when the partial view opens, it takes the card id, goes to the controller and loads a new model to populate the partial view?

[Buvana Sathasivam]

Hi Sam, 

Thanks for your update. 

We have created Kanban sample with the dialog template referred in multiple data using partial view page.  We have used Product table and Task table. In partial page, dialog template id was specified. When double click the card, the card id was send to controller for getting partial page using AJAX post.  If ajax post succeed, then obtained data was send to Kanban dialog form.  Please refer to the below code.  

KanbanFeatures.cshtml 

@(Html.EJ().Kanban("Kanban") 

       .EditSettings(edit => 

                   { 

                       edit.AllowAdding(true) 

                           .AllowEditing(true) 

                           .DialogTemplate("template") // Specify id of the template 

                           .EditMode(KanbanEditMode.DialogTemplate); 

                   }) 

      .ClientSideEvents(eve => eve.ActionComplete("complete")) // Action complete event 

) 

 

<script> 

    var curData = []; 

    function complete(args) {  // Action complete event 

        if ((args.requestType == "beginedit") && args.model.editSettings.editMode == "dialogtemplate") {   

             if (!ej.isNullOrUndefined(args.data)) 

                var CardID = args.data[this.model.fields.primaryKey]; // Get clicked card Id 

            curData.push(args.data); // Get current card data 

            $.ajax 

               ({ 

                   url: "/Kanban/EditPartial?CardID=" + CardID, // Call EditPartial method in controller 

                   type: 'GET', 

                   success: function (data) { 

                       var obj = $("#Kanban").data("ejKanban"); 

                       var id = obj.element.attr("id"); 

                      $("#" + id +"EditForm").find(".e-kanban-editdiv").prepend(data)// Get data from partialView page 

                       $("#Estimate").ejNumericTextbox({ value: curData[0]['Estimate'], width: "175px", height: "34px", decimalPlaces: 2 }); 

                       $("#Assignee").ejDropDownList({ width: '175px' }); 

                       $("#Status").ejDropDownList({ width: '175px' }); 

                       $("#Priority").ejDropDownList({ width: '175px' }); 

                       if (args.requestType == "beginedit" || args.requestType == "add") { 

                           $("#Assignee").ejDropDownList("setSelectedValue", curData[0]['Assignee']); 

                           $("#Priority").ejDropDownList("setSelectedValue", curData[0]['Priority']); 

                           $("#Status").ejDropDownList("setSelectedValue", curData[0]['Status']); 

                       } 

                       curData = []; 

                   } 

               }); 

        } 

    } 

</script> 

KanbanController.cshtml 

public ActionResult EditPartial(int CardId) // Triggered when ajax post  

        { 

            var product = new NorthwindDataContext().Products.ToList(); // Get Product table list 

            var data = product.Where(ID => ID.ProductID == CardId).SingleOrDefault(); // Find particular product data using CardId 

            var task = new NorthwindDataContext().Tasks.Take(30).ToList(); // Get Tasks table list 

            var kanData = task.Where(ID => ID.Id == CardId).SingleOrDefault(); // Find particular task data using CardId 

            ViewBag.productData = data;  

            ViewBag.kanbanData = kanData; 

            return PartialView("_PartialPage1", data);  

        } 

_PartialPage1.cshtml 

<div id="template"> // Dialog template ID 

    <table cellspacing="10" style="border-spacing: 11px;"> 

        <tr> 

            <td style="text-align: right;"> 

                Id 

            </td> 

            <td style="text-align: left"> 

                <input id="Id" name="Id" value="@(ViewBag.productData.ProductID)" class="e-field e-ejinputtext valid e-disable" style="text-align: right; width: 175px; height: 28px" disabled="disabled" />  // Get product data 

            </td> 

            <td style="text-align: right;"> 

                Status 

            </td> 

            <td style="text-align: left"> 

                <select id="Status" name="Status"> 

                    <option value="Close">Close</option> 

                    <option value="InProgress">InProgress</option> 

                    <option value="Open">Open</option> 

                    <option value="Testing">Testing</option> 

                </select> 

            </td> 

        </tr> 

        <tr> 

            <td style="text-align: right;"> 

                Estimate 

            </td> 

            <td style="text-align: left"> 

                <input type="text" id="Estimate" name="Estimate" /> 

            </td> 

            <td style="text-align: right;"> 

                Assignee 

            </td> 

            <td style="text-align: left"> 

                <select id="Assignee" name="Assignee"> 

                    <option value="Nancy Davloio">Nancy Davloio</option> 

                    <option value="Andrew Fuller">Andrew Fuller</option> 

                    <option value="Janet Leverling">Janet Leverling</option> 

                    <option value="Margaret hamilt">Margaret hamilt</option> 

                    <option value="Steven walker">Steven walker</option> 

                    <option value="Michael Suyama">Michael Suyama</option> 

                    <option value="Robert King">Robert King</option> 

                    <option value="Laura Callahan">Laura Callahan</option> 

                </select> 

            </td> 

        </tr> 

        <tr> 

            <td style="text-align: right;"> 

                Tags 

            </td> 

            <td style="text-align: left"> 

                <input id="Tags" name="Tags" value="@(ViewBag.kanbanData.Tags)"  class="e-field e-ejinputtext valid" style="width: 175px; height: 28px" /> // Get Kanban data 

            </td> 

            <td style="text-align: right;"> 

                Priority 

            </td> 

            <td style="text-align: left"> 

                <select id="Priority" name="Priority"> 

                    <option value="Low">Low</option> 

                    <option value="High">High</option> 

                    <option value="Critical">Critical</option> 

                    <option value="Normal">Normal</option> 

                    <option value="Release Breaker">Release Breaker</option> 

                </select> 

            </td> 

        </tr> 

        <tr> 

            <td style="text-align: right;"> 

                Summary 

            </td> 

            <td style="text-align: left"> 

                <textarea id="Summary" name="Summary" class="e-ejinputtext" style="width: 270px; height: 95px">@(ViewBag.kanbanData.Summary)</textarea> 

            </td> 

        </tr> 

    </table> 

</div> 

For your convenience, we have created simple sample.  

Sample: http://www.syncfusion.com/downloads/support/forum/134464/ze/SyncfusionMvcApplication61-1083114013  

 

Please let us know if we have misunderstood.  If so, provide more details (like share your code or reproduce your requirement in attached sample) regarding your requirement so that we can check and provide an appropriate solution. 

 

Regards, 

Buvana S.