I try to implement the link from one grid to the modal dialog of another grid. I made an example
to illustrate this problem. If you choose in a context menu (right mouseclick) of each row of the picture grid, you will find some Actions. One of them is "Go to scan info". Here I would like to have a link to modal dialog of grid "Scans" and modal dialog should put the user depending whether the scan record for the selected picture allready exist or not, to the Add/Edit modal dialog.
Does anybody already implemented something like that?
Let us we have two grids on one page: one with id="grid" and another with id="scan". Exactly like you call jQuery('#grid').jqGrid('editGridRow',id) on double-click on the first grid you can call jQuery('#scan').jqGrid('editGridRow',id) in the context menu "Go to scan info". The only thing which you have to know is to know the ids on the second grid. Before calling of jQuery('#scan').jqGrid('editGridRow',id) you can impelemt any additional logic (like testing whether "the scan record for the selected picture allready exist or not").
If I understand, you need insert another jqgrid into modal dialog. Did you try to insert jqgrid function into open event of jquery dialog?
You have to call jqgrid function on demand, not in document.ready statement in this case.
Imo this could work (not tested yet):
$( ".selector" ).dialog({
open: function(event, ui) {
$("#grid").jqGrid({
... all of options...
});
}
});
Related
I'm using jqgrid inline edit in my application which is also accessed in mobile. Since the user access space in the mobile is small i dont want the pop-up's throwing in the middle.
So, basically when the user did not select the row and click the edit/delete button the warning dialog is thrown "Please, select a row". Now i did not want the alert. Just when the user click on the edit/delete button without selecting the row it should stand still. Nothing happens.
Is this possible? How can i achieve this?
I would suggest you another way. One can disable or hide Delete/Edit buttons until a row will be selected. Inside of loadComplete one should test whether any row is selected (it could be selected if you use reloadGrid with {current:true} option for example). In the case you can disable or hide Delete/Edit buttons once more.
The demo created for the old answer shows how to disable navigator buttons by adding ui-state-disabled class. Another demo created for the answer demonstrates in interactive form how to show/hide navigator buttons.
I'm using jqGrid verison 4.5.0 and I noticed by default, the pop-up single field search dialog doesn't look like this:
Is there a way to move "+" button to the right of "-" button and move match-rule dropdown to the bottom, both of them to look like this snapshot? We like it this way as it is less messy to some of our customers.
Many thanks..
JQuery v2.0
JQuery-UI v1.10.3
jqGRID v4.5.0
$('#Spreadsheet').navGrid('#Pager',
{edit:false,add:false,del:false,search:true,view:false,refresh:false},
{}, {}, {},
{multipleSearch:true,multipleGroup:true,closeOnEscape:true,closeAfterSearch:true,
searchOnEnter:true,showQuery:false,width:800,caption:"Search Records"
},
{}
After some discussion in the comment we clarified that the The searching dialog are used with options multipleSearch: true, but without multipleGroup: true. The goal is the hiding of the dropdown which allows the user to choose between "All/Any".
In the answer I showed how one can use afterRedraw to change Searching Dialog.
The demo displays the dialog in the form
It uses the following afterRedraw
afterRedraw: function () {
$("input.add-rule", this)
.button() // use jQuery UI button
.val("Add rule"); // change text of "+" button
$("input.delete-rule", this).button(); // use jQuery UI button
$("select.opsel", this).hide();
}
Only the last line ($("select.opsel", this).hide()) is really important. Other lines just improve a little the look of the Searching Dialog.
I have created JQGrid.
I have put the Data in cell and one html Link in cells.
OnClick of that link I need to open JQGrid Specific popUp.Popup have one combobox .I'll select one option and click submit button and that data needs to be appear in clicked cell.
Thanks
The construction which you suggest seems me too complex. Probably you can consider to use more simple user interface?
Nevertheless you can just use setCell method to set new contain of the cell of the grid.
I have a MVC 4 project I am currently working on and need some advice on how to implement modal popups, preferably in jQuery.
For instance, on my view I have a zip code text box, with a lookup button next to it. The user can enter in the zip code directly, or click the lookup button. If the user clicks the button, I want to have a modal popup where the user can enter in a city and state and get a list of zip codes, select one, and then have that value posted to the zip code box on the original form.
This is just one example, I have more on that view, but this is the easiest to explain.
Anyone have any tips, links, or example code?
Thanks in advance on any help.
how to implement modal popups, preferably in jQuery.
Generally jQuery dialog with modal : true and handled beforeClose is what you want
$(foo).dialog({
modal: true,
beforeClose: function(event, ui) { ... }
})
My page is divided into two parts vertically.Left part is like a menu section. Clicking on
any menu brings the proper data related to that menu in the right part of the page. I am
doing it using ajax call and the only div on the right part get refreshed. I am using jquery click event for that ..
say:
$("#left_part").click(function() { // ajax call here });
Now I have some more jquery action on the right part. (say Show hide some div which also work on click event.)
But when new div reloads on the right part those click event on the right part is not working.
But when I bind the click event it works.
say:
$("#some_right_part").click(function() {/ some hide show here )}; Not working
$("#some_right_part").bind('click', function(event){ // some hide show here )}; works fine
Important: When I am on fresh page (no ajax call yet to bring right part) $("#some_right_part").click(function() {/ some hide show here )}; works fine.
But what I know is: $().click(function) calls $().bind('click',function)
So, What is the reason behind this? Or What is the perfect way to solve such problem
Thanks
When you assign a click event via $().click when the page loads, the click event is bound to all matching elements. However, when you do the ajax call and recieve new markup - the new elements are not bound to the click event because they did not exist when you first called $().click.
There is a way to get a click event to be bound to all elements and all future elements that may be created. You must use the live method like so:
$('#elements').live('click', function() {
// do logic
});