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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

get/post Data into mysql database

Thread ID:

Created:

Updated:

Platform:

Replies:

144416 May 6,2019 07:45 AM UTC May 13,2019 07:03 AM UTC Vue 3
loading
Tags: Data Grid
Nurhan Aydogdu
Asked On May 6, 2019 07:45 AM UTC

İ want to add some editable grid tables with a button called “new table” in Vue. I haven’t found any example or something else. 

And then the User get or post datas into/from my mysql database. How I can do this. What I have to prepare? 


thankful for any reply





Thavasianand Sankaranarayanan [Syncfusion]
Replied On May 7, 2019 12:31 PM UTC

Hi Nurhan, 

Greetings from Syncfusion support. 

We have analyzed your query. We suggest you to refer to the following documentation links for more details, 
Documentation :  
 

Please get back to us if you need further assistance. 

Regards, 
Thavasianand S. 


Nurhan Aydogdu
Replied On May 9, 2019 09:00 AM UTC


Hi Thavasianand,

thank you for reply.
maybe you can show me any example about this Problem. 
Actually i have a button which has to generate datagrids on click in cavas (ejsdiagram). İ want to add not only one grid rather more as many as needed when i click the button. 
İn Vue i couldnt add datagrids on click. how can i do this. İ have a solution in Javascript which works. But ı need this case as vue not in javascript. 


Also i need  a mysqldatabase connection for each created datagrid.  The link above are not clear for me. İ have installed mysql with a localinstance(3306), msqlworkbench and nodejs. Then i have create a server.js folder which is connected with my database. İ can create about this file Tables and so on. İt works fine. But yet i need the client server connection i mean. How i can do this? 

One unclear codesnippet. What are these Urls. Are they vue files in the project? How they looks like? 

    data: new DataManager({
        url: "Home/DataSource",
        updateUrl: "Home/Update",
        insertUrl: "Home/Insert",
        removeUrl: "Home/Delete",
        adaptor: new UrlAdaptor
    }),

another question where should i use this code?

public ActionResult DataSource(DataManager dm)
{
    var DataSource = OrderRepository.GetAllRecords();
    DataResult result = new DataResult();
    result.result = DataSource.Skip(dm.Skip).Take(dm.Take).ToList();
    result.count = result.result.Count;
    return Json(result, JsonRequestBehavior.AllowGet);
}

public class DataResult
{
    public List<EditableOrder> result { get; set; }
    public int count { get; set; }
}

when i want to perform a insert operation on the server-side. How and where i should to use this example:

public ActionResult Insert(EditableOrder value)
{
    //Insert record in database
}
Please give me more details and any example about my questions. 
 

Thavasianand Sankaranarayanan [Syncfusion]
Replied On May 13, 2019 07:03 AM UTC

Hi Nurhan, 

Query 1 : In Vue i couldn’t add dataGrids on click. 
Based on this requirement, we have prepared a sample, in which we will be adding the Grid each time when the button is clicked. Please find the sample from the link below, 

Query 2 : But yet i need the client server connection i mean. 
We have analyzed your query. Based on your request, we have prepared a sample to perform CRUD actions at server side in Vue platform. Please download the sample form the link below, 
                                          
Please refer the code example below, 
[fetchdata.vue.html] 
 
        <ejs-grid :dataSource="data" height="auto" width="540" :toolbar="toolbar" :editSettings="editSettings"> 
             ... 
        </ejs-grid> 
 
[fetchdata.ts] 
 
    data: () => { 
        return { 
            toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], 
            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, 
            data: new DataManager({ 
                url: "Home/UrlDatasource", 
                updateUrl: "Home/Update", 
                insertUrl: "Home/Insert", 
                removeUrl: "Home/Delete", 
                adaptor: new UrlAdaptor() 
            }), 
       }; 
    }, 
 
[HomeController.cs] 
 
        public IActionResult UrlDatasource([FromBody]DataManagerRequest dm) 
        { 
            ... 
           return Json(new { result = DataSource, count = count }); 
        } 
        public ActionResult Update([FromBody]ICRUDModel<OrdersDetails> value) 
        { 
            ... 
            return Json(value.value); 
        } 
       public ActionResult Insert([FromBody]ICRUDModel<OrdersDetails> value) 
        { 
 
            ... 
            return Json(value.value); 
        } 
       public ActionResult Delete([FromBody]ICRUDModel<OrdersDetails> value) 
        { 
            ... 
            return Json(value); 
        } 
 
 
We also suggest you to refer to the below documentation for more details on handling on demand grid actions, 

Please get back to us if you need further assistance. 

Regards, 
Thavasianand 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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon