I want to set border radius in any specific cell of a datatable using pdfHtml5 . what should I do? I have tried to use border-top-left-radius to set border radius but it didnt help. I also tried to add element in tablebody but i dont know whether it is a field or not. Can anyone provide the styles field name of datatable
extend: 'pdfHtml5',
className: 'exportPDFCurrent',
filename: 'TableView_export',
orientation: 'landscape',
text: self.labelPDF(),
footer: (gProjectParameters.isWorkForce) ? true : false,
pageSize: 'A0',
stripHtml: true,
exportOptions: {
modifier: {
page: 'current'
},
columns: ':visible',
search: 'applied',
order: 'applied'
},
customize: function (doc) {
let jsDate = dateUtils.today();
let rowSkip = 0;
doc.pageMargins = [10, 10, 10, 10];
doc.defaultStyle.fontSize = 6;
doc.styles.tableHeader.fontSize = 6;
doc.styles.tableHeader.fillColor = "#305d80";
let tblBody = doc.content[1].table.body;
doc.styles.tableBodyEven = {};
doc.styles.tableBodyOdd = {};
doc.content[0].text = `Table View | Visilean [${jsDate.toString()}]`;
$('#tViewBody').find('tr').each(function (ix, row) {
let data = table.row(row).data();
let rowDataCustomFieldObj = table.row(row).data().customFieldsObject;
$(row).find('td').each(function (ind, elt) {
for(let i=0;i<rowDataCustomFieldObj.length;i++){
let item = rowDataCustomFieldObj[i];
if($(this).hasClass(item.fieldId)){
tblBody[ix+rowSkip][ind]['fillColor'] = item.bgColor == 'transparent'?'#FFFFFF':item.bgColor;
tblBody[ix+rowSkip][ind]['color'] = item.fontColor;
}
}
$(elt).find('.status.not-committed-sts').each(function(x,y){
tblBody[ix+rowSkip][ind].style ={
background:'#e5b112',
width: 5,
height: 5,
display: 'inline-block',
alignment: "center",
'border-top-left-radius':50,
marginRight:5
}
tblBody[ix+rowSkip][ind].element = `<span class="status not-committed-sts"></span>Not Committed`;
})
}
Related
I have a something like this:
i want to freeze the Doctor Name column which is Dynamic.
Actually, the whole grid is dynamic.
if (result[7] != null) {
var resu = JSON.parse(result[7]);
if (resu.length > 0) {
{
ColModel = [];
var model = Object.keys(resu[0]);
for (var i = 0; i < model.length; i++) {
var responColNM = "";
if (model[i] == "Doctor Name") {
responColNM = {
name: model[0], index: model[0], label: model[0], width: 140, editable: false, sortable: false, frozen: true,
}
}
else {
responColNM = {
name: model[i], index: model[i], label: model[i], width: 43, editable: false, sortable: false,
}
}
ColModel.push(responColNM);
}
}
}
strNew = resu;
}
else {
//store in arr
//str = { DOCTORNAME: '', CNT: '', DT: '' };
//strNew.push(str);
}
if (str == 1) {
colnames = [];
colmodel = ColModel;
$("#gvtable").jqGrid('setGridParam', { data: response }).trigger("reloadGrid");
$("#gvtable").jqGrid('setFrozenColumns').trigger("reloadGrid");
here, the column Doctor name does not freeze.
any suggestions?
Thanks in advance!
Some notes before to answer.
jqGrid name in colModel can't contain spaces. In your case it contain spaces
After call of setFrozenColumns method you do not need to trigger reloading the grid.
Finally, but not least, colModel can't be a dynamically changed. In order to do this you will need to destroy the grid and recreate it with the new colModel
The frozen column should be the first one in the array of colModel in order to be frozen. In your code it is not clear if it is first. You set the first column, but it is not known if it is first added in the colModel
I'm working with a Kendo treelist widget, and disappointed to see there's no rowTemplate option as there is on the Kendo grid.
I see a columnTemplate option (i.e. http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#configuration-columns.template ), but this will affect the entire column.
However, I need to drill into each cell value and set a css color property based on a ratio ( i.e. If value/benchmark < .2, assign <span style='color:red;'> , but my color value is dynamic.
There's a dataBound: and dataBinding: event on the treelist, but I'm still trying to figure out how to intercept each cell value and set the color once I've done my calculation.
var treeOptions = {
dataSource: ds,
columns: colDefs,
selectable: true,
scrollable: true,
resizable: true,
reorderable: true,
height: 320,
change: function (e) {
// push selected dataItem
var selectedRow = this.select();
var row = this.dataItem(selectedRow);
},
dataBound: function (e) {
console.log("dataBinding");
var ds = e.sender.dataSource.data();
var rows = e.sender.table.find("tr");
}
};
and this is where I'm building out the `colDefs' object (column definitions):
function parseHeatMapColumns(data, dimId) {
// Creates the Column Headers of the heatmap treelist.
// typeId=0 is 1st Dimension; typeId=1 is 2nd Dimension
var column = [];
column.push({
"field": "field0",
"title": "Dimension",
headerAttributes: { style: "font-weight:" + 'bold' + ";" },
attributes : { style: "font-weight: bold;" }
});
var colIdx = 1; // start at column 1 to build col headers for the 2nd dimension grouping
_.each(data, function (item) {
if (item.typeId == dimId) {
// Dimension values are duplicated, so push unique values (i.e. trade types may have dupes, whereas a BkgLocation may not).
var found = _.find(column, { field0: item.field0 });
if (found == undefined) {
column.push({
field: "field2",
title: item.field0,
headerAttributes: {
style: "font-weight:" + 'bold'
}
,template: "<span style='color:red;'>#: field2 #</span>"
});
colIdx++;
}
}
});
return column;
}
**** UPDATE ****
In order to embed some logic within the template :
function configureHeatMapColumnDefs(jsonData, cols, model) {
var colDef = '';
var dimId = 0;
var colorProp;
var columns = kendoGridService.parseHeatMapColumns(jsonData, dimId);
// iterate columns and set color property; NB: columns[0] is the left-most "Dimension" column, so we start from i=1.
for (var i = 1; i <= columns.length-1; i++) {
columns[i]['template'] = function (data) {
var color = 'black';
if (data.field2 < 1000) {
color = 'red';
}
else if (data.field2 < 5000) {
color = 'green';
}
return "<span style='color:" + color + ";'>" + data.field2 + "</span>";
};
}
return columns;
}
Advice is appreciated.
Thanks,
Bob
In the databound event you can iterate through the rows. For each row you can get the dataItem associated with it using the dataitem() method (http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#methods-dataItem)
Once you have the dataitem, calculate your ration and if the row meets the criteria for color, change the cell DOM element:
dataBound: function (e) {
var that = e.sender;
var rows = e.sender.table.find("tr");
rows.each(function(idx, row){
var dataItem = that.dataItem(row);
var ageCell = $(row).find("td").eq(2);
if (dataItem.Age > 30) {
//mark in red
var ageText = ageCell.text();
ageCell.html('<span style="color:red;">' + ageText + '</span>');
}
}
DEMO
UPDATE: you can also do this with a template:
$("#treelist").kendoTreeList({
dataSource: dataSource,
height: 540,
selectable: true,
columns: [
{ field: "Position"},
{ field: "Name" },
{ field: "Age",
template: "# if ( data.Age > 30 ) { #<span style='color:red;'> #= data.Age # </span> #}else{# #= data.Age # #}#"
}
],
});
DEMO
I am trying to use the pan and zoom functionality in kendo box plot chart, can this be achieved for box plot chart.
http://demos.telerik.com/kendo-ui/bar-charts/pan-and-zoom
You can apply the exact same methods to the boxplot.
DEMO
CODE:
// Minimum/maximum number of visible items
var MIN_SIZE = 6;
var MAX_SIZE = 18;
// Optional sort expression
// var SORT = { field: "val", dir: "asc" };
var SORT = {};
// Minimum distance in px to start dragging
var DRAG_THR = 50;
// State variables
var viewStart = 0;
var viewSize = MIN_SIZE;
var newStart;
// Drag handler
function onDrag(e) {
var chart = e.sender;
var ds = chart.dataSource;
var delta = Math.round(e.originalEvent.x.initialDelta / DRAG_THR);
if (delta != 0) {
newStart = Math.max(0, viewStart - delta);
newStart = Math.min(data.length - viewSize, newStart);
ds.query({
skip: newStart,
page: 0,
pageSize: viewSize,
sort: SORT
});
}
}
function onDragEnd() {
viewStart = newStart;
}
// Zoom handler
function onZoom(e) {
var chart = e.sender;
var ds = chart.dataSource;
viewSize = Math.min(Math.max(viewSize + e.delta, MIN_SIZE), MAX_SIZE);
ds.query({
skip: viewStart,
page: 0,
pageSize: viewSize,
sort: SORT
});
// Prevent document scrolling
e.originalEvent.preventDefault();
}
$("#chart").kendoChart({
dataSource: {
data: data,
pageSize: viewSize,
page: 0,
sort: { }
},
title: {
text: "Ozone Concentration (ppm)"
},
legend: {
visible: false
},
series: [{
type: "boxPlot",
lowerField: "lower",
q1Field: "q1",
medianField: "median",
q3Field: "q3",
upperField: "upper",
meanField: "mean",
outliersField: "outliers"
}],
categoryAxis: {
field: "year",
majorGridLines: {
visible: false
}
},
transitions: false,
drag: onDrag,
dragEnd: onDragEnd,
zoom: onZoom
});
I have a jqplot line graph with this line:
`var line = [[1,0.493],
[1,1.286],
[2,0.305],
[2,0.516],
[2,0.551],
[2,0.595],
[2,0.609],
[2,0.644],
[2,0.65],
[2,1.249],
[2,1.265],
[4,0.443],
[5,0.288],
[5,0.477],
[5,0.559],
[5,0.562],
[6,0.543],
[7,0.513],
[7,0.549],
[8,0.442],
[8,0.467],
[8,0.468],
[8,0.597],
[8,0.857]];`
Im using tooltipContentEditor to display the x and y values of the point on hover. I need the values displayed to be exact.
Here is the code Im using: http://jsfiddle.net/ZQh38/1/
The problem:
Sometimes, the x and y values displayed are incorrect. For example, the last points at (6, 0.5) and (7, 0.5)
The values are only displayed with 1 decimal, which needs to be 3.
So, the question is, how do I get the exact y values?
Ive also tried to use the pointIndex, which does NOT match with the values in the line.
Thanks for your help!
Here is the solution to your problem: jsFiddle example
I made changes to your highlighter option.
/*
Drawing graphs
*/
var Statistics = {
scatter: false,
trendline: false,
enableLabels: true,
showAverage: false,
colour: null,
//Graph properties
scatterPlot: function(on){
Statistics.scatter = on;
},
showTrendline: function(on){
$.jqplot.config.enablePlugins = on;
Statistics.trendline = on;
},
disableLabels: function(yes){
Statistics.enableLabels = (!yes);
},
shouldDrawScatter: function(){
return (!Statistics.scatter);
},
useLabels: function(){
return Statistics.enableLabels;
},
getTrendline: function(){
return Statistics.trendline;
},
//Drawing
drawLabels: function(){
document.getElementById('ylabel').innerHTML = Statistics.ylabel;
document.getElementById('xlabel').innerHTML = Statistics.xlabel;
},
generateGraph: function(){
var line = [[1,0.493],
[1,1.286],
[2,0.305],
[2,0.516],
[2,0.551],
[2,0.595],
[2,0.609],
[2,0.644],
[2,0.65],
[2,1.249],
[2,1.265],
[4,0.443],
[5,0.288],
[5,0.477],
[5,0.559],
[5,0.562],
[6,0.543],
[7,0.513],
[7,0.549],
[8,0.442],
[8,0.467],
[8,0.468],
[8,0.597],
[8,0.857]];
var plot = $.jqplot('chart', [line], {
animate: true,
grid:{backgroundColor: 'white'},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: [1, 2, 3, 4, 5, 6, 7],
tickOptions: {
fontFamily: '"Helvetica", cursive',
fontSize: '12pt'
}
},
yaxis: {
tickOptions: {
fontFamily: '"Helvetica", cursive',
fontSize: '12pt'
},
max: 2,
min: 0
}
},
series:[{
color: "#594A42",
lineWidth: 2.5,
shadow: false,
fillColor: "#594A42",
markerOptions: {
style:'filledCircle',
color: "#594A42",
shadow: false,
size: 10
},
showLine: false,
trendline: {
color: '#999'
},
rendererOptions:{
animation: {
speed: 2000 //Speeding up animation
}
}
}],
highlighter: {
show: true,
fadeTooltip: true,
sizeAdjust: 6,
tooltipContentEditor: function(str, pointIndex, index, plot){
var splitted = plot._plotData[1][index];
var x = splitted[0];
var y = splitted[1];
return x + ", " + y;
}
}
});
},
//Checks if the graph will be a straight line
straightLine: function(lineArray){
if(typeof lineArray != 'undefined' && lineArray.length > 0) {
for(var i = 1; i < lineArray.length; i++)
{
if(lineArray[i] !== lineArray[0])
return false;
}
}
return true;
},
};
Statistics.generateGraph();
I have multiple grids in a panel. The base grids have data in them and can be dragged and dropped between each other. All the grids in the panel should be able to drag and drop between each other. This works perfectly in chrome but not Firefox, IE, or Safari.
In IE,FF and Safari the grids with data in them will drag and drop between each other w/o problem. They will not between the empty grids. I tried adding data to the empty grids but that wasn't the problem. Firebug also errors when using it with Extjs so any bugs i get are from a different dev tool. I have reinstalled all of those browsers and that is not the answer either. Im stuck...
edit I found out in chrome the viewconfig for my dragdrop groups are set but it doesnt set in the other browsers
This is my base grid with data in it.
var rround = "panel-game-"+round;
var ss = Ext.create('Ext.grid.Panel', {
stateful: true,
id: "panel-game-"+round,
stateId: 'stateGrid',
autoScroll: false,
store: store,
columns: [
{
text : 'Teams',
flex : 1,
sortable : true,
dataIndex: 'team_name'
}
],
height: 100,
width: 150,
title: 'Game ' + round,
viewConfig: {
stripeRows: true,
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: [groups],
dropGroup: [groups]
},
listeners: {
drop: function(node, data, dropRec, dropPosition,record,store) {
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
var data = this.store.data.items;
var sdata = new Array();
data.each(function(e){
var bleh = {team_id: e.data.team_id, team_name:e.data.team_name};
sdata.push(bleh);
})
removeDupe(sdata,this.store);
}
}
}
});
This is my empty grid that should accept drops and should also drag when there is data in it.
var rCell = Ext.create('Ext.grid.Panel', {
stateful: true,
id: "panel-game-"+i+'-'+a,
stateId: 'stateGrid',
autoScroll: false,
store: rCellStore,
columns: [
{
text : 'Teams',
flex : 1,
sortable : true,
dataIndex: 'team_name'
}
],
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: [groups],
dropGroup: [groups]
},
listeners: {
beforedrop: function(node,data,overModel,dropPosition,eOpts){
console.log(node);
},
drop: function(node, data, dropRec, dropPosition, record) {
console.log("drop");
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('title') : ' on empty view';
var f = node.id.replace('-body','');
var newval = data.records[0].data;
if(f != undefined && f != ''){
var fstore = Ext.getCmp(f).getStore();
fstore.add(newval);
}
var data = this.store.data.items;
var sdata = new Array();
data.each(function(e){
var bleh = {team_id: e.data.team_id, team_name:e.data.team_name};
sdata.push(bleh);
})
removeDupe(sdata,this.store);
}
}
},
height: 100,
width: 150,
title: 'Game ',
viewConfig: {
stripeRows: true
}
});
It does not give a dropzone avaliable when i and trying to drag something over. It could be that but im not sure how to fix it.
The problem was the second viewConfig{stripeRows:true}. Chrome could figure it out but the other browsers were overwriting the first viewConfig with the second.