Here I have a code to update a cell contet when pressing a button.
It works fine, but it doesn't set the flag, that indicates, that the cell has been changed.
It should look like this with the litle red triangle:
The code:
<a id="button" href="#">Click me</a>
<div id="grid"></div>
<script>
var dataSource, grid;
$(document).ready(function () {
dataSource = new kendo.data.DataSource({
data: [
{ category: "Beverages", name: "Chai", price: 18},
{ category: "Seafood", name: "Konbu", price: 6}
],
})
grid = $("#grid").kendoGrid({
dataSource: dataSource,
editable: true,
}).data("kendoGrid");
$('#button').click(function (e) {
var data = grid.dataItem("tr:eq(1)");
data.set('category', 'Merchandice');
});
});
</script>
Update:
Here is the update based on #tstancin: Kendo example.
Thank you for the answer - I had thought of it to.
I am wondering if it's possible to do the update in a more clean way with some binding through som MVVM perhaps?
Kind regards from Kenneth
If that's all you want then you should expand your button click code with the following:
$('#button').click(function (e) {
var data = grid.dataItem("tr:eq(1)");
data.set('category', 'Merchandice');
$("#grid tr:eq(1) td:eq(1)").addClass("k-dirty-cell");
$("#grid tr:eq(1) td:eq(0)").prepend("<span class='k-dirty'></span>");
});
But if you, for instance, manually change the value of name column from Chai to something else, and then click the click me button, the dirty marker in the name column will disappear.
You should use flags for every cell and set them before data.set(). Then, in the grid's dataBound event you should inspect every cell's value and assign the dirty marker if it's needed. For manual changes you should handle the save event and set flags there.
I wrote a script that makes it posible to use a call like this:
SetCellData(id, columnName, value);
So with an id, a columnName and a value, I can update a value in a grid and the flag will be set on the cell.
function SetCellData(id, columnName, value) {
var dataItem = grid.dataSource.get(id);
dataItem.set(columnName, value);
var columnIndex = GetColumnIndex(columnName);
if (columnIndex > -1) {
var cell = $('tr[data-uid*="' + dataItem.uid + '"] td:eq(' + columnIndex + ')')
if (!cell.hasClass("k-dirty-cell")){
cell.prepend("<span class='k-dirty'></span>");
cell.addClass("k-dirty-cell");
}
}
}
function GetColumnIndex(columnName) {
var columns = grid.columns;
for (var i = 0; i < columns.length; i++)
if (columns[i].field == columnName)
return i;
return -1;
};
I have the code here : example
my question refers to http://goo.gl/f0Boc
The code works fine for me, but now I want to enable/disable the "Edit-Button" when the value in a cell is "Yes" or "No".
In this example is written:
// you can use getCell or getRowData to examine the contain of
// the selected row to decide whether the row is editable or not
I need an explanation how I could change the code so that the code runs with jqGrid('getCell',rowid,'cellContent')?
What I need is if cellContent is "Yes" then disable "Edit-Button".
Thanks in advance for your efforts,
best regards
Stephan
<script type="text/javascript">
$(function(){
$("#list").jqGrid({
url:'example.php',
datatype: 'xml',
mtype: 'GET',
colNames:['User ID','Name', 'Firstname','CDS-ID','E-mail','Password', 'Registration
Date','Account Activated', 'Account Activation Date', 'Role'],
colModel :[
{name:'idUser_registration', index:'idUser_registration', width:55,
editable:true, editoptions{readonly:true},search:true},
...
{name:'account_activated', index:'account_activated', width:150, align:'right',
edittype:'checkbox',editoptions: { value:"Yes:No" }, editable:true,
search:true},
... ],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'idUser_registration',
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: 'My grid',
editurl: 'example2.php',
beforeSelectRow: function(rowid) {
var selRowId = $(this).getGridParam('selrow'),
celValue = $(this).getCell('getCell', selRowId, 'list_account_activated'),
tr = $("#"+rowid);
// you can use getCell or getRowData to examine the contain of
// the selected row to decide whether the row is editable or not
if (selRowId !== rowid && !tr.hasClass('not-editable-row')) {
// eneble the "Edit" button in the navigator
$("#edit_" + this.id).removeClass('ui-state-disabled');
$("#del_" + this.id).removeClass('ui-state-disabled');
}
else {
// unselect previous selected row
// disable the "Edit" and "Del" button in the navigator
$("#edit_" + this.id).addClass('ui-state-disabled');
$("#del_" + this.id).addClass('ui-state-disabled');
}
return true; // allow selection or unselection
},
loadComplete: function() {
// just one example how to mark some rows as non-editable is to add
// some class like 'not-editable-row' which we test in beforeSelectRow
$("tr.jqgrow:even",this).addClass('not-editable-row');
}
}).jqGrid('navGrid','#pager',
{}, //options
{closeAfterEdit:true,mtype:'GET',editCaption: "Activate
Account",height:400,reloadAfterSubmit:true },
{reloadAfterSubmit:false}, // del options
{} // search options
);
$("#edit_").click(function() {
var gr = jQuery("#list").jqGrid('getGridParam','selrow');
if( gr != null ) jQuery("#list").jqGrid('editGridRow',gr,{});
});
$("#del_").click(function(){
var gr = jQuery("#list").jqGrid('getGridParam','selrow');
if( gr != null ) jQuery("#list").jqGrid('delGridRow',gr,{mtype:'GET',reloadAfterSubmit:true});
});
});
</script>
I modified the referenced demo for you. The main part of the code is the following
onSelectRow: function (rowid) {
var thisId = $.jgrid.jqID(this.id),
isCompleted = $(this).jqGrid("getCell", rowid, "isCompleted");
// you can use getCell or getRowData to examine the contain of
// the selected row to decide whether the row is editable or not
if (isCompleted !== "Yes") {
// eneble the "Edit" button in the navigator
$("#edit_" + thisId).removeClass('ui-state-disabled');
$("#del_" + thisId).removeClass('ui-state-disabled');
} else {
// unselect previous selected row
// disable the "Edit" and "Del" button in the navigator
$("#edit_" + thisId).addClass('ui-state-disabled');
$("#del_" + thisId).addClass('ui-state-disabled');
}
}
You can see new demo here.
My problem is that i want to change the cell being editable or not in the edit form according to the content of the cell of the row that is selected to be edited.
I used Oleg's example to this link: JQGrid: Dynamically set a cell to uneditable based on content to figure out how to change the cell from editable to not editable but i cannot get the cell value in order to compare it and decide if i want to change the edit option of the cell.
UPDATED CODE:
var Setcelluneditable=function(form) {
return function (form) {
var id = jQuery(list).getGridParam('selrow');
var ret = jQuery(list).jqGrid('getRowData',id);
alert("Arrived="+ret.Arrived);
if (ret.Arrived=='Yes')
{alert("hello"+id);
jQuery(list).setCell(id,'Arrived','',{color:'red'}, editable:'0'});}
}
};
jQuery(list).jqGrid('navGrid',pager,{edit:true,add:true,del:true,search:false,view:true, reload:true},
{
width:colwidth,
height:"auto",
reloadAfterSubmit:true,
closeAfterEdit: true,
recreateForm: true,
ajaxEditOptions: {cache: false},
beforeInitData : Setcelluneditable("#editmod")
},
{
width:colwidth,
height:"auto",
reloadAfterSubmit:true,
closeAfterAdd: true,
recreateForm: true,
drag: false
},
{},
{},
{},
{});
This does not seem to work because i change the Grid that has already been constructed.
I think i found out the way to do that but it does not seem to me the best one can have:
onSelectRow: function(id){
var ret = jQuery(list).jqGrid('getRowData',id);
if (ret.Arrived=='Yes')
{
jQuery(list).setColProp('Arrived',{editable:false});}
else { jQuery(list).setColProp('Arrived',{editable:true});}}
I change the ColProp every time one Selects a Row.
selRowId = $(list).jqGrid ('getGridParam', 'selrow');
var cm = $(list).jqGrid('getGridParam', 'colModel');
for(x=0; x<cm.length; x++){
if(cm[x].name == 'ID'){
$('#' + selRowId + '_' + cm[x].name).attr('disabled', true);
}
}
code in onSelectRow event
This is the code for my Grid. But for some reason the edit, add, and search icons are not displaying in subgrid:
$(document).ready(function(){
var gridwidth = $('.tableContainer').width();
gridwidth = gridwidth-40;
var myGrid = jQuery("#list");
editSettings = {
recreateForm:true,
reloadAfterSubmit:false,
closeOnEscape:true,
closeAfterEdit:true,
width:"1250"
},
addSettings = {
recreateForm:true,
reloadAfterSubmit:false,
closeOnEscape:true,
closeAfterAdd:true
};
myGrid.jqGrid(
{
url:'projects.cfc?method=getProjects&returnformat=json&_cf_nodebug=true', //CFC that will return the projects
datatype: 'json', //We specify that the datatype we will be using will be JSON
complete: function(jsondata, stat) {
if (stat == "success") {
myGrid = jQuery("#list")[0];
myGrid.addJSONData(JSON.parse(jsondata.responseText).d);
} else {
alert('Error processing JSON');
}
},
colNames:[ .....],
colModel :[{ ...}], //it the operators available during search
pager: $('#pager'), //The div we have specified, tells jqGrid where to put the pager
rowNum: 150, //Number of records we want to show per page
rowList:[20,30,40,50,75,150], //Row List, to allow Initiative to select how many rows they want to see per page
sortorder: "asc", //Default sort order
sortname: "PROJECTS.PROJECTID", //Default sort column
viewrecords: true, //Shows the nice message on the pager
imgpath: '/images', //Image path for prev/next etc images
caption: 'Initiatives', //Grid Name
recordtext: "Record {0} - {1} of {2}",//Pager information to show
rownumbers: false,//Do not show row numbers
sortable: true,
width:'auto',
height:'auto', //I like auto, so there is no blank space between. Using a fixed height can mean either a scrollbar or a blank space before the pager
mtype:'POST',
toolbar:[true,"bottom"], //Shows the toolbar at the top. We will use it to display Initiative feedback
subGrid: true,
subGridRowExpanded: function(subgrid_id, row_id) {
// we pass two parameters
// subgrid_id is a id of the div tag created within a table
// the row_id is the id of the row
// If we want to pass additional parameters to the url we can use
// the method getRowData(row_id) - which returns associative array in type name-value
// here we can easy construct the following
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id+"_t";
pager_id = "p_" + subgrid_table_id;
jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' cellpadding='0' cellspacing='0' class='scroll'></table><div id=’" + pager_id + "’ class=’scroll’></div>");
jQuery("#"+subgrid_table_id).jqGrid({
url:"projects.cfc?method=getProjectMilestones&projectid="+row_id,
datatype: "json",
colNames:['SEQ','ID','MILESTONE','TREND','DUE DATE','STATUS','OWNERS','%','COMMENTS'], //Column Names
//The Column Model to define the data. Note you can make columns non sortable, specify width, alignment, etc.
colModel :[
{name:'SEQUENCENUM',index:'SEQUENCENUM',hidden:true},
{name:'PROJECTID',index:'PROJECTID', editable:false},
{name:'MILESTONE',index:'MILESTONE', width:150, sorttype:"text",align:"center",
editable:true,edittype:"text",
editrules:{required:true}},
{name:'TREND',index:'TREND', width:100, align:"center",sorttype:"text",
editable:true,edittype:"select",editoptions:{value:"Green:Green;Yellow:Yellow;Red:Red"},
editrules:{required:true}},
{name:'DUE_DATE',index:'DUE_DATE', width:150, editable:true,editoptions:{size:12,dataInit: function(el) {
$(el).datepicker({ dateFormat: 'mm-dd-yy'} );
},
defaultValue: function() {
var currentTime = new Date();
var month = parseInt(currentTime.getMonth() + 1);
month = month <= 9 ? "0" + month : month;
var day = currentTime.getDate();
day = day <= 9 ? "0" + day : day;
var year = currentTime.getFullYear();
return month + "-" + day + "-" + year ;
}
},align:"center",
editrules:{required:true}},
{name:'MILESTONE_STATUS',index:'MILESTONE_STATUS',
editable:true,edittype:"select",editoptions:{value:"In Progress:In Progress;Complete:Complete"},
editrules:{required:true}},
{name:'ASSIGNMENT',index:'ASSIGNMENT', width:125,align:"center",sorttype:"text",
editable:true,edittype:"text",
editrules:{required:true}},
{name:'PERCENT_COMP',index:'PERCENT_COMP', width:50, sorttype:"int",align:"center",
editable:true,edittype:"text",editrules:{number:true}},
{name:'COMMENTS',index:'COMMENTS', width:200,
editable:true,edittype:"textarea",editoptions:{rows:3, cols:30},
editrules:{required:true}}
],//searchoptions parameter is used to limit the operators available during search,
rowNum: 20, //Number of records we want to show per page
rowList:[20,30,40,50], //Row List, to allow Initiative to select how many rows they want to see per page
sortorder: "asc", //Default sort order
sortname: "SEQUENCENUM", //Default sort column
viewrecords: true, //Shows the nice message on the pager
imgpath: 'images/', //Image path for prev/next etc images
caption: 'Milestones', //Grid Name
recordtext: "Record {0} - {1} of {2}",//Pager information to show
rownumbers: false,//Do not show row numbers
sortable: true,
width:'auto',
height:'auto', //I like auto, so there is no blank space between. Using a fixed height can mean either a scrollbar or a blank space before the pager
mtype:'POST',
toolbar:[true,"bottom"], //Shows the toolbar at the top. We will use it to display Initiative feedback
shrinkToFit: true,
//The JSON reader. This defines what the JSON data returned from the CFC should look like
jsonReader: {
root: "ROWS", //our data
page: "PAGE", //current page
total: "TOTAL", //total pages
records:"RECORDS", //total records
userdata:"USERDATA",
cell: "", //Not Used
id: "0", //Will default to first column
subGrid: {
root : "ROWS",
repeatitems: true,
cell: "" //Not Used
}
},
editurl:'projects.cfc?method=addeditMilestone&projectid='+row_id, //The Add/Edit function call
pager:('#' + pager_id)
}).navGrid('#' + pager_id, {
search:false,//title set for hover over display
edit:true,edittitle:"Edit Milestone",width:200,
add:true,addtitle:"Add Milestone",width:200,
del:true,deltitle:"Delete Milestone"
},
// Edit Options. save key parameter will keybind the Enter key to submit.
{editCaption:"Edit Milestone",edittext:"Edit",closeOnEscape:true,closeAfterEdit:true,savekey: [true,13],errorTextFormat:commonError,width:"500"
,reloadAfterSubmit:true,bottominfo:"Fields marked with (*) are required",top:"60",left:"5",right:"5"},
{addCaption:"Add Milestone",closeOnEscape:true,closeAfterAdd:true,savekey: [true,13],errorTextFormat:commonError,width:"500"
,reloadAfterSubmit:true,bottominfo:"Fields marked with (*) are required",top:"60",left:"5",right:"5"},
//Add Options
{url:"projects.cfc?method=delMilestone",caption:"Delete Milestone",closeOnEscape:true,errorTextFormat:commonError,top:"60",left:"70",
reloadAfterSubmit:true} //Delete Options
)
},
shrinkToFit: true,
//The JSON reader. This defines what the JSON data returned from the CFC should look like
jsonReader: {
root: "ROWS", //our data
page: "PAGE", //current page
total: "TOTAL", //total pages
records:"RECORDS", //total records
userdata:"USERDATA",
cell: "", //Not Used
id: "0" //Will default to first
},
loadComplete: function() {
$('#cb').prev().remove();
if($("#list").getGridParam("RECORDS")==0){
$('#noResults').dialog("open");
} else {
var page = $('#list').getGridParam("PAGE");
var records = $('#list').getGridParam("RECORDS");
var recordsPP = $('#list').getGridParam("rowNum");
var x = records/recordsPP;
var returnArray = [];
if(x < page) {
iterLimit = records%recordsPP;
} else {
iterLimit = recordsPP;
}
for(var i=1; i<=iterLimit; i++) {
$('#'+i).children('td:first').next().addClass('link').css("cursor","pointer").css("color","blue").css("text-decoration","underline");
var emitid = $('#'+i).children ('td:first').next().text();
//window.alert(emitid);
$('#'+i).children('td:first').next().click(function() {
emitid = $(this).text();
//window.alert(emitid + ":" + page + ":" + records + ":" + recordsPP + ":" + x);
var link = 'viewInitiative.cfm?projectid='+emitid
window.open(link,'_blank');
});
//returnArray = orderList.find(ord);
var truefalse = typeof returnArray;
if(truefalse != 'boolean') {
$('#list').setSelection(i);
}
}
}
},
loadError:function(xhr, st, err) {
alert('loaderror on quote request grid - ' + st)
},
editurl:"projects.cfc?method=addeditProject", //The Add/Edit function call
ondblClickRow: function(rowid, ri, ci) {
var p = myGrid[0].p;
if (p.selrow !== rowid) {
// prevent the row from be unselected on double-click
// the implementation is for "multiselect:false" which we use,
// but one can easy modify the code for "multiselect:true"
myGrid.jqGrid('setSelection', rowid);
}
myGrid.jqGrid('editGridRow', rowid, editSettings);
}
}).navGrid('#pager',
{
search:true,searchtitle:"Search",//title set for hover over display
edit:true,edittitle:"Edit Initiative",width:1000,
add:true,addtitle:"Add Initiative",width:1000,
del:true,deltitle:"Delete Initiative"
},
// Edit Options. save key parameter will keybind the Enter key to submit.
{editCaption:"Edit Initiative",edittext:"Edit",closeOnEscape:true,closeAfterEdit:true,savekey: [true,13],errorTextFormat:commonError,width:"1250"
,reloadAfterSubmit:true,bottominfo:"Fields marked with (*) are required",top:"60",left:"5",right:"5"},
{addCaption:"Add Initiative",closeOnEscape:true,closeAfterAdd:true,savekey: [true,13],errorTextFormat:commonError,width:"1250"
,reloadAfterSubmit:true,bottominfo:"Fields marked with (*) are required",top:"60",left:"5",right:"5"},
//Add Options
{url:"projects.cfc?method=delProject",caption:"Delete Initiative",closeOnEscape:true,errorTextFormat:commonError,top:"60",left:"70",
reloadAfterSubmit:true}, //Delete Options
//Search Options. multipleSearch parameter lets it know we are going to use the new advanced search feature
{errorTextFormat:commonError,Find:"Search",closeOnEscape:true,caption:"Search Initiatives",multipleSearch:true,closeAfterSearch:true}
).navButtonAdd('#pager',{
caption:"Export to Excel",
buttonicon:"images/sizzlejs_32x32.png",
onClickButton: function(){
exportExcel();
},
position:"last"
});
function exportExcel()
{
var mya=new Array();
mya=$("#list").getDataIDs(); // Get All IDs
var data=$("#list").getRowData(mya[0]); // Get First row to get the labels
var colNames=new Array();
var ii=0;
for (var i in data){colNames[ii++]=i;} // capture col names
var html="";
for (var k=0;k<colNames.length;k++)
{
if(colNames[k] == "PROJECTID") {
html=html+"EMIT_ID"+"\t";
} else if (colNames[k] == "PROJECT_TITLE") {
html=html+"INITIATIVE_TITLE"+"\t";
} else if (colNames[k] == "PROJECT_TYPE") {
html=html+"SUB-CATEGORY"+"\t";
} else if (colNames[k] == "PROJECT_TYPEID") {
html=html+"SUB_CAT_ID"+"\t";
} else if (colNames[k] == "SUB_TEAM") {
html=html+"SUB_TEAM_MEMBERS"+"\t";
} else if (colNames[k] == "OVERRIDE") {
html=html+"OVERRIDE%_COMP"+"\t";
} else if (colNames[k] == "EM_EXECUTION_TOP_TEN") {
html=html+"EM_EXECUTION_PAIN_POINT"+"\t";
} else {
html=html+colNames[k]+"\t"; // output each Column as tab delimited
}
}
html=html+"\n";
for(i=0;i<mya.length;i++)
{
data=$("#list").getRowData(mya[i]); // get each row
for(j=0;j<colNames.length;j++)
{
html=html+data[colNames[j]]+"\t"; // output each column as tab delimited
}
html=html+"\n"; // output each row with end of line
}
html=html+"\n"; // end of line at the end
document.forms[0].csvBuffer.value=html;
document.forms[0].method='POST';
document.forms[0].action='http://bfops01.edc.cingular.net/excel/csvExport.php'; // send it to server which will open this contents in excel file
document.forms[0].target='_blank';
document.forms[0].submit();
}
//Function will be called when add/edit encounters an error. The returned message is what will be shown to Initiative
function commonError(data){
return "Error Occured during Operation. Please try again";
}
});
You should verify your code in the http://www.jslint.com/. It has many syntax errors. For example, you forget to declare variables iterLimit and j, you should replace ';' after var myGrid = jQuery("#list") to ',' and many other small problems. I recommend you additionally to use integer values for width parameter in many places of the code like jqGrid use ifself.
You main problem seems to me exist because the <div> for the subgrid will be either not created or has no or wrong id element. The code
jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id+
"' cellpadding='0' cellspacing='0' class='scroll'></table><div id=’" +
pager_id + "’ class=’scroll’></div>");
contain special character ’ instead of '. It should be replaced to
jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id+
"'></table><div id='" + pager_id + "'></div>");
You use very very old syntax for HTML elements and use retro parameters like imgpath which are deprecated since version 3.5 of jqGrid.