1. Home
  2. Forum
  3. React - EJ 2
  4. sql

sql

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


6 Replies 1 reply marked as answer
IS Indrajith Srinivasan Syncfusion Team June 21, 2021 12:18 PM UTC

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


NT Nihaal Tayob June 22, 2021 09:57 AM UTC

Please help me ASAP



RK Revanth Krishnan Syncfusion Team June 23, 2021 03:37 AM UTC

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  
    });  
  }  
  
  
  
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 


Marked as answer
N N replied to Revanth Krishnan August 27, 2021 12:24 PM UTC

Hello.

Would this method work if you are using the filtering option on the kanban board?

or how would you do it?


VJ Vinitha Jeyakumar Syncfusion Team August 30, 2021 12:59 PM UTC

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. 


VJ Vinitha Jeyakumar Syncfusion Team August 31, 2021 12:41 PM UTC

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); 
             
 
        } 
 
 
 
Please check the above sample and code snippet and let us know if it satisfies your requirement. 
 
Regards, 
Vinitha. 
 
 


Loader.
Up arrow icon