I am using editable datagrid (https://www.jeasyui.com/extension/edatagrid.php) in which I have used double click editable and it is working fine but I want an 'edit' button for each row when user clicks on 'edit' then 'save|cancel' should be displayed after click on 'save' validation should happen before saving that particular row. row Validation and row is getting updated fine when I edit it using double click but I want to update row with 'edit' button for each row now. I have googled for solution but did not find any useful solution.
<table id="my_table_edit_id" title='Editable DataGrid' singleSelect="true" style="width:100%; height:500px;">
<thead>
<tr>
<th field="channel_name" width="100" editor="{type:'textbox'}">Channel Name</th>
<th field="channel_category_id" width="100" editor="{type:'combobox',
options:{
valueField:'value',
textField:'text',
data:categorySelectOptions,
loadFilter:loadFilter,
formatter:formatter,
onLoadSuccess:onLoadSuccess
}
}" formatter="getCategoryText" >Category</th>
<th field="is_pay_channel" width="100" align="right" editor="{
type:'combobox',
options:{
valueField:'is_pay_channel',
textField:'channel_type',
data:payorFTA,
required:true,
onLoadSuccess:function(rows){
for(var i=0; i<rows.length; i++){
var row = rows[i];
if (row.selected){
$(this).combobox('setValue', row.is_pay_channel);
return;
}
}
}
}
}" formatter='getChannelType'>Pay/FTA</th>
<th field="price" width="100" align="right" editor="numberbox">Price</th>
<th field="carriage_price" width="150" editor="numberbox">Carriage Fee</th>
<th field="is_hd" width="150" formatter='getHDChannelStatus' editor="{type:'checkbox',
options:{on: '1',
off: '0'
}}">Is HD Channel</th>
<th field="is_mandatory" width="150" formatter='getMandatoryStatus' editor="{type:'checkbox',
options:{on: '1',
off: '0'
}}">Is Mandatory</th>
<th field="language_id" width="150" editor="{
type:'combobox',
options:{
valueField:'language_id',
textField:'language',
data:languages,
onLoadSuccess:function(rows){
for(var i=0; i<rows.length; i++){
var row = rows[i];
if (row.selected){
$(this).combobox('setValue', row.language_id);
return;
}
}
}
}
}" formatter="getLanguageText">Language</th>
<th field="channel_number" width="150" editor="numberbox">Ch.Number</th>
<!--<th field='action' title='Action' width="80" align='center' formatter='getActionItems'>Action</th>-->
</tr>
</thead>
</table>
javascript:
$(function(){
$('#my_table_edit_id').edatagrid({
idField:'itemid',
iconCls:'icon-edit',
url:'<?php echo base_url() ?>index.php/Controller_Name/method_for_list',
updateUrl: '<?php echo base_url() ?>index.php/Ajax/update_method',
onBeforeSave:function(index,row){
// All Validations goes here submit if everything fine
--------------------
},
onSuccess:function(index,row){
if(row.hasOwnProperty('msg') && row.msg!==''){
alertify.alert(row.msg);
}else{
alertify.alert('Record Updated successfully');
}
},
onError:function(index,row){
if(row.hasOwnProperty('msg') && row.msg!==''){
alertify.alert(row.msg);
}else{
alertify.alert('There is some problem.Please try again later');
}
}
});
});
What I have tried is: I have searched and found one solution here but it is not working. In the solution they said that we can achieve it using normal 'datagrid' so I have changed to normal datagrid and added 'action' item 'edit' then 'update | cancel'. When I click on 'edit' then displaying 'update | cancel' buttons when I edit and click on 'update' button then the update is not working data is not getting updated. I am confused of 'updateUrl' not mentioned/using in the normal datagrid then how and where the row is getting submitted to?
HTML:
<table id="table_id" title='Editable DataGrid' style="width:100%; height:500px;">
<thead>
<tr>
<th field="channel_name" width="100" editor="{type:'textbox'}">Channel Name</th>
<th field="channel_category_id" width="100" editor="{type:'combobox',
options:{
valueField:'value',
textField:'text',
data:categorySelectOptions,
loadFilter:loadFilter,
formatter:formatter,
onLoadSuccess:onLoadSuccess
}
}" formatter="getCategoryText" >Category</th>
<th field="is_pay_channel" width="100" align="right" editor="{
type:'combobox',
options:{
valueField:'is_pay_channel',
textField:'channel_type',
data:payorFTA,
required:true,
onLoadSuccess:function(rows){
for(var i=0; i<rows.length; i++){
var row = rows[i];
if (row.selected){
$(this).combobox('setValue', row.is_pay_channel);
return;
}
}
}
}
}" formatter='getChannelType'>Pay/FTA</th>
<th field="price" width="100" align="right" editor="numberbox">Price</th>
<th field="carriage_price" width="150" editor="numberbox">Carriage Fee</th>
<th field="is_hd" width="150" formatter='getHDChannelStatus' editor="{type:'checkbox',
options:{on: '1',
off: '0'
}}">Is HD Channel</th>
<th field="is_mandatory" width="150" formatter='getMandatoryStatus' editor="{type:'checkbox',
options:{on: '1',
off: '0'
}}">Is Mandatory</th>
<th field="language_id" width="150" editor="{
type:'combobox',
options:{
valueField:'language_id',
textField:'language',
data:languages,
onLoadSuccess:function(rows){
for(var i=0; i<rows.length; i++){
var row = rows[i];
if (row.selected){
$(this).combobox('setValue', row.language_id);
return;
}
}
}
}
}" formatter="getLanguageText">Language</th>
<th field="channel_number" width="150" editor="numberbox">Ch.Number</th>
<th field='action' title='Action' width="90" align='center' formatter='getActionItems'>Action</th>
</tr>
</thead>
</table>
javascript:
<script>
$(function(){
$('#table_id').datagrid({
idField:'itemid',
iconCls:'icon-edit',
url:'<?php echo base_url() ?>index.php/Controller_Name/method_for_list',
updateUrl: '<?php echo base_url() ?>index.php/Ajax/update_action_new',
onEndEdit:function(index,row){
// validation goes here, submit if everything works fine
var variable_1 = "19.00";
var variable_2 = "1";
if(parseFloat(variable_1) && variable_2==1){
var message = "Note: M.R.P of channel is greater than Rs."+variable_1+", it should be created as some_type Package.";
alertify.confirm( message, function (e) {
if(e){
var onBeforeSave = opts.onBeforeSave;
opts.onBeforeSave = function(){};
dg.datagrid('updateRow'); // Issue is coming with this line
opts.onBeforeSave = onBeforeSave;
// ajaxfunction(channel_id);
}else{
$('#table_id').datagrid('cancelEdit');
}
});
return false;
}
},
/*updateRow:function(index,row){
index: index,
row.input_field1 = $(ed.target).combobox('getText');
row.input_field2 = $(ed.target).combobox('getText');
------------------------
},*/
onBeforeEdit:function(index,row){
row.editing = true;
$(this).datagrid('refreshRow', index);
},
onAfterEdit:function(index,row){
row.editing = false;
$(this).datagrid('refreshRow', index);
},
onCancelEdit:function(index,row){
row.editing = false;
$(this).datagrid('refreshRow', index);
},
onSuccess:function(index,row){
// console.log("onSuccess");
// console.log('row',row);
// console.log('index',index);
if(row.hasOwnProperty('msg') && row.msg!==''){
alertify.alert(row.msg);
}else{
alertify.alert('Record Updated successfully');
}
// console.log(row.msg);
},
onError:function(index,row){
// console.log("onError");
// console.log('row',row);
if(row.hasOwnProperty('msg') && row.msg!==''){
alertify.alert(row.msg);
}else{
alertify.alert('There is some problem.Please try again later');
}
}
});
});
function getActionItems(value,row,index){
// console.log('came to getActionItems',row);
if (row.editing){
var s = '<a href="javascript:void(0)" onclick="saverow(this)">Save</a> ';
var c = '<a href="javascript:void(0)" onclick="cancelrow(this)">Cancel</a>';
return s+c;
} else {
var e = '<a href="javascript:void(0)" onclick="editrow(this)">Edit</a> ';
// var d = '<a href="javascript:void(0)" onclick="deleterow(this)"><i class="fas fa-trash text-danger mr-1"></i></a>';
return e;
}
}
function getRowIndex(target){
var tr = $(target).closest('tr.datagrid-row');
return parseInt(tr.attr('datagrid-row-index'));
}
function editrow(target){
$('#table_id').datagrid('beginEdit', getRowIndex(target));
}
function saverow(target){
$('#table_id').datagrid('endEdit', getRowIndex(target));
}
function cancelrow(target){
$('#table_id').datagrid('cancelEdit', getRowIndex(target));
}
</script>
I am getting issue in the console as "jquery.easyui.min.js:11739 Uncaught TypeError: Cannot read property 'index' of undefined"
Any help, Please guide me in right direction. thanks.
