Controller defined columns and fields in Kanban

[Matthew Harrison]

I would like to assign columns and fields in the model that I am passing to the view.

I can't seem to find any help on this.

Thank you,

Matt

[Matthew Harrison]

I think I know what I want to do with this.

[Buvana Sathasivam]

Hi Matthew,   

  

Thanks for using Syncfusion Products.   

  

We have created Kanban sample with dynamically assigned columns and fields.  We have created two database tables, namely Fields and Columns.  In Columns table, we have created header text and key values of Kanban columns.  Please find the below table.   

  

Columns Table:   

  

    

  

In Fields table, we have created fields property of Kanban control.  Please find the below table.   

  

Fields Table:   

   

    

  

We have added Kanban columns and fields dynamically through load event using AJAX post.  Please refer to the following code.   

  

KanbanFeatures.cshtml   

  

<div id = "ControlRegion">   

@(Html.EJ().Kanban("Kanban") // Initially, not specifying columns and fields   

          .DataSource((IEnumerable<object>)ViewBag.datasource)   

          .KeyField("Status")   

          .ClientSideEvents(eve =>     

               {   

                  eve.Load("onLoad"); // load event   

            })   

)      

</div>   

   

<script>   

    function onLoad(args) { // Triggered when Kanban was loaded   

        var kanbanObj = $("#Kanban").data("ejKanban");  // Created Kanban object   

        $.ajax({     // Ajax post   

            type: "POST",     

            data: { id: projectId },    

            url: "/Kanban/Features",   

            success: function (result) {  // Retrieve columns and fields data   

                $("#Kanban").ejKanban({ columns: result.columnData }); // When loaded Kanban columns property was added   

                kanbanObj.element.ejKanban("option", { "fields": { swimlaneKey: result.fieldData[0].SwimlaneKey, primaryKey: result.fieldData[0].PrimaryKey, content: result.fieldData[0].Content } }) // When loaded Kanban, Fields property was added   

            }   

        });   

    }   

</script>   

  

KanbanController.cs   

  

    public ActionResult Features(int id) // Called when ajax post received   

        {   

            var data1 = new NORTHWNDEntities().Columns.ToList(); // Get columns table data   

            var data2 = new NORTHWNDEntities().Fields.ToList(); // Get fields table data   

            var result = new { columnData = data1, fieldData = data2 };    

            return Json(result, JsonRequestBehavior.AllowGet); // Passed result object into client side   

        }   

  

API links: https://help.syncfusion.com/api/js/ejkanban#members:columns    

https://help.syncfusion.com/api/js/ejkanban#members:fields    

 

For your convenience, we have prepared a simple sample with your requirement. Please find the below link.      

   

Sample: http://www.syncfusion.com/downloads/support/directtrac/193269/ze/Process_bindings_-_Copy_-_Copy202658614    

  

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.