how to solve problem with jqxgrid edit cell validation

[deniferliyansahParticipant]

How to validate cell and update to database using this code,
maybe my statement incorrect to get value in cell jqxgrid,
help me to fix this problem
thanks before

$(document).ready(function() {
var data1 = {};
var theme = ‘office’;
var source1 =
{
datatype: “json”,
datafields: [
{ name: ‘kd_bahan’, type: ‘string’},
{ name: ‘nama_bahan’, type: ‘string’},
{ name: ‘kemasan’, type: ‘string’},
{ name: ‘tgl_masuk’, type: ‘number’},
{ name: ‘merek’, type: ‘string’},
{ name: ‘jumlah_stok’, type: ‘string’},
{ name: ‘jumlh_stokterpakai’, type: ‘string’},
{ name: ‘jumlah_totalstok’, type: ‘string’},
{ name: ‘jenis_bahan’, type: ‘string’}

],
cache: false,
id: ‘kd_bahan’,
url: ‘inc/tabel2.php’,
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
var data = “update=true&jumlah_stok=” + rowdata.jumlah;
data = data + “&kd_bahan=” + rowdata.kd_bahan + “&jenis_bahan=” +rowdata.jenis_bahan;
$.ajax({
dataType: ‘json’,
url: ‘inc/updatebahan.php’,
data: data,
success: function (data, status, xhr) {
// update command is executed.

commit(true);

},
error: function () {
// cancel changes.
commit(false);
}
});
},
filter: function()
{
// update the grid and send a request to the server.
$(“#jqxgrid2”).jqxGrid(‘updatebounddata’, ‘filter’);
},
root: ‘Rows’,
beforeprocessing: function(data1)
{
source1.totalrecords = data1[0].TotalRows;
}
};

var dataadapter1 = new $.jqx.dataAdapter(source1, {
loadError: function(xhr, status, error)
{
alert(“Kata kunci yang anda maksud tidak ditemukan!”);
}
}
);

var validation= function (cell, value,row) {
var Value = $(‘#jqxgrid2’).jqxGrid(‘getcellvalue’, cell.row, ‘jumlah_totalstok’);
var isi=Value.toString();
var data=value.toString();
if ( data>Value) {
$(“#jqxgrid2”).jqxGrid(‘showvalidationpopup’, cell.row, “jumlah”, “Invalid Value”);
}

return true;
$(“#jqxgrid2”).jqxGrid(‘hidevalidationpopups’);
}

// initialize jqxGrid
$(“#jqxgrid2”).jqxGrid(
{
width: ‘100%’,
source: dataadapter1,
theme:theme,
filterable: true,
autoheight: true,
pageable: true,
pagesize: 5,
pagesizeoptions: [‘5′, ’10’, ’30’],
virtualmode: true,
editable:true,
showfilterrow: true,
selectionmode: ‘none’,
rendergridrows: function()
{
return dataadapter1.records;
},
showtoolbar:true,
rendertoolbar: function (toolbar) {
var me = this;
var container = $(“<div style=’margin: 1px;’></div>”);
var span = $(“<div style=’float: right; margin-right: 1px;’><button class=’btn btn-sm btn-success’ href=’#tambah-surat’ role=’button’ onclick=’getbahan()’ data-toggle=’modal’ id=’tambahbahan’><i class=’fa fa-flask’></i> Tambahkan Data Bahan </button>”);
toolbar.append(container);
container.append(span);
$(“#tambahbahan”).attr(‘disabled’,’disabled’);
$(“#tambahbahan”).prop(‘disabled’,true);
},
columns: [

{ text: ”, datafield: ”, columntype: ‘checkbox’, width: ‘5%’, pinned:true, filterable:false },
{ text: ‘Kode Bahan’, editable: false, datafield: ‘kd_bahan’, width: ‘10%’, filterable:false },
{ text: ‘Nama Bahan’, editable: false, columntype: ‘dropdownlist’, datafield: ‘nama_bahan’, width: ‘30%’ },
{ text: ‘Jumlah Bahan’, datafield: ‘jumlah’, width: ‘30%’,editable:true,validation:validation},
{ text: ‘Jumlah Total Stok Bahan’, editable: false, datafield: ‘jumlah_totalstok’,columntype: ‘numberinput’,editable:false, width: ‘20%’},
{ text: ‘Kemasan’, editable: false, columntype: ‘dropdownlist’, datafield: ‘kemasan’, width: ‘10%’ },
{ text: ‘Merek’, editable: false, columntype: ‘numberinput’, datafield: ‘merek’, width: ‘10%’},
{ text: ‘Jenis Bahan’, editable: false, datafield: ‘jenis_bahan’, width: ‘30%’ }
]

});

// select or unselect rows when the checkbox is clicked.
$(“#jqxgrid2”).bind(‘cellendedit’, function (event) {
if (event.args.value) {
$(“#jqxgrid2”).jqxGrid(‘selectrow’, event.args.rowindex);

}
else {
$(“#jqxgrid2”).jqxGrid(‘unselectrow’, event.args.rowindex);

}
});
});

[deniferliyansahParticipant]

who understand with this,
please help me

[HristoParticipant]

Hello deniferliyansah,

I would like to share with You this example. Columns ‘Ship Date’, ‘Quantity’ and ‘Price’ have validation.

Please, look at the approach used in the example.

I hope my answer helps you

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[deniferliyansahParticipant]

yeah thanks for your reply Hristo,
i try this example,
and this is the update source :

`$(document).ready(function() {
var data1 = {};
var theme = ‘office’;
var source1 =
{
datatype: “json”,
datafields: [
{ name: ‘kd_bahan’, type: ‘string’},
{ name: ‘nama_bahan’, type: ‘string’},
{ name: ‘kemasan’, type: ‘string’},
{ name: ‘tgl_masuk’, type: ‘number’},
{ name: ‘merek’, type: ‘string’},
{ name: ‘jumlah_stok’, type: ‘string’},
{ name: ‘jumlh_stokterpakai’, type: ‘string’},
{ name: ‘jumlah_totalstok’, type: ‘string’},
{ name: ‘jenis_bahan’, type: ‘string’}

],
cache: false,
id: ‘kd_bahan’,
url: ‘inc/tabel2.php’,
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
var data = “update=true&jumlah_stok=” + rowdata.jumlah;
data = data + “&kd_bahan=” + rowdata.kd_bahan + “&jenis_bahan=” +rowdata.jenis_bahan;
$.ajax({
dataType: ‘json’,
url: ‘inc/updatebahan.php’,
data: data,
success: function (data, status, xhr) {
// update command is executed.
if (productNameUpdate == true) {
commit(true);
};

},
error: function () {
// cancel changes.
commit(false);
}
});
},
filter: function()
{
// update the grid and send a request to the server.
$(“#jqxgrid2”).jqxGrid(‘updatebounddata’, ‘filter’);
},
root: ‘Rows’,
beforeprocessing: function(data1)
{
source1.totalrecords = data1[0].TotalRows;
}
};

var dataadapter1 = new $.jqx.dataAdapter(source1, {
loadError: function(xhr, status, error)
{
alert(“Kata kunci yang anda maksud tidak ditemukan!”);
}
}
);

var validation= function (cell, value,row) {
var Value = $(‘#jqxgrid2’).jqxGrid(‘getcellvalue’, cell.row, ‘jumlah_totalstok’);
var isi=Value.toString();
alert(isi);
var data=value.toString();
if ( data>Value) {
return { result: false, message: “isi data dengan benar!!!” };

}
return true;
}

// initialize jqxGrid
$(“#jqxgrid2”).jqxGrid(
{
width: ‘100%’,
source: dataadapter1,
theme:theme,
filterable: true,
autoheight: true,
pageable: true,
pagesize: 5,
pagesizeoptions: [‘5′, ’10’, ’30’],
virtualmode: true,
editable:true,
showfilterrow: true,
selectionmode: ‘none’,
rendergridrows: function()
{
return dataadapter1.records;
},
showtoolbar:true,
rendertoolbar: function (toolbar) {
var me = this;
var container = $(“<div style=’margin: 1px;’></div>”);
var span = $(“<div style=’float: right; margin-right: 1px;’><button class=’btn btn-sm btn-success’ href=’#tambah-surat’ role=’button’ onclick=’getbahan()’ data-toggle=’modal’ id=’tambahbahan’><i class=’fa fa-flask’></i> Tambahkan Data Bahan </button>”);
toolbar.append(container);
container.append(span);
$(“#tambahbahan”).attr(‘disabled’,’disabled’);
$(“#tambahbahan”).prop(‘disabled’,true);
},
columns: [

{ text: ”, datafield: ”, columntype: ‘checkbox’, width: ‘5%’, pinned:true, filterable:false },
{ text: ‘Kode Bahan’, editable: false, datafield: ‘kd_bahan’, width: ‘10%’, filterable:false },
{ text: ‘Nama Bahan’, editable: false, columntype: ‘dropdownlist’, datafield: ‘nama_bahan’, width: ‘30%’ },
{ text: ‘Jumlah Bahan’, datafield: ‘jumlah’, width: ‘30%’,editable:true,validation:validation},
{ text: ‘Jumlah Total Stok Bahan’, editable: false, datafield: ‘jumlah_totalstok’,columntype: ‘numberinput’,editable:false, width: ‘20%’},
{ text: ‘Kemasan’, editable: false, columntype: ‘dropdownlist’, datafield: ‘kemasan’, width: ‘10%’ },
{ text: ‘Merek’, editable: false, columntype: ‘numberinput’, datafield: ‘merek’, width: ‘10%’},
{ text: ‘Jenis Bahan’, editable: false, datafield: ‘jenis_bahan’, width: ‘30%’ }
]

});

// select or unselect rows when the checkbox is clicked.
$(“#jqxgrid2”).bind(‘cellendedit’, function (event) {
if (event.args.value) {
$(“#jqxgrid2”).jqxGrid(‘selectrow’, event.args.rowindex);

}
else {
$(“#jqxgrid2”).jqxGrid(‘unselectrow’, event.args.rowindex);

}
});

});

if i try to input data with value < data, this error validation message always been show,
and if i try to use null data this error not show and work fine
help me friend

[HristoParticipant]

Hi deniferliyansah,
In this code:

var validation = function (cell, value, row) {
       var Value = $('#jqxgrid2').jqxGrid('getcellvalue', cell.row, 'jumlah_totalstok');
       var isi = Value.toString();
       alert(isi);
       var data = value.toString();
       if (data > Value) {
           return {
               result: false,
               message: "isi data dengan benar!!!"
           };

       }
       return true;
   }

Raised alert(isi); in the validation will be called each time you do this validation.
I also looked at whether proper verification in IF. In this case, comparing the two strings. (How would You want to compare. The length or alphabeta /or another type)
If You need feel free to ask again.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[deniferliyansahParticipant]

Thanks again, with your respone Hristo,
i find this problem now
and this is update the source:

var validation= function (cell, value,row) {
var Value = $(‘#jqxgrid2’).jqxGrid(‘getcellvalue’, cell.row, ‘jumlah_totalstok’);
var parse=parseInt(Value);
var parse1=parseInt(value);
if ( parse1 > parse) {
return { result: false, message: “Jumlah bahan yang digunakan lebih dari jumlah bahan tersedia!!!” };
}
else if (parse1 < 0){
return { result: false, message: “Jumlah bahan tidak boleh kurang dari 0!!!” };
}
return true;
}

alert(isi); in my code before,
i used it to get data or test the result data from value on jqxgrid column jumlah_stok
thank you so much with your respone Hristo
now i can feel free

[Author]

Posts