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 connect database to Kanban

Thread ID:

Created:

Updated:

Platform:

Replies:

127216 Nov 3,2016 03:56 AM Sep 28,2017 08:08 AM ASP.NET Web Forms 6
loading
Tags: Kanban
Lars Ziegler
Asked On November 3, 2016 03:56 AM

Hi,

I love Kanban and have finished my customizing.
Now I try to connect the board to a SQL server database for managing my business data.

Do you have any hint for me how to do this?


Kind regards,
Lars

Sarath Kumar P [Syncfusion]
Replied On November 4, 2016 11:34 AM

    
Thanks for contacting Syncfusion Support. 
 
You can manage your data by performing Kanban CRUD operations(edit, card drop, add, remove) with the help of Ajax Post Request.  
 
Please refer to the below codes,     
 
[KanbanFeatures.aspx]     
 
//Here you can perform Kanban CRUD operations(edit, card drop, add, remove) with the help of Ajax Post Request  
function kanbanComplete(args) {    
            var kbnUrl; 
            if (args.action == "add" && args.requestType == "save") 
                kbnUrl = "KanbanFeatures.aspx/AddAction"; 
            else if (args.requestType == "drop" || (args.action == "edit" && args.requestType == "save"))  
                kbnUrl = "KanbanFeatures.aspx/EditDropAction"; 
            else if(args.requestType == "delete") 
                kbnUrl = "KanbanFeatures.aspx/removeAction" 
            if (args.requestType == "delete" || args.requestType == "save" || args.requestType == "drop") { 
             var card = { 
                    "Id": args.data[0]["Id"], 
                    "Status": args.data[0]["Status"], 
                    "Assignee": args.data[0]["Assignee"], 
                    "Estimate": args.data[0]["Estimate"], 
                    "Summary": args.data[0]["Summary"] 
            }; 
            $.ajax({ 
                async: true, 
                type: "POST", 
                contentType: "application/json; charset=utf-8", 
                url: kbnUrl, 
                data: JSON.stringify(card), 
                dataType: "json", 
                success: function (res) { 
                }, 
                error: function (e) { 
                } 
            }); 
            } 
        } 
 
<ej:Kanban ID="Kanban" runat="server" KeyField="Status" AllowTitle="true"> 
                <Columns> 
                    <ej:KanbanColumn HeaderText="Backlog" Key="Open" ShowAddButton="true" /> // ShowAddButton— ”Add” toolbar to add kanban card. 
                    <ej:KanbanColumn HeaderText="In Progress" Key="InProgress" /> 
                    <ej:KanbanColumn HeaderText="Done" Key="Close" /> 
                </Columns> 
                <Fields Content="Summary" PrimaryKey="Id" /> 
                <CustomToolBarItems> 
                    <ej:KanbanCustomToolBarItems Template="#Delete" /> //Custom delete toolbar to delete card 
                </CustomToolBarItems> 
                <ClientSideEvents ToolbarClick="toolbarClick" ActionComplete="kanbanComplete" />  //Intailize actioncomplete event to perform Kanban CRUD Operations 
                <EditSettings AllowAdding="true" AllowEditing="true" EditMode="Dialog"> //Enable Add, Edit Settings to add, edit card 
                    <EditItems> 
                        <ej:KanbanEditItem Field="Id"> 
                        </ej:KanbanEditItem> 
                        <ej:KanbanEditItem Field="Status"></ej:KanbanEditItem> 
                        <ej:KanbanEditItem Field="Assignee"></ej:KanbanEditItem> 
                        <ej:KanbanEditItem Field="Estimate"> 
                        </ej:KanbanEditItem> 
                        <ej:KanbanEditItem Field="Summary"> 
                        </ej:KanbanEditItem> 
                    </EditItems> 
                </EditSettings> 
            </ej:Kanban> 
        </div> 
    </div> 
    <script type="text/javascript"> 
        function toolbarClick(args) {  //Here you can perform delete operation in the custom delete toolbar click event 
            if (args.itemName == "Delete" && this.element.find(".e-kanbancard").hasClass("e-cardselection")) { 
                var selectedcard = this.element.find(".e-cardselection"); 
                this.KanbanEdit.deleteCard(selectedcard.attr("id")); 
            } 
        } 
    </script> 
    //Customize custom delete tool bar 
    <script id="Delete" type="text/x-jsrender"> 
        <a class="e-customdelete  e-icon" /> 
    </script> 
    <style> 
        .e-customdelete:before { 
            content: "\e800"; 
            line-height: 26px; 
            min-height: 26px; 
            min-width: 14px; 
            display: inline-block; 
        } 
    </style> 
  
    
 
