refresh kanban when a dropdown that is not in kanban is changed.

[Sam Tran]

Hi,

I have a dropdownlist that is outside the kanban control.

when I click it, I need to refresh the model and the board.

The dropdownlist change triggers an ajax post and I tried returning the entire model for the view but it does not work for kanban.

Right now, after the dropdown changes, I do a javascript location.reload();but that looks bad because the whole view is refreshing.

How can I reload just kanban after the post in MVC?

Thanks!

[Buvana Sathasivam]

Hi Sam, 

Thanks for using Syncfusion Products. 

We have created dropdown list which is outside of Kanban control.  In this drop down list specified the value of ‘how many data’s displayed on the Kanban board’.  If you select dropdown list, then select event was triggered.  Selected text was send to controller for getting Kanban data using ajax post.  If ajax post succeed, then obtained data was send to Kanban datasource for refreshing Kanban board.  Please refer to  the below code. 

KanbanFeatures.cshtml 

Select Number of data's to display in the kanban board 

    @Html.EJ().DropDownList("customersList").ClientSideEvents(e => e.Select("select")) // Select event 

 

<script> 

    function select(args) { 

        var text = args.text;  // Get selected item of drop down list 

        $.ajax({ 

            type: "POST", 

            data: { id: text },  // Send data for how many data displayed on Kanban 

            url: "/Kanban/Features", // Send url 

            success: function (result) {  // Get data from controller 

                $("#Kanban").ejKanban({ dataSource: result }); // Refresh Kanban data 

            } 

        }); 

    } 

</script>     

KanbanController.cs 

public partial class KanbanController : Controller 

    { 

       public ActionResult Features(int id)  // Triggered when ajax post 

        { 

            var data1 = new NorthwindDataContext().Tasks.Take(id).ToList(); // Get data 

            return Json(data1, JsonRequestBehavior.AllowGet); // Send data into view page 

 

        } 

     } 

API link: https://help.syncfusion.com/api/js/ejkanban#members:datasource  

For your convenience, we have created simple sample. 

Sample: http://www.syncfusion.com/downloads/support/forum/133558/ze/SyncfusionMvcApplication69_-_Copy-721170115  

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. 

 

[Sam Tran]

Hi,

I'm using MVC and my problem is that my view has a Model and the model contains 2 lists.

One list is the datasource for the KanBan cards.

The other list is for the KanBan columns.

The columns are added dynamically from the list.

Basically my model is:

Model.Cards

and

Model.Columns

I have code that opens a dialog so the user can add a new columns.

Using the code you provided, I can return only my Model.Cards and it does appear to update the Kanban datasource.

But how can I make the Kanban update the columns so it includes the column the user just added?

Thanks!

[Sam Tran]

To explain better, here is part of the view:

@ModelType AdvantageFramework.ProjectManagement.Agile.Classes.BoardDesigner

@Code

    ViewData("Title") = "Board Designer"

    Layout = "~/Views/Shared/_LayoutPageBase.vbhtml"

    ViewData("IsFullLayout") = True

End Code

    @Code

        Dim kanbanbuilder = Html.EJ().Kanban("Kanban")

        kanbanbuilder.DataSource(Model.Cards)

        kanbanbuilder.KeyField("BoardColumnID")

        kanbanbuilder.Locale(Me.Locale)

        kanbanbuilder.Columns(

            Sub(col)

                If Model.Columns IsNot Nothing Then

                    For Each Column As AdvantageFramework.ProjectManagement.Agile.Classes.BoardDesigner.DesignColumn In Model.Columns

                          col.HeaderText(Column.Name).Key(Column.BoardColumnID).IsCollapsed(False).Add()

                    Next

                End If

            End Sub)

..etc...

Since the columns are dynamic, how can I refresh just the  columns after post?

Or how can I refresh the entire Kanban including the cards and the columns?

[Buvana Sathasivam]

Hi Sam,   

  

Thanks for your update.   

  

We have created Kanban sample with dynamically update the columns.  If you click button, dialog box will open.  You can type Kanban column headerText and column Key value into dialog box.  If you click button inside the dialog box, it will close and update Kanban column using columns public method. The columns public method contains argument of header text, column key value and action.   Please find the below code.   

  

KanbanFeatures.vbhtml   

   

  @Html.EJ().Button("btnOpen").Text("Click to dynamically add columns").ClientSideEvents(Sub(evt)   

                                                                                   evt.Click("onclick")  // Externally created one button for open dialog    

   

Code   

Dim kanbanbuilder = Html.EJ().Kanban("Kanban")  // Kanban control   

      ……………..   

    kanbanbuilder.Render()    

End Code   

   

   

@Code Html.EJ().Dialog("basicDialog").Title("Audi-Q3 Drive").ShowOnInit(False).EnableModal(True).ContentTemplate(Sub()@<div style="margin: 5px14px"><label>Column Header Text: </label><input id="text"/><br /> <label>Column key value: </label> <input id="key"/> <br /><button id="button" onclick="dialogclick(this)">Click to add Kanban column</button> </div>   

                      End Sub).Render()  // Dialog control with click button   

               

        End Code   

   

<script>   

    function onclick(args) {  // Triggered when external button was clicked   

        $("#basicDialog").ejDialog("open");  // Open dialog control   

    }   

    function dialogclick(e) {  // Triggered when dialog button clicked   

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

        obj.columns($("#text").val(), $("#key").val(), "add") // Add Kanban columns dynamically   

        $("#basicDialog").ejDialog("close");  // Close the dialog   

    }   

</script>   

   

   

If you wish to modify existing column into new columns dynamically, you can follow the below solution.   

   

   

<script>   

    function dialogclick(e) {   

        $("#Kanban").ejKanban({  // Dynamically changed entire column using set model   

            columns: [   

                     { headerText: "New Backlog", key: "Backlog" },   

                     { headerText: "Validate", key: "Validate" }   

            ],   

        })   

    }   

</script>   

   

   

In previous update, we have dynamically added data source into Kanban.  Please refer the previous update for dynamically update the data source.   

   

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

Sample: http://www.syncfusion.com/downloads/support/forum/133558/ze/SyncfusionMvcApplication85-1338832050    

               

To know more about the ejKanban component members.  Please refer the below reference.              

API link: https://help.syncfusion.com/api/js/ejkanban#methods:columns    

      

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

   

Regards,   

Buvana S.