I am using jQrid version 3.8.1 with subgrids. In my case, it doesn't really make sense for the user to be able to expand the subgrid while they are entering a new row. Since the parent row doesn't exist yet, there is nothing for the subgrid to show anyway. So what is the best way to disable or remove the subgrid expansion button (+ button) just for a row that is being created?
I saw this post, which could work, but seems a little hacky. Is there a more supported method?
I' mot sure that I correctly understand your scenario. I suppose that you add the row and then want to hide "+" button during inline editing of the new added row.
The exact implementation depends on how you add the row and which form of inline editing you use. In any way I would suggest you to hide the "+" button at the beginning of inline editing and to show it after the row could have subgrid information. You can use the following code for hiding the "+" icon
$("#" + rowid).find("td.ui-sgcollapsed>a").hide();
Additionally you would have to prevent expanding of the subgrid if the user do click on the "subgrid" cell (which contains the hidden "+"). You can do this by removing sgcollapsed class (or sgexpanded class):
$("#" + rowid).find("td.ui-sgcollapsed").removeClass("sgcollapsed");
To restore the original state (after saving the editing row) you need show the icon ($("#" + rowid).find("td.ui-sgcollapsed>a").show()) and to add the class sgcollapsed back to the <td> element ($("#" + rowid).find("td.ui-sgcollapsed").addClass("sgcollapsed")).
If you are sure that some row don't have any sbgrid then you can remove the "+" icon by setting empty string or as HTML content of td.ui-sgcollapsed call of the row. Additionally one can unbind the click event from the cell. See the old answer for the corresponding code example.
Related
When you create a jqgrid there is a default button on the bottom of the grid that allows you to create new records.
However, when you open the modal, all input fields are empty.
In my situation I need this button, but I also need the exact same thing but with the possibilty of adding a few parameters so some of the fields are already filled in. The parameters would come from the selected row at that moment.
Like when I click a row where the date is set to 01/01/2099 i need the add-modal to open with the date already set to that date.
You can use beforeShowForm or afterShowForm to make any changes in the Add Form during opening. For example you can read the values from currently selected row and fill some fields of the form with new values. To be open Add form on click or double-click on the row you need just call editGridRow inside of onSelectRow/ondblClickRow callback.
When you click on a row in jqgrid it gets "selected" (applies some coloring and styles), other "selected" rows get deselected. However, when I click on an input button element in one of the cells in a row nothing happens... the row is not "selected". How would I make the clicking of this button (or link or whatever) cause the row to be "selected" (and deselected when a different row is clicked)?
Solution:
In the gridComplete method of jqgrid I can attach a click handler to each button, get the ID of the button's parent row and then call jqgrid's setSelection method on it, passing in the required row id as a parameter.
$('#mygrid').find('input[type=button]').each(function() {
$(this).click(function(){
var therowid = $(this).parents('tr:last').attr('id');
$('#mygrid').jqGrid('setSelection', therowid );
});
});
On "tricky" thing about this is that instruction on the jqgrid website show two different ways to go about doing this. The above uses the new API which does things rather differently so you will find a mix of suggestions online that switch between this new API and the older one.
I have an editable Jqgrid(where when im clicking on a row, that row get editable) with 3 dropdown lists in it, what i want is:
when im clicking on a row, its get editable and selects first dropdown in a row
after i choosed an object in dropdown list and pressed tab it jumps to the next dropdown (already happends)
same as the 2. but it have to jump to the third dropdown list
when im done editing, when i press down key or just press somewhere else on the screen data which i edited should be saved to DB. so it have to happend withount me pressing enter key, which i have to do now.
if i press down key, selection have to jump down to next row and save the previouse row which i just edited
I know its a long one, but i cant get path keyboard selection because im stuck with clickable edit....
If you don't use multiselect:true you can use bindKeys method to have keyboard support.
If you need to change the order of focus on Tab pressing you can change tabindex attribute on the editable fields (input or select elements). You can use oneditfunc parameter of editRow for such initialization actions.
I have a grid control displaying data about a Company. I want one column to be "Employee". On click on the any cell of "Employee" column I want to pop up the one Form called "Employee Details" and would like to feel the data.
How can I do this?
As I understand the modal form on click of a jqgrid cell deals with data only related to that row. I want to show different data on the pop up form, i.e. other than the grid data.
Pl help.
Shivali
Probably you can use unobtrusive links in the column (see this and this answers). The advantage of this technique is that instead of typical links you can define any custom action on click on the link. The look of the link can be defined by CSS, but it seems to the that the link can show the user better as other HTML elements, that the user can click on it.
Alternative you can use a button in the column with respect of the custom formatter, but with the same technique as described before you can free define which action will be done on the click.
Inside of the click event with the parameter 'e' you have e.currentTarget as the DOM element of <a> for the link or <input> or <button> if you use buttons in the grid column. To find the row id you can use var row = $(e.currentTarget).closest("tr.jqgrow") or var row = $(e.target).closest("tr.jqgrow") to find the <tr> element. The row id will be row[0].id.
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.