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. Image for the cookie policy date
  1. Home
  2. Forum
  3. Vue
  4. Editing - how are CRUD requests configured

Editing - how are CRUD requests configured

I'm evaluating datagrid and trying to learn how to configure queries when a row is created/updated. 

The examples + documentation are expansive, but I can't find a straightforward example of this. The editing examples don't seem to have any networking configuration.

My understanding is that a datamanager component must be used, right? Is there documentation on how to use this with the grid?

Thanks

5 Replies
DR Dhivya Rajendran Syncfusion Team September 4, 2019 05:19 AM

Hi Josh, 

Greeting from Syncfusion. 

For your reference, we have created a sample and perform CRUD operation. Please refer the below code example and sample for more information. 

<template> 
    <div> 
        <ejs-grid :dataSource="data" height="auto" width="540" :toolbar="toolbar" :pageSettings="pageSettings" allowPaging="true" :editSettings="editSettings"> 
            <e-columns> 
                . . . . . 
           </e-columns> 
        </ejs-grid> 
    </div> 
</template> 

export default Vue.extend({ 
    data: () => { 
        return { 
            pageSettings: { pageSize: 12 }, 
            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() 
            }), 
        }; 
    }, 
   . . . . . .  
    }); 

public IActionResult UrlDatasource([FromBody]DataManagerRequest dm) 
        { 
            IEnumerable DataSource = OrdersDetails.GetAllRecords(); 
            List<string> str = new List<string>(); 
            DataOperations operation = new DataOperations(); 
            . . . . . 
           int count = DataSource.Cast<OrdersDetails>().Count(); 
            if (dm.Skip != 0) 
            { 
                DataSource = operation.PerformSkip(DataSource, dm.Skip);   //Paging 
            } 
            if (dm.Take != 0) 
            { 
                DataSource = operation.PerformTake(DataSource, dm.Take); 
            } 
            return dm.RequiresCounts ? Json(new { result = DataSource, count = count }) : Json(DataSource); 
        } 
        public ActionResult Update([FromBody]ICRUDModel<OrdersDetails> value) 
        { 
            var ord = value.value; 
            OrdersDetails val = OrdersDetails.GetAllRecords().Where(or => or.OrderID == ord.OrderID).FirstOrDefault(); 
            val.OrderID = ord.OrderID; 
            . . . . . . 
 
            return Json(value.value); 
        } 
        //insert the record 
        public ActionResult Insert([FromBody]ICRUDModel<OrdersDetails> value) 
        { 
 
            OrdersDetails.GetAllRecords().Insert(0, value.value); 
            return Json(value.value); 
        } 
       //Delete the record 
        public ActionResult Delete([FromBody]ICRUDModel<OrdersDetails> value) 
        { 
            OrdersDetails.GetAllRecords().Remove(OrdersDetails.GetAllRecords().Where(or => or.OrderID == int.Parse(value.key.ToString())).FirstOrDefault()); 
            return Json(value); 
        } 


By default, while using urlAdaptor its necessary to return the result and count pair from controller. Please refer the help documentation for more information about data binding in Grid  


Please get back to us if you need further assistance from us. 

Regards, 
R.Dhivya 


JP Josh Peterson September 4, 2019 05:20 PM

Thanks, this is helpful.

Is it possible to do more configuration of the CRUD requests? I'm interested in sending elasticsearch queries in the body, for example.

TS Thavasianand Sankaranarayanan Syncfusion Team September 5, 2019 07:40 AM

Hi Josh, 

By default, we have provided an option to send the additional parameter to the data request so we suggest you to use the query property to send the additional parameters. Please find the below help documentation for more information. 


We have different types of adaptor based on the your server(or service) you can define the adaptor. Kindly refer documentation for more information.  


Regards, 
Thavasianand S. 


JP Josh Peterson September 5, 2019 01:35 PM

Thanks, but I still don't understand. 

The DataManager as an abstraction seems pretty opaque. As a front end developer, I understand event callbacks and ajax requests. If I'm supposed to use a different paradigm just to use this data grid library, there needs to be more teaching.

Also, if you're going to give me an object that's supposed to be easy to use because you can just pass in configuration, my concern is then is it going to be flexible enough? Will I need to write a custom adapter or something to make my use-case work?

For example, to work with elasticsearch, I need search to use a POST request, and then I need to send some json in the request body. From the docs, I can't really see how to do that. Does using the query property just URI encode and add to the query string? Also not really clear.

Maybe it would be good for you to write a blog post / tutorial on how DataManager is supposed to work from a high level, and some examples of how to use it in different scenarios.

TS Thavasianand Sankaranarayanan Syncfusion Team September 6, 2019 08:45 AM

Hi Josh, 

Thanks for your update. 

By default, while using data manager then we have send the HTTP request based on the grid action(like filtering, paging). If you want to send any additional parameter then use query property to achieve your requirement. 


If you want to customize the request then use custom adaptor to override the default behavior. Please refer the below code example and documentation for more information. 

        class CustomAdaptor extends ej.data.UrlAdaptor { 
            insert(dm, data, tableName) {  // you can customize and send the request based on your requirement 
                this.updateType = 'add'; 
                return { 
                    url: dm.dataSource.insertUrl || dm.dataSource.crudUrl || dm.dataSource.url, 
                    data: $.param({ 
                        //Added the anti-forgery token. 
                        __RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value, 
                        value: data, 
                        table: tableName, 
                        action: 'insert' 
                    }), 
                    contentType: 'application/x-www-form-urlencoded; charset=UTF-8' 
                }; 
            } 
            update(dm, keyField, value, tableName) { 
                this.updateType = 'update'; 
                this.updateKey = keyField; 
                return { 
                    type: 'POST', 
                    url: dm.dataSource.updateUrl || dm.dataSource.crudUrl || dm.dataSource.url, 
                    data: $.param({ 
                        //Added the anti-forgery token. 
                        __RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value, 
                        value: value, 
                        action: 'update', 
                        keyColumn: keyField, 
                        key: value[keyField], 
                        table: tableName 
                    }), 
                    contentType: 'application/x-www-form-urlencoded; charset=UTF-8' 
                }; 
            } 
            remove(dm, keyField, value, tableName) { 
                new ej.data.JsonAdaptor.prototype.remove(dm, keyField, value); 
                return { 
                    type: 'POST', 
                    url: dm.dataSource.removeUrl || dm.dataSource.crudUrl || dm.dataSource.url, 
                    data: $.param({ 
                        //Added the anti-forgery token. 
                        __RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value, 
                        key: value, 
                        keyColumn: keyField, 
                        table: tableName, 
                        action: 'remove' 
 
                    }), 
                    contentType: 'application/x-www-form-urlencoded; charset=UTF-8' 
                }; 
            } 
        } 



Note: We have provided  custom binding support in Grid so you can make your own AJAX and bind the data to grid(not necessary to data manager). 


Regards, 
Thavasianand S. 


Loader.
Live Chat Icon For mobile
Up arrow icon