HELP: how to enable or disable editing row based on condition?

[airdanMember]

can anybody help me how to enable or disable editing row based on condition?
here is my code:

var initGrid = function (){

//create input unit———————————————–
//prepare data
var dataunit = new Array();
var unit =[“Unit 1″,”Unit 2″,”Unit 3″];
var k = 0;
for (var i = 0; i < unit.length; i++) {
var row = {};
row["no_unit"] = unit[k];
unit[i] = row;
k++;
}
var unitsource =
{
localdata: unit,
datatype: "array"
};
var unitdataAdapter = new $.jqx.dataAdapter(unitsource);

//create combobox unit
$("#jqxunit").jqxComboBox(
{
source: unitdataAdapter,
theme: theme,
width: 100,
height: 23,
promptText: "Pilih Unit…",
displayMember: 'no_unit',
valueMember: 'no_unit',
autoDropDownHeight: true,
animationType: 'fade'}); // end create combobox unit

// create export buttons——————————————-
$("#export").jqxButton({ theme: theme,disabled: true });

// create refresh buttons——————————————-
$("#refresh").jqxButton({ theme: theme,disabled: true });

//create inputdate————————————————-
$('#jqxcalendar').jqxDateTimeInput({ formatString: "dd-MMMM-yyyy",
disabled: false,
width: '150px',
height: '25px',
theme: theme }); // end create inputdate
/* //create combobox unit event
$("#jqxunit").bind('select', function(event)
{
//get unit selected
var no_unit = event.args.item.value;
$('#jqxcalendar').jqxDateTimeInput({ disabled: false});
$("#refresh").jqxButton({disabled: false });// end create combobox unit event
});//end combobox unit event
*/

//create calendar event———————————————
$("#jqxcalendar").bind('valuechanged', function(event)
{
//enabling refreh button
$("#export").jqxButton({disabled: false });
$("#refresh").jqxButton({disabled: false });
// get date selected
var date = $('#jqxcalendar').jqxDateTimeInput('getDate');
// change date format
var Tgl_Data=$.jqx.dataFormat.formatdate(date,'yyyy-MM-dd');

var no_unit = '’;

var id_dinas = ”;
//alert(id_dinas);

// prepare the data
var data = {};
var theme = ‘classic’;
var source =
{
datatype: “json”,
datafields: [
{ name: ‘Id_Data’},
{ name: ‘Tgl_Data’},
{ name: ‘Jam_Data’},
{ name: ‘Tek_Header’},
{ name: ‘Flow_Uap’},
{ name: ‘Tek_Uap’},
{ name:’Temp_Uap’},
{ name:’Dp_Strainer_Lh’},
{ name:’Dp_Strainer_Rh’},
{ name:’Putaran_Turbin’},
{ name:’Lsp_Target’},
{ name:’Load_limit’},
{ name:’Cv1_Open’},
{ name:’Cv2_Open’},
{ name:’Temp_Uap_Lh’},
{ name:’Temp_Uap_Rh’},
{ name:’Tek_Sudu’},
{ name:’Tek_Chest’},
{ name:’Tek_Uap_Seal_Turbin’},
{ name:’Temp_Exhaust’},
{ name:’Flow_Uap_Ejector’},
{ name:’Tek_Uap_Ejector_1a’},
{ name:’Tek_Uap_Ejector_1b’},
{ name:’Tek_Uap_Ejector_2a’},
{ name:’Tek_Uap_Ejector_2b’},
{ name:’Tek_Uap_Ejector_3a’},
{ name:’Tek_Uap_Ejector_3b’},
{ name:’Tek_Scrubber’},
{ name:’Vent_Valve’}
],
type: ‘POST’,
data: {
Tgl_Data:Tgl_Data,
no_unit:no_unit
},

//init for update row——————————————-
id: ‘Id_Data’,
url: ‘src.sistem_uap.php’,
updaterow: function (rowid, rowdata) {
// synchronize with the server – send update command
var data = “update=true&no_unit=”+no_unit;
data = data + “&Jam_Data=” + rowdata.Jam_Data;
data = data + “&Tek_Header=” + rowdata.Tek_Header;
data = data + “&Flow_Uap=” + rowdata.Flow_Uap;
data = data + “&Tek_Uap=” + rowdata.Tek_Uap;
data = data + “&Temp_Uap=” + rowdata.Temp_Uap;
data = data + “&Dp_Strainer_Lh=” + rowdata.Dp_Strainer_Lh;
data = data + “&Dp_Strainer_Rh=” + rowdata.Dp_Strainer_Rh;
data = data + “&Putaran_Turbin=” + rowdata.Putaran_Turbin;
data = data + “&Lsp_Target=” + rowdata.Lsp_Target;
data = data + “&Load_limit=” + rowdata.Load_limit;
data = data + “&Cv1_Open=” + rowdata.Cv1_Open;
data = data + “&Cv2_Open=” + rowdata.Cv2_Open;
data = data + “&Temp_Uap_Lh=” + rowdata.Temp_Uap_Lh;
data = data + “&Temp_Uap_Rh=” + rowdata.Temp_Uap_Rh;
data = data + “&Tek_Sudu=” + rowdata.Tek_Sudu;
data = data + “&Tek_Chest=” + rowdata.Tek_Chest;
data = data + “&Tek_Uap_Seal_Turbin=” + rowdata.Tek_Uap_Seal_Turbin;
data = data + “&Temp_Exhaust=” + rowdata.Temp_Exhaust;
data = data + “&Flow_Uap_Ejector=” + rowdata.Flow_Uap_Ejector;
data = data + “&Tek_Uap_Ejector_1a=” + rowdata.Tek_Uap_Ejector_1a;
data = data + “&Tek_Uap_Ejector_1b=” + rowdata.Tek_Uap_Ejector_1b;
data = data + “&Tek_Uap_Ejector_2a=” + rowdata.Tek_Uap_Ejector_2a;
data = data + “&Tek_Uap_Ejector_2b=” + rowdata.Tek_Uap_Ejector_2b;
data = data + “&Tek_Uap_Ejector_3a=” + rowdata.Tek_Uap_Ejector_3a;
data = data + “&Tek_Uap_Ejector_3b=” + rowdata.Tek_Uap_Ejector_3b;
data = data + “&Tek_Scrubber=” + rowdata.Tek_Scrubber;
data = data + “&Vent_Valve=” + rowdata.Vent_Valve;
data = data + “&Id_Data=” + rowdata.Id_Data;
$.ajax({
dataType: ‘json’,
url: ‘src.sistem_uap.php’,
data: data,
success: function (data, status, xhr) {
// update command is executed.
}
});
}
};

//ENABLE or DISBALE editing row—————————————————–
if (id_dinas == ‘pagi’)
{
var cellbeginedit = function (row, datafield, columntype, value) {
if (row == 0 || row == 1 || row == 2 || row == 3 || row == 4 || row == 5 || row == 6)
return false;
}

//render disable row
var cellsrenderer = function (row, column, value, defaultHtml) {
if (row == 0 || row == 1 || row == 2 || row == 3 || row == 4 || row == 5 || row == 6) {
var element = $(defaultHtml);
element.css(‘color’, ‘#0000cc’);
element.css(‘background-color’, ‘#f1f1f5’);
return element[0].outerHTML;
}
return defaultHtml;
}
}
else
if (id_dinas == ‘siang’)
{
var cellbeginedit = function (row, datafield, columntype, value) {
if (row == 7 || row == 8 || row == 9 || row == 10 || row == 11 || row == 12 || row == 13)
return false;
}

//render disable row
var cellsrenderer = function (row, column, value, defaultHtml) {
if (row == 7 || row == 8 || row == 9 || row == 10 || row == 11 || row == 12 || row == 13) {
var element = $(defaultHtml);
element.css(‘color’, ‘#0000cc’);
element.css(‘background-color’, ‘#f1f1f5’);
return element[0].outerHTML;
}
return defaultHtml;
}
}

var dataAdapter = new $.jqx.dataAdapter(source);

// draw grid
$(“#jqxgrid”).jqxGrid(
{
width: 1050,
height: 450,
source: dataAdapter,
theme: theme,
editable: true,
showheader: true,//show hide heade column
showgroupsheader: true,
autoshowcolumnsmenubutton: true,
enabletooltips: true,
groupsheaderheight: 100,
columnsmenu: true,
showtoolbar: true,//show hide toolbar
showstatusbar: true,
selectionmode: ‘multiplecellsadvanced’,//selectionmode: ‘singlecell’,
autoheight: false,
toolbarheight: 40,
filterable: false, //enabling filtering

//render toolbar
rendertoolbar: function (toolbar) {
var container = $(“

“);
var label = $(“

Auto Save

“);
var btnrefresh = $(“

Refresh Data

“);
var btnxls = $(“

Export to Excel

“);
var btnpdf = $(“

Export to Pdf

“);
var btnautosave = $(“

“);
var btnsave = $(“

Save

“);

//draw toolbar
toolbar.append(container);
container.append(label);
container.append(btnautosave);
container.append(btnrefresh);
container.append(btnxls);
container.append(btnpdf);

btnrefresh.jqxButton({ theme: theme, width: 110, height: 20 });
btnxls.jqxButton({ theme: theme, width: 130, height: 20 });
btnpdf.jqxButton({ theme: theme, width: 120, height: 20 });
btnautosave.jqxSwitchButton({ theme: theme, width: 80, height: 27, checked: true });

// autosave on/off——————————————
btnautosave.on(‘unchecked’, function (event) {
container.append(btnsave);
btnsave.jqxButton({ theme: theme, width: 80, height: 20 });
$(“#jqxgrid”).jqxGrid({ autosavestate: false});
});
btnautosave.on(‘checked’, function (event) {
btnsave.jqxButton(‘destroy’);
$(“#jqxgrid”).jqxGrid({ autosavestate: true});
});

// refresh grid event——————————————
btnrefresh.click(function (event) {
source: dataAdapter;
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘cells’);
});

// export excel event——————————————
btnxls.click(function (event) {
var date = $(‘#jqxcalendar’).jqxDateTimeInput(‘getDate’);
// change date format
var Tgl_Data=$.jqx.dataFormat.formatdate(date,’yyyy-MM-dd’);
var data = “?id_date=”+Tgl_Data+”&id_unit=”+no_unit;
window.open(“inc.log.exp.xls.php”+data,”_blank”);
});

// export pdf event——————————————
btnpdf.click(function (event) {
var date = $(‘#jqxcalendar’).jqxDateTimeInput(‘getDate’);
// change date format
var Tgl_Data=$.jqx.dataFormat.formatdate(date,’yyyy-MM-dd’);
var data = “?id_date=”+Tgl_Data+”&id_unit=”+no_unit;
window.open(“inc.log.exp.pdf.php”+data,”_blank”);
});

},// end render toolbar

//draw data
columns: [
{ text: ‘TanggalData’,datafield: ‘Tgl_Data’,
editable: false, pinned: true, align: ‘center’,cellsalign: ‘center’,width: 90},
{ text: ‘JamData’, datafield: ‘Jam_Data’,
editable: false, pinned: true, align: ‘center’,cellsalign: ‘center’, width: 70},
{ text: ‘Tek.Header’, datafield: ‘Tek_Header’,align:’center’,width: 60,
cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer},
{ text: ‘Flow Uap’, datafield: ‘Flow_Uap’, width: 60,align: ‘center’,
cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer},
{ text: ‘Tek. Uap’, datafield: ‘Tek_Uap’, width: 60,align: ‘center’,
cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer},
{ text: ‘Temp.Uap’, datafield: ‘Temp_Uap’, width: 60,align: ‘center’,
cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer},
{ text: ‘DP Strainer LH’, datafield: ‘Dp_Strainer_Lh’, width: 60,align: ‘center’,
cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer},
{ text: ‘DP Strainer RH’, datafield: ‘Dp_Strainer_Rh’, width: 60,align: ‘center’,
cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer},
{ text: ‘Putaran Turbin’, datafield: ‘Putaran_Turbin’, width: 60,align: ‘center’,
cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer},
{ text: ‘LSPTarget’, datafield: ‘Lsp_Target’, width: 60,align: ‘center’,
cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer},
{ text: ‘LoadLimit’, datafield: ‘Load_limit’, width: 60,align: ‘center’,
cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer},
{ text: ‘posisi CV 1 ‘, datafield: ‘Cv1_Open’, width: 60,align: ‘center’,
cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer},
{ text: ‘posisi CV 2’, datafield: ‘Cv2_Open’, width: 60,align: ‘center’,
cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer},
{ text: ‘Temp. Uap LH’, datafield: ‘Temp_Uap_Lh’, width: 60,align: ‘center’,
cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer},
{ text: ‘Temp. Uap RH’, datafield: ‘Temp_Uap_Rh’, width: 60,align: ‘center’,
cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer},
{ text: ‘Tek. Sudu’, datafield: ‘Tek_Sudu’, width: 60,align: ‘center’,
cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer},
{ text: ‘Tek. Chest’, datafield: ‘Tek_Chest’, width: 60,align: ‘center’,
cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer},
{ text: ‘Steam Seal’, datafield: ‘Tek_Uap_Seal_Turbin’, width: 60,align: ‘center’,
cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer},
{ text: ‘Temp. Exhaust’, datafield: ‘Temp_Exhaust’, width: 60,align: ‘center’,
cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer},
{ text: ‘Flow Uap Ejector’, datafield: ‘Flow_Uap_Ejector’, width: 60,align: ‘center’,
cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer},
{ text: ‘Tek. Ejector 1a’, datafield: ‘Tek_Uap_Ejector_1a’, width: 60,align: ‘center’,
cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer},
{ text: ‘Tek. Ejector 1b’, datafield: ‘Tek_Uap_Ejector_1b’, width: 60,align: ‘center’,
cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer},
{ text: ‘Tek. Ejector 2a’, datafield: ‘Tek_Uap_Ejector_2a’, width: 60,align: ‘center’,
cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer},
{ text: ‘Tek. Ejector 2b’, datafield: ‘Tek_Uap_Ejector_2b’, width: 60,align: ‘center’,
cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer},
{ text: ‘Tek. Ejector 3a’, datafield: ‘Tek_Uap_Ejector_3a’, width: 60,align: ‘center’,
cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer},
{ text: ‘Tek. Ejector 3b’, datafield: ‘Tek_Uap_Ejector_3b’, width: 60,align: ‘center’,
cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer},
{ text: ‘Tek. Scrubber’, datafield: ‘Tek_Scrubber’, width: 60,align: ‘center’,
cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer},
{ text: ‘Vent Valve’, datafield: ‘Vent_Valve’, width: 60,align: ‘center’,
cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer}
]//end draw column
});

// init refresh buttons
$(“#refresh”).jqxButton({ theme: theme });
$(“#refresh”).click(function () {
source: dataAdapter;
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘cells’);
});
// focus jqxgrid.
$(“#jqxgrid”).jqxGrid(‘focus’);
})//end datetiem input change event
}

thanks for help………

[supportParticipant]

Hi airdan,

Please take a look at the following example at: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/disableeditingofrows.htm If you have any further question please do not hesitate to contact us.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts