Rectangle 27 2

The option sorttype will be used by jqGrid only during local sorting. If you use datatype: "json" without loadonce: true then jqGrid just desplays one page of data sorted on the server side. If the user clicks on new page button or on the column header to sort the column then jqGrid will send new request to the server with new page, sidx and sord parameters. So the server will be responsible to sort the data correctly and to return the requested page of sorted data.

I recommend in general to prefer to use loadonce: true in case of displaying no so large dataset (for example less as 1000 rows of data). The server should ignore page and rows parameters and to return all data back to jqGrid. One need just the sort the data initially. After the first loading the data jqGrid saved the data in data and _index parameters of jqGrid and changes the datatype to "local". The later sorting, paging or filtering/searching of data will be implemented by jqGrid without any communication with the server. One should clear understand that JavaScript code is relatively quickly in modern web browsers. Because of that the user will see the results of sorting, paging or filtering very quickly (practically immediately in case of small number of data). The rountrip time of the simplest request to the server is typically much longer.

jqGrid Sorting by date and time, but displaying only date - Stack Over...

sorting date jqgrid jqgrid-php
Rectangle 27 1

First of all it's important to mention that one should distinguish between the format of internal data, or the data transferred between the server and the client, from the data displayed to the user. jqGrid have the concept of formattres, which allows to generate formatted HTML fragment which will be placed on the <td> cells of the column. There are exist formatter: "date" which can be used to convert input data to some other format. If you would follow the logic of formatters then you would fill the grid with data in the format Y-m-d, but display the data in the format d.m.Y. It formatoptions of the formatter: "date" not contains sendFormatted: true property then jqGrid will automatically convert the results of editing in the source format Y-m-d. Thus you will don't need to make any additional serialization.

Nevertheless, if you do need to make some manual serialization for inline editing, then you should define serializeRowData callback of the level of jqGrid options. The callback get postData object as the only parameters and it should return either the object or the string which will be used to send data to the server.

javascript - JQGrid Serialize Data Before Post To Server - Stack Overf...

javascript jqgrid
Rectangle 27 0

I use ondblClickRow to switch jqGrid in inline edit mode. The modifications will be saved if the user press "enter" key or canceled on "esc" key. Probably it is the way which you would also like. See for an example.

Editing in jqGrid with mvc - Stack Overflow jqgrid
Rectangle 27 0

I'll recommend you to use so named "Inline Editing" for row editing. The most advantage of this method, that it is very intuitive and the user. You can see how it works on the demo page Choose on this demo "Row Editing" and then "Using Events" or "Input types" on the left tree part. With this method you can implement any custom verification whether the selected row should be allowed to be edited or not inside of the event handle onSelectRow or ondblClickRow. If you allow editing, then you call editRow method of jqGrid. This method creates input controls for all editable columns and the user can modify the row values in a natural way. The modifications will be saved if the user press "enter" key or canceled on "esc" key.

I personally prefer to implement calling of editRow method inside of ondblClickRow event handler. So the user can continue selecting of rows like usual and can use double click for the row editing. The pseudo code will look like folowing:

