Related
How can I set different min and max values for each category (Adults Children Bedrooms)
$.fn.NCS = function(options) {
$input = $(this);
$originalPlaceholder = $input.attr("placeholder");
var settings = $.extend({
// Defaults.
categoryNames: ["Adults", "Children", "Bedrooms"],
categoryValues: false,
minValue: 0,
maxValue: 10,
closeOnOutsideClick: true,
showText: true,
delimiter: ", ",
align: "left",
fade: true,
useDisplay: true,
showZero: false,
callback: function(values) {}
}, options);
After seeing the code I think you're using the NumberCategorySelector Jquery plugin, (which you should've specified instead of php)
A solution would be passing an array
var settings = $.extend({
// Defaults.
categoryNames: ["Adults", "Children"],
categoryValues: false,
minValue: 0,
maxValue: [10,20,30],
closeOnOutsideClick: true,
showText: true,
delimiter: ", ",
align: "left",
fade: true,
useDisplay: true,
showZero: false,
callback: function(values){}
}, options);
then use the settings.Maxvalue as an array :
$category = $(this).attr("category");
if (settings.categoryValues[$category] <settings.maxValue[$category]) {
///etc
}
Jsfiddle
I have the following function:
var handsonTableHandler = (function () {
var container = document.getElementById('WebGrid');
var hot = "";
var init = function () {
//container is null here, why?
Handsontable.renderers.registerRenderer('dataStyling', dataStyling);
hot = new Handsontable(container, {
startRows: 18,
startCols: 24,
autoWrapRow: true,
width: 1400,
height: 441,
rowHeaders: true,
colHeaders: true,
outsideClickDeselects: false,
search: true,
manualColumnResize: true,
stretchH: "all",
afterChange: function (source, changes) {},
cells: function (row, col, prop) {
var cellProperties = {};
cellProperties.renderer = "dataStyling"; // uses lookup map
cellProperties;
}
});
}
}
$(document).ready(function() {
handsonTableHandler.init();
});
I want the container and hot variable to be accessible through the whole function, thus, in the init function and other functions that are defined here.
As you can see, I'm getting the element for with the Id WebGrid. But in the init-function, it's null. Why is this?
If it was not accessable in the inner function, it would be "Undefined" instead of "Null", therefore it is accessable
you did
var container = document.getElementById('WebGrid');
but document.getElementById(...) returns Null if the element does not exist, therefore there mustnt have been an element with the id of WebGrid
Try in the console and type
document.getElementById('WebGrid')
if it returns null, then there was no element in the first place
now change your code to:
$(document).ready(function() {
var handsonTableHandler = (function () {
var container = document.getElementById('WebGrid');
var hot = "";
var init = function () {
//container is null here, why?
Handsontable.renderers.registerRenderer('dataStyling', dataStyling);
hot = new Handsontable(container, {
startRows: 18,
startCols: 24,
autoWrapRow: true,
width: 1400,
height: 441,
rowHeaders: true,
colHeaders: true,
outsideClickDeselects: false,
search: true,
manualColumnResize: true,
stretchH: "all",
afterChange: function (source, changes) {},
cells: function (row, col, prop) {
var cellProperties = {};
cellProperties.renderer = "dataStyling"; // uses lookup map
cellProperties;
}
});
};
})();
handsonTableHandler.init();
});
The only to fix this, is to assign the DOM element to container in init, like this:
var handsonTableHandler = (function () {
var container,
hot;
var init = function () {
container = document.getElementById('WebGrid');
//container is null here, why?
Handsontable.renderers.registerRenderer('dataStyling', dataStyling);
hot = new Handsontable(container, {
startRows: 18,
startCols: 24,
autoWrapRow: true,
width: 1400,
height: 441,
rowHeaders: true,
colHeaders: true,
outsideClickDeselects: false,
search: true,
manualColumnResize: true,
stretchH: "all",
afterChange: function (source, changes) {},
cells: function (row, col, prop) {
var cellProperties = {};
cellProperties.renderer = "dataStyling"; // uses lookup map
cellProperties;
}
});
}
})()
You can change you function to create handler with new syntax and get access to .init function
let handsonTableHandler = function () {
this.container = document.getElementById('WebGrid');
this.hot = "";
this.init = function () {
console.log('container', this.container);
Handsontable.renderers.registerRenderer('dataStyling', dataStyling);
this.hot = new Handsontable(this.container, {
startRows: 18,
startCols: 24,
autoWrapRow: true,
width: 1400,
height: 441,
rowHeaders: true,
colHeaders: true,
outsideClickDeselects: false,
search: true,
manualColumnResize: true,
stretchH: "all",
afterChange: function (source, changes) {},
cells: function (row, col, prop) {
var cellProperties = {};
cellProperties.renderer = "dataStyling"; // uses lookup map
cellProperties;
}
});
}
}
let handler = new handsonTableHandler();
$(document).ready(function() {
handler.init(); // output: container not null
});
to me it seems you are not running the function so the closure is never created, I added a few parenthesis, this should create the closure:
var handsonTableHandler = function () {
var container = document.getElementById('WebGrid');
var hot = "";
var init = function () {
//container is null here, why?
Handsontable.renderers.registerRenderer('dataStyling', dataStyling);
hot = new Handsontable(container, {
startRows: 18,
startCols: 24,
autoWrapRow: true,
width: 1400,
height: 441,
rowHeaders: true,
colHeaders: true,
outsideClickDeselects: false,
search: true,
manualColumnResize: true,
stretchH: "all",
afterChange: function (source, changes) {},
cells: function (row, col, prop) {
var cellProperties = {};
cellProperties.renderer = "dataStyling"; // uses lookup map
cellProperties;
}
});
}
return {init: init}
};
$(document).ready(function() {
handsonTableHandler().init();
});
I need this for angular gridster when I add new item so I know the dimension of the new element I'm adding (when there is no space for current element), but to simplify lets assume that I have 2 dimension array with value true or false and I want to search the first free space in array to find position x,y and width,height of free space. So far I have this:
var array = [
[false, false, false, false, false, false],
[false, false, false, false, false, false],
[false, false, false, false, false, false],
[false, false, false, true, true, true],
[false, false, false, true, true, true]
];
var place = {};
loop:
for (var i=0; i<array.length; i++) {
for (var j=0; j<array[i].length; j++) {
if (array[i][j] && !place.x && !place.y) {
place.x = j;
place.y = i;
place.width = 0;
place.height = 0;
for (var y=i; y<array.length; y++) {
for (var x=j; x<array[y].length; x++) {
if (array[y][x]) {
place.width = x - j + 1;
place.height = y - i + 1;
}
}
}
break loop;
}
}
}
console.log(place);
but this will fail for array like this:
var array = [
[false, false, false, false, false],
[false, false, false, false, false],
[false, false, false, false, false],
[true, true, false, true, true],
[true, true, false, true, true]
];
How can I fix my code to make it work for array like this? The result should be:
{x:0, y:3, width: 2, height: 2}
Here's another option. I tried to divide the problem in smaller ones:
Find the first true element in the matrix
From there, find the number of true elements adjacent to 1
Here's the fiddle and here's the code. Hope it helps.
function findCoords(matrix) {
for (var row = 0; row < matrix.length; row++) {
for (var col = 0; col < matrix[row].length; col++) {
if (matrix[row][col]) {
return createCoordsObj(row, col, matrix);
}
}
}
return null;
}
function createCoordsObj(row, col, matrix) {
return {
x: col,
y: row,
width: find('width', row, col, matrix),
height: find('height', row, col, matrix)
};
}
function find(type, row, col, matrix) {
var res = 0;
while (matrix[row] && matrix[row][col]) { // will finish when element in matrix is false || undefined
res += 1;
col += type === 'width' ? 1 : 0;
row += type === 'width' ? 0 : 1;
}
return res;
}
console.log(findCoords([
[false, false, false, false, false],
[false, false, false, false, false],
[false, false, false, false, false],
[true, true, false, true, true],
[true, true, false, true, true]
]));
I guess you might do as follows; It will return you the x and y coordinates of the upper left corner along with the width and height of the free opening. If there is no opening (all false) you will be returned a false.
var array = [
[false, false, false, false, false],
[false, false, false, false, false],
[false, false, true, true, true],
[false, false, true, true, true],
[false, false, true, true, true]
],
emptyXY = (a) => { var x,
y = a.findIndex(row => (x = row.findIndex(col => col), x !== -1));
w = 0,
h = 0;
while (a[y] && a[y][x+w]) w++;
while (a[y+h] && a[y+h][x]) h++;
return !!~y && {x:x,y:y,width:w,height:h};
};
console.log(emptyXY(array));
I have applied custome scrollbar to div "ui-jqgrid-bdiv",sorting is not working of jqgrid.Without custom scrollbar sorting is working fine.After applying custom scrollbar,after clicking on column it is giving blank grid.
CODE:-
$(window).load(function(){
$(".FilterContainer,.ui-jqgrid-bdiv").mCustomScrollbar({
scrollButtons:{enable:true},
theme:"light-thick"
});
});
jQuery(gridOption).jqGrid({
data: applyBestMachineData,
datatype: "local",
colNames:[displayName,'', 'kA$','%','kA$','%','kA$','%'],
colModel:[
{name:'machineBestMachine',index:'machineBestMachine',width:350, sortable: false,classes: "machineBestMachinecol"},
{name:'machineValue',index:'machineValue', width:60,sortable: false, classes: "machineValue"},
{name:'applyBestMachineValue',index:'applyBestMachineValue', width:75,sortable: true, classes: "col2",sorttype:"text"},
{name:'applyBestMachinePer',index:'applyBestMachinePer', width:75, align:"center", sortable: true,classes: "col1",sorttype:"text"},
{name:'applyBestMachineOperation',index:'applyBestMachineOperation', width:65, align:"center",sortable: true, classes: "col2",sorttype:"text"},
{name:'applyBestMachineOperationPer',index:'applyBestMachineOperationPer', width:65,align:"right", sortable: false,classes: "col1"},
{name:'applyBothValue',applyBothValue:'applyBothValue', width:65,sortable: false, classes: "col2"},
{name:'applyBothPer',index:'applyBothPer', width:65,sortable: false, classes: "col1"}
],
rowNum:2000,
rowTotal: 2000,
scroll:1,
loadonce:true,
mtype: "GET",
rownumWidth: 40,
gridview: true,
autowidth: true,
height:gridHeight,
//sortable: false,
viewrecords: true,
onSelectRow: function(id) {
var rowData = jQuery(this).getRowData(id);
var machineBestMachineVar = rowData['machineBestMachine'];
var machineBestMachineValue = machineBestMachineVar.split('<');
openEvaluationItemDetailPopUp(machineBestMachineValue[0]);
},
loadComplete: function() {
//alert(this);
$(gridOption+" tr:even").addClass('myAltRowClassEven');
$(gridOption+" tr:odd").addClass('myAltRowClassOdd');
// $("#applyMachineGrid tr:even").addClass('myAltRowClassEven');
// $("#applyMachineGrid tr:odd").addClass('myAltRowClassOdd');
}
});
I got answer:-
Just remove scroll=1 property
Grid cant load data from servlete and page navigation not work but when make "loadonce:false" grid load but not page navigation wrok -
jQuery("#list").jqGrid({
url:'JQGridServlet?action=fetchData',
datatype: "xml",
height: 550 ,
width:840, // 'B2C' 'AD''AC'
colNames:['srNo','DNO','C_Id','Customer_Name','FR','PA','mty','Act','Location','Detail_Address'],
colModel:[
// {name:'act1',index:'act1', width:20,sortable:false},
{name:'srNo',index:'srNo', width:35,sortable:true,editable:false,hidden:true},
// {name:'delboy',index:'delboy', width:35,sortable:true,editable:false},
{name:'DNO',index:'DNO', width:33,sortable:true,editable:false,editoptions: { readonly: 'readonly' },focus:false},
{name:'FR',index:'FR', width:25,sortable:false,editable:true,editrules:{number:true}},
{name:'PA',index:'PA', width:25,sortable:false,editable:true,editrules:{edithidden:true,number:true}},
{name:'mty',index:'mty', width:25,sortable:false,editable:true,editrules:{edithidden:true,number:true}},
{name:'act',index:'act', width:13,sortable:false},
{name:'Location',index:'Location', width:50,sortable:false},
{name:'Detail_Address',index:'Detail_Address',width:150,sortable:false
}
],
paging: true,
rowNum:50,
rowList:[50,100,150],
pager: $("#page"),
sortname: 'DNO',
sortorder: 'asc',
sortable: true,
footerrow: true,
userDataOnFooter: true,
//loadonce:true,
viewrecords:true,
gridview: true,
altRows : true,
onSelectRow : function(id)
{
if (id && id !== lastsel)
{
// alert(parseInt(id)+1);
DNO = $('#list').getCell(id,'DNO');
jQuery("#list").jqGrid('setGridParam',{editurl: 'JQGridServlet?action=Edit&DNO='+DNO});
jQuery('#list').saveRow(lastsel, true, 'clientArray');
jQuery('#list').editRow(id, true, null, null);
jQuery("#list").jqGrid('restoreRow',lastsel);
lastsel = id;
}
},
//MY servelet code:
if (request.getParameter("action").equals("fetchData"))
{
System.out.println("in fetchData");
}
but not go in side that action when "loadonce:true".
please any body suggest to how to solve this problem.