EJ2 Grid - Manually trip update records

Question

Hello,So we have a grid that is just this (its been edited for space as there is a toolbar and a datasource with a datamanager):award_approval_grid = new ej.grids.Grid({    toolbarClick: award_approval_grid_toolbarClick,    columns: [        {type: 'checkbox', width: 40},        { field: 'id', headerText: 'ID', isPrimaryKey: true, visible: false,            validationRules: { required: true, number: true },        },        { field: 'award_date', headerText: 'Date',        },        { field: 'award_name', headerText: 'Name',        },    ]});award_approval_grid.appendTo('#award_approval_grid');How do we in the toolbarClick event, trigger the crudUrl in the dataManager and send all the rows that have the checkbox selected?Thanks!

Thiyagu Subramani · Accepted Answer

Hi Mark, 

Thanks for your update. 

By default we have option for crudUrl property, the controller action mapping URL can be specified to perform all the CRUD operation at server-side using a single method instead of specifying separate controller action method for CRUD (insert, update and delete) operations for Normal editing mode . The action parameter of crudUrl is used to get the corresponding CRUD action. 

In Normal edit mode, when you start editing the currently selected record is changed to edit state (one row in one time) . You can change the cell values and save edited data to the data source. To enable Normal edit, set the editSettings.mode as Normal. So by default if we select the multiple rows using checkbox and clicking a button in the toolbar, edit mode creates for initially selected row and its submits crudUrl for that edit state row( initially selected row).its default behavior. 

If we misunderstood your exact your requirement, please share your requirement briefly with video demonstration. 

Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S

Thiyagu Subramani · Answer

Hi Mark, 
 
Thanks for contacting Syncfusion support. 
 
We have validated the your requirement and provide code example. We would like to share the detail about Grid with CRUD feature. 
 
By default, you can fetch Grid data and perform CRUD action in specific URL by setting Grid dataSource as DataManager with specific adaptor. Please find the documentation for your reference. 
 
Documentation : https://ej2.syncfusion.com/javascript/documentation/grid/edit/#persisting-data-in-server  
DataAdaptors: https://ej2.syncfusion.com/javascript/documentation/grid/data-binding/#remote-data  
 
Note: You can select the DataAdaptor based on your backend database. 
 
Types of Grid editing : 
 
Normal Editing: 
 
When you start editing the currently selected record is changed to edit state (only one row edit at time). Please find the demo and documentation . 
 
Demo : https://ej2.syncfusion.com/demos/#/material/grid/normal-editing.html  
Documentation : https://ej2.syncfusion.com/javascript/documentation/grid/edit/#normal  
 
Batch Editing: 
 
You can bulk save (added, changed and deleted data in the single request) to data source. 
 
Demo: https://ej2.syncfusion.com/demos/#/material/grid/batch-editing.html  
Documentation : https://ej2.syncfusion.com/javascript/documentation/grid/edit/#batch   
 
This is not meet your requirement, could you please explain more details about your requirement. 
 
Regards, 
 Thiyagu S

Mark · Answer

Thank you but not exactly what we need. Basically, the only edit is checking the unbound checkboxes and clicking a button in the toolbar.  Using the crudurl how do I submit this selected rows?

Mark · Answer

Thank you. I have switched it to Normal mode, but we do have allowEdit: false as there isn't editing allowed of the rows. I am guessing we need to allowEdit: true but for each column, turn it off? Regardless, here is the full code and the question in the toolbarClick.

Balaji Sekar · Answer

Hi Mark, 
 
Query #1: We need to allowEdit: true but for each column, turn it off? 

By default, when we defined the allowEdting as true in the editSettings, Grid’s column allow the editing except primaryKey column. If you want to prevent the edit in specific column using column.allowEditing as false. 

Please refer the below code example for more information 