[KanbanFeatures.aspx.cs]     
 
DataTable dt = new DataTable("Task"); 
        protected void Page_Load(object sender, EventArgs e) 
        { 
            if (!IsPostBack) 
            { 
                //Render all kanban cards. 
                SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["SQLConnectionString"].ToString()); 
                dt = new DataTable("Task"); 
                SqlCommand cmd = new SqlCommand(); 
                cmd.Connection = myConnection; 
                cmd.CommandText = "select * from Tasks"; 
                cmd.CommandType = CommandType.Text; 
                SqlDataAdapter da = new SqlDataAdapter(); 
                da.SelectCommand = cmd; 
                if (myConnection.State == ConnectionState.Closed) 
                { 
                    myConnection.Open(); 
                } 
                da.Fill(dt); 
                //To render all Kanban cards. 
                Kanban.DataSource = (DataTable)dt; 
                Kanban.DataBind(); 
            } 
        } 
        // Here you can perform Edit Operation 
        [WebMethod] 
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
        public static object EditDropAction(int Id, string Status, string Assignee, float Estimate, string Summary) 
        { 
            SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["SQLConnectionString"].ToString()); 
            if (myConnection.State == ConnectionState.Closed) 
            { 
                myConnection.Open(); 
            } 
            string updateQuery = "UPDATE Tasks SET Assignee=@Assignee, Summary=@Summary, Estimate=@Estimate, Status=@Status where Id=@Id"; 
            SqlCommand UpdateCmd = new SqlCommand(updateQuery, myConnection); 
            UpdateCmd.Parameters.Add(new SqlParameter("@Assignee", SqlDbType.VarChar, 10)).Value = Assignee; 
            UpdateCmd.Parameters.Add(new SqlParameter("@Summary", SqlDbType.VarChar, 150)).Value = Summary; 
            UpdateCmd.Parameters.Add(new SqlParameter("@Estimate", SqlDbType.Float)).Value = Estimate; 
            UpdateCmd.Parameters.Add(new SqlParameter("@Status", SqlDbType.VarChar, 10)).Value = Status; 
            UpdateCmd.Parameters.Add(new SqlParameter("@Id", SqlDbType.Int)).Value = Id;  
            UpdateCmd.ExecuteNonQuery(); 
            var ID = Id; 
            return ID; 
        } 
        // Here you can perform Add Operation 
        [WebMethod] 
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
        public static object AddAction(int Id, string Status, string Assignee, float Estimate, string Summary) 
        { 
            SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["SQLConnectionString"].ToString()); 
            if (myConnection.State == ConnectionState.Closed) 
            { 
                myConnection.Open(); 
            } 
            string insertQuery = "INSERT INTO Tasks(Assignee,Summary,Estimate,Status,Id,RankId) VALUES (@Assignee,@Summary,@Estimate,@Status,@Id,@RankId)"; 
            SqlCommand InsertCmd = new SqlCommand(insertQuery, myConnection); 
            InsertCmd.Parameters.Add(new SqlParameter("@Assignee", SqlDbType.VarChar, 10)).Value = Assignee; 
            InsertCmd.Parameters.Add(new SqlParameter("@Summary", SqlDbType.VarChar, 150)).Value = Summary; 
            InsertCmd.Parameters.Add(new SqlParameter("@Estimate", SqlDbType.Float)).Value = Estimate; 
            InsertCmd.Parameters.Add(new SqlParameter("@Status", SqlDbType.VarChar, 10)).Value = Status; 
            InsertCmd.Parameters.Add(new SqlParameter("@Id", SqlDbType.Int)).Value = Id; 
            InsertCmd.Parameters.Add(new SqlParameter("@RankId", SqlDbType.Int)).Value = 0; 
            InsertCmd.ExecuteNonQuery(); 
            var ID = Id; 
            return ID; 
        } 
        //Here you can perform Remove Operation 
        [WebMethod] 
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
        public static object removeAction(int Id, string Status, string Assignee, float Estimate, string Summary) 
        { 
            SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["SQLConnectionString"].ToString()); 
            if (myConnection.State == ConnectionState.Closed) 
            { 
                myConnection.Open(); 
            } 
            string deleteQuery = "DELETE from Tasks where Id='" + Id + "'"; 
            SqlCommand deleteCmd = new SqlCommand(deleteQuery, myConnection); 
            deleteCmd.ExecuteNonQuery(); 
            var ID = Id; 
            return ID; 
        } 
  
