I have jqgrid in which there are 4 col.
{ name: "SaudId", index: "SaudId", editable: false, hidden:true},
{ name: "SaudName", index: "SaudName", editable: true },
{ name: "IsActive", index: "IsActive", editable: true },
{ name: "DoFlip", index: "DoFlip", editable: true },
I want if "IsActive" is false then DoFlip will not show or disabled.How Can i do this?
{
name: "DoFlip",
align: "center",
sortable: false,
title: false,
fixed: true,
search: false,
formatter: function (cellValue, options, rowObject) {
debugger;
var markup = "<a title=\"%ToolTip%\" href=%Href%;>%Text%</a>";
var replacements = {
"%Text%": "<i class='fa fa-pencil'></i>",
//
};
markup = markup.replace(/%\w+%/g, function (all) {
return replacements[all];
});
return markup;
}
}
You use custom formatter for the column DoFlip. The custom formatter contains options and rowObject parameters. If you would use free jqGrid 4.9.2 instead of retro version jqGrid 4.4.4 the you could just use rowData property of options parameter to access parsed input data for the row. So you can use options.rowData.IsActive to access the value from IsActive of the input data. The format of options.rowData is not depends from the usage of loadonce: true option and it's the same for all values of datatype parameter of jqGrid ("xml", "json", "local" or other).
If you have to use jqGrid 4.4.4 then you will have to use rowObject which contains the input data in the same format which you use. It could be some specifics depend ob whether you use XML, JSON or object (datatype: "local") of input data and whether input data are in format repeatitems: true or not. Additionally it's important whether you use loadonce: true or not. In any way rowObject.IsActive or something like rowObject[2] or rowObject.IsActive !== undefined ? rowObject.IsActive : rowObject[2] could provide you the required data.
In this case you need to take ID of row.
var ids = $mygrid.jqGrid('getDataIDs');
then in loop you need to
for (var i = 0; i < ids.length; i++) {
var rowID = i + 1;
var mycolumValue = $("#" + rowID + "_myfirstcolumn").attr("disabled", "disabled");
}
//here myfirstcolumn is first column in jqgrid
Related
Grid contains after save row event "jqGridInlineAfterSaveRow" which works if you edit or add row.
//--Bind events...
console.log('Bind events...');
$("#jqGrid").bind("jqGridInlineAfterSaveRow",function (e, rowid, jqXhrOrBool, postData, options) {
console.log('EVENT:jqGridInlineAfterSaveRow');
var item = $(this).jqGrid('getLocalRow', rowid);
console.log(item);
console.log('BEFORE:');
saveObject(item);
console.log('AFTER:');
});
What is name of the event for delete row? i need to bind my JS function for delete row.
UPDATE 1
I am trying following option now, but no luck...
}).jqGrid("navGrid", "#jqGridPager", {edit: false, add: false, del: false, refresh: false, view: false,search: false,
delfunc: function (rowids) {
console.log(rowids);
}
})
UPDATE 2
I think issue is with delete buttons at row level not at footer
see the screenshot [enter image description here][1]
data:rdata,
colModel: [
{
label: "",
name: "",
width: 70,
formatter: "actions",
formatoptions: {
keys: true,
editOptions: {},
addOptions: {},
delOptions: { delfunc : function (id){
console.log(">>>>>>>>>>>>>>>>1");
}}
}
},
UPDATE 3
Based on Oleg's input, i have changed the code as following:
$("#jqGrid").bind("jqGridAfterDelRow",function (e, rowid, jqXhrOrBool, postData, options) {
console.log('EVENT:jqGridAfterDelRow');
console.log(rowid);
var item = $(this).jqGrid('delRowData ', rowid);
console.log(item);
console.log('BEFORE:');
console.log('AFTER:');
});
But now, i am not getting deleted row object??? Actually, i need to get the some of the fields from deleted row e.g. ID. and above binding function will in turn call server side ajax function.
UPDATE 4
Thanks to Oleg for supporting beyond... Here is the code i have mashup from one of the answers from him.
colModel: [
{
label: "",
name: "",
width: 70,
formatter: "actions",
formatoptions: {
keys: true,
editbutton : true,
delbutton : true,
editOptions: {},
addOptions: {},
delOptions: {
onclickSubmit: function(options, rowid) {
console.log("delOptions::onclickSubmit");
var grid_id = $.jgrid.jqID(grid[0].id);
var grid_p = grid[0].p;
var newPage = grid[0].p.page;
var rowdata = grid.getLocalRow(rowid);
// DELETE GRID LOCAL ROW
grid.delRowData(rowid);
$.jgrid.hideModal("#delmod"+grid_id,
{gb:"#gbox_"+grid_id,jqm:options.jqModal,onClose:options.onClose});
if (grid_p.lastpage > 1) {// on the multipage grid reload the grid
if (grid_p.reccount === 0 && newPage === grid_p.lastpage) {
// if after deliting there are no rows on the current page
// which is the last page of the grid
newPage--; // go to the previous page
}
// reload grid to make the row from the next page visable.
grid.trigger("reloadGrid", [{page:newPage}]);
}
return true;
},
processing:true
}
}
},
You can use "jqGridAddEditAfterComplete" event, which will be triggered after deleting of rows by delGridRow, or you can use "jqGridAfterDelRow" alternatively, because delGridRow calls delRowData internally and jqGridAfterDelRow will be triggered by delRowData.
For deleting row use below code snippet:
$('#gridId').jqGrid('delRowData',rowid);
$("#yourGridTable").jqGrid(
"navGrid",
"#yourGridTablePager",
{
del: true
},
{},
{},
{
// This event is fired when delete button is pressed in pager
//
beforeSubmit:function(){
console.log("After delete button of pager is clicked");
}
}
);
I have added columns dynamically in kendo ui grid. I have added a hidden column in the grid as below.
($(document.getElementById(divId))).kendoGrid({
columns: columns,
dataSource: masterData,
pageable: {
pageSize: 10
},
groupable: true,
sortable: true,
filterable: true,
scrollable: true,
change: onChange,
selectable: "multiple",
dataBound: RowDataBound,
schema: {
model: {
id: "MasterColID"
}
}
}).data("kendoGrid");
On the click of the row , I am trying to get the value of the MasterColID in the onchange event as below
var dataItem = this.dataSource.view()[this.select().closest("tr").index()];
var masterID = dataItem["ID"]; //or dataItem.MasterColID;
But everytime I check the varaible masterID i undefined.
Please anyone can help me on this.
Thanks
Try this:
var gridData = $('.k-grid').data("kendoGrid");
var selectedRowData = gridData.dataItem($('.k-grid').find("tr.k-state-selected"));
alert(selectedRowData.MasterColID);
Telerik Grid column:
columns.Bound(model => model.Id).ClientTemplate("#= cba.GridActions(data) #").Title("").Width(100).Sortable(false);
JS function:
function GridActions(data) {
var MasterColID = data.MasterColID;
...
}
I'm trying to create a column in jqgrid (latest version) and that column is a one to many relationship.
For example, in view mode it should show State.Name, then in edit mode is should show a drop down with State.Name and taking the value of State.Id as id.
The information coming from the backend is:
{
"page":1,
"records":4,
"rows":[{"Id":5,"Description":"City 1","State":{"Id":1,"Name":"California"}}],
"total":1.0
}
I tried this without success:
{
name: 'State.Name', index: 'State.Id', editable: true, sortable: true, hidden: false, align: 'left', formatter: 'select',
edittype: "select", editrules: { required: true },
editoptions: {
dataUrl: $("#ServiceUrlState").val(),
buildSelect: function (data) {
var response = jQuery.parseJSON(data);
var html = '<select>';
if (response && response.length) {
for (var i = 0, l = response.length; i < l ; i++) {
var item = response[i];
html += '<option value="' + item.Id + '">' + item.Nombre + '</option>';
}
}
return html + "</select>";
}
}
}
The value of ServiceUrlState is set in Index.cshtml (which ends in an html page) and is assigned with:
#Html.Hidden("ServiceUrlState", Url.RouteUrl("ApiControllerOnly", new { httproute = "", controller = "States" }))
I'm using ASPNET MVC 4, but the question should not be related to that.
I need something like...when in view mode...use the "State.Name" field to show, but when posting send the Id (and use StateId as the name on the posting)
What's wrong?
Thanks in advance! Guillermo
I have a jqrid and I use inline editing. The problem is one of the cells is read only and it's value is based on another:
{ name: 'ActivityId', index: 'ActivityId', width: 200, align:'left', editable: true, editrules: { required : true }, edittype:"select", editoptions: { dataUrl: '/Invoice/GetActivities/' + organisationId,
buildSelect: function(data) {
var response = jQuery.parseJSON(data);
var s = '<select>';
if(response.rows && response.rows.length) {
for (var i = 0, l=response.rows.length; i<l ; i++) {
var ri = response.rows[i];
s += '<option value="'+ri.Id+'">'+ri.Descriptor+'</option>';
}
}
return s + "</select>";
return s;
}
} },
{ name: 'PriceGroup', index: 'PriceGroup', align: 'center', editable: false },
So the value in the PriceGroup column is calculated based on what the ActivityId is.
So it's fine when loading the grid but after performing an edit this cell is having the value related to the previous ActivityId.
The right value is restored after I manually click refresh.
I'm wondering how to get this value to come through correctly after an edit. Should I somehow refresh the grid after edits in the code? How would yo do this? Is there a better way?
If you look at the jqGrid wiki, you can pass the editRow function a success function:
jQuery("#grid_id").jqGrid('editRow',rowid, keys, oneditfunc, succesfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);
From here, you can get and set row items by passing a function like:
function(rowid){
var dataColumn = 2;
var dataValue = $('#grid_id').getCell(rowId,dataColumn);
var resultColumn = 3;
$('#grid_id').setCell(rowId,resultColumn,dataValue*5+1);
}
I am trying to manipulate the data fetched from the server in loadComplete event:
loadComplete:function(data){
alert("load completed");
$.each (data,function(index,item){
item["customerSite"]=item.header.customerName + ' / '+item.header.siteDescription;
});
}
The newly added field is meant to be used as a column to be grouped by
However I keep getting this column as undefined as grouping header. I tried adding another field to the JSON object as a regular column, the column ends up to be empty. As I was debugging I noticed the grid is constructed before my breakpoint in the loadComplete stops.
My understanding of the loadComplete event is that it will fired as soon as the ajax call has success return. After I introduced gridComplete event to my code, I noticed gridComplete is invoked before loadComplete is invoked.
gridComplete: function(){
alert("grid completed");
}
What I am doing wrong? I am using
jsonReader: {
repeatitems: false,
id: "id",
root: function (obj) { return obj; },
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.length; }
}
to process returned JSON string, but cannot imagine that might be the problem. Please help!
Base on Oleg's comment, I will use custom formatter. However the result of the fomratter does not work for the group header, which this column is for. If I set groupColumnShow : [true], the column's data is all correct, but still leaves the group header to be 'undefined'
Following grid's definition:
buildGrid:function(){
var myGrid = jQuery("#serverList");
myGrid.jqGrid({
datatype: "json",
url: "http://localhost:8080/cm.server/api/v1/agent/config.json?",
jsonReader: {
repeatitems: false,
id: "id",
root: function (obj) { return obj; },
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.length; }
},
colNames:['Customer/Site','Customer','Site','Server ID', 'Server Name', ,'id'],
colModel :[
{name:'customerSite',editable:false, formatter:that.buildCustmerSite},
{name:'header.customerName',hidden:true,editable:true,editrules:{edithidden:true},editoptions:{readonly:true,size:25},formoptions:{ rowpos:1,elmprefix:" "}},
{name:'header.siteDescription', hidden:true, editable:true,editrules:{edithidden:true},editoptions:{readonly:true,size:25},formoptions:{ rowpos:2,elmprefix:" "}},
{name:'header.serverID', index:'header.serverID', width:200, align:'right',editable:true,editoptions:{readonly:true,size:25},formoptions:{ rowpos:3,elmprefix:" "}},
{name:'header.serverName', index:'header.serverName', width:150, align:'right',editable:true,editoptions:{readonly:true,size:25},formoptions:{ rowpos:4,elmprefix:" "}},
{name:'id', hidden:true},
],
height: '500',
width: '100%',
rowNum:20,
autowidth: true,
pager: '#pager',
sortname: 'serverID',
sortorder: "desc",
viewrecords: true,
caption: 'Server Configurations',
editurl:"/cm.server/api/v1/agent/config-grid",
autoencode:true,
ignoreCase:true,
grouping:true,
groupingView:{
groupField:['customerSite'],
groupColumnShow : [false]
}
});
jQuery("#serverList").jqGrid('navGrid','#pager',
{edit:true,add:false,del:false,search:true},
{height:450,reloadAfterSubmit:true, recreateForm:true,jqModal:true, closeOnEscape:true, closeAfterEdit:true, bottominfo:"Fields marked with (*) are required"}, // edit options
{} // search options
);
jQuery("#serverList").jqGrid('filterToolbar');
return true;
}
and following is the custom formatter:
buildCustmerSite:function(cellvalue,options,rowObject){
var customerSite =rowObject.header['customerName'] + '/'+ rowObject.header["siteDescription"];
return customerSite;
}
There are small differences between loadComplate and gridComplete, but both will be called after the grid contain is prepared. So you can't just modify the data of the loadComplate to change the grid contain.
You don't posted the definition of your grid, so it is difficult to answer on your question exactly. What you probably want can be solved with respect of the custom formatter which you can define for the customerSite column. Inside of formatter function you have access to rowObject where you find source information to construct the customerName + ' / ' + siteDescription.