Related
So i run my web-aaplication and get this error Length of colNames <> colModel! The problem is that the number of colName & colModel is the same, so I really dont know whats the point.
usersandorganization.js
var initActiveUsers = function(){
if (!activeUsersGrid) {
activeUsersGrid = $('#activeUsers').jqGrid({
datatype: function(){
commonHelper.callAjaxMethod('users.htm', 'loadActiveUsers',
{}, function (result) {
activeUsersGrid.clearGridData(true);
activeUsersGrid[0].addJSONData(result);
}, true, true, false, function(){return true;})
},
colNames: [
messages['usersandorganizations.loginname'],
messages['usersandorganizations.name'],
messages['usersandorganizations.logindate'],
messages['usersandorganizations.session'],
messages['usersandorganizations.description']
],
colModel: [
{name: 'loginName', index: 'loginName', formatter: commonHelper.notNullFormatter},
{name: 'name', index: 'name', formatter: commonHelper.notNullFormatter},
{name: 'loginDate', index: 'loginDate', formatter: commonHelper.notNullFormatter},
{name: 'sessionId', index: 'sessionId', formatter: commonHelper.notNullFormatter},
{name: 'description', index: 'description', formatter: commonHelper.notNullFormatter},
],
height: "100%",
jsonReader: {repeatitems: false, id: "loginName"},
sortname: 'loginDate',
viewrecords: true,
sortorder: "asc",
rowNum: -1
});
updateActiveUsers();
} else {
activeUsersGrid.trigger("reloadGrid");
}
};
I'm not sure if this causes the problem, but you have not needed comma after the last element in colModel
{name: 'description', index: 'description', formatter: commonHelper.notNullFormatter}, <==
Are you sure that messages array has values which are not separated with commas - this may cause the problem
You can
create a temporary element before calling the grid and do
var names_check = [
messages['usersandorganizations.loginname'],
messages['usersandorganizations.name'],
messages['usersandorganizations.logindate'],
messages['usersandorganizations.session'],
messages['usersandorganizations.description']
]
console.log(names_check.length);
You will see the dimension of the names array.
If you do not want to perform this you can simple replace the colNames array and use the label property in colModel - i.e Remove the colNames and do:
colModel: [
{label: messages['usersandorganizations.loginname'], name: 'loginName', index: 'loginName', formatter: commonHelper.notNullFormatter},
...
],
Hope you have got the point.
I think if there is a problem with the messages array (as mentioted above) you will have a error too when using the last recommendation.
I am working with jqGrid 4.4.4V, I have two grids let say grid1 and grid2,
when i add multiple Rows to grid2 from grid1 the row id's are updating like 0,1,...But when i am adding single row each the id is starting from '0'.So, if i do multiple times like this, all rowIds will be like '0' only. Is there any way to make rowIds as always unique.
Note: the data is not adding manually to the grid, is getting from a sql. Below are the code for two grids.
grid1:
$("#grid1").jqGrid({
url: "/.......some handler path",
datatype: 'json',
contentType: "application/json; charset-utf-8",
mtype: 'Get',
colNames: ['Val ID', 'Val Name', 'Description', 'Dept', 'Vam', 'Venue', 'Venue', 'Solution', 'Method', 'Type'],
colModel: [
{ name: 'valId', index: 'valId', hidden: true },
{ name: 'valName', index: 'valName', formatter: Namefield, width: 400 },
{ name: 'description', index: 'description', width: 300 },
{ name: 'dep', index: 'dep', width: 300 },
{ name: 'vam', index: 'vam', width: 300 },
{ name: 'venueId', index: 'venueId', hidden: true },
{ name: 'venue', index: 'venue', width: 250 },
{ name: 'solution', index: 'solution', width: 400 },
{ name: 'Method', index: 'Method', width: 300 },
{ name: 'Type', index: 'Type', hidden: true },
],
pager: $('#pager'),
key:true,
rowNum: 10,
rowList: [10, 20, 30, 40],
height: '100%',
viewrecords: true,
caption: '',
sortname: 'Val Name',
sortorder: "desc",
emptyrecords: 'No records to display',
autowidth: true,
multiselect: true,
multiselectWidth: 50,
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "0"
}
});
grid2:
$("#grid2").jqGrid({
datatype: 'function',
mtype: 'Post',
colNames: ['Val ID', 'Val Name', 'Description', 'Dept', 'Vam', 'Venue ID', 'Venue', 'Solution', 'Method', 'Type'],
colModel: [
{ name: 'valId', index: 'valId', hidden: true },
{ name: 'valName', index: 'valName', formatter: Namefield, width: 400 },
{ name: 'description', index: 'description', width: 300 },
{ name: 'dep', index: 'dep', width: 300 },
{ name: 'vam', index: 'vam', width: 300 },
{ name: 'venueId', index: 'venueId', hidden: true },
{ name: 'venue', index: 'venue', width: 250 },
{ name: 'solution', index: 'solution', width: 400 },
{ name: 'Method', index: 'Method', width: 300 },
{ name: 'Type', index: 'Type', hidden: true },
{ name: 'delete', index: 'delete', width: 50, formatter: Close, align: 'center' }
],
pager: $('#pager'),
key:true,
rowNum: 10,
rowList: [10, 20, 30, 40],
height: '100%',
viewrecords: true,
caption: '',
sortname: 'Val Name',
sortorder: "desc",
emptyrecords: 'No records to display',
autowidth: true,
multiselect: true,
multiselectWidth: 50,
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "0"
}
});
Where I am using the add and del methods as below,
var selRowIdsArray = [];
var myGrid = $("#grid1");
var SelectedGrid = $('#grid2');
//get no of selected rows count
var selRowIds = $("#grid1").jqGrid('getGridParam', 'selarrrow');
if (selRowIds.length !== 0) {
if (selRowIdsArray.length == 0) {
selRowIdsArray.push.apply(selRowIdsArray, selRowIds);
}
for (i = 0; i < selRowIdsArray.length; i++) {
selRowIdsInt = selRowIdsArray[i];
var selRowId = myGrid.getRowData(selRowIdsInt);
SelectedGrid.jqGrid('addRowData', i, selRowId);
myGrid.jqGrid('delRowData', selRowIdsInt);
}
}
Thanks for your help.
The solution of you problem could be very easy if you good understand what is rowid and what do idPrefix option of jqGrid. It's the value of id attribute of <tr> elements of the corresponding HTML <table>, which displays the data. The internal implementation of jqGrid is so, that jqGrid must assign id to every row of the grid, which corresponds the data. It's strictly recommended to include an unique id property in every item. It could be native id from the database or some composite key like id1 + "_" + id2, which hold full information about the native ids from the backend. I recommend you to examine the picture from the article.
You can place the id under any other name as id. If you use repeatitems: false option of jsonReader, and valId is the name of the unique id, then you should use
jsonReader: { id: "valId" }
to inform jqGrid about that. Including of any other properties of jsonReader with default values, like you did, is unneeded. Any other properties of jsonReader, like Id (instead of id), will be just ignored. After that you can remove unneeded hidden column valId from the grid, which saves the same information in <td> elements of the grid.
I recommend to add one more option, if you use editing of the grid
prmNames: { id: "valId" }
The option renames the id property, send on editing of the grid, to valId. Thus you can just continue to use valId instead of id.
Next you should understand that rowid can be not the same as id (valId). If you have more as one grid on the page then it will be strictly recommended to use idPrefix. It's supported even on the retro version 4.4.4 of jqGrid (4 years old version), which you use. For example, you can use idPrefix: "g1_" in the first grid and idPrefix: "g2_" in the second grid. It prevents id dupplicates on HTML page, because the rowid will be build from id (valId) with the corresponding id prefix, different for both grids.
After understanding the meaning of rowid, it should be clear how one can move selected rows from one grid to another. The statement
var selRowIds = $("#grid1").jqGrid('getGridParam', 'selarrrow');
var idPrefix1 = $("#grid1").jqGrid('getGridParam', 'idPrefix');
gives you the rowids (with the idPrefix of the first grid) of selected rows and the prefix idPrefix1, which you use. You can use $.jgrid.stripPref to strip the prefix, getRowData to get the row data and to use addRowData to add the same data to the second grid, using the same id
var i, id, item;
for (i = 0; i < selRowIds.length; i++) {
id = $.jgrid.stripPref(idPrefix1, selRowIds[i]);
item = myGrid.jqGrid("getRowData", id);
SelectedGrid.jqGrid("addRowData", id, item);
}
addRowData will automatically use idPrefix of the second grid.
Finally, I'd recommend you to drop using of retro version 4.4.4 which is dead since many years. I'd suggest you to use the current version (4.13.6) of free jqGrid - it's the fork of jqGrid, which I develop starting with the end of 2014. If you installed 4.4.4 because of usage of wrong NuGet package jQuery.jqGrid, then you should uninstall the package and install another one: free-jqGrid.
I am trying to add button instead of View column but i tried with formatter still button is not loading but records are coming for the rest of the columns.
Below is my code:
$(function () {
$("#grid").jqGrid({
url: "/Location/LocationsList1",
datatype: 'json',
mtype: 'Get',
colNames: ['Id', 'Country Name', 'State Name', 'City Name', 'Location Name','View'],
colModel: [
{ key: true, hidden: true, name: 'Id', index: 'Id', editable: true },
{ key: false, name: 'CountryName', index: 'CountryName', editable: true },
{ key: false, name: 'StateName', index: 'StateName', editable: true },
{ key: false, name: 'CityName', index: 'CityName', editable: true },
{ key: false, name: 'Name', index: 'Name', editable: true },
{ key: false, name: 'View', index: 'View', editable: true,formatter:ViewButton }],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [10, 20, 30, 40],
height: '100%',
viewrecords: true,
caption: 'Location',
emptyrecords: 'No records to display',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "0"
},
});
});
function ViewButton(cellvalue, options, rowObject) {
var rowid= options.rowid;
var button = "<button class=\"viewLineItem\" id="+ rowid+">View Line Item</button>"
$('#' + rowid).die();
$('#' + rowid).live('click', function (rowId) {
alert("hi");
alert(rowId);
});
};
I am new to JqGrid and don't know how it works. Any guidance/Help will be appreciated.
The code has some problems
options has no rowid property, but it has rowId property. You should change options.rowid to options.rowId
The formatter will be called during building the HTML fragment of the grid body. No element of the grid exist at the moment on the page. Thus you can't use $('#' + rowid).live('click', ...); at the moment.
The formatter have to return the HTML fragment, which will be placed in the corresponding cell (inside of <td>). One misses return button; at the end of the formatter.
There are exist well-known name conversion in JavaScript. One should use functions, which starts with capital letter only if you define the constructor of the new class. You see that ViewButton will be displayed in the other color to distinguish classes from other function. You should rename ViewButton to viewButton to hold the standard name conversion of JavaScript.
It's better don't specify index property in colModel. In the same way one should not include the properties with the defaul value, like key: false. To specify common property for many columns you can use cmTemplate property.
One should reduce the number of global functions, because the functions will be considerd as the properties of window object.
instead of usage hidden column with name: 'Id' one can specify id: 'Id' property of jsonReader. You use repeatitems: false property, which means that every item of input data has properties CountryName, StateName and so on. The default name of the id property (the rowid - the id of <tr> elements) is id, but you use Id instead. The property id: "Id" informs jqGrid about it.
The modified code could be about the following
$(function () {
function viewButton(cellvalue, options, rowObject) {
return "<button class=\"viewLineItem\" id=\"" +
options.rowId + "\">View Line Item</button>";
}
$("#grid").jqGrid({
url: "/Location/LocationsList1",
datatype: 'json',
colNames: ['Id', 'Country Name', 'State Name', 'City Name', 'Location Name','View'],
colModel: [
{ name: 'Id', key: true, hidden: true },
{ name: 'CountryName' },
{ name: 'StateName' },
{ name: 'CityName' },
{ name: 'Name' },
{ name: 'View', editable: false, formatter: viewButton }
],
cmTemplate: { editable: true },
pager: '#pager',
rowNum: 10,
rowList: [10, 20, 30, 40],
height: '100%',
viewrecords: true,
caption: 'Location',
emptyrecords: 'No records to display',
jsonReader: { repeatitems: false, id: "Id" }
});
$("#jqGridA").click(function (e) {
var $td = $(e.target).closest("tr.jqgrow>td"),
rowid = $td.parent().attr("id"),
p = $(this).jqGrid("getGridParam");
if ($td.length > 0 && p.colModel[$td[0].cellIndex].name === "View") {
alert(rowid);
}
});
});
The last part of the above code ($("#jqGridA").click(...);) register one click handler for the whole grid. If the user clicks on any cell then the event handler will be called because of event bubbling. The e.target gives as the DOM element, which was clicked (for example the <button>). By using closest we can go to the outer <td> element, which parent is the row (<tr>) of the grid. The .attr("id") of the row is the rowid. Such binding works more effectively as binding click handler to every button inside of the grid.
By the way jqGrid has already one click event handler. One can use beforeSelectRow callback, because it will be called inside of the click handler. One should only don't forget to return true from the beforeSelectRow callback to inform jqGrid that you allow to select the row. The callback beforeSelectRow has already rowid as the first parameter, which simplify our code a little. The final code will be
$(function () {
function viewButton(cellvalue, options, rowObject) {
return "<button class=\"viewLineItem\" id=\"" +
options.rowId + "\">View Line Item</button>";
}
$("#grid").jqGrid({
url: "/Location/LocationsList1",
datatype: 'json',
colNames: ['Id', 'Country Name', 'State Name', 'City Name', 'Location Name','View'],
colModel: [
{ name: 'CountryName' },
{ name: 'StateName' },
{ name: 'CityName' },
{ name: 'Name' },
{ name: 'View', editable: false, formatter: viewButton }
],
cmTemplate: { editable: true },
pager: '#pager',
rowNum: 10,
rowList: [10, 20, 30, 40],
height: '100%',
viewrecords: true,
caption: 'Location',
emptyrecords: 'No records to display',
jsonReader: { repeatitems: false, id: "Id" },
beforeSelectRow: function (rowid, e) {
var $td = $(e.target).closest("tr.jqgrow>td"),
p = $(this).jqGrid("getGridParam");
if ($td.length > 0 && p.colModel[$td[0].cellIndex].name === "View") {
alert(rowid);
}
}
});
});
I have two JavaScript files called FileA.js and FileB.js.
FileA.js contains the following function:
Reports.CompanySearch.InitGrid = function (viewModel, emptyInit) {
var columns = [
{
name: 'CompanyName',
width: 150,
hidedlg: true,
search: false,
formatter: function namelinkformatter(cellvalue, options, rowObject) {
return "<a href='#/CompanyDetails/" + rowObject["Id"] + "'>" + rowObject["CompanyName"] + "</a>";
}
},
{ name: 'Address', width: 300, search: false },
{ name: 'City', width: 100, search: false },
{ name: 'State', width: 50, search: false },
{ name: 'Zip', width: 80, search: false, hidden: true },
{ name: 'Country', width: 120, search: false, hidden: true }
];
var grid = $("#searchGrid");
grid.jqGrid({
jsonReader: { root: 'rows', total: 'total', page: 'page', records: 'records', cell: 'cell', id: 'Id', repeatitems: false },
colNames: [
'Company Name',
'Address',
'City',
'State',
'Zip',
'Country'],
colModel: columns,
postData: Reports.CompanySearch.CreateSearchModel(viewModel),
url: '/CompanyReport/Search',
datatype: emptyInit ? 'local' : 'json',
mtype: 'POST',
viewrecords: true,
loadonce: false,
shrinkToFit: false,
multiselect: false,
autowidth: true,
altRows: true,
height: 'auto'
});};
Basically the function creates on a page (Page A) a data grid which contains a list of companies loaded from a table in SQL Server.
The Company name has a link, allowing users to click it and get the company detail on a different page (Page B).
Page A is controlled by JavaScript FileA.js and Page B by JavaScript FileB.js.
I would like to pass the Company ZipCode to a function in FileB.js everytime the user clicks on the company name.
The solutions I ran into on the web were not helpful so far and any help would be very appreciated. Thanks!
Since you're using Knockout, have a look at Components.
The way to coordinate the two is to have a parent file that knows about both of them and mediates between them. The parent would create the data objects and pass them to both of the component objects.
When i use jqgrid inside a Jquery simplemodal it works but i cannot see the column header names(colNames). Rows are displayed ok but no column header ,do you know what can cause this ?
$("#basic").modal({
onShow: function () {
$("#grid").jqGrid({
data: items,
datatype: 'local',
width: 650,
height: 'auto',
rowNum: 25,
colNames: [
' '
, ' '
, 'Column 3'
, 'Column 4'
],
colModel: [
{
name: 'IsSelected', index: 'IsSelected', width: 30,
align: 'center',
formatter: 'checkbox',
editoptions: { value: '1:0' },
formatoptions: { disabled: false }
}
, { name: 'col1', index: 'col1'}
, { name: 'col2', index: 'col2'}
, { name: 'col3', index: 'col3', width: 200}
, { name: 'col4', index: 'col4'}
]
});