Please refer to the attached sample and the video, 
     
 
 
Regards, 
Sarath Kumar P     


Carlos rojas
Replied On September 16, 2017 10:42 AM

    
Thanks for contacting Syncfusion Support. 
 
You can manage your data by performing Kanban CRUD operations(edit, card drop, add, remove) with the help of Ajax Post Request.  
 
Please refer to the below codes,     
 
[KanbanFeatures.aspx]     
 
//Here you can perform Kanban CRUD operations(edit, card drop, add, remove) with the help of Ajax Post Request  
function kanbanComplete(args) {    
            var kbnUrl; 
            if (args.action == "add" && args.requestType == "save") 
                kbnUrl = "KanbanFeatures.aspx/AddAction"; 
            else if (args.requestType == "drop" || (args.action == "edit" && args.requestType == "save"))  
                kbnUrl = "KanbanFeatures.aspx/EditDropAction"; 
            else if(args.requestType == "delete") 
                kbnUrl = "KanbanFeatures.aspx/removeAction" 
            if (args.requestType == "delete" || args.requestType == "save" || args.requestType == "drop") { 
             var card = { 
                    "Id": args.data[0]["Id"], 
                    "Status": args.data[0]["Status"], 
                    "Assignee": args.data[0]["Assignee"], 
                    "Estimate": args.data[0]["Estimate"], 
                    "Summary": args.data[0]["Summary"] 
            }; 
            $.ajax({ 
                async: true, 
                type: "POST", 
                contentType: "application/json; charset=utf-8", 
                url: kbnUrl, 
                data: JSON.stringify(card), 
                dataType: "json", 
                success: function (res) { 
                }, 
                error: function (e) { 
                } 
            }); 
            } 
        } 
 
<ej:Kanban ID="Kanban" runat="server" KeyField="Status" AllowTitle="true"> 
                <Columns> 
                    <ej:KanbanColumn HeaderText="Backlog" Key="Open" ShowAddButton="true" /> // ShowAddButton— ”Add” toolbar to add kanban card. 
                    <ej:KanbanColumn HeaderText="In Progress" Key="InProgress" /> 
                    <ej:KanbanColumn HeaderText="Done" Key="Close" /> 
                </Columns> 
                <Fields Content="Summary" PrimaryKey="Id" /> 
                <CustomToolBarItems> 
                    <ej:KanbanCustomToolBarItems Template="#Delete" /> //Custom delete toolbar to delete card 
                </CustomToolBarItems> 
                <ClientSideEvents ToolbarClick="toolbarClick" ActionComplete="kanbanComplete" />  //Intailize actioncomplete event to perform Kanban CRUD Operations 
                <EditSettings AllowAdding="true" AllowEditing="true" EditMode="Dialog"> //Enable Add, Edit Settings to add, edit card 
                    <EditItems> 
                        <ej:KanbanEditItem Field="Id"> 
                        </ej:KanbanEditItem> 
                        <ej:KanbanEditItem Field="Status"></ej:KanbanEditItem> 
                        <ej:KanbanEditItem Field="Assignee"></ej:KanbanEditItem> 
                        <ej:KanbanEditItem Field="Estimate"> 
                        </ej:KanbanEditItem> 
                        <ej:KanbanEditItem Field="Summary"> 
                        </ej:KanbanEditItem> 
                    </EditItems> 
                </EditSettings> 
            </ej:Kanban> 
        </div> 
    </div> 
    <script type="text/javascript"> 
        function toolbarClick(args) {  //Here you can perform delete operation in the custom delete toolbar click event 
            if (args.itemName == "Delete" && this.element.find(".e-kanbancard").hasClass("e-cardselection")) { 
                var selectedcard = this.element.find(".e-cardselection"); 
                this.KanbanEdit.deleteCard(selectedcard.attr("id")); 
            } 
        } 
    </script> 
    //Customize custom delete tool bar 
    <script id="Delete" type="text/x-jsrender"> 
        <a class="e-customdelete  e-icon" /> 
    </script> 
    <style> 
        .e-customdelete:before { 
            content: "\e800"; 
            line-height: 26px; 
            min-height: 26px; 
            min-width: 14px; 
            display: inline-block; 
        } 
    </style> 
  
    
 
