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.
Related
I am using Kendo ListBox in my application where it has the two data list namely as 'fromData' and 'toData', also it has four in built button controls as tools: ["transferTo", "transferFrom", "transferAllTo", "transferAllFrom"].
when we click on any of the button, the data rendering on the front end acts accordingly. My requirement is - I have added another check box on the page and whenever the checkbox is checked by the user I want the transferAllTo to act and all the data should be transferred from 1st list to 2nd list without clicking on the tool button. It should work only with the selection of check box.
I can see there is a method called OnRemove() which is acting when I am clicking the button from front end, so I created a method to be called on Onclick event of Checkbox and Inside that I called the OnRemove() method but it did not work.
$('#' + clientId).find('#' + fromEntitySelect).kendoListBox({
draggable: true,
dataSource: fromDataSource,
connectWith: "toEntitySelect",
dropSources: ["toEntitySelect"],
dataTextField: "Entity",
dataValueField: "EntityID",
toolbar: {
tools: ["transferTo", "transferFrom", "transferAllTo", "transferAllFrom"]
},
change: onChange,
drop: onDrop,
drag: onDrag,
dragend: onDragEnd,
remove: onRemove,
});
My requirement is - I have added another check box on the page and whenever the checkbox is checked by the user I want the transferAllTo to act and all the data should be transferred from 1st list to 2nd list without clicking on the tool button. It should work only with the selection of check box.
You can simple let jQuery click the button "transferAllTo".
As an example, go to https://demos.telerik.com/kendo-ui/listbox/index and execute $("a[data-command='transferAllTo']").click() in the browser's JavaScript console.
I've used the information on this link to add a button to my grid and it works great. But I don't want that button to be displayed if the user opens that row in the view dialog. How can I hide this item in the view dialog?
I know that I can hide a column in the grid and then display it in the view dialog by using this syntax in the column definition:
, hidden: true, editrules: { edithidden: true },
But I see no way of reversing these options. I've played with different combinations of the above options, and the hidedlg option, but have had no luck.
To clarify, we are using the free version of jqGrid.
You wrote about "the view dialog" in the title of your question. Do you really mean View dialog or Edit dialog? View Dialog will be shown if you click on "View" button of navigator bar, but the button exists only if view: true option is used in navGrid. In the case you can use viewable: false property in the column.
If you want to hide the column in Edit dialog, then you can use editable: "hidden" property in the column (see the wiki article). The demo https://jsfiddle.net/OlegKi/ho803dvq/ uses properties
viewable: false, editable: "hidden"
in the last note column. The column will be shown in the grid, but the column is not visible in either View or Edit dialog.
If you use Guriddo jqGrid you can use the option viewable in colModel. Set this option to false in order to show the field in grid, but not in view form.
See the documentation for this here
I'm using jqGrid jqGrid 4.14.2-pre
How to hide or show buttons depending on the condition
Not using css
loadComplete:function(data)
{
if(data.records > 100)
{
$('#grid').jqGrid('navGrid','#pager');
// hide $('#grid').jqGrid('inlineNav','#pager'); ?
}
else
{
$('#grid').jqGrid('inlineNav','#pager');
// hide $('#grid').jqGrid('navGrid','#pager'); ?
}
}
I'd recommend you to call both navGrid and inlineNav, but to hide unneeded buttons identifying there by id. You should just know simple rule how the ids will be build. jqGrid uses prefix build on the navigator button ("add_", "edit_", "refresh_", ...) and the grid id ("grid" in your case). See the old answer for more details. The method inlineNav do the same, but the ids of buttons will be build base on another rule: the grid id and the suffix "_iladd" (for Add button), "_iledit" (for Edit button), "_ilsave" (for Save button) and "_ilcancel" (for Cancel button).
Let us you have grid with id="grid". To hide Add button added by navGrid you can use $("#add_grid").hide();. To hide inlineNav Add button you can use $("#grid_iladd").hide();.
i think i found a strange bug in jqGrid.
If you click on this link you can see a jqGrid with a pager. If you click on the '+' button you get the add form in which the 2 datepickers work as expected.
If you now click on this link you can see the very same table, and the very same add button. Anyway if you try to set the second date using tha datepicker you will notice that the focus moves back to the first input, opening the first datepicker.
The example does not work because it has the first field (Id) hidden, so the real first field is a datepicker. Moreover, the edit form is modal.
Last, if you click in this link the behaviour is correct even if the first field is a datepicker. The only thing i changed is the modal property (to false, before it was true).
However, i NEED to hide the Id field AND have a modal window, so i have to to get rid of this problem...
Can someone suggest a solution or an hint?
Thanks
PS: notice that if you set modal: false, you still get the black/transparent overlay like if the window is modal BUT it is not! If you click outisde the edit form it will be closed. This is not acceptable for my requirements.
try to set jqModal parameter into false
var editParams = {
modal: true,
jqModal:false,
... //other options you need
}
grid.editGridRow(row_id, editParams);
for more information see answer Oleg's analisys
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...
});
}
});