could anyone tell me how to implement client side paging on jqgrid?
Currently, my pager just shows one page which is an error. However, if I change the number of records per page using the drop down, the grid is updated accordingly. But I am unable to navigate thru the pages.
Thanks in advance
I suppose that you fill the grid in the wrong way. You don't included any code in your question, so I can only guess that you use addRowData method to fill the grid. If it's so, then you should know that the usage of addRowData method it the worst and the slowest way to fill the grid which I know.
The best way in case of datatype: 'local' is to use data option of jqGrid in combination with gridview: true. It sorts the data from the data parameter corresponds with sortname and sortorder options, create jqGrid and display the first page of the grid (the size of the page defines rowNum option). The value of data parameter should be array of items which represent the grid rows. Every item should contains properties with the names like the name property of colModel. Additionally every item of data should contains id property which unique value will be used as id attribute of rows (id of <tr> elements).
Related
I am trying to create tabular report using JQGrid, JavaScript. I want to add a rowgroup header spanning whole row, and repeat this group using JQgrid and JavaScript. The data is going to come from JSON file.
I've already explored options of rowgroup using Jqgrid. But, instead of static header spanning, it gives header with expand/collapse function. It is not able to give Total for two rows in each column. Also I am not able to repeat leftmost column in it.
You can use plusicon and minusicon options which specify the icons used by jqGrid group. If you need to hold the icons hidden that the corresponding classes should have display: none prorty. For example you can use
groupingView: {
... // your other options
plusicon: "ui-helper-hidden",
minusicon: "ui-helper-hidden"
}
If you need customize the grouping row additionally, then you can use formatDisplayField callback. See the answer, this one, this post and this one.
I have a Jqgrid which has datatype as local. I am loading data at run time using addRowData, setCell. Every thing is working great. Note that I am not loading the entire data into grid so grid does not know how many pages are there. My server returns the count which I need to set it to the grid. The docs say that lastpage is ReadOnly? How do I set my last page(number of pages) to the grid? Any suggestions.
Thanks,
Sarath
The usage of addRowData method to fill jqGrid is the most old and the most ineffective way to fill the data in jqGrid. The problem is easy. If you place an element on the page the position of all other elements on the page have to be recalculated. It makes many resources of the web browser. The filling of the whole jqGrid body in one step is much more effectively especially with the large number of inserted rows. It's really needed to use addRowData method only in seldom cases.
Much more effective will be to use data parameter of jqGrid which allows to fill the grid with the data, sort the data corresponds to sortname and sortorder and display the first page where rowNum defines the number of rows per page. Additionally one should not use afterInsertRow callback and use gridview: true. In the case the filling of jqGrid is the most effective.
The number of pages of the grid will be calculated automatically based on the number of rows in the grid. Only if you use server side datatype ('json' or 'xml') the client part don't know the total number of pages and so one have to fill in the input data total, page and records together with the main data (see documentation). If one uses low level method addJSONData one can fill grid with the data and still set total, page and records to any values which you want.
Another way which you can use in some scenarios is datatype: 'jsonstring'. The data can be placed as the value of datastr option. By the way the value of datastr must be not only the JSON string but can be an object too.
My jqgrid contains several pages. When I sort any column the page resets to first.
(That's right also for filterToolbar i.e. after calling $("#my-grid")[0].triggerToolbar();)
Is there any way to keep my current page after sorting/filtering ?
EDIT:
Actually my problem is a little more complicated.
I save jqgrid preferences(rowNum, page, filters etc..) to the cookie.
When I load the page first time I load the prefs.
I use the technique from Mark B's answer (see jqGrid Filter Toolbar initial default value) to populate my filter default values.
The problem: in that case page always sets to the first.(because of triggerToolbar calling) i.e. it doesn't save state.
I don't quite understand your requirement. If the user has seen some rows on the second page for example and then the user has clicked on the column header to sort the column the the grid will be sorted. The data which the user have seen before can be on any page. So I don't understand why you want hold the current page which will show absolutely another data as it showed before.
If you do need to hold the page you can do this in the following way. Inside of the loadComplete you can save the value of page parameter. Inside of onSortCol event handler the value will be already changed to 1, but you can correct it to the value which you saved before. I didn't tested this, but I think it should work.
UPDATED: Now I think I understand your original problem. I think you should choose another way described here or here. What you needs is just to save in the cookie the postData value and to set search:true parameter of jqGrid if the filters is not empty (or other filter parameter depend on the options which you use). In the way you should be able to restore not only the filter, but additionally the page value. The final solution can a little depend from jqGrid parameters and the parameters of filterToolbar which you use. So it you will have implementation problem you should include more code which you use.
I'm using mvc with jqgrid and this solition work for me:
$("#GridTable").jqGrid({
...
onSortCol:
function () {
var postpage = jQuery("#GridTable").getGridParam('postData');
jQuery("#GridTable").setGridParam({ page: postpage.page });
},
...
});
I have 2 grids. in both of them i use loadonce:true .
In the first grid i have a cell with an onblur event which
opens a dialog with the second grid.
after i edit the second grid i want to save as xml it's content and
ascribe it to the row of the first grid (the row witch opened the dialog).
In the end i want to generate an xml from the first grid that will
include the xml I generated before in the second grid.
so what is the best way to implement this?
Thank's In Advance.
Depend on how exactly you implement the scenario which you describe you could has any data in the internal data parameter of jqGrid existing always if one use local datatype or loadonce:true in your case.
Direct accessing to the data parameter per jQuery("#grid_id").getGridParam('data') get your reference to the data array. The data array contain all data of the grid (not only the current displayed page) and the data are not yet placed in the <td> element. So the data are unmodified and could contain for example any XML fragments.
UPDATED: To make you easier to understand what I mean I made the small demo. If you double-click on a row you will see the XML data associated with the row.
The "note" column can be hidden. Because all hidden columns exist in grid as HTML markup I made it visible. You can see the difference what can be saved as grid internal data and what can be displayed (also as hidden data).
UPDATED 2: You can consider to use autoencode:true option in your grids.
I use two grids at one PHP page.
Is there any way to get data from the first grid (i.e. after click row) and pre-fill it into the add new row form in the second grid?
thank you for any suggestion Petr
I am not sure that I correct understand what you mean under the "pre-filling". But how I understand you question you can do following:
With respect of onSelectRow event which you define on the first grid you will receive the id of selected row as the parameter. Inside of the onSelectRow event handle you can call getRowData to get full information about the data of selected row. Then using addRowData for example you can add new row in the second grid.