[KanbanFeatures.aspx.cs]     
 
DataTable dt = new DataTable("Task"); 
        protected void Page_Load(object sender, EventArgs e) 
        { 
            if (!IsPostBack) 
            { 
                //Render all kanban cards. 
                SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["SQLConnectionString"].ToString()); 
                dt = new DataTable("Task"); 
                SqlCommand cmd = new SqlCommand(); 
                cmd.Connection = myConnection; 
                cmd.CommandText = "select * from Tasks"; 
                cmd.CommandType = CommandType.Text; 
                SqlDataAdapter da = new SqlDataAdapter(); 
                da.SelectCommand = cmd; 
                if (myConnection.State == ConnectionState.Closed) 
                { 
                    myConnection.Open(); 
                } 
                da.Fill(dt); 
                //To render all Kanban cards. 
                Kanban.DataSource = (DataTable)dt; 
                Kanban.DataBind(); 
            } 
        } 
        // Here you can perform Edit Operation 
        [WebMethod] 
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
        public static object EditDropAction(int Id, string Status, string Assignee, float Estimate, string Summary) 
        { 
            SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["SQLConnectionString"].ToString()); 
            if (myConnection.State == ConnectionState.Closed) 
            { 
                myConnection.Open(); 
            } 
            string updateQuery = "UPDATE Tasks SET Assignee=@Assignee, Summary=@Summary, Estimate=@Estimate, Status=@Status where Id=@Id"; 
            SqlCommand UpdateCmd = new SqlCommand(updateQuery, myConnection); 
            UpdateCmd.Parameters.Add(new SqlParameter("@Assignee", SqlDbType.VarChar, 10)).Value = Assignee; 
            UpdateCmd.Parameters.Add(new SqlParameter("@Summary", SqlDbType.VarChar, 150)).Value = Summary; 
            UpdateCmd.Parameters.Add(new SqlParameter("@Estimate", SqlDbType.Float)).Value = Estimate; 
            UpdateCmd.Parameters.Add(new SqlParameter("@Status", SqlDbType.VarChar, 10)).Value = Status; 
            UpdateCmd.Parameters.Add(new SqlParameter("@Id", SqlDbType.Int)).Value = Id;  
            UpdateCmd.ExecuteNonQuery(); 
            var ID = Id; 
            return ID; 
        } 
        // Here you can perform Add Operation 
        [WebMethod] 
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
        public static object AddAction(int Id, string Status, string Assignee, float Estimate, string Summary) 
        { 
            SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["SQLConnectionString"].ToString()); 
            if (myConnection.State == ConnectionState.Closed) 
            { 
                myConnection.Open(); 
            } 
            string insertQuery = "INSERT INTO Tasks(Assignee,Summary,Estimate,Status,Id,RankId) VALUES (@Assignee,@Summary,@Estimate,@Status,@Id,@RankId)"; 
            SqlCommand InsertCmd = new SqlCommand(insertQuery, myConnection); 
            InsertCmd.Parameters.Add(new SqlParameter("@Assignee", SqlDbType.VarChar, 10)).Value = Assignee; 
            InsertCmd.Parameters.Add(new SqlParameter("@Summary", SqlDbType.VarChar, 150)).Value = Summary; 
            InsertCmd.Parameters.Add(new SqlParameter("@Estimate", SqlDbType.Float)).Value = Estimate; 
            InsertCmd.Parameters.Add(new SqlParameter("@Status", SqlDbType.VarChar, 10)).Value = Status; 
            InsertCmd.Parameters.Add(new SqlParameter("@Id", SqlDbType.Int)).Value = Id; 
            InsertCmd.Parameters.Add(new SqlParameter("@RankId", SqlDbType.Int)).Value = 0; 
            InsertCmd.ExecuteNonQuery(); 
            var ID = Id; 
            return ID; 
        } 
        //Here you can perform Remove Operation 
        [WebMethod] 
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
        public static object removeAction(int Id, string Status, string Assignee, float Estimate, string Summary) 
        { 
            SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["SQLConnectionString"].ToString()); 
            if (myConnection.State == ConnectionState.Closed) 
            { 
                myConnection.Open(); 
            } 
            string deleteQuery = "DELETE from Tasks where Id='" + Id + "'"; 
            SqlCommand deleteCmd = new SqlCommand(deleteQuery, myConnection); 
            deleteCmd.ExecuteNonQuery(); 
            var ID = Id; 
            return ID; 
        } 
  
