I followed this stack thread to capture a double-click event on my grid. Interestingly though, my grid no longer highlights rows whose check-box's have been selected, as outlined in the gif below
Before I added the row template, everything was fine and worked correctly, as seen in the gif below
Here is the row template code:
Controller:
function rowTemplate() {
return '<div ng-dblclick="grid.appScope.rowDblClick(row)" >' +
' <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + \'-\' + col.uid + \'-cell\'" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" role="{{col.isRowHeader ? \'rowheader\' : \'gridcell\'}}" ui-grid-cell></div>' +
'</div>';
}
As part of $scope.gridOptions:
, rowTemplate: rowTemplate()
Inside $scope.gridOptions
$scope.rowDblClick = function(row) {
console.log('double click event');
var thisRow = gridApi.selection.getSelectedRows() //gets the clicked row object
$log.log(thisRow);
$('.item').on('click', function(){
//if user clicks on grid tab, should go to grid view else go to patient view
if ($(this).hasClass('not')){
console.log('item has .not')
$state.go('list.patient.patient-information');
} else {
console.log('item has .grid')
$state.go('list.grid');
}
//
$('.item').css('cssText', 'border-radius: 0px !important; background-color: #4B6A89; font-family: Roboto; font-size: 14px; color: white; font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase;')
$(this).closest('.item').css('cssText', 'border-radius: 0px !important; color: #4B6A89; background-color: white; font-family: Roboto; font-size: 14px; color: #4B6A89; font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase;');
});
//after a 2click, deselect the row, so a user can edit another cell
$scope.gridApi.selection.clearSelectedRows();
};
UPDATE: when I remove the <div ng-dblclick="grid.appScope.rowDblClick(row)" > from the template, the line highlight comes back (although I lose the double click functionality
Problem solved after much trial and error!
The problem started when I added the ng-dblclick option for grid rows with the suggested syntax:
function rowTemplate() {
return '<div ng-dblclick="grid.appScope.rowDblClick(row)" >' +
' <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + \'-\' + col.uid + \'-cell\'" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" role="{{col.isRowHeader ? \'rowheader\' : \'gridcell\'}}" ui-grid-cell></div>' +
'</div>';
}
I simply removed the div that the ng-dblclick was in, and moved it into the main row template div so it now looks like this:
function rowTemplate() {
return ' <div ng-dblclick="grid.appScope.rowDblClick(row)" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + \'-\' + col.uid + \'-cell\'" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" role="{{col.isRowHeader ? \'rowheader\' : \'gridcell\'}}" ui-grid-cell></div>';
}
I faced the same issue before.
Apparently, when we add the outside div for double-click, it messes up the CSS for highlighting. So in your example, on selecting the checkbox, row gets selected, but the highlighting doesn't happen.
Solution for this is:
Row Template:
function rowTemplate() {
return '<div ng-dblclick="grid.appScope.rowDblClick(row)" >' +
' <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader}" ui-grid-cell></div>' +
'</div>';
}
And add CSS for that specific grid, adding Grid Id or style:
#gridStyle .ui-grid-row.ui-grid-row-selected > [ui-grid-row] .ui-grid-cell {
background-color: #c9dde1;
}
My plunker working sample
function rowTemplate() {
return '<div ng-dblclick="grid.appScope.rowDblClick(row)" >' +
' <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell></div>' +
'</div>';
}
css:
/* --- ui-grid ------- row hover highlight ----- */
.ui-grid-row:hover .ui-grid-cell {
background-color: #ff8476;
}
/* ==== both works ===== */
/*
.ui-grid-row:nth-child(odd):hover .ui-grid-cell{background:red}
.ui-grid-row:nth-child(even):hover .ui-grid-cell{background:red}
*/
/* --- End ----- ui-grid ------- row hover highlight ----- */
I'm getting a weird error when trying to concatenate a variable to a multi-line string.
Error: Could not find member 'convertFromStringInterpolationSegment'
func getOpeningHTML() -> String
{
let maxWidth:CGFloat = self.webView.frame.width
return
"<html>" +
"<head>" +
"<style type=\"text/css\">" +
"body {" +
"color: white;" +
"padding:12px;" +
"line-height:140%;" +
"}" +
"a:link {" +
"color: #32b3e3;" +
"}" +
"img {" +
"margin-top: 10px;" +
"margin-bottom: 10px;" +
"margin-right: 10px;" +
"padding:2px; float: left;" +
"clear: both;" +
"border: 1px solid #637981;" +
"max-width: \(maxWidth)px;" + // THIS LINE CAUSES THE ERROR
"}" +
"img[alt~='Clothing'] { display: none; }" +
"img[alt~='shop'] { display: none; }" +
"img[alt~='AppHidden'] { display: none; }" +
"</style>" +
"</head><body>"
}
Edit: Solution:
let maxWidth:CGFloat = self.webView.frame.width
var html:String = "<html>"
html += "<head>"
html += "<style type=\"text/css\">"
html += "body {"
html += "color: white;"
html += "padding:12px;"
html += "line-height:140%;"
html += "}"
html += "a:link {"
html += "color: #32b3e3;"
html += "}"
html += "img {"
html += "margin-top: 10px;"
html += "margin-bottom: 10px;"
html += "margin-right: 10px;"
html += "padding:2px; float: left;"
html += "clear: both;"
html += "border: 1px solid #637981;"
html += "max-width: \(maxWidth)px;"
html += "}"
html += "img[alt~='Clothing'] { display: none; }"
html += "img[alt~='shop'] { display: none; }"
html += "img[alt~='AppHidden'] { display: none; }"
html += "</style>"
html += "</head><body>"
return html
The swift compiler has known problems with long concatenations. Better set a variable and do the concatenations line-by-line:
var s = "<html>"
s += "<head>"
...
return s
As workaround in your example try to convert maxWidth to String and write as:
"max-width:" + String(maxWidth) + "px;"
func getOpeningHTML() -> String
{
let maxWidth = 20
return
"<html>" +
"<head>" +
"<style type=\"text/css\">" +
"body {" +
"color: white;" +
"padding:12px;" +
"line-height:140%;" +
"}" +
"a:link {" +
"color: #32b3e3;" +
"}" +
"img {" +
"margin-top: 10px;" +
"margin-bottom: 10px;" +
"margin-right: 10px;" +
"padding:2px; float: left;" +
"clear: both;" +
"border: 1px solid #637981;" +
"max-width:" + String(maxWidth) + "px;" +
"}" +
"img[alt~='Clothing'] { display: none; }" +
"img[alt~='shop'] { display: none; }" +
"img[alt~='AppHidden'] { display: none; }" +
"</style>" +
"</head><body>"
}
You are returning String in getOpeningHTML() and you have declared "maxwidth" as Int type. Don't forget about Swift's type inference.
I am trying to use Font Awesome icons in place of the jqueryUI icons for the toolbar in my jqGrid (add,edit,delete,view icons).
This demo is exactly what I would like to accomplish. I've read Oleg's answer that demonstrates removing the icon class and adding the Font Awesome icons in its place. But when I try to do that nothing changes. I believe I'm possibly referencing the icons wrong.
I downloaded Font Awesome 4.0.3 and I have jqGrid 4.5.4--In the _icons.scss file of the FA file tree the icons are referenced like this:
.#{$fa-css-prefix}-pencil:before { content: $fa-var-pencil; }
But in Oleg's suggested code the new icons are labeled "icon-pencil":
$grid.jqGrid("navGrid", "#pager", {editicon: "icon-pencil",
addicon: "icon-plus", delicon: "icon-trash", searchicon: "icon-search",
refreshicon: "icon-refresh", viewicon: "icon-file",view: true});
$("#pager .navtable .ui-pg-div>span").removeClass("ui-icon");
This is my code: I only did the edit icon for this example. I also used the new label for the icons, "fa-pencil".
jQuery("#grid").jqGrid('navGrid','#grid_toppager"', {editicon: "fa-pencil", edit:true});
$('#grid_toppager .navtable .ui-pg-div>span').removeClass('ui-icon');
What combination of code do I need in order to replace the ui-icons with the Font Awesome icons?
Any helpful tips would be appreciated, thanks
I agree that my old answer can't be used with Font Awesome 4 because the names of the classes are changed in version 4. I use Font Awesome 4 myself in solutions which I develop for my customers and I decide to share it with other.
The files jQuery.jqGrid.fontAwesome4.css, jQuery.jqGrid.fontAwesome4.js and jQuery.jqGrid.checkboxFontAwesome4.js contains new jqGrid method initFontAwesome and formatter: "checkboxFontAwesome4". The demo demonstrates the usage of the files:
The usage of suggested method initFontAwesome is very simple. First of all one need to include additional CSS and JavaScript files:
<link rel="stylesheet" type="text/css"
href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
...
<link rel="stylesheet" type="text/css" href=".../ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href=".../jQuery.jqGrid.fontAwesome4.css" />
...
<script type="text/javascript" src=".../i18n/grid.locale-en.js"></script>
<script type="text/javascript" src=".../jquery.jqGrid.min.js"></script>
<script type="text/javascript" src=".../jQuery.jqGrid.fontAwesome4.js"></script>
Then one modify well known line
$("#grid").jqGrid({
... // jqGrid options and callbacks
});
to
$("#grid").jqGrid("initFontAwesome").jqGrid({
... // jqGrid options and callbacks
});
To use formatter: "checkboxFontAwesome4" instead of predefined formatter formatter: "checkbox" one need just includes jQuery.jqGrid.checkboxFontAwesome4.js after jquery.jqGrid.min.js (or jquery.jqGrid.src.js):
<script type="text/javascript"
src=".../jQuery.jqGrid.checkboxFontAwesome4.js"></script>
The formatter "checkboxFontAwesome4" have some advantage to formatter: "checkbox":
one can select the row by clicking on the icons. The standard formatter: "checkbox" uses disabled <input type="checkbox">. Clicking on disabled control will be blocked on the most web browsers. I posted before "clickableCheckbox" (see here and here).
The tests which I made with grids having many rows and columns using the tree checkbox formatters shows that formatter "checkboxFontAwesome4" is the most quick in rendering (in all web browsers where I it tested), formatter: "checkbox" is lower and "clickableCheckbox" is the mostly slow. So formatter "checkboxFontAwesome4" is not only cool, but it's really quick in rendering.
At the end I includes the current state of jQuery.jqGrid.fontAwesome4.css, jQuery.jqGrid.fontAwesome4.js and jQuery.jqGrid.checkboxFontAwesome4.js:
jQuery.jqGrid.fontAwesome4.css:
.ui-jqgrid .ui-pg-table .ui-pg-div>span.fa, #jqContextMenu .ui-menu-item>a>span.fa {
text-indent:0;
height: auto;
width: auto;
background-image: none;
overflow: visible;
padding-top: 1px;
}
.ui-jqgrid .ui-pg-table .ui-pg-div {
text-indent:0;
height: auto;
width: auto;
background-image: none;
overflow: visible;
padding-top: 1px;
}
.ui-jqgrid .ui-jqgrid-titlebar-close.fa-title span { font-size: 18px; display: inline-block; }
.ui-jqgrid .ui-jqgrid-titlebar-close.fa-title { margin-top: 0; top: 0; padding-left: 2px; padding-bottom: 2px;}
.ui-jqgrid .ui-icon-asc.fa { height: auto; margin-top: 0; }
.ui-jqgrid .ui-icon-asc.fa, .ui-jqgrid .ui-icon-desc.fa {
height: auto; margin-top: 2px; margin-left: 2px;
}
.ui-jqgrid .s-ico>.ui-state-disabled.fa, .s-ico>.ui-state-disabled.fa { padding: 0; }
.ui-jqdialog .ui-jqdialog-titlebar-close { text-decoration: none; right: 0.2em !important}
.ui-jqdialog .ui-jqdialog-titlebar-close>span { margin-top: 3px; margin-left: 5px;}
.ui-jqdialog .EditTable .fm-button-icon-right { padding-left: 0; padding-right: 0.5em; float:right;}
.ui-jqdialog .EditTable .fm-button-icon-left { padding-left: 0; float:left; }
.ui-jqdialog .EditButton>.fm-button { display: block; width: auto; }
.ui-jqdialog .EditButton>.fm-button>span { float: left; margin-left: 0.5em; margin-right: 0;}
.ui-jqgrid .ui-jqdialog .fm-button>span { margin-left: 0.5em; margin-right: 0; }
.ui-jqdialog>.ui-resizable-se { bottom: -3px; right: -3px}
jQuery.jqGrid.fontAwesome4.js:
/*global $ */
(function ($) {
"use strict";
/*jslint unparam: true */
$.extend($.jgrid, {
icons: {
common: "fa", // will be implemented later
scale: "", // will be implemented later. For example as "fa-lg"
titleVisibleGrid: "fa fa-arrow-circle-up",
titleHiddenGrid: "fa fa-arrow-circle-down",
titleIcon: "ui-corner-all fa-title",
close: "fa fa-times",
edit: "fa fa-pencil fa-fw",
add: "fa fa-plus fa-fw",
del: "fa fa-trash-o fa-fw",
search: "fa fa-search fa-fw",
refresh: "fa fa-refresh fa-fw",
view: "fa fa-file-o fa-fw",
pager: {
first: "fa fa-step-backward fa-fw",
prev: "fa fa-backward fa-fw",
next: "fa fa-forward fa-fw",
last: "fa fa-step-forward fa-fw"
},
form: {
prev: "fa fa-caret-left",
next: "fa fa-caret-right",
save: "fa fa-floppy-o",
undo: "fa fa-undo",
close: "fa fa-times",
delete: "fa fa-trash-o"
},
searchForm: {
reset: "fa fa-undo",
query: "fa fa-comments-o",
search: "fa fa-search"
}
}
});
$.extend($.jgrid.nav, {
editicon: $.jgrid.icons.edit,
addicon: $.jgrid.icons.add,
delicon: $.jgrid.icons.del,
searchicon: $.jgrid.icons.search,
refreshicon: $.jgrid.icons.refresh,
viewicon: $.jgrid.icons.view
});
$.extend($.jgrid.defaults, {
fontAwesomeIcons: true // the new option will be used in callbacks
});
$.extend($.jgrid, {
originalCreateModal: $.jgrid.originalCreateModal || $.jgrid.createModal,
createModal: function (aIDs, content, p, insertSelector, posSelector, appendsel, css) {
$.jgrid.originalCreateModal.call(this, aIDs, content, p, insertSelector, posSelector, appendsel, css);
if ($(insertSelector).find(">.ui-jqgrid-bdiv>div>.ui-jqgrid-btable").jqGrid("getGridParam", "fontAwesomeIcons")) {
$("#" + $.jgrid.jqID(aIDs.modalhead) + ">a.ui-jqdialog-titlebar-close>span.ui-icon")
.removeClass("ui-icon ui-icon-closethick")
.addClass($.jgrid.icons.close);
$("#" + $.jgrid.jqID(aIDs.themodal) + ">div.jqResize").removeClass("ui-icon-grip-diagonal-se");
}
}
});
$.extend($.jgrid.view, {
beforeShowForm: function ($form) {
var $dialog = $form.closest(".ui-jqdialog"),
$iconSpans = $dialog.find("a.fm-button>span.ui-icon");
$iconSpans.each(function () {
var $this = $(this), $fmButton = $this.parent();
if ($this.hasClass("ui-icon-triangle-1-w")) {
$this.removeClass("ui-icon ui-icon-triangle-1-w")
.addClass($.jgrid.icons.form.prev);
} else if ($this.hasClass("ui-icon-triangle-1-e")) {
$this.removeClass("ui-icon ui-icon-triangle-1-e")
.addClass($.jgrid.icons.form.next);
} else if ($this.hasClass("ui-icon-close")) {
$fmButton.removeClass("fm-button-icon-left")
.addClass("fm-button-icon-right")
.html("<span class=\"" + $.jgrid.icons.form.close + "\"></span><span>" + $fmButton.text() + "</span>");
}
});
}
});
$.extend($.jgrid.del, {
afterShowForm: function ($form) {
var $dialog = $form.closest(".ui-jqdialog"),
$tdButtons = $dialog.find(".EditTable .DelButton"),
$fmButtonNew = $("<td class=\"DelButton EditButton\" style=\"float: right;\">"),
$iconSpans = $tdButtons.find(">a.fm-button>span.ui-icon");
$tdButtons.css("float", "right");
$iconSpans.each(function () {
var $this = $(this), $fmButton = $this.parent();
if ($this.hasClass("ui-icon-scissors")) {
$fmButton.html("<span class=\"" + $.jgrid.icons.form.delete + "\"></span><span>" + $fmButton.text() + "</span>");
$fmButtonNew.append($fmButton);
} else if ($this.hasClass("ui-icon-cancel")) {
$fmButton.html("<span class=\"" + $.jgrid.icons.form.undo + "\"></span><span>" + $fmButton.text() + "</span>");
$fmButtonNew.append($fmButton);
}
});
if ($fmButtonNew.children().length > 0) {
// remove between buttons
$tdButtons.replaceWith($fmButtonNew);
}
}
});
$.jgrid.extend({
initFontAwesome: function () {
return this.each(function () {
var $grid = $(this);
$grid.bind("jqGridFilterAfterShow", function (e, $form) {
// an alternative to afterShowSearch
var $dialog = $form.closest(".ui-jqdialog"),
$iconSpans = $dialog.find("a.fm-button>span.ui-icon");
$iconSpans.each(function () {
var $this = $(this), $fmButton = $this.parent();
$this.removeClass("ui-icon");
if ($this.hasClass("ui-icon-search")) {
$this.closest(".EditButton").css("float", "right");
$fmButton.addClass("fm-button-icon-right")
.html("<span class=\"" + $.jgrid.icons.searchForm.search + "\"></span><span>" + $fmButton.text() + "</span>");
} else if ($this.hasClass("ui-icon-arrowreturnthick-1-w")) {
$this.closest(".EditButton").css("float", "left");
$fmButton.addClass("fm-button-icon-left")
.html("<span class=\"" + $.jgrid.icons.searchForm.reset + "\"></span><span>" + $fmButton.text() + "</span>");
} else if ($this.hasClass("ui-icon-comment")) {
$this.closest(".EditButton").css("float", "right");
$fmButton.addClass("fm-button-icon-right")
.html("<span class=\"" + $.jgrid.icons.searchForm.query + "\"></span><span>" + $fmButton.text() + "</span>");
}
});
}).bind("jqGridAddEditBeforeShowForm", function (e, $form) {
// alternative to beforeShowForm callback
var $dialog = $form.closest(".ui-jqdialog"),
$iconSpans = $dialog.find("a.fm-button>span.ui-icon");
$iconSpans.each(function () {
var $this = $(this), $fmButton = $this.parent();
if ($this.hasClass("ui-icon-triangle-1-w")) {
$this.removeClass("ui-icon ui-icon-triangle-1-w")
.addClass($.jgrid.icons.form.prev);
} else if ($this.hasClass("ui-icon-triangle-1-e")) {
$this.removeClass("ui-icon ui-icon-triangle-1-e")
.addClass($.jgrid.icons.form.next);
} else if ($this.hasClass("ui-icon-disk")) {
$this.closest(".EditButton").css("float", "right");
$fmButton.html("<span class=\"" + $.jgrid.icons.form.save + "\"></span><span>" + $fmButton.text() + "</span>");
} else if ($this.hasClass("ui-icon-close")) {
$this.closest(".EditButton").css("float", "right");
$fmButton.removeClass("fm-button-icon-left")
.addClass("fm-button-icon-right")
.html("<span class=\"" + $.jgrid.icons.form.undo + "\"></span><span>" + $fmButton.text() + "</span>");
}
});
}).bind("jqGridHeaderClick", function (e, gridstate) {
var $icon;
if (this.p.fontAwesomeIcons) {
$icon = $(this).closest(".ui-jqgrid").find(".ui-jqgrid-titlebar>.ui-jqgrid-titlebar-close>span");
if (gridstate === "visible") {
$icon.removeClass("ui-icon ui-icon-circle-triangle-n fa-arrow-circle-down")
.addClass($.jgrid.icons.titleVisibleGrid).parent().addClass($.jgrid.icons.titleIcon);
} else if (gridstate === "hidden") {
$icon.removeClass("ui-icon ui-icon-circle-triangle-n fa-arrow-circle-up")
.addClass($.jgrid.icons.titleHiddenGrid).parent().addClass($.jgrid.icons.titleIcon);
}
}
}).bind("jqGridInitGrid", function () {
var $this = $(this), $pager, $sortables;
if (this.p.fontAwesomeIcons) {
$pager = $this.closest(".ui-jqgrid").find(".ui-pg-table");
$pager.find(".ui-pg-button>span.ui-icon-seek-first")
.removeClass("ui-icon ui-icon-seek-first")
.addClass($.jgrid.icons.pager.first);
$pager.find(".ui-pg-button>span.ui-icon-seek-prev")
.removeClass("ui-icon ui-icon-seek-prev")
.addClass($.jgrid.icons.pager.prev);
$pager.find(".ui-pg-button>span.ui-icon-seek-next")
.removeClass("ui-icon ui-icon-seek-next")
.addClass($.jgrid.icons.pager.next);
$pager.find(".ui-pg-button>span.ui-icon-seek-end")
.removeClass("ui-icon ui-icon-seek-end")
.addClass($.jgrid.icons.pager.last);
$this.closest(".ui-jqgrid")
.find(".ui-jqgrid-titlebar>.ui-jqgrid-titlebar-close>.ui-icon-circle-triangle-n")
.removeClass("ui-icon ui-icon-circle-triangle-n")
.addClass("fa fa-arrow-circle-up").parent().addClass("ui-corner-all fa-title");
$sortables = $this.closest(".ui-jqgrid")
.find(".ui-jqgrid-htable .ui-jqgrid-labels .ui-jqgrid-sortable span.s-ico");
$sortables.find(">span.ui-icon-triangle-1-s")
.removeClass("ui-icon ui-icon-triangle-1-s")
.addClass("fa fa-sort-asc fa-lg");
$sortables.find(">span.ui-icon-triangle-1-n")
.removeClass("ui-icon ui-icon-triangle-1-n")
.addClass("fa fa-sort-desc fa-lg");
}
});
});
}
});
}(jQuery));
jQuery.jqGrid.checkboxFontAwesome4.js:
/*global jQuery */
(function ($) {
"use strict";
/*jslint unparam: true */
$.extend($.fn.fmatter, {
checkboxFontAwesome4: function (cellValue, options) {
var title = options.colModel.title !== false ? ' title="' + (options.colName || options.colModel.label || options.colModel.name) + '"' : '';
return (cellValue === 1 || String(cellValue) === "1" || cellValue === true || String(cellValue).toLowerCase() === "true") ?
'<i class="fa fa-check-square-o fa-lg"' + title + '></i>' :
'<i class="fa fa-square-o fa-lg"' + title + '></i>';
}
});
$.extend($.fn.fmatter.checkboxFontAwesome4, {
unformat: function (cellValue, options, elem) {
var cbv = (options.colModel.editoptions) ? options.colModel.editoptions.value.split(":") : ["Yes", "No"];
return $(">i", elem).hasClass("fa-check-square-o") ? cbv[0] : cbv[1];
}
});
}(jQuery));
UPDATED: Another demo contains some additional CSS styles which improve visibility of jqGrid if one includes bootstrap.css of the Bootstrap 3.0.2. I am sure that the styles are not the best, but there fix the problems which I found in my tests. Below are the styles:
.ui-jqgrid .ui-pg-table .ui-pg-input, .ui-jqgrid .ui-pg-table .ui-pg-selbox {
height: auto;
width: auto;
line-height: inherit;
}
.ui-jqgrid .ui-pg-table .ui-pg-selbox {
padding: 1px;
}
.ui-jqgrid { line-height: normal; }
div.ui-jqgrid-view table.ui-jqgrid-btable {
border-style: none;
border-top-style: none;
border-collapse: separate;
}
.ui-jqgrid .ui-jqgrid-titlebar-close.fa-title {
border-collapse: separate;
margin-top: 0;
top: 0;
margin-right: 2px;
height: 22px;
width: 20px;
padding: 2px;
}
.ui-jqgrid .ui-jqgrid-titlebar-close.fa-title.ui-state-hover span {
margin-top: -1px;
margin-left: -1px;
}
.ui-paging-info { display: inline; }
.ui-jqgrid .ui-pg-table { border-collapse: separate; }
div.ui-jqgrid-view table.ui-jqgrid-btable td {
border-left-style: none
}
div.ui-jqgrid-view table.ui-jqgrid-htable {
border-style: none;
border-top-style: none;
border-collapse: separate;
}
div.ui-jqgrid-view table.ui-jqgrid-btable th {
border-left-style: none
}
.ui-jqgrid .ui-jqgrid-htable th div {
height: 14px;
}
.ui-jqgrid .ui-jqgrid-resize {
height: 18px !important;
}
UPDATED 2: One more demo works with Font Awesome 4.2 and Bootstrap 3.2. The usage is very easy. One should include some .css (jQuery.jqGrid.fontAwesome4.css and jQuery.jqGrid.bootstrap-fixes.css) and .js files (jQuery.jqGrid.fontAwesome4.js and jQuery.jqGrid.checkboxFontAwesome4.js) and to use .jqGrid("initFontAwesome") before the grid are created. To fix problems with height of editing form at the second opening I used beforeInitData: function () { $("#editmod" + this.id).remove(); } additionally. One can download the latest versions of jQuery.jqGrid.fontAwesome4.css, jQuery.jqGrid.bootstrap-fixes.css, jQuery.jqGrid.fontAwesome4.js and jQuery.jqGrid.checkboxFontAwesome4.js from here.
For custom buttons, here is quick and... work around:
$(grid).jqGrid('navButtonAdd', pager, {
buttonicon: 'none',
caption: '<span class="my-fa-icon fa fa-barcode"></span> My Caption Here',
id: 'btnMyButton'
})
if you need to change the caption dynamically, update the div (representing the button) html (not text):
var myButton = $($(grid)[0].p.pager + '_left ' + 'td#btnMyButton');
$(myButton ).html('<span class="my-fa-icon fa fa-barcode"></span> My NEW Caption Here');
I included a css class, .my-fa-icon, just in case you want to add some customization (and make the display closer to what jqGrid does) - for example, you can add this to your css file:
.ui-jqgrid .ui-jqgrid-pager .ui-pg-button .ui-pg-div span.my-fa-icon { margin: 0 2px; width: 1.4em; font-size: 1.4em; float: left; overflow: hidden; }
i want to create tags for input data.(http://textextjs.com/manual/examples/ajax-with-filter-tags-and-autocomplete.html hear they creating tags using auto complete text box, but i don't want auto complete one)
hear is my code
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#textBox").keyup(function() {
$("#message").val($(this).val());
});
});
</script>
</head>
<body>
<div>
TextBox 1 : <input type="textbox" id="textBox"></input>
TextBox 2 : <input type="textarea" id="message"></input>
</div>
</body>
</html>
hear it reflect data of textbox1 to textbox2.
now what i want is : if user enter any data(words) in textbox1 followed by space then that word should convert into tags in textbox2
First of all type=textarea is wrong. There's no such input like that. You must be using <textarea> instead of that. Secondly, why dont you use contentditable attribute? It works just like a text area but can take HTML, is supported in all browsers, and you can use it on any block element! So replace your second input with this:
TextBox 2 : <div class="target" contenteditable="true"></div>
Then, in your code,
$("#textBox").keypress(function (e) {
if (e.which === 32) {
$(".target").append("<a href='#' class='tag'>" + this.value + "</a>");
this.value = "";
}
});
(Disclaimer) I used the styles from SO's tags, like this :
body {
font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif;
}
.tag {
color: #3E6D8E;
background-color: #E0EAF1;
border-bottom: 1px solid #b3cee1;
border-right: 1px solid #b3cee1;
padding: 3px 4px 3px 4px;
margin: 2px 2px 2px 0;
text-decoration: none;
font-size: 90%;
line-height: 2.4;
white-space: nowrap;
}
.tag:hover {
background-color: #c4dae9;
border-bottom: 1px solid #c4dae9;
border-right: 1px solid #c4dae9;
text-decoration: none;
}
Demo : http://jsfiddle.net/hungerpain/Wky2Z/
To add the tags to an array, have a variable called tags outside the keypress function :
var tags = [];
Then, in the keypress, you've got this if loop right? Push the new value into the array :
if (e.which === 32) {
$(".target").append("<a href='#' class='tag'>" + this.value + "</a>");
tags.push(this.value); //push the value in array
this.value = "";
}
Then, when you need to save it to DB, just join them :
tags.join("");
Then later, when you to retrieve them from DB next time, you could wrap those with the a (what we did in the keypress function)
Demo : http://jsfiddle.net/hungerpain/Wky2Z/1/
Try This:
$(document).ready(function () {
$("#textBox").keyup(function (e) {
if (e.keyCode == 32) {
$("#message").val($(this).val());
}
if ($(this).val() == '') {
$("#message").val('');
}
});
});
JSFIDDLE DEMO
jQuery Mobile offers a simple loader, but it does not offer a way to disable elements on the page while the loading process is occurring.
my wishlist:
1 - if the $.mobile.loading method offered a overlay-theme option (like the jqm popup)
2 - if the $.mobile.loading method accepted a target element to put the spinner into, such as a <div> set to fullscreen
$.mobile.loading( 'show', { text : "loading" ,
textVisible : true ,
theme : 'b' ,
html : ""
}) ;
However, I want to avoid the solution where I have to make my own <div> and toggle it separately but in synch with the $.mobile.loading( 'show/hide' , ... ) calls such as this SO suggests.
After playing with the ui-loader class in Firebug for a while, I finally gave up that approach and decided to do the fullscreen-div approach:
//-------------------------------------------------
var gvn_loader_bg_class = "jqm_loader_bg" ;
//--------------------------------------------------
function gf_jqm_loader_setup()
{
var lvo_loader = jQuery( ".ui-loader" ) ;
var lvi_loader_z = lvo_loader.css('z-index') ;
var lvs_style = "" ;
lvs_style += "position : fixed ;" ;
lvs_style += "left : 0% ;" ;
lvs_style += "top : 0% ;" ;
lvs_style += "width : 100% ;" ;
lvs_style += "height : 100% ;" ;
lvs_style += "background-color : white ;" ;
lvs_style += "opacity : .3 ;" ;
lvs_style += "display : none ;" ;
lvs_style += "z-index : " + ( lvi_loader_z - 1 ) + " ;" ;
lvo_loader.before( "<div class='" + gvn_loader_bg_class + "' style='" + lvs_style + "'></div>" ) ;
}
//-------------------------------------------------
function gf_toggle_jqm_loader( argb )
{ if( argb )
{ jQuery.mobile.loading( 'show') ;
jQuery( "." + gvn_loader_bg_class ).css( 'display' , 'block' ) ;
}
else
{ jQuery.mobile.loading( 'hide') ;
jQuery( "." + gvn_loader_bg_class ).css( 'display' , 'none' ) ;
}
}
This is my changes for jquery mobile css (Version 1.4.2) so that the loading div is filled fullscreen
.ui-loader .ui-icon-loading {
background-color: #000;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -1.375em;
margin-top: -1.375em;
width: 2.75em;
height: 2.75em;
padding: .0625em;
-webkit-border-radius: 2.25em;
border-radius: 2.25em;
}
.ui-loader-default {
background: none;
filter: Alpha(Opacity=18);
opacity: .18;
}
.ui-loader {
display: none;
z-index: 9999999;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border:0;
}