sql

Question

how would you connect the sql db to the kanban app in react. im struggling a bit

Revanth Krishnan · Accepted Answer

Hi Nihaal, 
  
  
Greetings from Syncfusion support. 
 
  
We have validated your reported query. You can manage your data by performing Kanban CRUD operations(edit, update, add, remove) with the help of DataManager properties binding the data for the Kanban. In the below-shared sample, we have performed Kanban actions with the Database for loading and performing actions in the Kanban. Check the below-shared sample for reference, in connecting Kanban with the database.  
  
Code block:  
  




  
constructor() {  
    super(...arguments);  
    this.data = new DataManager({  
      url: 'http://localhost:54738/Home/LoadData',  
      updateUrl: 'http://localhost:54738/Home/UpdateData',  
      insertUrl: 'http://localhost:54738/Home/UpdateData',  
      removeUrl: 'http://localhost:54738/Home/UpdateData',  
      adaptor: new UrlAdaptor(),  
      crossDomain: true  
    });  
  }  
  
  
Documentation: https://ej2.syncfusion.com/react/documentation/kanban/data-binding/#url-adaptor  
React Sample: https://stackblitz.com/edit/react-eoy9ny   
Service: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Kanban_Crud_Update-1264625088  
  
Steps to run the sample:  

Run the above shared Service.
Once the service is hosted, run the above shared React sample.
The Kanban operations(edit, update, add, remove), will now be updated with the data in the database.
SQL Database:  
  




  
using System.Data;  
using System.Data.SqlClient;  
  
public class HomeController : Controller  
    {  
  DataTable dt = new DataTable("Task");   
   protected void Page_Load(object sender, EventArgs e)   
        {   
            if (!IsPostBack)   
            {   
               //Render 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);   
                return Json(da, JsonRequestBehavior.AllowGet);  
            }   
        }  
}  
  
  
Please let us know if the solution helps. 
  
Regards,  
Revanth

Indrajith Srinivasan · Answer

Hi Nihaal,Greetings
from syncfusion support,We are
currently validating your reported query, and will update you with further
details in two business days by 23rd June 2021.Regards,Indrajith

Nihaal Tayob · Answer

Please help me ASAP

N · Answer

Hello.Would this method work if you are using the filtering option on the kanban board?or how would you do it?

Vinitha Jeyakumar · Answer

Hi N, 
 
 
Currently, we are validating your reported query. We will update you the further details soon. 
 
We appreciate your patience until then. 
 
Regards, 
Vinitha.

Vinitha Jeyakumar · Answer

Hi N, 
 
 
Good day to you, 
 
 
We have further validated your query “Would this method work if you are using the filtering option on the kanban board” 
 
Yes, this method will work when using filtering for the Kanban cards and the filter can be done using Query. We have also prepared a sample for your reference, 
 
Code snippet: 
Server side(HomeController.cs) 




public JsonResult LoadData(Params param)  // Here we can filter the cards using where query. 
        { 
            var data = db.ScheduleEventDatas.ToList();   
            var model = from r in db.ScheduleEventDatas orderby r.Subject where r.Subject == "Inprogress" select r; 
            return Json(model); 
            //return Json(data, JsonRequestBehavior.AllowGet); 
             
 
        } 
 
Sample: https://stackblitz.com/edit/react-eoy9ny-wwzs3e?file=index.js 
 
Service: https://www.syncfusion.com/downloads/support/forum/168417/ze/Kanban_filter-1682379404 
 
Please check the above sample and code snippet and let us know if it satisfies your requirement. 
 
Regards, 
Vinitha.