Dynamically Expand Subgrid in a loop - JQGrid - javascript

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.

Related

Prevent ExtJS grid sorting

I have grid and want to apply default sorting on it, I am getting parameters from an API. My flow is as below.
Store.sort(sorters), where this code do load operation and after refreshing grid, It fires an event sortchange event on first load. How can i prevent it?
Update: I tried sortOnLoad:false. But, it is not working.
in sortchange event there is one parameter called column
so,when it will called just check column.hasFocus. if it will true that means user sort from grid header.
and if it return false that means it's called by loading or removing data.
Hope, this information will help you..:)

DataTable in Bootstrap not executing jQuery when record reach more than 10?

I used twitter bootstrap for my system. For displaying all of my data from the database, I used dataTables for it. I've added a new column as "Action" that contains 2 buttons, edit and delete. But when the record reaches more than 10 for the first pagination, all of the rows which contains my buttons on the second pagination and next pagination does not execute my jQuery code that handles the delete and edit function.
Can anyone help why is this happening? What are the possible solution for this problem? Really need it. Thanks.
Supposing you bind your delete and edit function on $(document).ready() then the explanation is simple: at that point only the first page is available in the DOM and only the buttons on the first page will bind.
What you need to do is to rebind your events every time you change the page. For this, you need to call your binding jQuery code (let's say you have a method named BindEvents() that does that) on the fnDrawCallback event of your DataTable:
var dataTable = $("#YourTable").dataTable({
// additional data table params,
"fnDrawCallback": function () {
BindEvents();
};
See http://legacy.datatables.net/usage/callbacks#fnDrawCallback for more details.

jqGrid columns order should be user specific

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.

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.

Deselecting a single row in jqGrid

Is this possible without hacking into the innards of the jqGrid JS?
setSelection( "rowX", false ) doesn't work, and resetSelection() deselects all rows.
According to the documentation, setSelection
Toggles a selection of the row with id = rowid; if onselectrow is true (the default) then the event onSelectRow is launched, otherwise it is not.
On the demo page, setSelection is called like
jQuery("#list9").jqGrid('setSelection',"13");
Does this work? Could you supply us with the constructor otherwise?
jQuery("#list9").jqGrid('setSelection',"-1");
jQuery('#list9').jqGrid('resetSelection',row_id);
Please pass the number at row_id place.
It is worked for me
#list9 is your grid id and row_id is the id of your row which you may get it through events like onSelectRow.

Categories