new to jqGrid. I'm displaying a grid, readonly so far, but now with a checkbox in one column. However, the checkbox is not produced with id or name attributes - which according to the documentation it will be. Any pre-requisites to get the id's? Ideally I'd like an id on teh checkbox that is like the prefix + rowid.
Code is:
jQuery("#grdProducts").jqGrid(
{
url: '<%: Url.Action( "GetPageByCode", "Products" ) %>',
datatype: "xml",
mtype: 'POST',
colNames: [ 'Code', 'Language', 'Type', 'Name', 'Price £', 'Web', 'Dimensions', 'Actions' ],
colModel:
[
{ name: 'code', index: 'ProductCode', width: 120, key: true },
{ name: 'language', index: 'Category1', width: 100 },
{ name: 'type', index: 'Category2', width: 140 },
{ name: 'name', index: 'Name', width: 240 },
{ name: 'price', index: 'PriceGross', width: 60, align: "right" },
{ name: 'web', width: 32, align: "center",
editable:true, edittype:'checkbox', editoptions: {value:"True:False" },
formatter: "checkbox", formatoptions: {disabled : false } },
{ name: 'dimensions', width: 120, sortable:false },
{ name: 'actions', width: 120, sortable:false }
],
height:660,
rowList:[ 20,50,100 ],
pager: '#pgrProducts',
sortname: 'ProductCode',
// speed improvement - as long as certain features not needed
gridview: true,
// shows the 'showing 1 - n of total' in the pager, ... and the text to display
viewrecords: true,
recordtext: "showing products {0} - {1} of {2}",
// alternate colour rows
altRows:true, altclass: 'gridAltRow',
// shows sort arrows in titles
viewsortcols: [ true ],
// the grid outer caption
caption: 'Products by product code',
// configurable page size
rowNum: <%: Model.PageSize %>,
// double click on a row goes to the edit row page
ondblClickRow: function( rowid )
{
document.location.href = '/Product/Edit/' + rowid;
}
}
);
} );
Why you need to have id attribute in the checkbox? If you need to get checkbox it will be very easy in your case because there are only one checkbox in the row, so you can use
$('#' + rowid + ' input:checkbox')
If you need to detect 'click' event for example to the checkbox you can find the corresponding code in the demo from the answer.
Related
I am using jqgrid with MVC and for now, I want change Row location when click on ^ to get one line up and inverse.
actually I want to set 'up' and 'down' signs to every row for change one level row locations
any body can help me?!
There are a lot of possible solution. One of them is to use custom formtter to define the buttons and then bind event on loadComplete to move the rows using the jquery. Below the code:
$("#jqGrid").jqGrid({
datatype: "local",
data: mydata,
height: 250,
width: 780,
colModel: [
{ label :'move', formatter : myformatter, width:95},
{ label: 'Inv No', name: 'id', width: 75, key:true },
{ label: 'Date', name: 'invdate', width: 90 },
{ label: 'Client', name: 'name', width: 100 },
{ label: 'Amount', name: 'amount', width: 80 },
{ label: 'Tax', name: 'tax', width: 80 },
{ label: 'Total', name: 'total', width: 80 },
{ label: 'Notes', name: 'note', width: 150 }
],
viewrecords: true, // show the current page, data rang and total records on the toolbar
caption: "Load jqGrid through Javascript Array",
loadComplete : function() {
$(".up,.down").on('click', function () {
var row = $(this).closest("tr.jqgrow");
if($(this).is('.up')){
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
});
}
});
function myformatter() {
return '<button class="up" >Up</button>' + '<button class="down">Down</button>';
}
Demo here
I'm using JqGrid with inline editing and i dont use navigation, pager or footer. I want to add empty row at the bottom to added. I mean empty row will be always there after editing an exsiting row, after adding new row.
I added row in loadComplete event, but i just adds empty row at beginning not anymore.
jQuery("#tableContents").jqGrid({
postData: { orderId: '139358' },
mtype: "POST",
url: "test.asmx/GetContents",
datatype: "json",
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
jsonReader: { repeatitems: true, root: "d.rows", page: "d.page", total: "d.total", records: "d.records" },
colNames: ['Master Content ID', 'Description Of Goods', 'No Of Items', 'Total Value for Customs', 'Weight', 'Track No'],
colModel: [
{
name: 'master_content_id', index: 'master_content_id', width: 60, hidden: true, editable: true, editrules: { edithidden: false }
},
{
name: 'content', index: 'content', width: 60, sorttype: "string", editable: true, edittype: "text",
editrules: {
required: true
}
},
{
name: 'piecesInt', index: 'piecesInt', width: 90, align: "right", sorttype: "int", editable: true,
editrules: {
number: true,
required: true
}
},
{
name: 'value', index: 'value', width: 100, align: "right", sorttype: "float", editable: true,
editrules: {
required: true
}
},
{
name: 'weight', index: 'weight', width: 80, align: "right", sorttype: "float", editable: true,
editrules: {
required: true
}
},
{
name: 'track_no', index: 'track_no', width: 80, align: "right", sorttype: "string", editable: true
},
],
rowNum: 10,
rowList: [10, 20, 30],
//pager: jQuery('#pager1'),
sortorder: "desc",
viewrecords: true,
regional: 'tr',
height : '100%',
caption: "Manipulating Array Data",
editurl: 'test.asmx/EditContent',
loadonce: true,
sortable: true,
//footerrow: true,
onSelectRow: function (rowid) {
var $self = $(this),
// savedRows array is not empty if some row is in inline editing mode
savedRows = $self.jqGrid("getGridParam", "savedRow");
if (savedRows.length > 0) {
$self.jqGrid("restoreRow", savedRows[0].id);
}
$self.jqGrid("editRow", rowid, {
keys: true,
extraparam: { orderId: '139358', staffId : '111' },
aftersavefunc: function (rowid) {
alert("Saved");
}
});
},
loadComplete: function () {
var $self = $(this)
$self.jqGrid('addRowData', undefined, {});
}
});
How can we do that?
You try to use jqGrid in the way which is opposite to the standard behavior. It's very bad idea. You will have to write a lot of code and have minimal difference to the standard way.
The main problem is: jqGrid hold data inside of the grid. You try to add an empty row inside of the data which is not loaded from the server, which is not in editing mode (like addRow do for example) and which is not saved on the server. So you try to use the grid in the way contradicting to jqGrid logic. It sounds simple, but it is really bad and the implementation will be complex.
I would recommend you to follow the standard way. You will have clean and simple code and the most of the users can use the grid intuitive. For example you can do add navigator toolbar where you add "+"/"Add" button with respect of inlineNav. The user will intuitively understand what need be done to add new row. The difference whether the user clicks on empty row at the bottom of the grid or if the user clicks on "Add new row" button, existing also at the bottom of the grid, is very small. After the click on the button the new row will be added and the user can insert the data. By press of Enter the row will be saved and by press on Esc the empty row will be removed. The code will be simple and it will do almost the same what you try to implement now.
Can you explain what are these colnames and colmodel in jqgrid ?
Where are getting used ? defining columns , then ...how these 2 colnames / colmodels are inter related and all ??
and can please point why sorting is not happening in my below code:
<script type="text/javascript">
$('#grid').jqGrid({
url: '#(Url.Action("LoadIssues","Home"))',
datatype: 'json',
colNames: ['Category', 'Description', 'Issue_Title', 'LOGGED_BY', 'Notes', 'Priority', 'Status'],
mtype: 'GET',
colModel: [
{ name: 'Category', width: 100 },
{ name: 'Description', width: 100 },
{ name: 'Issue_Title', width: 100 },
{ name: 'LOGGED_BY', width: 100 },
{ name: 'Notes', width: 100 },
{ name: 'Priority', width: 100 },
{ name: 'Status', width: 100 }
],
jsonReader: {
id: 'id',
repeatitems: false
},
rowNum: 10,
rowList: [5, 10, 20, 30],
gridview: true,
pager: '#gridpager',
sortname: 'Description',
sortorder: "desc",
viewrecords: true,
shrinkToFit: true,
width: $('#gridContainer').width(),
height: 200,
hidegrid: false,
gridComplete: function () {
$('#gridContainer').find('.ui-jqgrid-titlebar').hide();
}
})
In a nutshell, colNames defines the names of your jqGrid columns on the page, and colModel specifies options for each column (name in the dataset, width, etc).
The documentation has more information:
colModel Array which describes the parameters of the columns.This is the most important part of the grid. For a full description of all valid values see colModel API.
colNames
An array in which we place the names of the columns. This is the text that appears in the head of the grid (header layer). The names are separated with commas. Note that the number of elements in this array should be equal of the number elements in the colModel array.
I set icon of column in cells by formatter.
I want set icon by condition in cells.For example icon of column 'add' is 'ui-icon-icon1'
if value of column 'status' is "ok" then icon of column 'add' 'ui-icon-icon2' else
'ui-icon-icon1'
grid.jqGrid({
data: mydata,
datatype: 'local',
colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes', '', '', '', ''],
colModel: [
{ name: 'id', index: 'id', key: true, width: 70, sorttype: "int" },
{ name: 'invdate', index: 'invdate', width: 90, sorttype: "date" },
{ name: 'name', index: 'name', width: 100 },
{ name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float" },
{ name: 'tax', index: 'tax', width: 80, align: "right", sorttype: "float" },
{ name: 'total', index: 'total', width: 80, align: "right", sorttype: "float" },
{ name: 'note', index: 'note', width: 150, sortable: false },
{
name: 'add', width: 20, sortable: false, search: false,
formatter: function () {
return "<span class='ui-icon ui-icon-plus'></span>"
}
},
{
name: 'edit', width: 20, sortable: false, search: false,
formatter: function () {
return "<span class='ui-icon ui-icon-pencil'></span>"
}
},
{
name: 'del', width: 20, sortable: false, search: false,
formatter: function () {
return "<span class='ui-icon ui-icon-trash'></span>"
}
},
{
name: 'details', width: 20, sortable: false, search: false,
formatter: function () {
return "<span class='ui-icon ui-icon-document'></span>"
}
}
],
pager: '#pager',
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'id',
sortorder: 'desc',
viewrecords: true,
gridview: true,
height: '100%',
rownumbers: true,
Here is how I did something similar, and beware, you have to refer to the rowObect columns as index values, you cannot use name values as Rob Willis mention above as the rowObject will not contain that information (unless you are passing it down as extra information in your JSON, or localdata).
function FormatCell(cellval, opts, rowObject, action) {
var displayIcon = rowObject[IndexOfColumToCheck] == "CheckValue" ? true : false;
if (displayIcon)
return ....
//...format html to display the correct icon appended with the cell value
}//if (priceChange) {
else {
return ...
//...format html to display the correct icon appended with the cell value
}//else
As an example in the return you could return something like:
return '<img src="/images/icon_clock.jpg" class="CustomSearchResultIcons InGridIcon_Inactive" height="16px" width="16px" alt="Inactive User Icon" title="This user has not logged in recently" />' +
'<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only InGridIcon InGridIcon_Friend" title="You are freinds with this user">' +
'<span class="ui-button-icon-primary ui-icon ui-icon-star"></span>' +
'</button>' + '<span class="InGridUsername">' + cellval + '</span>';
The formatter method takes three parameters: formatter(cellvalue, options, rowObject). You should be able to retrieve the value of the status column from the rowObject parameter e.g. rowObject[statusColumnIndex].
Note: The grid definition in the question does not contain a definition of the 'status' column mentioned in the text above so I'm not sure what the 'status' column index is.
$("#addressList").jqGrid({
url: '/Storage/Shipping/GetCustomerAddresses?q=2&Customerid=' + $("#saveCustomerID").val(),
datatype: "Json",
jsonReader: {
root: "Data.rows",
page: "Data.page",
total: "Data.total",
records: "Data.records",
repeatitems: true,
userdata: "userdata",
cell: "cell"
},
colNames: ['', 'Line 1', 'Line 2', 'City', 'State'],
colModel: [
{ name: 'myradio', width: 30, fixed: true, align: 'center', resizable: false, sortable: false,
formatter: function (cellValue, option) {
return '<input type="radio" name="radio_' + option.gid + '" />';
}
},
{ name: 'Line1', index: 'Line1', width: 250 },
{ name: 'Line2', index: 'Line2', width: 250 },
{ name: 'City', index: 'City', width: 210 },
{ name: 'State', index: 'State', width: 75 }
],
page: 1,
rowNum: 50,
rowList: [20, 50, 100],
pager: '#pager',
viewrecords: true,
grouping: false,
caption: "Addresses",
mtype: "POST",
width: "100%",
height: "100%",
loadonce: true,
sortable: false,
beforeSelectRow: function (rowid, e) {
var radio = $(e.target).closest('tr').find('input[type="radio"]');
radio.attr('checked', 'checked');
$("#saveCustomerAddressID").val(rowid.toString());
return true; // allow row selection
},
loadComplete: function () {
var grid_ids = $("#addressList").jqGrid('getDataIDs');
for (var i = 0; i < grid_ids.length; i++) {
if ($("#saveCustomerAddressID").val() == grid_ids[i]) {
{
$("#addressList").jqGrid('setSelection', grid_ids[i], true);
}
}
}
}
//, postdata: { CustomerID: $("#saveCustomerID").val() }
});
The above code sets the selection correctly in loadcomplete. The $("#saveCustomerAddressID").val() is the rowid fro the JSON Data.
The radiobutton is set in the beforeSelectRow. I know the row number and grid column of of the radiobutton to be set, but how do you set the radiobutton?
if you have row number and grid column, then it shouldn't be difficult. get the id(css) of that column where you have your radio button(check developer tools for this). now lets say that radio button is in a column name "Demo"
so the id would look like something like this i suppose
var demo= $("'#'+rowid+'Demo'")//check developer tools for confirmation
demo.attr('checked', 'checked');
$("#saveCustomerAddressID").val(rowid.toString());//continue with you loadComplete code
and for set selection use setSelection method of jqgrid after this continue with your code of loadcomplete