I am trying to remove the grey border around the grid header. How can this be done?
Here is the fiddle link: http://jsfiddle.net/tmLmk/7/
Html code:
<div ng-controller="GridController">
<div kendo-grid k-options="options" k-data-source="sData"></div>
</div>
JS Code:
angular.module('angular-kendo-example', ['kendo.directives']);
function GridController($scope) {
$scope.options = {
sortable: true,
pageable: true,
columns: [{
field: "column1",
title: "column 1",
width: "40px"
},{
field: "column2",
title: "column 2",
width: "70px"
},{
field: "column3",
title: "column 3",
width: "70px"
},{
field: "column4",
title: "column 4",
width: "60px"
},{
field: "column5",
title: "column 5",
width: "40px"
},{
field: "column6",
title: "column 6",
width: "40px"
}],
};
$scope.sData= [
{ column1: "column1 data", column2: "column2 data", column3: "column3 data", column4: "column4 data", column5: "column5 data", column6: "column6 data" }, { column1: "column1 data", column2: "column2 data", column3: "column3 data", column4: "column4 data", column5: "column5 data", column6: "column6 data" }, { column1: "column1 data", column2: "column2 data", column3: "column3 data", column4: "column4 data", column5: "column5 data", column6: "column6 data" }
];
}
Thanks
If you are okay with a CSS solution, try this:
.k-grid-header table[role='grid']{
border-spacing:0px;
}
Let me know if this isn't the desired result.
Related
Let's say my datasource shows price and quantity of different products grouped by product type.
Is it possible to show two columns per attribute (two for price and two for quantity), where one is showing the average and the other one is showing the stdevs?
You can add a second aggregation for each value field as a calculated value:
measures: [{
uniqueName: "Price",
aggregation: "stdevs",
caption: "STDEV of Price"
},
{
uniqueName: "PriceAverage",
formula: "average('Price')",
caption: "Average of Price"
}]
Here is a full example in the snippet:
var pivot = new WebDataRocks({
container: "#wdr-component",
toolbar: true,
report: {
dataSource: {
dataSourceType: "csv",
filename: "https://cdn.webdatarocks.com/data/data.csv"
},
options: {
showAggregationLabels: false
},
slice: {
rows: [{
"uniqueName": "Category"
}],
columns: [{
"uniqueName": "Measures"
}],
measures: [{
uniqueName: "Price",
aggregation: "stdevs",
caption: "STDEV of Price"
},
{
uniqueName: "PriceAverage",
formula: "average('Price')",
caption: "Average of Price"
},
{
uniqueName: "Quantity",
aggregation: "stdevs",
caption: "STDEV of Quantity"
},
{ uniqueName: "QuantityAverage",
formula: "average('Quantity')",
caption: "Average of Quantity"
},
]
},
formats: [{
name: "", //default format
decimalPlaces: 2,
currencySymbol: "$",
currencySymbolAlign: "left"
}]
}
});
<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<div id="wdr-component"></div>
I have one kendo Grid where i need to append an anchor link and also wanted to have a feature to download that kendo grid values(includes Header) into excel.
$("#YourGridName").kendoGridExt({
toolbar: ["excel"],
excel: {
fileName: "Invoice Life Cycle Report.xlsx",
proxyURL: "#Url.Content("~/Plugin/Report/InvoiceAgingReport/GetInvoiceAgingReport")",
filterable: true
},
dataSource: reportData,
columns: [
{
field: "Invoice_Number", title: "Invoice Number", width: "120px", template: '<a onclick = "return ShowDetailedAgingReport(' + "'#= Invoice_Number#'" + ',' + "'#= SBU#'" + ')" href="\\#">#= Invoice_Number#</a>'
},
{
field: "SBU", title: "SBU", width: "120px"
},
{
field: "ScanningDays", title: "Days to Scanning", width: "120px"
},
{
field: "ScanningAndOracleDays", title: "Days between scanning & oracle entry", width: "120px"
},
{
field: "OracleAndAccountingDays", title: "Days between oracle entry & accounting", width: "120px"
},`enter code here`
{
field: "TOTAL", title: "Total travel Days", width: "150px"
}
],
editable: {
mode: "popup",
title: "Invoice Life Cycle Detailed Report",
window: { draggable: false },
},
noRecords: {
template: "No data available."
},
});
I'm using jqGrid with the jqPivot API.
The problem I'm encountering is that jqPivot removes the spaces from the pivoted column names. Is there any way to change this behaviour?
eg.
var mydata = [
{id: "1", emp:"Michelle", product:"A A", sold:"8"},
{id: "2", emp:"Tania", product:"A A", sold:"3"},
{id: "6", emp:"Mark", product:"A B", sold:"1"},
{id: "3", emp:"Tommy", product:"A B", sold:"5"},
{id: "4", emp:"Dave", product:"B B", sold:"2"},
{id: "5", emp:"Carol", product:"B B", sold:"5"},
];
var grid = $("#grid");
grid.jqGrid('jqPivot',
mydata, {
xDimension: [{
dataName: 'id',
label: 'ID',
width: 90
}, {
dataName: 'emp',
label: 'Employee',
width: 90
}, ],
yDimension: [{
dataName: 'product'
}],
aggregates: [{
member: 'sold',
aggregator: 'sum',
width: 50,
label: 'Sold'
}, ],
colTotals: true
}, {
width: "100%",
height: "100%",
pager: "#pager",
caption: "Daily Sales"
});
http://jsfiddle.net/aUDHx/968/
Instead of "A A" and "A B" etc. it displays the columns as "AA" and "AB".
I agree that it's a problem. The reason is the line of jqPivot code. As a quick and dirty workaround I could suggest you to use converter which replace the space to some other character like _, ( ) or .
yDimension: [{
dataName: 'product',
converter: function (val) {return val.replace(/\s/g, ' ');}
}],
See the modified demo http://jsfiddle.net/OlegKi/aUDHx/970/.
I've had about 3 goes at trying to learn the jqGrid. Every time has failed. So this time I tried to start with the basics. All I wanted to do was replicate the json data example at http://trirand.com/blog/jqgrid/jqgrid.html .
My best efforts have resulted in a table with rows and columns by every cell has a non-breaking space in it.
With my code, I only departed from the code in that example in the slightest way to account for the fact that I wasn't getting the data from the same data service. But I was getting the exact same data as I was able to extract the json using fiddler.
The code is:
function getData() {
var obj =
{
"page": "1",
"total": 2,
"records": "13",
"rows": [{
"id": "13",
"cell": ["13",
"2007-10-06",
"Client 3",
"1000.00",
"0.00",
"1000.00",
null]
},
{
"id": "12",
"cell": ["12",
"2007-10-06",
"Client 2",
"700.00",
"140.00",
"840.00",
null]
},
{
"id": "11",
"cell": ["11",
"2007-10-06",
"Client 1",
"600.00",
"120.00",
"720.00",
null]
},
{
"id": "10",
"cell": ["10",
"2007-10-06",
"Client 2",
"100.00",
"20.00",
"120.00",
null]
},
{
"id": "9",
"cell": ["9",
"2007-10-06",
"Client 1",
"200.00",
"40.00",
"240.00",
null]
},
{
"id": "8",
"cell": ["8",
"2007-10-06",
"Client 3",
"200.00",
"0.00",
"200.00",
null]
},
{
"id": "7",
"cell": ["7",
"2007-10-05",
"Client 2",
"120.00",
"12.00",
"134.00",
null]
},
{
"id": "6",
"cell": ["6",
"2007-10-05",
"Client 1",
"50.00",
"10.00",
"60.00",
""]
},
{
"id": "5",
"cell": ["5",
"2007-10-05",
"Client 3",
"100.00",
"0.00",
"100.00",
"no tax at all"]
},
{
"id": "4",
"cell": ["4",
"2007-10-04",
"Client 3",
"150.00",
"0.00",
"150.00",
"no tax"]
}],
"userdata": {
"amount": 3220,
"tax": 342,
"total": 3564,
"name": "Totals:"
}
}
return obj;
}
$(function () {
$("#list2").jqGrid({
data: getData()['rows'],
datatype: "local",
colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
colModel: [
{ name: 'id', index: 'id', width: 55 },
{ name: 'invdate', index: 'invdate', width: 90 },
{ name: 'name', index: 'name asc, invdate', 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, sortable: false }
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager2',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption: "JSON Example"
});
$("#list2").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: false });
});
Can anyone please help me break my really bad run with this popular javascript library?
I don't find anything wrong with your grid. There is something wrong with your data. I hope your data need to be checked. Also if you are using local as your datatype your data should like below,
var mydata = [
{ id: "11", invdate: "2007-10-06", name: "Client 1", amount: "600.00"
, tax:"120.00", total:"720.00", note: null },
{ id: "12", invdate: "2007-10-06", name: "Client 2", amount: "700.00",
tax:"140.00", total:"840.00", note: null },
{ id: "13", invdate: "2007-10-06", name: "Client 3", amount: "1000.00",
tax:"0.00", total:"1000.00", note: null }
];
This Demo will give you the good start with jQgrid. I have used your grid definition. Hope this helps.
i'm working with kendo ui to create rich user interface, but i'm stuck t the following:
I want a Grid with a subgrid, the first one displays customer info, like name, etc the second shows the available shipping-adresses, the customer saved. Now my problem is, that in the subgrid is not data, although firebug shows, that the data was returned. This is my source:
$(function() {
var main = $("#customer-grid").kendoGrid({
dataSource: {
transport:{
read :"data/users.php",
update :{
url :"data/users.php?action=update",
type:"POST",
data: function (data) {
data.birthday = kendo.toString(data.birthday, "yyyy-MM-dd");
return data;
}
},
destroy:{
url :"data/users.php?action=destroy",
type:"POST"
}
},
schema: {
data: "data",
model: {
id: "id",
fields: {
id: {editable: false},
activated: { type: "boolean" },
birthday: {type: "date"},
gender: {defaultValue: "W"}
}
}
}
},
height: 250,
filterable: true,
sortable: true,
pageable: true,
detailInit: detailInit,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [{
field: "id",
title: "ID",
width: "50px"
}, {
field: "gender",
title: "Geschlecht",
width: "100px",
values: data
}, {
field: "firstname",
title: "Vorname"
}, {
field: "lastname",
title: "Nachname"
}, {
field: "birthday",
title: "Geburtstag",
width: "100px",
format: "{0:dd.MM.yyyy}"
},{
field: "mail",
title: "E-Mail"
},{
field: "activated",
title: "Aktiviert",
width: "100px",
values: actval
}, {
command: ["edit", "destroy"],
title: " ",
width: "210px"
}],
editable:{
mode: "popup"
}
});
});
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
transport: {
read: "data/adress.php?uid="+e.data.id
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize:6
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
{ field: "id", width: 70 },
{ field: "zipcode", title:"Ship Country", width: 100 },
{ field: "city", title:"Ship Address" },
{ field: "street", title: "Ship Name", width: 200 }
]
});
}
The function gets its data from a php page, which does a mysql-query and then gives back the data as application/json. But nothing is shown.
Hopefully you guys can help me.
Regards
I tested your code and it works fine.
Check:
e parameter format. I've used: detailInit({ detailCell : $("#grid"), data : { id : 1}});
JSON returned by data/adress.php. I've returned:
[
{"city":"Madrid", "id":"1", "zipcode":"31000", "street":"my street 1", "number":5},
{"city":"Sofia", "id":"2", "zipcode":"32000", "street":"my street 2", "number":4},
{"city":"London", "id":"3", "zipcode":"33000", "street":"my street 3", "number":3},
{"city":"San Francisco", "id":"4", "zipcode":"34000", "street":"my street 4", "number":2},
{"city":"Berlin", "id":"5", "zipcode":"35000", "street":"my street 5", "number":1}
]
Using the following (hardcoded) php response:
<?php
header('Content-type: application/json');
$named_array = array(
array("city" => "Madrid", "id" => "1", "zipcode" => "31000", "street" => "my street 1", "number" => 5),
array("city" => "Sofia", "id" => "2", "zipcode" => "32000", "street" => "my street 2", "number" => 4),
array("city" => "London", "id" => "3", "zipcode" => "33000", "street" => "my street 3", "number" => 3),
array("city" => "San Francisco", "id" => "4", "zipcode" => "34000", "street" => "my street 4", "number" => 2),
array("city" => "Berlin", "id" => "5", "zipcode" => "35000", "street" => "my street 5", "number" => 1)
);
echo json_encode($named_array);
?>
EDIT: This is the definition of the grid containing the subgrid.
var outer = $("#outer").kendoGrid({
dataSource:{
type:"json",
transport:{
read:"names.php"
},
pageSize:5
},
sortable:true,
columns:[
{ field:"id", width:70 },
{ field:"name", title:"Name", width:100 },
{ field:"lastname", title:"LastName", width:100 },
{ title:"Address", width:300, attributes:{ class:"ob-address"}}
]
}).data("kendoGrid");
and then on a button click, I run:
$(".ob-address", outer.tbody).each(function (idx, elem) {
detailInit({ detailCell:elem, data:{ id:1}});
});
As you can see I marked a column in the outer grid with a CSS class named ob-address and the function selects all the cell in the body of the outer table for inserting the inner table (subgrid).