jqGrid columns order should be user specific - javascript

In my project, I have a scenario in which a user can drag and drop jqGrid columns. When the same user visits the site again, we have to display the jqGrid column order how he had modified in his previous visit. So, the order of jqGrid columns should be user specific. Can anyone help me how to achieve this? (and I need return type and format of jQgrid column).

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
...
$grid.jqGrid({
... // all other option of jqGrid
sortable: {
update: function (perm) {
saveColumnState.call($grid, perm); // save permutation
}
}
});
The function saveColumnState are described in the referenced above answers and are included in the referenced above demo too.

Related

Tabulator table/grid dirty flag

Is there's a way to check if the table is dirty for the editor fields?
Seems like I can't see it on the documentation about the dirty table. If there's no implementation yet, then I would like to suggest a feature about it and that would be really nice to have.
All I know is you can get the initialValue and value of the cell then compare it.
E.g.(Table.isDirty(); will return true if fields are modified)
Something like Ext JS grid. The grid can check if inputs are dirty in one call only.
Thank you
There is no isDirty function as such, but there are events that are called when the table data is edited which will allow you to keep track of this.
When you have instantiated your table you should register the cellEdited event using the on function. When the table is edited by a user this function will be called, passing in the Cell Component for the edited cell
table.on("cellEdited", function(cell){
//cell - cell component
});
For full details, checkout the Cell Events Documentation

jqGrid: change editoptions in colModel between adding rows - NOT load editoptions from URL

Summary:
I am trying to change the editoptions column property on a per-cell basis.
Please Note, unlike everyone else on the internet with a similar question :), I am not loading grid data using jqgrid's built in functionality to fetch data from a URL.
Background:
We are using jqGrid to display between 1 or 2 dozen rows with roughly 6-8 columns in a grid. Most cells in the grid are set up to use edittype:"select" and to display a drop-down, an example of which is below:
{name:'someColumn', index:'someIndex', key: true, width:100, align:"center", editable: true, edittype:"select",formatter:'select'},
ALL the row data comes in a big block from an AJAX call and we iterate over that data, using the 'addRowData' command, to put new rows into the grid.
grid.jqGrid('addRowData', undefined, oSelectedData);
In the past, we used to include an 'editoptions' property in the colModel, because a given column was supposed to have the same 'select' options for every row. Now however, we are sending some extra data in the AJAX call that indicates which 'select' options that cell is supposed to have. Therefore, we are trying to change the colModel's 'editoptions' for most of the columns every time a new row is added. We attempt this using a 'setColProp' command that looks like this
grid.jqGrid('setColProp', columnName, {editoptions:{value:columnEditOptions}});
Problem:
The problem is that programmatically setting the column editoptions only seems to work for the first row in the grid. I have confirmed that even though 'setColProp' is later called with different values for columnEditOptions, all of the 'select' drop-downs in all of the rows that are added later share the same options as the one from the first row.
Is it possible to change the select options in each row using some method internal to jqGrid?
To my knowledge, we are not using anything like row- or cell-based edit mode at all.
I'm using jqGrid 4.4.3

jqgrid hide() row issue

I'm using latest version of JqGrid, and I've learned here that there is now build-in hding method. I figured out how to hide rows using
$("#"+rowid).hide();
But here I faced the very big issue. My jgrid is limited to display not more than 10 rows per page, and often happen that after using the above code, my items starting to be displayed at i.e. 10th page.
Thanks in advance .
The hide method is not part of jqGrid, but rather is part of jQuery itself:
Hide the matched elements.
So that probably explains why it is not working the way you expect. What exactly are you trying to do?
jqgrid allows to delete rows. See "Live data manipulation - Delete row" example on examples page.
$("#dedata").click(function() {
var gr = jQuery("#delgrid").jqGrid('getGridParam','selrow');
if( gr != null )
jQuery("#delgrid").jqGrid('delGridRow',gr,{reloadAfterSubmit:false});
else
alert("Please Select Row to delete!");
});
See also delGridRow method documentation.
Another option is to change data source (it depends on method was used for filling the table), delete rows from it and re-fill the table.

Dynamically Expand Subgrid in a loop - JQGrid

I have Grid with a subgrid using subGridRowExpanded.
And I want to dynamically expand some rows of the grid so I wrote following
in GridComplete Event of First Grid.
ids is array of row ids of my Grid
for(int i =0; i< ids.length; i++) {
//Checking with condition
$("#myGridName").expandSubGridRow(ids[i]);
}
I also tried with following code, But for some reason checkboxes in GridComplete of second level, is added only for last expanded row.
$("#myGridName").expandSubGridRow(ids[0]);
$("#myGridName").expandSubGridRow(ids[1]);
Above code expands appropriate rows. But,
In GridComplete event of Subgrid, I've check boxes in each row.
So, Here I need to check some of the Chekc boxes.
But the Problem is,
The subgrid_row_id is getting wrong
i.e. ID of last subgrid to be expanded is assigned in SubGridRowExpanded of Parent Grid.
Note : I manually adding checkboxes to each row in subgrid
Thanks in Advance.
If I understand you correct you have very close problem as discussed in the answer. What you try to do seems the same what expandOnLoad: true property of the subGridOptions option should do. Like I described in the answer jqGrid don't support queuing of Ajax requests. If you execute
$("#myGridName").expandSubGridRow(ids[0]);
with remote datatype or subgridtype ('json' or 'xml') the Ajax request will be sent to the server. Till we receive the corresponding response from the server the internal property
$("#myGridName")[0].grid.hDiv.loading
will be set to true and all other Ajax requests for example from $("#myGridName").expandSubGridRow(ids[1]) will be just skipped (ignored).
The same problem (bug) exist in the current implementation of expandOnLoad: true. If you open in the official jqGrid demo the "Hierarchy (4.0) new" tree node and then look at the demo "Expand all Rows on load" you will see that not all rows are correctly expanded as promised (you have to scroll the grid to see all subgrids).
I think that to implement expanding of subgrids on load correctly you should do about the following
You should examine the list of collapsed subgrids (the corresponding row has class "sgcollapsed") and expand only the first found subgrid.
The expanding of the next subgrid should be done only after the response from the server will be received and processed.
I can recommend you to use success callback function of ajaxSubgridOptions jqGrid options because there are no loadComplete event after loading the subgrid. The current implementation of the Ajax request in subgrid uses complete callback function of jQuery.ajax (see here) which will be called before success callback. So you can define your success callback as the method of the ajaxSubgridOptions option of jqGrid. Inside of the success callback you can call $("#myGridName").expandSubGridRow(ids[i]) for the next node (if any still not expanded). In the way you can open all subgrids.
To enumerate subgrids more effectively the answer could be helpful for you.

editable datagrid with ability to clone individual rows

Im looking for a way to render an html table as an editable datgrid, with the ability to clone individual rows. I dont need to save any of the changes made, just superficially edit the cells because i then use a jquery plugin to scrape the table as is on screen and save it.
Ive tried jeditable, but its designed for posting the output of its edits to a page, not just superficially making the changes.
Ideally, i could control what types of inputs are displayed onclick based on what column they are on. The table cells are unnamed. If they need to be named, there are a total of 34 columns, so i would need to know how to name those individually.
Thanks in advance.
Jeditable's target can be a function (see the "Submitting to function instead of URL" section of the jeditable homepage) - you could pass an empty handler and use it.
[Edit]
The handler should return a string (that will be displayed on the page)
(taken from the example page)
$('#test').editable(function(value, settings) {
return(value);
}, {
type : 'textarea',
submit : 'OK',
});
It work nicely, I just tried it out.
[/Edit]

Categories