award_approval_grid = new ej.grids.Grid({        dataSource: award_approve_dataManager,        toolbar: [{text: 'Approve Selected', id: 'award_approval_grid_approve'}],        allowSorting: true,        allowFilter: true,        allowPaging: true,        pageSettings: {pageCount: 3, pageSizes: true},        editSettings: {allowAdding: false, allowDeleting: false, allowEditing: true, mode: 'Normal', showDeleteConfirmDialog: true, },        detailTemplate: '#myAwardsDetailTemplate',        commandClick: my_awards_grid_commandClick,        toolbarClick: award_approval_grid_toolbarClick,        columns: [            {type: 'checkbox', width: 40},            { field: 'id', headerText: 'ID', isPrimaryKey: true, visible: false,                validationRules: { required: true, number: true },            },            { field: 'award_date', headerText: 'Date',            },            { field: 'award_type', headerText: 'Type', allowEditing: false,            },            { field: 'award_category', headerText: 'Category',             },            { field: 'summary', headerText: 'Summary',            },            { field: 'status', headerText: 'Status',            },            { field: 'description', headerText: 'Description', visible: false,            },            {                headerText: 'View Form',                commands: [                    {type: 'None', title: 'View Form', buttonOption: {iconCss: 'reportsLink', cssClass: 'e-flat'}}                ]            },        ]    });    award_approval_grid.appendTo('#award_approval_grid'); 
 Query #2: WHAT GOES HERE TO TRIP A SUBMIT TO THE CRUDURL FOR THE SELECTED ROWS ONLY.  THERE ARE NO EDITS ON THE ROW JUST CHECKING THE CHECKBOXCurrently we are working this query and we will update further details on January 18th, 2021Until then we appreciate your valuable patience.
 
Regards, 
Balaji Sekar

Mark · Answer

Hello! I hope all is well. Any success with this as we are kind of stuck?

Edit:

I came up with this workaround which trips the datamanager URL and on the server, I just check for if the param is present or not for the update. This is not ideal, but it works. Additionally, we discovered an interesting bug (?). The first time you click the button, it calls the function as expected, but the grid does not initiate the call as expected, so we have to do a refresh. Any subsequent click though, initiates the call as expected and doing the refresh causes 2 calls to the endpoint.

var award_approval_grid_toolbarClickNotClicked = true;
function award_approval_grid_toolbarClick(args){
    var result = award_approval_grid.getSelectedRecords().map(function(a) {return a.id;});
    if(result.length > 0) {
        award_approval_grid.query = new ej.data.Query().addParams('updated_ids', result);
        if(award_approval_grid_toolbarClickNotClicked){
            award_approval_grid.refresh();
            award_approval_grid_toolbarClickNotClicked = false;
        }
    }
}

Thiyagu Subramani · Answer

Hi Mark,

Thanks for your patience.

Based on your query we suspect that you wish to extend the built-in URL adaptor and implement your own custom adaptor. You can achieve this requirement by using the Grid’s custom adaptor method. Because using this method we can customize the grid actions. Using this custom adaptor we can send all selected records to the appropriate insert, update and remove method’s value parameter to the server side. For example we suggest to use our endEdit method in toolbar click event after editing the row. Now custom Adaptor’s update method in called with value parameter and this parameters we can sent as per needs to the server side.

window.customAdaptor = new ej.data.UrlAdaptor();

customAdaptor = ej.base.extend(customAdaptor, {

processResponse: function (data, ds, query, xhr, request, changes) {

request.data = JSON.stringify(data);

return ej.data.UrlAdaptor.prototype.processResponse.call(this, data, ds, query, xhr, request, changes)

},

insert: function (dm, data, tableName) {

return {

url: dm.dataSource.insertUrl || dm.dataSource.crudUrl || dm.dataSource.url,

data: $.param({

__RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value,

//sends the params when insert a record

params: { dataId: 1 },

value: data,

table: tableName,

action: 'insert'

}),

contentType: 'application/x-www-form-urlencoded; charset=UTF-8'

}

},

update: function (dm, keyField, value, tableName) {

return {

// type: "POST",

url: dm.dataSource.updateUrl || dm.dataSource.crudUrl || dm.dataSource.url,

data: $.param({

__RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value,

value: value,

table: tableName,

action: 'insert'

}),

contentType: 'application/x-www-form-urlencoded; charset=UTF-8'

};

},

remove(dm, keyField, value, tableName) {

return {

type: 'DELETE',

url: dm.dataSource.removeUrl || dm.dataSource.crudUrl || dm.dataSource.url,

data: JSON.stringify({

//sends the params when delete a record

params: { dataId: 1 },

key: value,

keyColumn: keyField,

table: tableName,

action: 'remove'

})

};

}

});

function load(args) {

this.dataSource.adaptor = customAdaptor;

this.dataSource.dataSource.headers = [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }];

}

</script>

Please get back to us, if you need any further assistance.

UG: https://ej2.syncfusion.com/javascript/documentation/grid/data-binding/?no-cache=1#custom-adaptor

If still facing the issue, please share your issue with video demonstration.

Regards,

Thiyagu S

Mark · Answer

This isn't what I needed, but we figured out a work around.  Thank you.

Thiyagu Subramani · Answer

Hi Mark, 

Sorry for inconvenienced  and we are happy to hear that you resolved your requirement. 

Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S.