jqGrid - freeze the first checkbox column - jqgrid

Pls have a look at http://jsfiddle.net/chugh97/YWVA8/56/
I have frozen the Inv No column. What I want to achieve is freeze the checkbox column only so when some one scrolls the checkbox column is not hidden from user's view.

Recently I answered here on the same question. Nevertheless I find the question very good and I think that the sharing of the solution could be interesting for many users of jqGrid. So I repeat the answer here shortly.
The demo which I created based on the demo from the answer allows not only make the column with the checkboxes be frozen, but additionally allows to implement inline editing together with the frozen columns:
I hope that Tony make the corresponding changes in the main code of jqGrid and the inline editing will be removed from the list of limitations of frozen columns.
The most important part of the code which do the trick is below
$grid.jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch: "cn"});
$grid.jqGrid('setColProp', 'cb', {frozen: true});
$grid.jqGrid('setGridParam', {multiselect: false});
$grid.jqGrid('setFrozenColumns');
$grid.jqGrid('setGridParam', {multiselect: true});
if($.isFunction($grid[0].p._complete)) {$grid[0].p._complete.call($grid[0]);}
fixPositionsOfFrozenDivs.call($grid[0]);
The implementation of the function fixPositionsOfFrozenDivs you can find either in the code of the demo or in the text of already referenced old answer.

Related

the selected value was cleared in dropdown after add new criteria in jqgrid advanced searching

In jqgrid advanced searching, the value selected in drop down list was cleared after i add new criteria.
Below detail for your reference.
1) in jqgrid column model
{name:'instrumentType',
index:'instrumentType',
searchoptions:{
dataInit:instrumentTypeDataInit,
sopt: ['eq','ne','nu','nn','in','ni']},
align:"left",
stype:'select'},
2) javascripts function for instrumentTypeDataInit
instrumentTypeDataInit=function(el){
var categoryInstrumentTypeOptions = "${categoryInstrumentTypeOptions}";
$(el).append(categoryInstrumentTypeOptions);
}
3) when add criteria "Instrument Type", and select "OPTION", it goes well.
4) when add another criteria, the value selected is cleared.
Does anyone know why it is? and what's the solution? thanks a lot.
EDIT:
i've used the dataInit function in the wrong way, used searchOptions.value instead, the issue has been resolved, you can refer another post:best way to dynamically populate dropdown options in jqgrid advanced searching
i've used the dataInit function in the wrong way, used searchOptions.value instead, the issue has been resolved, you can refer another post, Oleg has given an answer:

how to get focus on previous selected row with page in jqgrid?

I am try to get focus on jqgrid previous selected row with page but I could't do it.so please give a solution for that.
You have to save the id of selected row for example in localStorage of web browsers. Try the demo or another one which uses multiselect: true option. The demos do what you asked. Both demos are from the answer which is modification of another answer which I posed before and where I discuss advantages of usage localStorage instead of cookie.

JQGrid-Trirand. How to Edit Fields?

I have one page where i have bind data by using JqGrid, but My requirement is In editing one row of a grid, the editable fields must NOT BE builtin fields( builtin textboxs) i want to bind that to other textboxes, check boxes which are outside grid. The data which i want to edit must be supplied to other input controls other than jqgrid builtin input controls, Finally IS THIS POSSIBLE???
Hope iam clear with my question.
Please do help me in reply saying either YES or NO or How, and why.
edited
I am not sure that I understand correctly what you mean, but it seems that you should just use form editing mode. To activate it on the client side you should just add editable: true property to all columns which are editable or use the option cmTemplate: {editable: true} which makes default value of editable for all columns as true. After it you can for example use navGrid to add Add, Edit and Delete buttons in the pager. The functionality on the client side will be ready after that. Now you have to implement editing part in the server code only. If you use commercial version of jqGrid like jqSuite you should address to the documentation or demos for more details.
try this
http://www.trirand.net/examples/grid/selection/selectedrow_client/default.aspx
or
Try this
<ClientSideEvents BeforeEditDialogShown="beforeEdit"/>
<script type="text/javascript">
function beforeEdit(rowID) {
var grid = jQuery("#<%= JQGrid1.ClientID %>");
lastSelectedRow = grid.getGridParam("selrow");
};
</script>

JqGrid - Display two text boxes in one cell

Is it possible to display two editable text boxes in one cell of the JqGrid
Sorry, but the description of the problem in the comment to your question still don't contain any examples which shows why you have to display two text boxes in one cell. Moreover you still not answered on the question: which editing mode you use?
The problem is the following: if you use some software product you can use a lot of its standard features. In the case the implementation will be short and you can make very nice solution writing very small code. If you one the other side would try just follow your original imagination of how all should looks like you can spend many time and to write a lot of code. As the result from the point of view of the user who will work with your site all will be almost the same as in the simple solution. Is it really required?
If you would use form editing for example you can easy display additional textboxes, checkboxes or textareas from hidden columns. jqGrid automatically create controls for all hidden columns which have editable: true property. So what you need to do in the case is just to show hidden field in the form with respect of $.show (like in the answer).
I used the same concept in "trirand.com/blog/jqgrid/jqgrid.html#";
There in the Row editing --> Custom edit, JqGrid demo examples, its displaying three buttons on a one cell.

jqGrid form edit stuck with initially loaded values

When I open form to edit values:
It doesn't change form values when I navigate with <> buttons
It opens New form with same values as first edited row, and when I click "Submit", it overwrites that row instead of creating a new item
When I click to edit another row, it always shows the form values for the first edited row – i.e. if I click New first and then edit row, it shows empty form.
So, in short, the first time form opens, the values are "stuck" whatever row I open later.
What can cause this? I remember it used to work OK some time ago.
UPDATE:
No with recreateForm I don't have this issue (I use it as temporary workaround).
Hm, I can reproduce this on jqGrid example, but not on Live Manipulation - on New in Version 3.7, Add/edit/delete on local data:
Click any row and edit it (open form)
Close form
Select any other row and click edit - form shows incorrect values (from the row that was opened first)
Click Add new row button in toolbar - form shows same values - which is very convenient, usually new rows are "almost" same - if only it would add new row, not update the existing one!
Of course in live demo Submit doesn't do that (it doesn't seem to work at all) but except for this symptoms are same.
Also <> buttons do not change data in form, though they change selected row - but from what I remember previously it used to update form values also to match selected row.
Probably you should post the description of your bug with "New in Version 3.7", "Add/edit/delete" as a bug in the in trirand forum.
The problem is that the bug exist in very special environment/data/settings. For example I tested my old local edit example modified to jqGrid 3.8.1 or in 3.7.2 and can not reproduce the problem which you describes. So you can use my examples as a template could it helps you.
Moreover in all examples which I use for real projects I use always parameter recreateForm:true. If you don't use it jqGrid not create a form, but try to use an existing with other data. It works in a lot of cases wrong. For example if you use any dataInit functions they will be called only once during creating of the form, which can make very strange affects. If you use edittype: 'custom' the usage of recreateForm:true is really mandatory (see this). So I recommended many times all people to use
jQuery.extend(jQuery.jgrid.edit, {recreateForm: true});
to set recreateForm: true as your default settings. You could save many hours or days of debugging of some strange effects in your edit/add dialogs.

Resources