var lastSel = -1;
var isRowEditable = function (id) {
    // implement your criteria here 
    return true;
var grid = jQuery('#list').jqGrid({
    // ...
    ondblClickRow: function(id, ri, ci) {
        if (isRowEditable(id)) {
            // edit the row and save it on press "enter" key
    onSelectRow: function(id) {
        if (id && id !== lastSel) {
            // cancel editing of the previous selected row if it was in editing state.
            // jqGrid hold intern savedRow array inside of jqGrid object,
            // so it is safe to call restoreRow method with any id parameter
            // if jqGrid not in editing state
            lastSel = id;
    pager: '#pager'

Thanks for your detailed input. Sounds like a reasonable solution.

@Oleg: this still allows inline and form edit of row. How to prevent inline and form edit of disabled row also?

javascript - jqGrid - edit only certain rows for an editable column - ...

javascript jquery jqgrid
Rectangle 27 0

Every software product have its own user interface. You should not expect that one can simulate GUI of Microsoft Excel in another product like in jqGrid for example. If you click on the column header of the grid (I mean jqGrid) for example then the grid will be sorted by the clicked column. Try to make Excel to do the same instead of selection of the column. It's also not easy.

In general everything is possible. I posted in the old answer with an example of implementation of buttons in the column header. Another answer shows how to construct selects or jQuery UI Autocomplete in the filter toolbar dynamically based on all different values in the column. One more answer and this one shows how to use jQuery UI MultiSelect Widget written by Eric Hynds.

The answer (and another one) contains the demo which demonstrates the usage of select2 plugin. The plugin provides functionality which is very close to Excel. Probably it can be mostly close to what you need.

I hope that usage of ideas from the referenced answers you can implement your requirements.

Excellent, thank you Dr Kiriljuk, the functionality of the linked demo is sufficient for what I need.

@AdamKDean: You are welcome!

jquery - Is it possible to have column header filtering in jqGrid? - S...

jquery jqgrid
Rectangle 27 0

jqGrid has hideCol and showCol methods which allows to hide or show column of the grid. The Column Chooser just provide more comfortable interface for the user to do the same. It allows additionally to change the order of the columns. If you want to have some other GUI for hiding (or showing) columns you can bind click event on any external links or buttons and to call hideCol and showCol inside of your implementation of the click event handler.

You can also consider to place additional buttons for hiding/showing directly in the column header like I described in the answer.

but this example is for the jqgrid... how can i do the same in datatables.... can u please provide me some working example...

@AryanVerma: I don't use datatables and don't know it. If you need a solution for datatable you should remove jqgrid tag from your question.

jquery - Add / remove columns in datatables - Stack Overflow

jquery jquery-ui datatables
Rectangle 27 0

1) jqGrid column definition support hidden:true proprty which hide the corresponding column. You can use setColProp method to set the column dynamicaly. If you want allow the user to choose the order of columns or hide some columns you can use columnChooser for this.

2) You can use jqGrid to display or modify the local data. Inline editing and cell editing support this. You should use editurl:'clientArray' in case of inline editing and cellsubmit:'clientArray' in case of cell editing (see example from this answer for example). Form editing has not full local editing support without any AJAX requests to the server, but use can use dummy server url to implement local editing also with the form editing (see the jqGrid demo, select on the left size "New in version 3.7" and then "Add/edit/delete on local data").

3) You can use jqGrid to display or modify the local data and not only for the data loaded from the database. To do this use use datatype parameter set to "local", "jsonstring", "xmlstring" and use data or datastr option to fill the data. I prefer to use datatype:"local" and initialize the grid contain with the data parameter. mvc - jqGrid evaluation - Stack Overflow jqgrid
Rectangle 27 0

You can examine the values of the jqGrid parameters sortname and sortorder ("desc" or "asc"). To get the parameters you can use getGridParam method:

var sortColumnName = $("#list").jqGrid('getGridParam','sortname');


var sortOrder = $("#list").jqGrid('getGridParam','sortorder'); // 'desc' or 'asc'

that's helpful, thanks. What I really want to do is add a class (either sortAsc or sortDesc) to the th of the sorted column.

@sprugman: What do you mean under "add a class ... to the sorted column."? Do you mean the column header or all cells in the column or both?

@Oleg: the <th> tags in the column header. I can write some code to do it with what you've given me. (In fact, I already have.) Just checking to see if there was something built in.


Using the setLabel method, how do I unset the old class using that method? So, first time through, the first column gets the sort-asc class. Then I click on the third column. Col 1 needs to have sort-asc removed, while col 3 has it added....

jquery - how to get the current sort column in a jqGrid after user cli...

jquery jqgrid
Rectangle 27 0

You need just add onSelectRow callback to the jqGrid definition. The callback will be called every time when the user select a row. The onSelectRow callback receive the id of selected row as the value of the first parameter. Inside of onSelectRow callback you can use $(this).jqGrid("getRowData", id) to get object which represent the cells of the selected row. The names of the properties of the object are the same as name properties of colModel columns.

Oleg... Did you see my updated post on my question: Sorry for E-stalking you on somebody else's thread, but I'm trying to figure out why the variables that I set in my beforeRequest event get reset to 1 and you are the man to talk to.

@DmainEvent: Sorry, but I think that you have chosen wrong way originally how you use jqGrid. So you have redirection to another web page, which is very bad. Because of you've chosen the wrong way you have some problems which you try to solve in some your last questions. I recommend you to go back to the origin of your problem and to use more standard way of editing of grid data which uses Ajax and inline or form editing (all on the same page where the grid exist). In the case you will have no problems which you try to solve now.

Are you saying I can't set the page before I make the xHR request?

@DmainEvent: What you mean? To change the value of page parameter which will be sent to the server? To change the value of internal page parameter? To change the value of page number in the input filed which see the user? What is your scenario? What problem you try to solve?

I would like to change the value of the page parameter which will be sent to the server. Not sure what the internal page parameter is. When I redirect, I don't want to go to page one, I want to to page x

jqgrid - accessing the cells of the selected row in a jq grid from cod...

Rectangle 27 0

It you don't want that the user be able to change the order of columns you should remove sortable:true option of jqGrid. Alternatively you can allow to do that but you can save new column order, which the user prefer to have, to the server. You need just to capture the changes of order.

jqGrid supports jqGridRemapColumns event which allow you to capture the changes of order in the grid:

$("#Table").bind("jqGridRemapColumns", function () {
    // the order of columns is changed
    // you have to send the new column order to the server

One more problem is that it's probably better to save the column position by names of the column and not by position. I mean array of of indexes (permutation parameter) which required remapColumns. It would be probably practical to save the list of columns in database which the user like to see. One could get the list from the server and find the name in colModel. In the way one could convert the list of column names to the array of indexes which require remapColumns and only then one could call remapColumns.

The last remark: one could include the information about the column order in the main response from url used to fill the grid. So one would don't need to make separate Ajax call with async: false parameter. Inside of beforeProcessing callback one could compare the list of column order in the database with the current list of columns in colModel and to call remapColumns if it's required.

Thank you for the answer. I removed sortable: true from the jqgrid, but still, when I sort a column, that column move forward.

@amandachaw: You are welcome! How you sort columns? The code which you posted don't have any column sorting. Your goals are unclear. Do you want to save the last column order in the database and restore it on the next visit of the page? In the case you should use jqGridRemapColumns like I described to detect the changes and posting the new order to the server. If you want to prevent changing the column position you have to identify the place of your code which allows the user to change the order. The only place in the code which you posted was sortable: true.

I already saved the columns order in the database. My issue is when I reload the grid with the new order and I try to do client sort (the one that jqgrid has by default) the column move forward and the order is discarded.

@amandachaw: Sorry, but all words from the last comment are very unspecific. You should post a clear example (the demo for example) which shows what you do exactly, how you load the data, in which format and so on. You should describe clear test case which can be used to reproduce the problem. I'm sure that if you would save the names of columns instead of the indexes (see my answer), than you should have no problems.

@amandachaw: It's clear that you have some implementation problems, but you should be precise in the description. Till now you post the code with many clear bugs like dataType: json instead of datatype: "json", like url: 'u.json, which have syntax errors and so on. One can't help you to find the bug in your implementation if you post your implementation in so dirty form and just describes some scenarios which produce the problem. Sorry.

jqgrid - column order changes with the client sort. How to prevent tha...

Rectangle 27 0

The current version of jqGrid is 4.4.4. If you have to use the old one you can try to include the same value not only in editoptions, but in searchoptions too. In case of usage filterToolbar it's recommended to add additional value with empty value specially for searching. It will allow not filter for the column. So the definition of user column could be like below

{ name: 'user', stype: 'select',
    editoptions: { value: "Jhon:Jhon;Adam:Adam" },
    searchoptions: { sopt: ['eq'], value: ":Any;Jhon:Jhon;Adam:Adam" } }

You should consider to delete hidden id column because id attribute of rows (<tr> elements of the grid) will be assigned based on id attribute of the input data if your fill the data correctly (see the documentation). If you don't use editing of data you can remove editoptions and use only searchoptions. I strictly recommend you to use "eq" instead of "cn" for selects. The usage of "cn" will don't allows you to use options like "a", "ab" and "abc" in one select. If the user will choose "ab" both "ab" and "abc" will be chosen. If the user chose "a" then tree options "a", "ab" and "abc" will be chosen. So jqGrid will work not like the user expect it.

I recommend you additionally include gridview: true in all grids which you use to improve performance. The usage of autoencode: true is also required in the most use cases.

@YassinGerrard: You are welcome!

jquery - formatter select not working for FilterToolBar with jqGrid-v4...

jquery jqgrid
Rectangle 27 0

One can use colspan in the footer too. It's important to understand that jqGrid set the footer once during creating the grid and then just can change the width of columns on the footer if the user resized the column width.

To simplify the code I suggest to set resizable: false property on the columns where we use colspan. The demo demonstrates the solution:

In the demo I added resizable: false property in "Client" and "Date" columns ("name" and "invdate" columns) and used the following code after jqGrid is created:

var $footRow = $("#list").closest(".ui-jqgrid-bdiv").next(".ui-jqgrid-sdiv").find(".footrow");

var $name = $footRow.find('>td[aria-describedby="list_name"]'),
    $invdate = $footRow.find('>td[aria-describedby="list_invdate"]'),
    width2 = $name.width() + $invdate.outerWidth();
$invdate.css("display", "none");
$name.attr("colspan", "2").width(width2);

$footRow.find('>td[aria-describedby="list_tax"]').css("border-right-color", "transparent");
$footRow.find('>td[aria-describedby="list_total"]').css("border-right-color", "transparent");
$footRow.find('>td[aria-describedby="list_closed"]').css("border-right-color", "transparent");
$footRow.find('>td[aria-describedby="list_ship_via"]').css("border-right-color", "transparent");

@Rekha: You are welcome!

Just one question in your example... $name.width() + $invdate.outerWidth() Why you are using width() and outerWidth() two different properties to retrive the columns width?

@Rekha: cells of grid have some borders which will be calculated by .outerWidth(). So I need to increase the width (without of border etc.) of visible cell with the full width of all cells which I make hidden. In the case the total width of new cell will have correct value.

javascript - How one can use colspan in the jqGrid footerData? - Stack...

javascript html css jqgrid
Rectangle 27 0

jqGrid supports many predefined formatters which include formatter: "checkbox". It displays disabled (the user can't check/uncheck the checkboxs) checkboxs. You can use true, false or 1, 0 as the input values for the formatter: "checkbox".

One can use custom formatters additionally in the cases when you don't find predefined formatters which full correspond your requirements, but in case of usage checkboxs the standard formatter: "checkbox" should be OK.

@Avinash: You are welcome!

c# - Is it Possible to populate Controls in JqGrid - Stack Overflow

c# jqgrid
Rectangle 27 0

I think you will need to call the remapColumns function to do this as part of your update call. The tricky part is finding what the new order should be based on the user changes you have described. This new order is passed into the array as the first part of the call. See jqgrid documentation


jquery - JQGrid sortableRows change sorting column values to match new...

jquery jqgrid sortable
Rectangle 27 0

One can use jqGrid to create many different grids, tree grids, subgrids and so on. It's very important to understand whether you want to display grid with 10 rows or with 100000 rows. If you have 100000 rows (or some other large number of rows) you will have to implement server side paging and sorting of data. So if the user would click on the "next page" button the next rows should be loaded from the server. Why you would need to send all colModel data on paging or sorting? So you should clear understand that in server side scenario one need create all structures of grid only once and then one need refresh only the body of grid. So it would be bad choice to send all information (column name, column model, data,... at once).

Only if you have some hundreds or some thousand of rows in the grid and you can use loadonce: true option them you can load once all information (column name, column model, data, ...) per separate jQuery.ajax call and then create jqGrid with datatype: "local" and using data parameter which contains all grid data.

// in the example below the grid with id="list" will be created 
// with column having name: "c4" in colModel
var $grid = $("#list"), columnName = "c4";


var $colHeader = $("#jqgh_" + $.jgrid.jqID($grid[0].id) + "_" + $.jgrid.jqID(columnName)),
    $sortingIcons = $colHeader.find(">span.s-ico");

// change the text displayed in the column 
$taxHeader.text("New header text");

// append sorting icons to the new text

Thanks Oleg.I want to display grid(not tree grids) with 10 rows of 100000 rows and use paging. When client click on nodes of treeview then change grid struct(colName,Actions,....).What is the solution?

@ZSH: You can use subgrids as grid to display such data.

I do not need to use subgrid(parent and child).I just want to be able to change dynamic colName,ColModel in jqgrid.

@ZSH: You should understand the terminology used by jqGrid. In your previous comment you wrote about treeview (you mean probably TreeGrid) and the action on "click on nodes" is too unclear. I understand you so that you will have children node which structure (colName, colModel etc) are other as in the parent node. TreeGrid don't allow it, but using subgrids you can implement that. If you need something another you should describe in details the exact requirements in new question. Including pictures or other examples could be very helpful to understand you.

jqGrid dynamic columns - Stack Overflow

Rectangle 27 0

In my opinion the real problem which you have is the usage of step 3: "user navigates to edit page and does his thing then submits". The step makes all the problems which you try to solve. Instead of going to another page one can create dynamically some controls which allows to edit the selected row. jqGrid provide inline editing or form editing for the purpose. You need just include editable: true property in the columns which you need to edit implement starting of inline/form editing on select of row or on double click. Alternatively you can use buttons from the navigator bar (see navGrid and inlineNav) or in addition column of the grid (see formatter: "actions").

If you still don't want to use any editing mode which provide jqGrid you can just place the whole content of the body of the main page inside of a div. You can hide the div using jQuery.hide instead of redirection to "edit page". You can load the content of "edit page" on the same main page (per jQuery.load for example). Then you can remove the loaded "edit page" and show the original main page. As the result the main page will be shown in exactly the same form as it was before starting of editing.

Refreshing entire page jqGrid paging - Stack Overflow

Rectangle 27 0

you can actually bind the column as normal but you can show/hide them at runtime using jquery. for example i have to show link column in jqgrid for admin user and for normal users that column needs to be hidden so implement this in following way.



Dynamic Columns in jqGrid - Stack Overflow

Rectangle 27 0

If your use loadonce: true then the server should return all data back to the grid. If the user click later on the column header, the data will be sorted by jqGrid. If you add the filter toolbar just by call of filterToolbar then you will provide the user the possibility to filter the data. No additional server code you need to write.

Your current code loads the page of data from the server and don't save any data locally (it saves the data only on the HTML page). So it's really important to understand that you have to implement sorting, paging and optionally filtering/searching of the data on the server side.

To implement server side paging you have to understand very clear the interface between the client and the server. Fisr of all you should remove scroll: 1 and add pager or toppager. After that you will see in the grid the line (at the bottom or at the top of grid) like below

The server response should contains three properties: page, total and records which will be placed on the pager. Other pager elements

allows to user to change the page size and to send request to the server about new page of data. If jqGrid displays the first page then the "First" and the "Previous" buttons are disabled. If jqGrid displays the last page the the "Next" and the "Last" buttons are disabled. If the properties page, total and records are missing in the server response then all paging possibilities will be disabled because jqGrid interpret the response as the only page of data.

If you use scroll: 1 instead of pager or toppager then the user don't see the pager, but the paging is disabled because of the same reasons.

jquery - jQGrid not loading the next page records on scroll - Stack Ov...

jquery ajax jqgrid
Rectangle 27 0

The implementation of behavior which you need is not very simple. I would recommend you to save the changed column order in localStorage like it described in the answer and this one. Try the old demo using Column Chooser button first.

To save changed column order you need to register the callback which jqGrid should call after drag&drop of column headers. One can use update callback of sortable option defined as object (instead of true). So the code will be like

var $grid = $("#list"); // your grid
    ... // all other option of jqGrid
    sortable: {
        update: function (perm) {
  $grid, perm); // save permutation

The function saveColumnState are described in the referenced above answers and are included in the referenced above demo too.

Hi Oleg, thanks for your comment. I want to save the column order in database(sql server). Can you please tell me how to do this? to do this i need return type (format) of jqgrid column. can you please help me on this.?

You need to change the implementation of saveColumnState method of [the demo](). The last line of the current implementation calls saveObjectInLocalStorage(myColumnStateName(this), columnsState); where columnsState is the object which need be saved. You can make Ajax request to the server instead. In the same way restoreColumnState need to get the state from the server using Ajax call instead of getObjectFromLocalStorage.

Thanks Oleg for your inputs. Am new to jquery , jqgrid and ajax. can you please explain in detail what are the steps i supposed to do this task( saving column order in jqgrid)?

what is the format of "columState" object which we are going to save in database? please help me on this. advanced thanks

@venkat: You are welcome! You should make jQuery.ajax call with data: columnsState and url with your server handler. What you do on the server side is very different depend on what you use in your server side code. I'm now on the way to vacation, so can't get you more information.

javascript - jqGrid columns order should be user specific - Stack Over...

javascript jquery jqgrid
Rectangle 27 0

If you use the last version of jqGrid (currently it is 4.1.1) the bug fixes which I described before are already included in the main code of jqGrid. So how you can see from the demo all seems to work correct without doing anything.

jquery - Triggering resize of jqGrid after user shows/hides columns - ...

jquery jquery-ui jquery-plugins jqgrid