Develop Reference

Display the current position of jqGrid scrollbar

Currently I am working on a mini jqGrid project. The last requirement of the project is that whenever I change the position of scroll bar, an event should gets triggered that should print the current position of the scrollbar on console. But every time I am getting the same response on the console.
function filljQgrid(para1,para2){
var a;
var rowData;
var pos;
var scrollLength;
var gridData=para1;
var entityId=para2;
jQuery('#list').jqGrid('clearGridData');
var elementTop;
var elementBottom;
var viewportTop;
var viewportBottom;
jQuery(document).ready(function(){
var grid_selector="#list";
var pager_selector="#page";
//responsive starts
var parent_column = $(grid_selector).closest('[class*="col-"]');
//resize to fit page size
$(window).on('resize.jqGrid', function () {
$(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
})
$(document).on('settings.ace.jqGrid' , function(ev, event_name, collapsed) {
if( event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed' ) {
setTimeout(function() {
$(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
}, 20);
}
})
jQuery("#list").jqGrid({
datatype:"local",
width:"1090",
height:"50",
colNames:["ENTITY ID","RANK","ACCOUNT NAME","BENIFIT VALUE"],
colModel:[
{name:"entity_id",index:"entity_id",sortable:false,width:90,align:"center",key:true,hidden:true},
{name:"rank",index:"rank",sortable:true,sorttype:"int",width:90,align:"center"},
{name:"account_name",index:"account_name",width:90,sortable:false,align:"center"},
{name:"incentive",index:"incentive",width:90,sortable:false,align:"center"}
],
viewrecords:true,
ignoreCase:true,
scrollrows:true,
altRows:true,
});
$(window).triggerHandler('resize.jqGrid');
for(var l=0;l<gridData.length;l++)
{
jQuery("#list").jqGrid('addRowData', l+1, gridData[l]);
}
$("#list").setGridParam({sortname:'rank', sortorder: 'asc', loadComplete:function(){
jQuery('#list').jqGrid('setSelection','50147');
jQuery('#list').find('.ui-state-highlight').css('background', '#0487BD');
jQuery('#list').find('.ui-state-highlight').css('color', 'white');
a=jQuery('#list').jqGrid('getGridParam',"selrow");
rowData = jQuery('#list').jqGrid ('getRowData',a);in json format
pos=jQuery("#list").closest(".ui-jqgrid-bdiv").scrollTop();
elementTop = jQuery("#list").closest(".ui-jqgrid-bdiv").offset().top;
elementBottom = elementTop + $('a').height();
viewportTop = $("#list").scrollTop();
viewportBottom = viewportTop + $("#list").height();
}
}).trigger('reloadGrid');
//adding search begins here
jQuery("#list").jqGrid('navGrid','#ptoolbar',{del:false,add:false,edit:false,search:false});
jQuery("#list").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
//adding search ends here
//if($('a').is(':visible')){}
$(".ui-jqgrid-bdiv").scroll(function(){console.log(elementTop)});
});**strong text**
}//closing brace for filljQgrid()

After the grid is created you can bind a scroll event and see the position
Try with this code
var mygrid = $("#jqGrid")[0];
$(mygrid.grid.bDiv).scroll(function(e){
console.log(this.scrollTop);
});

Jqgrid frozen columns - can't get them to freeze unless I manually resize the grid

I have read every post I can find on Frozen columns in jqgrid. And have implemented the following code.
The result... when I go to my spreadsheet grid in my app the 3 cols are NOT frozen. BUt if I drag the little resize icon in the lower left ever so slightly then POP they 3 columns are now frozen.
Why doesn't it work when the spreadsheet is first drawn?
Here's the code:
var $grid = $("#list4");
var resizeColumnHeader = function () {
var rowHight, resizeSpanHeight,
// get the header row which contains
headerRow = $(this).closest("div.ui-jqgrid-view")
.find("table.ui-jqgrid-htable>thead>tr.ui-jqgrid-labels");
// reset column height
headerRow.find("span.ui-jqgrid-resize").each(function () {
this.style.height = '';
});
// increase the height of the resizing span
resizeSpanHeight = 'height: ' + headerRow.height() + 'px !important; cursor: col-resize;';
headerRow.find("span.ui-jqgrid-resize").each(function () {
this.style.cssText = resizeSpanHeight;
});
// set position of the dive with the column header text to the middle
rowHight = headerRow.height();
headerRow.find("div.ui-jqgrid-sortable").each(function () {
var $div = $(this);
$div.css('top', (rowHight - $div.outerHeight()) / 2 + 'px');
});
};
var fixPositionsOfFrozenDivs = function () {
var $rows;
if (this.grid === undefined) {
return;
}
if (this.grid.fbDiv !== undefined) {
$rows = $('>div>table.ui-jqgrid-btable>tbody>tr', this.grid.bDiv);
$('>table.ui-jqgrid-btable>tbody>tr', this.grid.fbDiv).each(function (i) {
var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
if ($(this).hasClass("jqgrow")) {
$(this).height(rowHight);
rowHightFrozen = $(this).height();
if (rowHight !== rowHightFrozen) {
$(this).height(rowHight + (rowHight - rowHightFrozen));
}
}
});
$(this.grid.fbDiv).height(this.grid.bDiv.clientHeight+1);
$(this.grid.fbDiv).css($(this.grid.bDiv).position());
}
if (this.grid.fhDiv !== undefined) {
$rows = $('>div>table.ui-jqgrid-htable>thead>tr', this.grid.hDiv);
$('>table.ui-jqgrid-htable>thead>tr', this.grid.fhDiv).each(function (i) {
var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
$(this).height(rowHight);
rowHightFrozen = $(this).height();
if (rowHight !== rowHightFrozen) {
$(this).height(rowHight + (rowHight - rowHightFrozen));
}
});
$(this.grid.fhDiv).height(this.grid.hDiv.clientHeight);
$(this.grid.fhDiv).css($(this.grid.hDiv).position());
}
};
var fixGboxHeight = function () {
var gviewHeight = $("#gview_" + $.jgrid.jqID(this.id)).outerHeight(),
pagerHeight = $(this.p.pager).outerHeight();
$("#gbox_" + $.jgrid.jqID(this.id)).height(gviewHeight + pagerHeight);
gviewHeight = $("#gview_" + $.jgrid.jqID(this.id)).outerHeight();
pagerHeight = $(this.p.pager).outerHeight();
$("#gbox_" + $.jgrid.jqID(this.id)).height(gviewHeight + pagerHeight);
};
$grid.jqGrid({
datatype: "local",
shrinkToFit:false,
autowidth:true,
height: 450,
hoverrows: true,
sortable: false,
colNames:[' <br> <br> <br> <br>Year',
' <br> <br> <br>Your<br>Age',
' <br> <br> <br>Spouse<br>Age',
'Your Annual<br>Job<br>Income',
'Spouse Annual<br>Job<br>Income'
colModel:[
{name:'year',index:'year', width:50, align:"center",sortable:false, sorttype:"int",classes:'spreadsheet_cell0', frozen:true},
{name:'age0',index:'age0', width:50, align:"center",sortable:false, sorttype:"int",frozen:true},
{name:'age1',index:'age1', width:50, align:"center",sortable:false, sorttype:"int",frozen:true},
{name:'salary0',index:'salary0', width:100, align:"right",sortable:false,sorttype:"float",formatter:'currency', formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 0, prefix: "$"}},
{name:'salary1',index:'salary1', width:100, align:"right",sortable:false,sorttype:"float",formatter:'currency', formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 0, prefix: "$"}}
],
multiselect: false,
rowNum:20,
rowList:[10,20],
altRows:false,
onSelectRow: function (id) {
if (id && id!=previous_row) {
previous_row=id;
}
},
loadComplete: function () {
fixPositionsOfFrozenDivs.call(this);
}
});
// ADD DATA TO THE GRID
addData();
$grid.jqGrid('gridResize', {
minWidth: 450,
stop: function () {
fixPositionsOfFrozenDivs.call(this);
fixGboxHeight.call(this);
}
});
$grid.bind("jqGridResizeStop", function () {
resizeColumnHeader.call(this);
fixPositionsOfFrozenDivs.call(this);
fixGboxHeight.call(this);
});
$(window).on("resize", function () {
// apply the fix an all grids on the page on resizing of the page
$("table.ui-jqgrid-btable").each(function () {
fixPositionsOfFrozenDivs.call(this);
//fixGboxHeight.call(this);
});
});
// after all that freeze the cols and fix the divs
resizeColumnHeader.call($grid[0]);
$grid.jqGrid('setFrozenColumns');
$grid.triggerHandler("jqGridAfterGridComplete");
fixPositionsOfFrozenDivs.call($grid[0]);

Trouble clearing object from array using buttons (jquery)

I'm attempting to move an image and data-id attribute from one section of divs, to a placeholder section of divs. I also want to be able to splice out those objects from the array when clicking the 'remove' button from either section.
It's mostly working by targeting the 'data-id' attribute and then performing the actions I want it to - but I'm running into one bug.
https://jsfiddle.net/kgmucdac/
$(document).ready(function() {
var selections = [];
var prodLength = 4;
var arrayVal = "";
$(".killThis").click(function() {
killCount();
});
$("#products").on('click', '.add', function () {
$(this).removeClass('add');
$(this).addClass('removeTop');
$(this).text("remove");
$('.remove').show();
arrayVal = ($(this).data('id'));
if (selections.length <= prodLength) {
selections.push({src: $(this).parent().find('img').attr('src'),vid: $(this).data('id')});
}
addProd();
console.table(selections);
});
$("#products").on('click', '.removeTop', function () {
arrayVal = ($(this).data('id'));
$(this).removeClass('removeTop');
$(this).addClass('add');
$(this).text("add");
nukeProd();
cleanArray();
drawProds();
});
$('#placeholders').on('click', '.remove', function () {
arrayVal = ($(this).data('id'));
console.log(arrayVal);
nukeProdReverse();
cleanArray();
tempClear();
drawProds();
})
function drawProds() {
var prods = $('#placeholders').find('.placeholder');
for (var i = 0; i < prods.length; i++) {
var prod = prods[i];
var selection = selections[i];
if ((selection != undefined)) {
$(prod).find('img').attr('src', selection.src);
$(prod).find('.remove').attr('data-id', selection.vid)
} else {
$(prod).find('img').attr({
'src': 'https://i.imgur.com/D6MQP01.png'
});
$(prod).find('.remove').css('display', 'none');
}
}
}
function addProd() {
drawProds();
}
function nukeProd() {
$('.placeholder[data-id="' + arrayVal + '"]').find('img').attr({
'src': 'https://i.imgur.com/D6MQP01.png'
});
$('.remove[data-id="' + arrayVal + '"]').attr('data-id', '');
}
function cleanArray() {
for(var i = 0; i < selections.length; i++) {
if(selections[i].vid == arrayVal) {
selections.splice(i, 1);
break;
}
}
console.table(selections);
}
function nukeProdReverse() {
$('.placeholder[data-id="' + arrayVal + '"]').find('img').attr({
'src': 'https://i.imgur.com/D6MQP01.png'
});
$('.remove[data-id="' + arrayVal + '"]').removeAttr('data-id');
$('.removeTop[data-id="' + arrayVal + '"]').text("add");
$('.removeTop[data-id="' + arrayVal + '"]').addClass('add');
$('.removeTop[data-id="' + arrayVal + '"]').removeClass('removeTop');
}
function tempClear() {
$('.remove').removeAttr('data-id');
}
function killCount() {
console.log(arrayVal);
}
});
That's my JSFiddle that I've been working on. When I add the products in any order from the top row, I can delete them using the top row's remove buttons, no issues.
However, using the bottom row's 'remove' buttons, I can only remove them all if I start from right to left (4th, 3rd, 2nd, 1st)... If I remove them in any other order, e.g., the 3rd, the one that slides into its place will not work correctly.
I think it has something to do with the index incrementation but I'm kind of at the end of my road on this in terms of what I know how to do/cobble together.

jQuery Datatables - Table with Subtable or Expandable Rows

my code just works perfectly but in a big data with lack of usability...
My table should work with 500-600 rows (updated in every 5 seconds)...
So therefore I want to make something similar:
http://i.stack.imgur.com/nPKtu.png
//Buttons added via photoshop.
I can't find this functionality #jQuery.
So I want to group data under 20/25 group header.
Each IP has 60-70 row.
2 column:
IP and FPS are the same for each group.
this is how my recent application looks like:
http://www11.pic-upload.de/03.06.14/rv6w1tboi1ip.png
so main question is: How to add Expand/collapse functionality to group of rows UNDER one main table.
and this is main part of JS code:
//მაგიდის ახლიდან დახატვა
function reDrawTable(){
"use strict";
$("table#content").dataTable({
"destroy" : true,
"ajax": "/json",
"tableTools": true,
"columnDefs": [
{
"render": function (data) {
var labelType, labelTitle;
if (data === 1) {
labelTitle = "ჩართულია";
labelType = " alert-success";
} else {
labelTitle = "გათიშულია";
labelType = " alert-danger";
}
return "<span class='label " + labelType + "'>" + labelTitle + "</span>";
},
"targets": 3
}
]
});
}
//მთავარი ფუნქცია
$(document).ready(function() {
//LastUpdate-ში ინახება ინფორმაციის განახლების დრო.
var table = $("table#content").dataTable(),
lastUpdate;
//პირველი გაშვება
$.getJSON("/json", function(data){
"use strict";
if (data.hasOwnProperty("data") === false) {
console.log("URL-ზე მონაცემები ცარიელია");
}
else {
console.log("პირველი პროცესი");
lastUpdate = data.lastUpdate;
reDrawTable();
calculateBar(data);
search();
}
});
//ყოველ 5 წამში ერთხელ ეშვება.
setInterval(function() {
"use strict";
$.getJSON("/json", function(data){
"use strict";
if (lastUpdate === data.lastUpdate) {
console.log("ახალი მონაცემები არ მოიძებნა");
} else if (data.hasOwnProperty("data") === false) {
$("table#content").dataTable({
"destroy" : true
});
console.log("მონაცემები არ იქნა მოწოდებული");
document.getElementById("success").style.width = 0 + "%";
document.getElementById("danger").style.width = 0 + "%";
} else {
reDrawTable();
search();
calculateBar(data);
lastUpdate = data.lastUpdate;
}
});
}, 5000);
} );

Solution:
Moved to Ext Js 5(new beautiful UI CRISP).
The ONLY enterprise js framework.

fancyBox v2: Custom button navigation

I have almost the same question as here: Fancybox 2: custom navigation
I need a custom navigation just like the example from fancyBox with custom buttons: http://jsfiddle.net/deseA/100/
Just that, the buttons are above the image. But when I append the menu to fancybox-inner, the links are gone when I click the next image. I tried the solution from the mentioned post, but it doesn't work. Here's my code:
$(".fancybox").fancybox({
nextEffect : 'fade',
prevEffect : 'fade',
padding : 0,
margin : [15, 15, 40, 15],
afterLoad : addLinks,
beforeClose : removeLinks
});
function addLinks() {
var list = $("#links");
if (!list.length) {
list = $('<ul id="links">');
for (var i = 0; i < this.group.length; i++) {
$('<li data-index="' + i + '"><label></label></li>')
.click(function() { $.fancybox.jumpto($(this).data('index')); })
.appendTo(list);
}
list.appendTo('.fancybox-inner');
}
list.find('li').removeClass('active').eq(this.index).addClass('active');
}
function removeLinks() {
$("#links").remove();
}

You could try to move the line list.appendTo('.fancybox-inner'); out from the if statement. So, the function addLinks() would look like this:
function addLinks() {
var list = $("#links");
if (!list.length) {
list = $('<ul id="links">');
for (var i = 0; i < this.group.length; i++) {
$('<li data-index="' + i + '"><label></label></li>')
.click(function() { $.fancybox.jumpto($(this).data('index')); })
.appendTo(list);
}
}
list.appendTo('.fancybox-inner');
list.find('li').removeClass('active').eq(this.index).addClass('active');
}