I have a jqGrid and when I do a seach I get a small dialog. There is a Add button at the top which has a "+" sign to add rows for advanced searching. Is it possible to change this button text to a plain old school "Add" without hacking into js library. Is there any way by writing an extendion? Is so how?
<input type="button" value="+" title="Add rule" class="add-rule ui-add">
The method navGrid has some parameters which can be used to change the look of navigator buttons. I used additionally toppager: true option of jqGrid and cloneToTop: true option of navGrid for the case that one uses top pager. If one just create the navigator buttons with respect of the call
$grid.jqGrid('navGrid', '#pager', {
cloneToTop: true,
view: true,
add: true,
edit: true,
addtext: 'Add',
edittext: 'Edit',
deltext: 'Delete',
searchtext: 'Search',
refreshtext: 'Reload',
viewtext: 'View'
});
one will see the results like
I used rowNum: 2 for the tests only to reduce the height of the pictures.
If I correct understand you, you want to have pure text buttons. To remove the icons from the buttons one can execute the following additional lines
var pagerId = 'pager', gridId = $.jgrid.jqID($grid[0].id);
$('#' + pagerId).find('.navtable span.ui-icon').remove();
$('#' + gridId + '_toppager').find('.navtable span.ui-icon').remove();
The gridId will be set to 'list'. One need to use $.jgrid.jqID if the grid id could contain meta-characters. The results will be
Next step will be to fix right and left the padding or margin of the buttons to show the texts better:
.ui-jqgrid .ui-jqgrid-pager .navtable .ui-pg-div,
.ui-jqgrid .ui-jqgrid-toppager .navtable .ui-pg-div {
padding-right: 3px;
padding-left: 3px;
}
The results will be improved to the following
Now we need fix the position of the pager. We can do this with respect of
$('#' + pagerId + '_left').width($('#' + pagerId + ' .navtable').width());
$('#' + gridId + '_toppager_left').width($('#' + gridId + '_toppager .navtable').width());
$('#' + pagerId + '_center')[0].style.width='';
$('#' + gridId + '_toppager_center')[0].style.width='';
and have the following results
or remove additionally unused right part of the pager with
$('#' + pagerId + '_right').remove();
$('#' + gridId + '_toppager_right').remove();
which places the pager in the middle of the rest place on the pager:
In my opinion it's mostly the matter of taste which look is better. You can see the resulting demo here.
Alternatively you can do use icons over the text, but place the text under the icons. You can see
details in the demo which produces the following results:
UPDATED: To customize the "Add rule" or "Add group" buttons you can use afterRedraw option:
afterRedraw: function () {
$('input.add-rule',this).val('Add new rule');
$('input.add-group',this).val('Add new rule group');
}
The demo which use the option produce the searching dialog like the following:
(the button "Add group" exist if multipleGroup: true are used and the "Add rule" button exist if multipleSearch: true are used).
UPDATED 2: One can improve the visibility of the searching dialog if one would use jQuery UI Buttons:
afterRedraw: function () {
$('input.add-rule',this).val('Add new rule').button();
$('input.add-group',this).val('Add new group or rules').button();
$('input.delete-rule',this).val('Delete rule').button();
$('input.delete-group',this).val('Delete group').button();
}
The result dialog can be like the following
Related
I am using jqGRid with subgrid configuration to display my data. I would like to have global expand & collapse button to display or hide all subgrid information. Does jqGrid library provide this feature by any means?
jqGrid has no "Expand/Collapse all". I modified the demo from the old answer which demonstrates creating on grid with local subgrids. The resulting demo you can see here:
and it has additional "+" button in the column header of "subgrids" column. If one clicks on the button all subgrids will be expanded:
I used the following code in the demo:
var subGridOptions = $grid.jqGrid("getGridParam", "subGridOptions"),
plusIcon = subGridOptions.plusicon,
minusIcon = subGridOptions.minusicon,
expandAllTitle = "Expand all subgrids",
collapseAllTitle = "Collapse all subgrids";
$("#jqgh_" + $grid[0].id + "_subgrid")
.html('<a style="cursor: pointer;"><span class="ui-icon ' + plusIcon +
'" title="' + expandAllTitle + '"></span></a>')
.click(function () {
var $spanIcon = $(this).find(">a>span"),
$body = $(this).closest(".ui-jqgrid-view")
.find(">.ui-jqgrid-bdiv>div>.ui-jqgrid-btable>tbody");
if ($spanIcon.hasClass(plusIcon)) {
$spanIcon.removeClass(plusIcon)
.addClass(minusIcon)
.attr("title", collapseAllTitle);
$body.find(">tr.jqgrow>td.sgcollapsed")
.click();
} else {
$spanIcon.removeClass(minusIcon)
.addClass(plusIcon)
.attr("title", expandAllTitle);
$body.find(">tr.jqgrow>td.sgexpanded")
.click();
}
});
You can simply make it to behave like as toggle as follows.
Take a button.
onlick of it call the function, say toggleSubgrid();
function toggleSubgrid(){
if($('#YOURGRIDID td').hasClass('sgexpanded')){
$('.ui-icon-minus').trigger('click');
}
else if($('#YOURGRIDID td').hasClass('sgcollapsed')){
$('.ui-icon-plus').trigger('click');
}
}
This will work for all rows that are already loaded. You might need to scope the selector a bit, as fits your needs.
function expandAll () {
$( ".tree-plus" ).click();
};
function collapseAll () {
$( ".tree-minus" ).click();
};
I have used a custom formatter for one of the columns in my jqGrid. Here is the formatter:
formatter: function(cellvalue, options, rowObject) {
var link = $('<a>', {
text: 'Click Me'
href: '#',
click: function() {
alert('sdfsfsd');
// my stuff
}
});
return link[0].outerHTML;
}
There are two problems:
The link is not clickable. When I click the link, the row gets selected! Is there a way to not bypass row selection, but also make the link clickable? [Update: I tried using the beforeSelectRow: function(row, e) { return false;} to disable selection. But still not able to click the link. I can see in the html that the cell value is a link indeed.]
The link is not link like, meaning it is not blue/underlined, as usual it looks like. I have not overidden anything in my CSS.
Help much appreciated!
Thanks
Vivek Ragunathan
UPDATE: I found that this is not a problem with the grid as such. But the click handler does not get linked with the hyperlink. I also tried this code instead but no luck!
var link = $('<a>', {
text: 'Click Me'
href: '#'
}).click(function() {
alert('sdfsfsd');
// my stuff
});
Thanks
Since the link is created dynamically (using jquery), and then the HTML of that object is consumed, the handler will not be part of the HTML. So in this case, the link has to be created out of string directly:
formatter: function(cellvalue, options, row) {
var handler = "someHandlerDefined(" + options.rowId + ")";
return "<a href=# onclick='" + handler + "'>Link</a>";
}
That worked!
I use jqgrid.I want use label in navgrid and dynamic change label text.
I can add button by navButtonAdd.
how to add label in navgrid?
Use the caption property of jqGrid navGrid. As given in the Wiki you can see that for existing navGrid buttons you can use the property addCaption/editCaption in case of Edit and caption in case of others to set the label.
As
caption: "Delete",
Since this is a string value you can directly assign a variable dynamically to set the label
If you really need to modify the text of the buttons added by inlineNav or navGrid you have to do this manually because jqGrid has no simplified function for this.
First of all you can use Developer Tools of Internet Explorer (press F12 to start), Firebug or other tools to examine the navigator buttons. You will see something like
The id of every button are constructed from the id of the grid and some button specific suffix. For example the "Edit" button added by inlineNav is "list_iledit" where "list" is the id of the grid and the suffix "_iledit"has the Edit button. To change the texts later you can use the code like
var $div = $("#" + grid[0].id + "_iledit>.ui-pg-div");
var $icon = $div.find(">span.ui-icon");
$div.text("edit"); // new text of the button
$div.append($icon);
$div.parent().attr("title", "my custom edit tooltip"); // new tooltip
You can use something like this:
.navGrid('#pager_list_1', {
//other codes
}).navButtonAdd('#yourpagerId', {
caption: "Del",
url: delUrl,
buttonicon: "ui-icon-trash",
onClickButton: function (response) {}
}
If you have a kendo grid, is it possible to have a combobox and an icon in the same column? Basically using an editor and a command? Or the other question is to use an editor for a command column.
Thanks!
Use an editor function that is something like this:
editor: function (container, options) {
// Add icon
$('<span class="k-icon k-add"></span>').appendTo(container);
// Add container for the combobox
var span = $('<span></span>').appendTo(container);
// Define the combobox
$('<input name="' + options.field + '"></input>')
.appendTo(span)
.kendoComboBox({
dataSource: [ "Seatle", "Madrid", "Sofia", "Palo Alto" ]
});
}
It might be done more compact but here I try to make clear the different steps instead of chaining more functions.
Running example here: http://jsfiddle.net/OnaBai/ehnSq/12/ Try editing City
I have been working with the jqGrid a lot and everything works (sorting, reordering of columns, adding/remove columns in the columnChooser, reordering columns in the columnChooser, ...). However there is one minor thing.
It appears, the initial list of the colModel that I pass to the grid contains the columns in the order they are displayed including a list of the possible hidden columns, e.g. columns:
Id, Name, Date(hidden), AValue, BValue, CValue(hidden)
Now when I open the columnChooser, the visible columns are shown on the left in the expected order as they appear in the grid. The not visible columns appear on the right as: Date, CValue. If I remove all columns from the grid, then the order of the unselected columns on the right of the column chooser dialog is as defined in the colModel: Id, Name, Date, ...
I would like to see the selected columns in the order as they appear on the screen for reordering, but I would like to have the unselected columns on the right always appear in alphabetical order - is that somehow possible?
I had trouble getting this to work but eventually decided to add my own event handlers to the dialog to manually sort the right side.
//Add the button to the jqGrid toolbar
$('#MyGridId').jqGrid('navButtonAdd', '#MyGridToolbar', {
buttonicon: 'ui-icon-transferthick-e-w',
caption: 'Select Columns',
title: 'Select Columns',
onClickButton: function () {
$(this).jqGrid('columnChooser', {
done: function (perm) {
if (perm) {
this.jqGrid('remapColumns', perm, true);
}
}
});
//Setup custom event bindings and give the right side an initial sort
BindColPickerActions($.jgrid.jqID(this.id));
SortColPickerAvailable($.jgrid.jqID(this.id));
}
});
//function to add click event bindings to the dialog actions
function BindColPickerActions(gridId) {
var colpickerId = 'colchooser_' + gridId;
//When moving an item from selected to available (Hiding)
$('#' + colpickerId + ' .selected a:not(.SortModifier)').bind('click', function(){
SortColPickerAvailable(gridId);
BindColPickerActions(gridId);
});
//When moving an item from available to selected (Showing)
$('#' + colpickerId + ' .available a:not(.SortModifier)').bind('click', function(){
BindColPickerActions(gridId);
});
//add a class to the actions that have been modified to keep track
$('#colchooser_' + colpickerId + ' .available a:not(.SortModifier), #' + colpickerId + ' .available a:not(.SortModifier)').addClass('SortModifier');
}
//function to sort the available list
function SortColPickerAvailable(gridId) {
//get the list of li items
var colpickerId = 'colchooser_' + gridId;
var available = $('#' + colpickerId + ' .available .connected-list');
var li = available.children('.ui-element');
//detatch and sort the li items
li.detach().sort(function(a, b) {
return $(a).attr('title').toUpperCase().localeCompare($(b).attr('title').toUpperCase());
});
//re-attach the li items
available.append(li);
}