dropdown for Year not showing unless I click on each cell - javascript

I am using jqwidgets JS library and having one issue in displaying the dropdown under Year column. As can be seen in the code below, the Year column is not displaying the jqxDropdownList unless I click on it. For example, when I clicked on the first cell of Year column, it showed me the list as shown below:
Can anyone tell me what am I doing wrong here? Please find my code below:
var data = new Array();
var firstNames = [
"Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"];
var lastNames = [
"Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"];
var productNames = [
"Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"];
var priceValues = [
"2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"];
for (var i = 0; i < 10; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);
row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
row["productname"] = productNames[productindex];
row["available"] = !!(i % 2);
row["price"] = price;
row["quantity"] = quantity;
row["total"] = price * quantity;
data[i] = row;
}
var source = {
localdata: data,
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function (data) {},
loadError: function (xhr, status, error) {}
});
$("#jqxgrid").jqxGrid({
theme: 'energyblue',
width: 500,
autoheight: true,
editable: true,
source: dataAdapter,
columns: [{
text: 'Available',
datafield: 'available',
width: 100,
columntype: 'checkbox'
}, {
text: 'First Name',
datafield: 'firstname',
width: 100
}, {
text: 'Last Name',
datafield: 'lastname',
width: 100
}, {
text: 'Product',
datafield: 'productname',
width: 180
}, {
text: 'Quantity',
datafield: 'quantity',
width: 80,
cellsalign: 'right'
}, {
text: 'Unit Price',
datafield: 'price',
width: 90,
cellsalign: 'right',
cellsformat: 'c2'
},
{
text: 'Year',width: 120, columntype: 'dropdownlist', editable: true,
createeditor: function (row, column, editor) {
var list = ['2010', '2011', '2012' ,'2013','2014','2015','2016','2017','2018','2019','2020','2021'];
editor.jqxDropDownList({ autoDropDownHeight: true, source: list, selectedIndex: 0 });
}
},
{
text: 'Total',
datafield: 'total',
width: 100,
cellsalign: 'right',
cellsformat: 'c2'
}]
});
$("#jqxgrid").bind('cellendedit', function (event) {
if (event.args.value) {
$("#jqxgrid").jqxGrid('selectrow', event.args.rowindex);
}
else {
$("#jqxgrid").jqxGrid('unselectrow', event.args.rowindex);
}
});
$('#jqxbutton').click(function () {
var rows = $('#jqxgrid').jqxGrid('getrows');
//console.log(rows);
var selectedRows = rows.filter(x => x.available)
console.log(selectedRows)
//alert(rows);
});
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css" rel="stylesheet"/>
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id="jqxgrid"></div>
<input type="button" style="margin: 50px;" id="jqxbutton" value="Get rows" />
Testing cellsrenderer function based on the Muzaffer Galata'sanswer:
var data = new Array();
var firstNames = [
"Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"];
var lastNames = [
"Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"];
var productNames = [
"Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"];
var priceValues = [
"2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"];
for (var i = 0; i < 10; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);
row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
row["productname"] = productNames[productindex];
row["available"] = !!(i % 2);
row["price"] = price;
row["quantity"] = quantity;
row["total"] = price * quantity;
data[i] = row;
}
var source = {
localdata: data,
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function (data) {},
loadError: function (xhr, status, error) {}
});
var cellsRendererForCombo = function (row, columnfield, value, defaulthtml, columnproperties) {
return '<span style="position: relative; width: 100%; margin: 4px; float: ' + columnproperties.cellsalign + ';">'
+ value + '<img src="https://www.jqwidgets.com/public/jqwidgets/styles/images/icon-down.png" style="position: absolute; right: 5px;" /></span>';
}
$("#jqxgrid").jqxGrid({
theme: 'energyblue',
width: 500,
autoheight: true,
editable: true,
source: dataAdapter,
columns: [{
text: 'Available',
datafield: 'available',
width: 100,
columntype: 'checkbox'
}, {
text: 'First Name',
datafield: 'firstname',
width: 100
}, {
text: 'Last Name',
datafield: 'lastname',
width: 100
}, {
text: 'Product',
datafield: 'productname',
width: 180
}, {
text: 'Quantity',
datafield: 'quantity',
width: 80,
cellsalign: 'right'
}, {
text: 'Unit Price',
datafield: 'price',
width: 90,
cellsalign: 'right',
cellsformat: 'c2'
},
{
text: 'Year',width: 120, columntype: 'dropdownlist', editable: true,
createeditor: function (row, column, editor) {
var list = ['2010','2011','2012','2013','2014','2015','2016','2017','2018','2019','2020','2021'];
editor.jqxDropDownList({ autoDropDownHeight: true, source: list, selectedIndex: 0 });
},
cellsrenderer: cellsRendererForCombo,
},
{
text: 'Total',
datafield: 'total',
width: 100,
cellsalign: 'right',
cellsformat: 'c2'
}]
});
$("#jqxgrid").bind('cellendedit', function (event) {
if (event.args.value) {
$("#jqxgrid").jqxGrid('selectrow', event.args.rowindex);
}
else {
$("#jqxgrid").jqxGrid('unselectrow', event.args.rowindex);
}
});
$('#jqxbutton').click(function () {
var rows = $('#jqxgrid').jqxGrid('getrows');
//console.log(rows);
var selectedRows = rows.filter(x => x.available)
console.log(selectedRows)
//alert(rows);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css" rel="stylesheet"/>
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id="jqxgrid"></div>
<input type="button" style="margin: 50px;" id="jqxbutton" value="Get rows" />

You may use cellsrenderer option:
var cellsRendererForCombo = function (row, columnfield, value, defaulthtml, columnproperties) {
return '<span style="position: relative; width: 100%; margin: 4px; float: ' + columnproperties.cellsalign + ';">'
+ value + '<img src="../../Scripts/jqwidgets/styles/images/icon-down.png" style="position: absolute; right: 5px;" /></span>';
}
........
{
text: 'Year',width: 120, columntype: 'dropdownlist', editable: true,
createeditor: function (row, column, editor) {
var list = ['2010', '2011', '2012' ,'2013','2014','2015','2016','2017','2018','2019','2020','2021'];
editor.jqxDropDownList({ autoDropDownHeight: true, source: list, selectedIndex: 0 });
},
cellsrenderer: cellsRendererForCombo,
},
.......

try to use renderer function to give it UI you want
renderer: function(instance, td, row, col, prop, value, cellProperties) {
var list = ['2010', '2011', '2012' ,'2013','2014','2015','2016','2017','2018','2019','2020','2021'];
$(td).jqxDropDownList({ autoDropDownHeight: true, source: list, selectedIndex: 0 });
// or $(td).find("span").jqxDropDownList({......
return td;
}

Related

how to use dynamic title in kendo grid - jquery?

Below is my code and currently for column titles I've hard-coded the weekdays. But I need to make it dynamic and display the titles as per the date changes. How can I display the js variable 'weekdate' as the title for each column? Any help would be appreciated. Thank you!
$("#grid-report-store").kendoGrid({
noRecords: true,
dataSource: grid_data_source_store(weekstart,weekend),
sortable: true,
resizable: true,
filterable: true,
columns: [
{ field: "EmployeeId", title: "Employee Id", width: 100},
{ field: "EmployeeName", title: "Employee Name", width: 100},
{ title: "Sunday", width: 120, filterable:false, template: function(dataItem) {
var weekdate = 'Day'+moment(weekstart).add(0, 'days').format('YYYYMMDD');
return (dataItem[weekdate])?dataItem[weekdate]:'';
}},
{ title: "Monday", width: 120, filterable:false, template: function(dataItem) {
var weekdate = 'Day'+moment(weekstart).add(1, 'days').format('YYYYMMDD');
return (dataItem[weekdate])?dataItem[weekdate]:'';
}},
{ title: "Tuesday", width: 120, filterable:false, template: function(dataItem) {
var weekdate = 'Day'+moment(weekstart).add(2, 'days').format('YYYYMMDD');
return (dataItem[weekdate])?dataItem[weekdate]:'';
}},
{ title: "Wednesday", width: 120, filterable:false, template: function(dataItem) {
var weekdate = 'Day'+moment(weekstart).add(3, 'days').format('YYYYMMDD');
return (dataItem[weekdate])?dataItem[weekdate]:'';
}},
{ title: "Thursday", width: 120, filterable:false, template: function(dataItem) {
var weekdate = 'Day'+moment(weekstart).add(4, 'days').format('YYYYMMDD');
return (dataItem[weekdate])?dataItem[weekdate]:'';
}},
{ title: "Friday", width: 120, filterable:false, template: function(dataItem) {
var weekdate = 'Day'+moment(weekstart).add(5, 'days').format('YYYYMMDD');
return (dataItem[weekdate])?dataItem[weekdate]:'';
}},
{ title: "Saturday", width: 120, filterable:false, template: function(dataItem) {
var weekdate = 'Day'+moment(weekstart).add(6, 'days').format('YYYYMMDD');
return (dataItem[weekdate])?dataItem[weekdate]:'';
}},
{ field: "TotalHours", title: "Total Hours", width: 100},
{ field: "OTHours", title: "O/T Hours", width: 100},
],
dataBound: function(e) {
$(".k-group-footer").css("text-align", "right" );
$(".w").addClass("btn btn-success" );
$(".d").addClass("btn btn-danger" );
$(".p").addClass("btn btn-warning" );
$(".u").addClass("btn btn-warning" );
$(".w-o").addClass("btn btn-warning" );
kendo.ui.progress($("#grid-report-store").css('padding', '0'), false);
}
});
You can do the following:
Get the fields from the grid's datasource's options's schema's model
Map the array to your desired format (e.g. field, title, filterable, template)
Set the columns property of the grid
Take a look at this example:
var dataSource = grid_data_source_store(weekstart,weekend)
var columns = Object
.keys(dataSource.options.schema.model.fields)
.filter(function(field) {
return field !== 'EmployeeId' && field !== 'EmployeeName' && field !== 'TotalHours' && field !== 'OTHours';
})
.map(function(field) {
return {
field: field,
title: field,
width: 120,
filterable: false,
template: function(dataItem) {
var weekdate = 'Day' + moment(weekstart).add(0, 'days').format('YYYYMMDD');
return (dataItem[weekdate])?dataItem[weekdate]:'';
}
}
});
columns.unshift({ field: 'EmployeeId', title: 'Employee Id', width: 100 });
columns.unshift({ field: 'EmployeeName', title: 'Employee Name', width: 100 });
columns.push({ field: 'TotalHours', title: 'Total Hours', width: 100 });
columns.push({ field: 'OTHours', title: '"O/T Hours', width: 100 });
$("#grid-report-store").kendoGrid({
noRecords: true,
dataSource: dataSource,
sortable: true,
resizable: true,
filterable: true,
columns: columns,
dataBound: function(e) {
$(".k-group-footer").css("text-align", "right" );
$(".w").addClass("btn btn-success" );
$(".d").addClass("btn btn-danger" );
$(".p").addClass("btn btn-warning" );
$(".u").addClass("btn btn-warning" );
$(".w-o").addClass("btn btn-warning" );
kendo.ui.progress($("#grid-report-store").css('padding', '0'), false);
}
});

css styling not working properly on the div tag created on the fly

I am working on the following code below which displays a grid and display more grids on click.
Right now, when a new grid is created, as seen in the running demo below, the new grid gets created but the problem is that it's right below the original grid. I want to have some space between the original grid and the newly created grid. Here's the JSFiddle for the below code for reference
The reason some columns are showing red is because I have the following style property set here in the code:
$("<div />")
.append($("<div />", { id: "grid" + id ,style:"color: red" }))
However, if I try to apply the following css
$("<div />")
.append($("<div />", { id: "grid" + id ,style:"50px 10px 20px 30px" }))
Nothing happens. I have a feeling that I am applying it at wrong place. Please let me know where exactly it should be applied.
var source =
{
localdata: [
["https://www.samplelink.com", "Maria Anders", "Sales Representative", "Obere Str. 57", "Berlin", "Germany"],
["https://www.samplelink.com", "Ana Trujillo", "Owner", "Avda. de la Constitucin 2222", "Mxico D.F.", "Mexico"],
["https://www.samplelink.com", "Antonio Moreno", "Owner", "Mataderos 2312", "Mxico D.F.", "Mexico"],
["https://www.samplelink.com", "Thomas Hardy", "Sales Representative", "120 Hanover Sq.", "London", "UK"],
["https://www.samplelink.com", "Christina Berglund", "Order Administrator", "Berguvsvgen 8", "Lule", "Sweden"],
["https://www.samplelink.com", "Hanna Moos", "Sales Representative", "Forsterstr. 57", "Mannheim", "Germany"],
["https://www.samplelink.com", "Frdrique Citeaux", "Marketing Manager", "24, place Klber", "Strasbourg", "France"],
["https://www.samplelink.com", "Martn Sommer", "Owner", "C\/ Araquil, 67", "Madrid", "Spain"],
["https://www.samplelink.com", "Laurence Lebihan", "Owner", "12, rue des Bouchers", "Marseille", "France"],
["https://www.samplelink.com", "Elizabeth Lincoln", "Accounting Manager", "23 Tsawassen Blvd.", "Tsawassen", "Canada"],
["https://www.samplelink.com", "Victoria Ashworth", "Sales Representative", "Fauntleroy Circus", "London", "UK"],
["https://www.samplelink.com", "Patricio Simpson", "Sales Agent", "Cerrito 333", "Buenos Aires", "Argentina"],
["https://www.samplelink.com", "Francisco Chang", "Marketing Manager", "Sierras de Granada 9993", "Mxico D.F.", "Mexico"],
["https://www.samplelink.com", "Yang Wang", "Owner", "Hauptstr. 29", "Bern", "Switzerland"],
["https://www.samplelink.com", "Pedro Afonso", "Sales Associate", "Av. dos Lusadas, 23", "Sao Paulo", "Brazil"],
["https://www.samplelink.com", "Elizabeth Brown", "Sales Representative", "Berkeley Gardens 12 Brewery", "London", "UK"],
["https://www.samplelink.com", "Sven Ottlieb", "Order Administrator", "Walserweg 21", "Aachen", "Germany"],
["https://www.samplelink.com", "Janine Labrune", "Owner", "67, rue des Cinquante Otages", "Nantes", "France"],
["https://www.samplelink.com", "Ann Devon", "Sales Agent", "35 King George", "London", "UK"],
["https://www.samplelink.com", "Roland Mendel", "Sales Manager", "Kirchgasse 6", "Graz", "Austria"]
],
datafields: [
{ name: 'link', type: 'string', map: '0' },
{ name: 'ContactName', type: 'string', map: '1' },
{ name: 'Title', type: 'string', map: '2' },
{ name: 'Address', type: 'string', map: '3' },
{ name: 'City', type: 'string', map: '4' },
{ name: 'Country', type: 'string', map: '5' }
],
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source);
var cellsrenderer = function (row, column, value) {
return `<div style="color: blue">${value}</div>`;
};
$("#grid").jqxGrid(
{
width: 800,
source: dataAdapter,
columnsresize: true,
sortable: true,
columns: [
{ text: 'Link', datafield: 'link', width: 200, cellsrenderer: cellsrenderer },
{ text: 'Contact Name', datafield: 'ContactName', width: 150 },
{ text: 'Contact Title', datafield: 'Title', width: 100 },
{ text: 'Address', datafield: 'Address', width: 100 },
{ text: 'City', datafield: 'City', width: 100 },
{ text: 'Country', datafield: 'Country' }
]
});
var id = 1;
$("#grid").on("rowselect", function (e) {
$("<div />")
.append($("<div />", { id: "grid" + id ,style:"color: red" }))
.append($("<div />", { id: "button" + id }))
.appendTo(document.body);
$("#grid" + id).jqxGrid({
source: dataAdapter, columns: [
{ text: 'Link', datafield: 'link', width: 200, cellsrenderer: cellsrenderer },
{ text: 'Contact Name', datafield: 'ContactName', width: 150 },
{ text: 'Contact Title', datafield: 'Title', width: 100 },
{ text: 'Address', datafield: 'Address', width: 100 },
{ text: 'City', datafield: 'City', width: 100 },
{ text: 'Country', datafield: 'Country' }
]
});
$("#grid" + id).on('rowselect', function () {
$("<div />")
.append($("<div />", { id: "grid" + id }))
.append($("<div />", { id: "button" + id }))
.appendTo(document.body);
$("#grid" + id).jqxGrid({
source: dataAdapter, columns: [
{ text: 'Link', datafield: 'link', width: 200, cellsrenderer: cellsrenderer },
{ text: 'Contact Name', datafield: 'ContactName', width: 150 },
{ text: 'Contact Title', datafield: 'Title', width: 100 },
{ text: 'Address', datafield: 'Address', width: 100 },
{ text: 'City', datafield: 'City', width: 100 },
{ text: 'Country', datafield: 'Country' }
]
});
$("#grid" + id).on('rowselect', function () {
});
$("#button" + id).jqxButton({ value: 'Export Grid ' + id });
let currentId = id;
$("#button" + currentId).on('click', function () {
//console.log('clickin ', currentId)
$("#grid" + currentId).jqxGrid('exportdata', 'pdf', 'jqxGrid' + currentId);
});
id++;
});
$("#button" + id).jqxButton({ value: 'Export Grid ' + id });
let currentId = id;
$("#button" + currentId).on('click', function () {
//console.log('click ', currentId)
$("#grid" + currentId).jqxGrid('exportdata', 'pdf', 'jqxGrid' + currentId);
});
id++;
});
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<div id="grid">
</div>
Same way you are using a property before the value in style here :
$("<div />")
.append($("<div />", { id: "grid" + id ,style:"color: red" }))
You need to apply a property before values here :
$("<div />")
.append($("<div />", { id: "grid" + id ,style:"50px 10px 20px 30px" }))
Something like :
$("<div />")
.append($("<div />", { id: "grid" + id ,style:"padding: 50px 10px 20px 30px" }))
You need to add margin or padding in the style attribute
$("<div />")
.append($("<div />", { id: "grid" + id ,style:"50px 10px 20px 30px" }))
The way you specified style will get compiled wrong with CSS. Update the same with following code snippet.
$("<div />")
.append($("<div />", { id: "grid" + id ,style:"padding:50px 10px 20px 30px" }))
Based on your preference you can even add margin instead of padding.

Jqgrid: disable some checkbox based on JSON values

I want to disable the row and checkbox if Total Value is Les then 500K or LTV ratio is less 45%. Additionally prevent selection of disabled rows to support select all checkbox in the header of the multiselect column
FIDDLE
$("#output").jqGrid({
url: "/echo/json/",
mtype: "POST",
datatype: "json",
postData: {
json: JSON.stringify(jsonData)
},
colModel: [
/** { name: 'ClientID', label:'ClientID',width: 80, key: true },****/
{
name: 'Symbol',
width: 65,
formatter: "showlink",
formatoptions: {
baseLinkUrl: "http://www.cnn.com",
idName: "",
addParam: function(options) {
return {
bankid: options.rowData.Symbol,
timePeriod: options.rowData.ShareQuantity
};
}
}
}, {
name: 'Description',
width: 165
}, {
name: 'ShareQuantity',
align: 'right',
width: 85,
classes: "hidden-xs",
labelClasses: "hidden-xs",
formatter: 'currency',
formatoptions: {
prefix: " ",
suffix: " "
}
}, {
name: 'SharePrice',
label: 'Share Price',
align: 'right',
width: 100,
classes: "hidden-xs",
labelClasses: "hidden-xs",
template: "number",
formatoptions: {
prefix: " $",
decimalPlaces: 4
}
},
/*{ label: 'Value1',
name: 'Value1',
width: 80,
sorttype: 'number',
formatter: 'number',
align: 'right'
}, */
{
name: 'TotalValue',
label: 'Total Value',
width: 160,
sorttype: 'number',
align: "right",
formatter: 'currency',
formatoptions: {
prefix: " $",
suffix: " "
}
}, {
name: 'LTVRatio',
label: 'LTV Ratio',
width: 70,
sorttype: 'number',
align: "right",
formatter: 'percentage',
formatoptions: {
prefix: " ",
suffix: " "
}
}, {
name: 'LTVCategory',
label: 'LTV Category',
classes: "hidden-xs",
labelClasses: "hidden-xs",
width: 120,
width: 165
},
{
name: 'MaxLoanAmt',
label: 'MaxLoanAmount',
width: 165,
sorttype: 'number',
align: "right",
formatter: 'currency',
formatoptions: {
prefix: " $",
suffix: " "
}
}
],
additionalProperties: ["Num1"],
/*beforeProcessing: function (data) {
var item, i, n = data.length;
for (i = 0; i < n; i++) {
item = data[i];
item.Quantity = parseFloat($.trim(item.Quantity).replace(",", ""));
item.LTVRatio = parseFloat($.trim(item.LTVRatio *10000).replace(",", ""));
item.Value = parseFloat($.trim(item.Value).replace(",", ""));
item.Num1 = parseInt($.trim(item.Num1).replace(",", ""), 10);
item.Num2 = parseInt($.trim(item.Num2).replace(",", ""), 10);
}
}, */
iconSet: "fontAwesome",
multiselect: true,
loadonce: true,
rownumbers: true,
cmTemplate: {
autoResizable: true,
editable: true
},
autoresizeOnLoad: true,
autoResizing: {
resetWidthOrg: true,
compact: true
},
autowidth: true,
height: 'auto',
forceClientSorting: true,
sortname: "Symbol",
footerrow: true,
caption: "<b>Collateral Value</b> <span class='pull-right' style='margin-right:20px;'>Valuation as of: " + mmddyyyy + "</span>",
loadComplete: function() {
var $self = $(this),
sum = $self.jqGrid("getCol", "Price", false, "sum"),
sum1 = $self.jqGrid("getCol", "MaxLoanAmt", false, "sum");
//ltvratio = $self.jqGrid("getCol","LTVRatio:addas", "Aved Loan Amount");
$self.jqGrid("footerData", "set", {
LTVCategory: "Max Approved Loan Amount:",
Price: sum,
MaxLoanAmt: sum1
});
}
});
You can use rowattr to disable the rows:
rowattr: function (item) {
var ratio = parseInt(item.LTVRatio, 10);
if (item.TotalValue < 500000 || ratio < 45) {
return {"class": "ui-state-disabled ui-jqgrid-disablePointerEvents"};
}
}
see the modified demo https://jsfiddle.net/OlegKi/615qovew/117/

How to make Extjs 4.2 bar chart with 'pagination'

I have over 100 items (it is loaded dimamicly so it might be more in the feature) in jsonStore and want to display them using chart. Unfortunately render all features at one time will make chart unreadable. I want to display them in group of 20 items.
How to add 'pagination' mechanism? Is there a possibility to add a limit and offset to data to be rendered?
Yes.It is enough to paginatelocally / remotely the store attached to chart.
Ext.require([
'Ext.chart.*',
'Ext.Window',
'Ext.fx.target.Sprite',
'Ext.layout.container.Fit',
'Ext.window.MessageBox'
]);
Ext.onReady(function() {
window.generateData = function(n, floor) {
var data = [],
p = (Math.random() * 11) + 1,
i;
floor = (!floor && floor !== 0) ? 20 : floor;
for (i = 0; i < (n || 12); i++) {
data.push({
name: Ext.Date.monthNames[i % 12],
data1: Math.floor(Math.max((Math.random() * 100), floor)),
data2: Math.floor(Math.max((Math.random() * 100), floor)),
data3: Math.floor(Math.max((Math.random() * 100), floor)),
data4: Math.floor(Math.max((Math.random() * 100), floor)),
data5: Math.floor(Math.max((Math.random() * 100), floor)),
data6: Math.floor(Math.max((Math.random() * 100), floor)),
data7: Math.floor(Math.max((Math.random() * 100), floor)),
data8: Math.floor(Math.max((Math.random() * 100), floor)),
data9: Math.floor(Math.max((Math.random() * 100), floor))
});
}
return data;
};
window.store1 = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
data: generateData(),
pageSize: 3,
page: 0
});
window.doFilter = function() {
var k = 0,
start = store1.page * store1.pageSize;
store1.clearFilter();
if(start<0) start = 0;// add the max page test :P
store1.filter(function(r) {
return k++ >= start && k <= start + store1.pageSize;
});
}
doFilter();
var chart = Ext.create('Ext.chart.Chart', {
style: 'background:#fff',
animate: true,
shadow: true,
store: store1,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data1'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Number of Hits',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Month of the Year'
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' $');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'name',
yField: 'data1'
}]
});
var win = Ext.create('Ext.panel.Panel', {
renderTo:Ext.getBody(),
width: 500,
height: 300,
minHeight: 300,
minWidth: 550,
hidden: false,
maximizable: true,
title: 'Column Chart',
autoShow: true,
layout: 'fit',
items: chart,
tbar: [{
text: 'Prev',
handler: function() {
store1.page--;
doFilter();
}
}, {
text: 'Next',
handler: function() {
store1.page++;
doFilter();
}
}]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-debug-w-comments.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all-debug.css" rel="stylesheet" />

JQX Grid Not working in chrome

I used JQX grid widget.And through a javascript i'm populating cell values.This works good for Firefox.But not working in Chrome.Here is the code i have used.
var objCredit = jQuery.parseJSON(returnText);
document.getElementById('txtCustNumber').value = objCredit.CustomerId;
$('[id$=txtCustNumber]').text(objCredit.CustomerId);
getCustomerDetails();
document.getElementById('cmbDocType').value = '3';
***documentGridContainer.jqxGrid('setcellvalue', 0, 'Amount', objCredit.Amount);***
Here is my Grid Definition.
var source1 = { totalrecords: 5, unboundmode: true, datatype: "json",
datafields: [
{ name: 'LineId' },
{ name: 'DistCode' },
{ name: 'distFinder' },
{ name: 'DistCodeDesc' },
{ name: 'RevAccount' },
{ name: 'revAccountFinder' },
{ name: 'RevAccDesc' },
{ name: 'Amount', type: 'float' },
{ name: 'PrintComment' },
{ name: 'Comment' },
{ name: 'Discountable', type: 'string' },
{ name: 'OptionalField' },
{ name: 'optionalFieldFinder' }
],
localdata: data
};
var dataAdapter1 = new $.jqx.dataAdapter(source1);
documentGridContainer.jqxGrid(
{
width: 975,
source: dataAdapter1,
theme: '',
editable: true,
enabletooltips: true,
columnsresize: true,
autoheight: true,
selectionmode: 'singlecell',
columns: [
{ text: 'Line Number', columntype: 'textbox', datafield: 'LineId', width: 100, editable: false },
{ text: 'Dist.Code', columntype: 'textbox', datafield: 'DistCode', width: 80 },
{ text: '', datafield: 'distFinder', columntype: 'button', width: 30, resizable: false, cellsrenderer: function () { },
buttonclick: function (row) {
editrow = row;
showDocumentDistFinder(editrow);
}
},
{ text: 'Description', datafield: 'DistCodeDesc', columntype: 'textbox', width: 150, editable: false },
{ text: 'Revenue Account', datafield: 'RevAccount', columntype: 'textbox', width: 150 },
{ text: '', datafield: 'revAccountFinder', columntype: 'button', width: 30, resizable: false, cellsrenderer: function () { },
buttonclick: function (row) {
editrow = row;
showDocumentRevenueFinder(editrow);
}
},
{ text: 'Acc. Description', datafield: 'RevAccDesc', columntype: 'textbox', width: 150, editable: false },
{ text: 'Amount', datafield: 'Amount', cellsformat: 'f2', cellsalign: 'right', align: 'right', width: 80, editable: setAmountEditable() },
//{ text: 'Print Comment', datafield: 'PrintComment', width: 150 },
{text: 'Prt Comment', datafield: 'PrintComment', width: 93, columntype: 'dropdownlist',
createeditor: function (row, column, editor) {
// assign a new data source to the dropdownlist.
var list = ['Yes', 'No'];
editor.jqxDropDownList({ source: list });
},
// update the editor's value before saving it.
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.
if (newvalue == "") return oldvalue;
}
},
{ text: 'Comment', datafield: 'Comment', width: 250 },
//{ text: 'Discountable', datafield: 'Discountable', width: 100 }
{text: 'Discountable', datafield: 'Discountable', width: 93, columntype: 'dropdownlist',
createeditor: function (row, column, editor) {
// assign a new data source to the dropdownlist.
var list = ['Yes', 'No'];
editor.jqxDropDownList({ source: list });
},
// update the editor's value before saving it.
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.
if (newvalue == "") return oldvalue;
}
},
{ text: 'Optional Field', datafield: 'OptionalField', width: 100 },
{ text: '', datafield: 'optionalFieldFinder', columntype: 'button', width: 30, cellsrenderer: function () { },
buttonclick: function (row) {
editrow = row;
createDocumentOptionalFields(editrow);
$('#model-documentOptionField').modal('show');
}
}
]
});
Thanks in advance
Your initialization is incorrect. datatype: "json" in unbound mode does not make sense. You should remove that. Below is a working sample:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="../../scripts/gettheme.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var source1 = {
totalrecords: 5, unboundmode: true,
datafields: [
{ name: 'LineId' },
{ name: 'DistCode' },
{ name: 'distFinder' },
{ name: 'DistCodeDesc' },
{ name: 'RevAccount' },
{ name: 'revAccountFinder' },
{ name: 'RevAccDesc' },
{ name: 'Amount', type: 'float' },
{ name: 'PrintComment' },
{ name: 'Comment' },
{ name: 'Discountable', type: 'string' },
{ name: 'OptionalField' },
{ name: 'optionalFieldFinder' }
]
};
var dataAdapter1 = new $.jqx.dataAdapter(source1);
var documentGridContainer = $("#jqxgrid");
documentGridContainer.jqxGrid(
{
width: 975,
source: dataAdapter1,
theme: '',
editable: true,
enabletooltips: true,
columnsresize: true,
ready: function()
{
documentGridContainer.jqxGrid('setcellvalue', 0, 'Amount', 50);
},
autoheight: true,
selectionmode: 'singlecell',
columns: [
{ text: 'Line Number', columntype: 'textbox', datafield: 'LineId', width: 100, editable: false },
{ text: 'Dist.Code', columntype: 'textbox', datafield: 'DistCode', width: 80 },
{
text: '', datafield: 'distFinder', columntype: 'button', width: 30, resizable: false, cellsrenderer: function () { },
buttonclick: function (row) {
editrow = row;
showDocumentDistFinder(editrow);
}
},
{ text: 'Description', datafield: 'DistCodeDesc', columntype: 'textbox', width: 150, editable: false },
{ text: 'Revenue Account', datafield: 'RevAccount', columntype: 'textbox', width: 150 },
{
text: '', datafield: 'revAccountFinder', columntype: 'button', width: 30, resizable: false, cellsrenderer: function () { },
buttonclick: function (row) {
editrow = row;
//showDocumentRevenueFinder(editrow);
}
},
{ text: 'Acc. Description', datafield: 'RevAccDesc', columntype: 'textbox', width: 150, editable: false },
{ text: 'Amount', datafield: 'Amount', cellsformat: 'f2', cellsalign: 'right', align: 'right', width: 80, editable: true },
//{ text: 'Print Comment', datafield: 'PrintComment', width: 150 },
{
text: 'Prt Comment', datafield: 'PrintComment', width: 93, columntype: 'dropdownlist',
createeditor: function (row, column, editor) {
// assign a new data source to the dropdownlist.
var list = ['Yes', 'No'];
editor.jqxDropDownList({ source: list });
},
// update the editor's value before saving it.
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.
if (newvalue == "") return oldvalue;
}
},
{ text: 'Comment', datafield: 'Comment', width: 250 },
//{ text: 'Discountable', datafield: 'Discountable', width: 100 }
{
text: 'Discountable', datafield: 'Discountable', width: 93, columntype: 'dropdownlist',
createeditor: function (row, column, editor) {
// assign a new data source to the dropdownlist.
var list = ['Yes', 'No'];
editor.jqxDropDownList({ source: list });
},
// update the editor's value before saving it.
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.
if (newvalue == "") return oldvalue;
}
},
{ text: 'Optional Field', datafield: 'OptionalField', width: 100 },
{
text: '', datafield: 'optionalFieldFinder', columntype: 'button', width: 30, cellsrenderer: function () { },
buttonclick: function (row) {
editrow = row;
createDocumentOptionalFields(editrow);
$('#model-documentOptionField').modal('show');
}
}
]
});
});
</script>
</head>
<body class='default'>
<div id='jqxWidget'>
<div id="jqxgrid">
</div>
</div>
</body>
</html>

Categories