I'm using free-jqgrid v.4.15.4
I want to format number while type in inline edit mode.
I'm using Inputmask, a product of RobinHerbots, to make this.
It works well with jqgrid v.4.6.0 but not with free-jqgrid.
So what would I do to fix this?
This is 2 jsfiddle:
Jqgrid v.4.6.0: demo with jqgrid and
Free-jqgrid v.4.15.4: demo with free-jqgrid
var mydata = [{
name: "Toronto",
country: "Canada",
continent: "North America",
quantity: 1200000
}, {
name: "New York City",
country: "USA",
continent: "North America",
quantity: 2200000
}, {
name: "Silicon Valley",
country: "USA",
continent: "North America",
quantity: 3200000
}, {
name: "Paris",
country: "France",
continent: "Europe",
quantity: 4200000
}]
$("#grid").jqGrid({
data: mydata,
datatype: "local",
colNames: ["Name", "Country", "Continent","Quantity"],
colModel: [{
name: 'name',
index: 'name',
editable: true,
}, {
name: 'country',
index: 'country',
editable: true,
}, {
name: 'continent',
index: 'continent',
editable: true,
},{
name: 'quantity',
index: 'quantity',
editable: true,
formatter:'number',
formatoptions:{decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2}
}],
pager: '#pager',
'cellEdit': true,
afterEditCell: function (rowid, cellname, value, iRow, iCol) {
$('#' + rowid + '_quantity').inputmask("decimal", {
radixPoint: '.',
groupSeparator: ',',
digits: 2,
autoGroup: true,
rightAlign: false,
clearMaskOnLostFocus: false
});
},
'cellsubmit' : 'clientArray',
editurl: 'clientArray'
});
The reason is easy: you used rowid instead of iRow. The fixed code will be
afterEditCell: function (rowid, cellname, value, iRow, iCol) {
$('#' + iRow + '_' + cellname).inputmask("decimal", {
radixPoint: '.',
groupSeparator: ',',
digits: 2,
autoGroup: true,
rightAlign: false,
clearMaskOnLostFocus: false
});
}
See http://jsfiddle.net/OlegKi/6yc28po5/14/
Hi i have the following table to generate a json dataset
it has the following data i have script teh table
USE [GridSamples]
GO
/****** Object: Table [dbo].[SalesStats] Script Date: 12/13/2016 07:34:51 PM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[SalesStats](
[id] [int] IDENTITY(1,1) NOT NULL,
[makes] [nchar](10) NOT NULL,
[models] [nchar](10) NOT NULL,
[fuelusagecity] [nchar](10) NOT NULL,
[fuelusagehwy] [nchar](10) NOT NULL,
[salesaboveavg] [bit] NOT NULL,
[totalnumofsales] [money] NOT NULL,
[highsalestext] [varchar](50) NULL,
[saledate] [date] NOT NULL,
CONSTRAINT [PK_SalesStats] PRIMARY KEY CLUSTERED
(
[id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
SET ANSI_PADDING OFF
GO
SET IDENTITY_INSERT [dbo].[SalesStats] ON
GO
INSERT [dbo].[SalesStats] ([id], [makes], [models], [fuelusagecity], [fuelusagehwy], [salesaboveavg], [totalnumofsales], [highsalestext], [saledate]) VALUES (1, N'toyota ', N'corolla ', N'17 ', N'12 ', 0, 120000.0000, NULL, CAST(0x9A330B00 AS Date))
GO
INSERT [dbo].[SalesStats] ([id], [makes], [models], [fuelusagecity], [fuelusagehwy], [salesaboveavg], [totalnumofsales], [highsalestext], [saledate]) VALUES (2, N'toyota ', N'corolla ', N'10 ', N'14 ', 0, 100000.0000, N'HIGH', CAST(0xA8330B00 AS Date))
GO
INSERT [dbo].[SalesStats] ([id], [makes], [models], [fuelusagecity], [fuelusagehwy], [salesaboveavg], [totalnumofsales], [highsalestext], [saledate]) VALUES (3, N'toyota ', N'belta ', N'15 ', N'10 ', 1, 200000.0000, NULL, CAST(0xC2330B00 AS Date))
GO
INSERT [dbo].[SalesStats] ([id], [makes], [models], [fuelusagecity], [fuelusagehwy], [salesaboveavg], [totalnumofsales], [highsalestext], [saledate]) VALUES (4, N'toyota ', N'camry ', N'13 ', N'10 ', 0, 300000.0000, N'HIGH', CAST(0x29340B00 AS Date))
GO
INSERT [dbo].[SalesStats] ([id], [makes], [models], [fuelusagecity], [fuelusagehwy], [salesaboveavg], [totalnumofsales], [highsalestext], [saledate]) VALUES (5, N'nissan ', N'skyline ', N'14 ', N'9 ', 1, 500000.0000, N'HIGH', CAST(0x48330B00 AS Date))
GO
INSERT [dbo].[SalesStats] ([id], [makes], [models], [fuelusagecity], [fuelusagehwy], [salesaboveavg], [totalnumofsales], [highsalestext], [saledate]) VALUES (6, N'nissan ', N'zx300 ', N'10 ', N'8 ', 0, 400000.0000, NULL, CAST(0x2B350B00 AS Date))
GO
SET IDENTITY_INSERT [dbo].[SalesStats] OFF
GO
In my middle tier ASP MVC the controller converts this to the the following json (UPADATED TO HAVE A STRING SalesDate)
var data = [{"id":1,"make":"toyota","model":"corolla","fuelusagecity":"17","fuelusagehwy":"12","salesaboveavg":false,"totalnumberofsales":120000.0000,"highsalestext":null,"salesdate":"2010-12-01"},{"id":2,"make":"toyota","model":"corolla","fuelusagecity":"10","fuelusagehwy":"14","salesaboveavg":false,"totalnumberofsales":100000.0000,"highsalestext":"HIGH","salesdate":"2010-12-15"},{"id":3,"make":"toyota","model":"belta","fuelusagecity":"15","fuelusagehwy":"10","salesaboveavg":true,"totalnumberofsales":200000.0000,"highsalestext":null,"salesdate":"2011-01-10"},{"id":4,"make":"toyota","model":"camry","fuelusagecity":"13","fuelusagehwy":"10","salesaboveavg":false,"totalnumberofsales":300000.0000,"highsalestext":"HIGH","salesdate":"2011-04-23"},{"id":5,"make":"nissan","model":"skyline","fuelusagecity":"14","fuelusagehwy":"9","salesaboveavg":true,"totalnumberofsales":500000.0000,"highsalestext":"HIGH","salesdate":"2010-09-10"},{"id":6,"make":"nissan","model":"zx300","fuelusagecity":"10","fuelusagehwy":"8","salesaboveavg":false,"totalnumberofsales":400000.0000,"highsalestext":null,"salesdate":"2012-01-06"}];
i have used the following code to generate the grid using JqGrid free-grid. for easiness i have added the above json array to the data array
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/south-street/jquery-ui.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/free-jqgrid/4.13.5/css/ui.jqgrid.min.css" />
</head>
<body>
<table id="list483"></table>
<div id=""></div>
<!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!--<script src="https://cdn.jsdelivr.net/free-jqgrid/4.13.5/js/i18n/grid.locale-de.min.js"></script>-->
<script src="https://cdn.jsdelivr.net/free-jqgrid/4.13.5/js/jquery.jqgrid.min.js"></script>
<script>
var data = [{"id":1,"make":"toyota","model":"corolla","fuelusagecity":"17","fuelusagehwy":"12","salesaboveavg":false,"totalnumberofsales":120000.0000,"highsalestext":null,"salesdate":"2010-12-01"},{"id":2,"make":"toyota","model":"corolla","fuelusagecity":"10","fuelusagehwy":"14","salesaboveavg":false,"totalnumberofsales":100000.0000,"highsalestext":"HIGH","salesdate":"2010-12-15"},{"id":3,"make":"toyota","model":"belta","fuelusagecity":"15","fuelusagehwy":"10","salesaboveavg":true,"totalnumberofsales":200000.0000,"highsalestext":null,"salesdate":"2011-01-10"},{"id":4,"make":"toyota","model":"camry","fuelusagecity":"13","fuelusagehwy":"10","salesaboveavg":false,"totalnumberofsales":300000.0000,"highsalestext":"HIGH","salesdate":"2011-04-23"},{"id":5,"make":"nissan","model":"skyline","fuelusagecity":"14","fuelusagehwy":"9","salesaboveavg":true,"totalnumberofsales":500000.0000,"highsalestext":"HIGH","salesdate":"2010-09-10"},{"id":6,"make":"nissan","model":"zx300","fuelusagecity":"10","fuelusagehwy":"8","salesaboveavg":false,"totalnumberofsales":400000.0000,"highsalestext":null,"salesdate":"2012-01-06"}];
$("#list483").jqGrid("jqPivot",
data,
{
frozenStaticCols: true,
xDimension: [
{/*x0*/ dataName: "make", width: 200, label: "Make" },
{/*x1*/ dataName: "model", skipGrouping: true },
{/*x2*/ dataName: "fuelusagecity", hidden: true, skipGrouping: true },
{/*x3*/ dataName: "fuelusagehwy", width: 80, align: "center",
label: "fuel consumption", skipGrouping: true,
formatter: function (cellvalue, options, rowObject) {
return rowObject.x2 === null || rowObject.x3 === null ?
"-" :
String(rowObject.x2) + "-" + String(cellvalue);
}
},
{/*x4*/ dataName: "salesaboveavg", hidden: true, width: 50, align: "center", skipGrouping: true },
{/*x5*/ dataName: "highsalestext", hidden: true, skipGrouping: true }
],
yDimension: [
{/*y0*/ dataName: "salesdate",
sorttype: "date",
formatter: function (cellvalue, options, rowObject) {
//var x = rawObject.y0;
console.log(rowObject);
// return rowObject;
}
}],
aggregates: [{
member: "totalnumberofsales",
aggregator: "max"
}]
},
// grid options
{
iconSet: "fontAwesome",
cmTemplate: { autoResizable: true, width: 90 },
shrinkToFit: false,
useUnformattedDataForCellAttr: false,
autoResizing: { compact: true },
groupingView: {
groupField: ["x0"],
groupColumnShow: [false],
groupText: ['<b>{0}</b>']
},
width: 450,
pager: true,
rowNum: 20,
rowList: [5, 10, 20, 100, "10000:All"],
caption: "<b>Car sales statistics</b>"
}
);
</script>
</body>
</html>
the generated grid is shown below image link
i have so many questions relating to this grid. but i will post them one by one as answers progresses. But for now the following questions to start off with:
when i turned on teh grouping what happened to teh collapse icon image that should appear behind the group name? SOLVED: i have found the answer to this question, the missing font-awesome library caused the issue
How do i convert the json dates in teh dates columns and display them in actual dates?SOLVED:This issue was solved once i made the conversion in the middle tier to return saledate a string value
The Grid has two entries on the Toyota Corolla but this should be one entry and in that entry, totalnumofsales values should be placed on the two matching dates. AKA in a single row entry to toyota corolla 120000 in 2010-12-01 cell and 100000 in 2010-12-15
also teh fuel consuption value must be the first row value i.e. 10-14
for the cell that don't have values shows 0.00 instead of showing 0.00 i need them to display an empty cell
How do i turn off the automatic sorting of the grid becuase when grid is generated the groups names are sorted in the alphabetical order but i dont wont grid to sort them, instead keep their original order that comes from the backend
how do i acheive the above?
I think origin of your question are some common misunderstanding what is pivot table and how one can use it. I try to explain all below in details on an example of your input data.
You use the following input data:
[{
"id": 1,
"make": "toyota",
"model": "corolla",
"fuelusagecity": "17",
"fuelusagehwy": "12",
"salesaboveavg": false,
"totalnumberofsales": 120000.0000,
"highsalestext": null,
"salesdate": "2010-12-01"
}, {
"id": 2,
"make": "toyota",
"model": "corolla",
"fuelusagecity": "10",
"fuelusagehwy": "14",
"salesaboveavg": false,
"totalnumberofsales": 100000.0000,
"highsalestext": "HIGH",
"salesdate": "2010-12-15"
}, {
"id": 3,
"make": "toyota",
"model": "belta",
"fuelusagecity": "15",
"fuelusagehwy": "10",
"salesaboveavg": true,
"totalnumberofsales": 200000.0000,
"highsalestext": null,
"salesdate": "2011-01-10"
}, {
"id": 4,
"make": "toyota",
"model": "camry",
"fuelusagecity": "13",
"fuelusagehwy": "10",
"salesaboveavg": false,
"totalnumberofsales": 300000.0000,
"highsalestext": "HIGH",
"salesdate": "2011-04-23"
}, {
"id": 5,
"make": "nissan",
"model": "skyline",
"fuelusagecity": "14",
"fuelusagehwy": "9",
"salesaboveavg": true,
"totalnumberofsales": 500000.0000,
"highsalestext": "HIGH",
"salesdate": "2010-09-10"
}, {
"id": 6,
"make": "nissan",
"model": "zx300",
"fuelusagecity": "10",
"fuelusagehwy": "8",
"salesaboveavg": false,
"totalnumberofsales": 400000.0000,
"highsalestext": null,
"salesdate": "2012-01-06"
}]
Every item of data have many properties. Some properties contains different (or even unique) values (like id). Other properties should be grouped together and calculate some aggregation function on another properties on every item inside of the group. I explain the above statement on an example.
The input data contains sale information of some car models. It could be interesting, for example, to display the number of sales of every car model by date or by year etc.
Pivot tables contains three main parameters xDimension, yDimension and aggregates. For example, look at the following picture below
The left part (markt in orange) represents xDimension (make and model). It build mostly the rows of the grid. The right part (marked in blue) represents yDimension (year and month of the input items). The lowest level of the information on the right size contains the result of calculation of aggregate functions (max and count) on some input property (it was totalnumberofsales in the example).
If one defined only one aggregate function inside of aggregates parameter, then the name of aggregate function will be not displayed:
Now I have to display what jqPivot do to create jqGrid. First of all it scan all input data by all X and by Y parameters. If you define for example the following pivot model
xDimension: [
{ dataName: "make", width: 100, label: "Make" },
{ dataName: "model", width: 100, label: "Model", align: "center" }
],
yDimension: [
{ dataName: "salesdate", sortorder: "desc" }
],
aggregates: [
{ member: "totalnumberofsales", aggregator: "max" }
]
then all data will be first scanned for the items having the same ["make", "model"] values in xDimension and by ["salesdate"] in yDimension. The input data has 6 elements with the indexes from 0 till 5. The resulting xIndexes and yIndexes contains unique values by x and y and the indexes of source data (from 0 till 5) to the items, which has the data. One can add the following lines after jqPivot call to see the indexes:
var p = $("#list483").jqGrid("getGridParam");
console.log(JSON.stringify(p.pivotOptions.xIndex));
console.log(JSON.stringify(p.pivotOptions.yIndex));
As the result one will see the demo https://jsfiddle.net/oadzsnov/. I include the resulting xIndex and yIndex below. xIndex is
{
"items": [
["toyota", "corolla"],
["toyota", "belta"],
["toyota", "camry"],
["nissan", "skyline"],
["nissan", "zx300"]
],
"indexesOfSourceData": [
[0, 1],
[2],
[3],
[4],
[5]
],
"trimByCollect": true,
"caseSensitive": false,
"skipSort": true,
"fieldLength": 2,
"fieldNames": ["make", "model"],
"fieldSortDirection": [1, 1],
"fieldCompare": [null, null]
}
yIndex is
{
"items": [
["2012-01-06"],
["2011-04-23"],
["2011-01-10"],
["2010-12-15"],
["2010-12-01"],
["2010-09-10"]
],
"indexesOfSourceData": [
[5],
[3],
[2],
[1],
[0],
[4]
],
"trimByCollect": true,
"caseSensitive": false,
"skipSort": false,
"fieldLength": 1,
"fieldNames": ["salesdate"],
"fieldSortDirection": [-1],
"fieldCompare": [null]
}
The xIndex.items build the rows of the resulting pivot table and yIndex build the columns. You can see that the rows will be
["toyota", "corolla"],
["toyota", "belta"],
["toyota", "camry"],
["nissan", "skyline"],
["nissan", "zx300"]
and the columns:
["2012-01-06"],
["2011-04-23"],
["2011-01-10"],
["2010-12-15"],
["2010-12-01"],
["2010-09-10"]
One can see additionally that 2 elements of source data (see xIndex.indexesOfSourceData, which is [0, 1]) xIndex.items corresponds the same x-vector ["toyota", "corolla"]. The content of the pivot table (see yellow marked data on the first picture) will be the result of executing the specified aggregate function. We used
aggregates: [
{ member: "totalnumberofsales", aggregator: "max" }
]
and the source elements with the index 0 and 1 are
[{
...
"make": "toyota",
"model": "corolla",
...
"totalnumberofsales": 120000.0000,
...
"salesdate": "2010-12-01"
}, {
...
"make": "toyota",
"model": "corolla",
...
"totalnumberofsales": 100000.0000,
...
"salesdate": "2010-12-15"
}
The items have different y-vectors ("salesdate": "2010-12-01" for the first item and "salesdate": "2010-12-15" for the second one). Thus the calculation of aggregates will be very simple: 120000 in the column "2010-12-01", 100000 in the column "2010-12-15" and 0 for all other dates, because there are no ["toyota", "corolla"] sales at the day:
If you would assign separate salesYear and salesMonth properties based on the salesdate, then you can use
xDimension: [
{ dataName: "make", width: 100, label: "Make" },
{ dataName: "model", width: 100, label: "Model", align: "center" }
],
yDimension: [
{ dataName: "salesYear", sorttype: "integer" },
{ dataName: "salesMonth", sorttype: "integer" }
],
aggregates: [{
member: "totalnumberofsales",
aggregator: "max"
}]
to create the pivot table. Both first source items has the same salesdate ("2010-12-15" and "2010-12-15"). The calculation of max aggregater over the both items get 120000, which one will see in the resulting grid
see https://jsfiddle.net/fa40onkz/
If you could follow me till the place, then you could understand any from effect, which you could see in the resulting pivot table.
For example, it's wrong to use
{/*x2*/ dataName: "fuelusagecity", hidden: true, skipGrouping: true },
{/*x3*/ dataName: "fuelusagehwy", width: 80, align: "center",
label: "fuel consumption", skipGrouping: true,
formatter: function (cellvalue, options, rowObject) {
return rowObject.x2 === null || rowObject.x3 === null ?
"-" :
String(rowObject.x2) + "-" + String(cellvalue);
}
},
{/*x4*/ dataName: "salesaboveavg", hidden: true, width: 50, align: "center", skipGrouping: true },
{/*x5*/ dataName: "highsalestext", hidden: true, skipGrouping: true }
in option of jqPivot, because two ["toyota", "corolla"] source items have different fuelusagecity, fuelusagehwy and highsalestext values. The salesaboveavg value is the same, but I suppose the usage of salesaboveavg is the same error. You should remove the items from xDimension.
To display empty cell in the cells with 0 value you can define column template
var myIntTemplate = {
formatter: "currency",
align: "right", sorttype: "number",
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"] },
formatoptions: { defaultValue: ""}};
and to use it in aggregates:
aggregates: [{
member: "cellvalue",
template: myIntTemplate,
aggregator: "max"
}]
You will get the results like
like on the demo https://jsfiddle.net/tnr2dgkv/
Your last question was about sorting. Sorting of source items is extremely important to create correct pivot table. You can use skipSortByX: true or/and skipSortByY: true options of jqPivot to suppress sorting of initial data, but the resulting data will be sorted once more if you use grouping (groupField: ["x0"]). I think that the simplest way (but it's still not so simple in the implementation) to hold the order of resulting items would be by defining custom sorting functions for xDimension items. I recommend you to read the wiki article for more information.
As the title suggests, I am using a Kendo UI Grid in a View within an MVC application.
Now, on the click of a particular cell I need to pass the row index and column header (which that cell belongs to) to a function written in a .cs file in the application.
Any help is appreciated.
Thanks :)
P.S.: If you think that I am not providing sufficient information please let me know since I am a newbie programmer!
You can achieve this by using ondatabound event for reference please check the below code snippet.
function onDataBound(e) {
var grid = $("#grid").data("kendoGrid");
$(grid.tbody).on("click", "td", function (e) {
var row = $(this).closest("tr");
var rowIdx = $("tr", grid.tbody).index(row);
var colname = grid.columns[$("td", row).index(this)].title;
alert('row index is :- ' + rowIdx + ' and column name is:- ' + colname);
});
}
Full code:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jayesh Goyani</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
$(document).ready(function () {
var products = [{
ProductID: 1,
ProductName: "Chai",
SupplierID: 1,
CategoryID: 1,
QuantityPerUnit: "10 boxes x 20 bags",
UnitPrice: 18.0000,
UnitsInStock: 39,
UnitsOnOrder: 0,
ReorderLevel: 10,
Discontinued: false,
Category: {
CategoryID: 1,
CategoryName: "Beverages",
Description: "Soft drinks, coffees, teas, beers, and ales"
}
}, {
ProductID: 2,
ProductName: "Chang",
SupplierID: 1,
CategoryID: 1,
QuantityPerUnit: "24 - 12 oz bottles",
UnitPrice: 19.0000,
UnitsInStock: 17,
UnitsOnOrder: 40,
ReorderLevel: 25,
Discontinued: false,
Category: {
CategoryID: 1,
CategoryName: "Beverages",
Description: "Soft drinks, coffees, teas, beers, and ales"
}
}, {
ProductID: 3,
ProductName: "Aniseed Syrup",
SupplierID: 1,
CategoryID: 2,
QuantityPerUnit: "12 - 550 ml bottles",
UnitPrice: 10.0000,
UnitsInStock: 13,
UnitsOnOrder: 70,
ReorderLevel: 25,
Discontinued: false,
Category: {
CategoryID: 2,
CategoryName: "Condiments",
Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
ProductID: 4,
ProductName: "Chef Anton's Cajun Seasoning",
SupplierID: 2,
CategoryID: 2,
QuantityPerUnit: "48 - 6 oz jars",
UnitPrice: 22.0000,
UnitsInStock: 53,
UnitsOnOrder: 0,
ReorderLevel: 0,
Discontinued: false,
Category: {
CategoryID: 2,
CategoryName: "Condiments",
Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
ProductID: 5,
ProductName: "Chef Anton's Gumbo Mix",
SupplierID: 2,
CategoryID: 2,
QuantityPerUnit: "36 boxes",
UnitPrice: 21.3500,
UnitsInStock: 0,
UnitsOnOrder: 0,
ReorderLevel: 0,
Discontinued: true,
Category: {
CategoryID: 2,
CategoryName: "Condiments",
Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}];
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { type: 'number' },
UnitsInStock: { type: 'number' },
ProductName: { type: 'string' },
QuantityPerUnit: { type: 'string' },
UnitPrice: { type: 'number' },
}
}
},
},
dataBound: onDataBound,
columns: [
{ field: "ProductName", title: "ProductName" },
{ field: "UnitsInStock", title: "UnitsInStock" },
{ field: "QuantityPerUnit", title: "QuantityPerUnit" },
{ field: "UnitPrice", title: "UnitPrice" },
]
});
});
function onDataBound(e) {
var grid = $("#grid").data("kendoGrid");
$(grid.tbody).on("click", "td", function (e) {
var row = $(this).closest("tr");
var rowIdx = $("tr", grid.tbody).index(row);
var colname = grid.columns[$("td", row).index(this)].title;
alert('row index is :- ' + rowIdx + ' and column name is:- ' + colname);
});
}
</script>
</body>
</html>
Let me know if any concern.
I would like to size a grid to a fixed height like 500px. If lets say only two records are placed in the grid I would like to fill the remaining rows as empty rows, and not make them clickable, so the grid fills 100% of its available height. Is there an easy way to do this?
Thanks,
Bob
1)Set height:100%
2)you can change jqgrid background color
otherwise you can do like this...
This is sample...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test </title>
<link href="css/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />
<link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var EditableID = 0;
jQuery("#list1").jqGrid({
datatype: "local",
colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
colModel: [
{ name: 'id', index: 'id', width: 75 },
{ name: 'invdate', index: 'invdate', width: 90 },
{ name: 'name', index: 'name', width: 100 },
{ name: 'amount', index: 'amount', width: 80, align: "right" },
{ name: 'tax', index: 'tax', width: 80, align: "right" },
{ name: 'total', index: 'total', width: 80, align: "right" },
{ name: 'note', index: 'note', width: 150, editoptions: { size: "20", maxlength: "200" }, editable: true, edittype: 'text', width: 75, sortable: true }
],
rowNum: 22,
height: 500,
loadComplete: function(data) {
var NoOfCellAdd = Number($("#list1").parent().parent().css('height').split('px')[0]) / 23;
for (var i = data.records; i <= NoOfCellAdd; i++) {
$("#list1").addRowData(i + 1, {});
}
},
onCellSelect: function(rowid, iCol, cellcontent, e) {
if (rowid <= EditableID) {
if ($("#lastCellId").val() != -1)
$("#list1").saveRow($("#lastCellId").val(), false, 'clientArray');
$('#list1').editRow(rowid, iCol, true);
$("input, text", e.target).focus();
$("#lastCellId").val(rowid);
}
},
autowidth: true,
rowList: [10, 20, 30],
pager: jQuery('#pager1'),
//sortname: 'id',
viewrecords: true,
// sortorder: "desc",
caption: "XML Example"
}).navGrid('#pager1', { edit: false, add: false, del: false });
var mydata = [
{ id: 1, invdate: "2007-10-01", name: "test1", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: 2, invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
{ id: 3, invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
{ id: 4, invdate: "2007-10-04", name: "test4", note: "note4", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: 5, invdate: "2007-10-04", name: "test5", note: "note5", amount: "200.00", tax: "10.00", total: "210.00" },
{id: 6, invdate: "2007-10-02", name: "test30", note: "note30", amount: "300.00", tax: "20.00", total: "320.00" }
];
EditableID = mydata.length;
$("#list1").jqGrid('setGridParam', { datatype: 'local', data: mydata }).trigger("reloadGrid");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="list1">
</table>
<div id="pager1">
</div>
</div>
<input type="hidden" id="lastCellId" name="Language" value="-1">
</form>
</body>
</html>
// --------------------------------------------------------------------------------
// This is working fine...but this is not right way to do...
// **rowNum: 22,height:500px**