Please refer to the attached sample and the video, 
     
 
 
Regards, 
Sarath Kumar P     


Hello,

What happens when the configuration of the EditMode = "DialogTemplate", I have other fields so I use a template
I have debugged the args object but the latter does not contain the data objects and the requestType property does not have the add or save or drop value. Can you help me please Thank you.

Buvana Sathasivam [Syncfusion]
Replied On September 18, 2017 05:28 AM

Hi Carlos,   
  
Thanks for using Syncfusion products.   
  
We tried to reproduce the reported scenario, but we were unable to reproduce the mentioned issue.  We have prepared a simple sample with dialog editing template in below code block.   
  
KanbanFeatures.aspx   
  
<ej:Kanban ……   
   <ClientSideEvents ActionComplete="kanbanComplete" />   
   
   <EditSettings AllowAdding="true" AllowEditing="true" EditMode="DialogTemplate"DialogTemplate="#template"></EditSettings>   // If you are using edit mode as dialog template   
   
</ej:Kanban>   
   
  
Note: If you perform add operation, you need to enable AllowAdding property.   
  
  
  
Please use the above sample to reproduce your issue and if possible please share us the code snippets of the page you were using or else please share the proper replication procedure.  This information will be helpful for us to analyze further on the issue and to provide a solution.      
   
Regards,   
Buvana S. 


Carlos rojas
Replied On September 27, 2017 03:03 PM

Dear,

 I have reviewed your example and I have she same thing that you send me.

I have also debugged the code and I have found some differences and properties that do not exist eg the object args has the property action but in my debugged object does not have it (Attached image).

Thanks for your help


Carlos rojas
Replied On September 27, 2017 03:08 PM

Dear,

 I have reviewed your example and I have she same thing that you send me.

I have also debugged the code and I have found some differences and properties that do not exist eg the object args has the property action but in my debugged object does not have it (Attached image).

Thanks for your help


Send Image


Buvana Sathasivam [Syncfusion]
Replied On September 28, 2017 08:08 AM

Hi Carlos,   
  
Thanks for your update.   
  
In our Kanban control, actionComplete event is triggered twice when you save or cancel the dialog form.  If you click save button, actionComplete event are triggered first time and arguments have action property with request type save.  Please find the below screenshot.   
  
    
  
While actionComplete event triggered  argument does not have action property and having request Type as cancel because this actionComplete event are triggered when internally close the dialog form.  Please find the below screenshot.   
  
    
  
args.action parameter was passed when endEdit, swimlaneClick and endDelete event was performed on Kanban board.  Based on endEdit event, actionComplete event are triggered at first and second time triggered based on Kanban dialog close event.  So only, second time args.action parameter was not shown.   
  
Please modify your workaround solutions as like below,   
  
KanbanFeatues.cshtml   
  
<ej:Kanban>   
  <ClientSideEvents ActionComplete="kanbanComplete" />   
</ej:Kanban>   
  
<script type="text/javascript">   
      function kanbanComplete(args) {   
           var kbnUrl;   
            if (!ej.isNullOrUndefined(args.action) && args.action == "add" && args.requestType == "save")   // Check args.action is null or undefined   
                kbnUrl = "KanbanFeatures.aspx/AddAction";   
            else if (args.requestType == "drop" || (!ej.isNullOrUndefined(args.action)&& args.action == "edit" && args.requestType == "save"))    
                kbnUrl = "KanbanFeatures.aspx/EditDropAction";   
            else if(args.requestType == "delete")   
                kbnUrl = "KanbanFeatures.aspx/removeAction"   
      }   
</script>   


  
  
If issues persist, please share the sample or code or product version, so that we can check and provide appropriate solutions.      


 
 
Regards,   
Buvana S.   
 


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.

;