The code for this question is at http://jsfiddle.net/hm0dctgm/6/
I have the following column definition in a shieldGrid:
{ field: "coverage", title: "Coverage", width:'80px',
columnTemplate: function (cell, item) {
var val = item.coverage;
$('<div/>').appendTo(cell)
.shieldProgressBar({
min: 0,
max: 100,
value: 25 ,
text: {
enabled: true,
template: '<span style="font-size:22px;color:#1E98E4;">{0:n0}%</span> '
} ,
});
} // end columnTemplate
} // end field
How does one change the background color of the shieldProgressBar displayed in this column so that it's different than the color of the theme. In my code I will need to vary the color based on the contents of the grid row.
Thank you
Define a custom CSS class somewhere at the top of your page:
<style>
.my-progress-style {
/* background color of whole progressbar */
background-color: red;
}
.my-progress-style .sui-progressbar-value {
/* background color of value part */
background-color: green;
}
</style>
and then set this class to the DIV element you are initializing the ProgressBar from:
$('<div class="my-progress-style"/>').appendTo(cell)
.shieldProgressBar({
min: 0,
max: 100,
value: 25 ,
text: {
enabled: true,
template: '<span style="font-size:22px;color:#1E98E4;">{0:n0}%</span>'
}
});
Related
I am referring this example to export a worksheet https://github.com/SheetJS/js-xlsx/issues/817. How to do cell
styling like background coloring,font size and increasing the width of the
cells to make the data fit exactly.I have gone through the documentation but couldn't find any proper examples to use fill etc.Is there a way to do the formatting?
Below is the code snippet:
/* make the worksheet */
var ws = XLSX.utils.json_to_sheet(data);
/* add to workbook */
var wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "People");
/* write workbook (use type 'binary') */
var wbout = XLSX.write(wb, {bookType:'xlsx', type:'binary'});
/* generate a download */
function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
saveAs(new Blob([s2ab(wbout)],{type:"application/octet-
stream"}),"sheetjs.xlsx");
Styling is only available in Pro Version of SheetJS. But I think you are using community version(free version). In Community version styling is not available.
You can check here official information:
We also offer a pro version with performance enhancements, additional
features like styling, and dedicated support.
There are a bunch of community forks that allow styling. My personal favorite is xlsx-js-style. It is up to date and works well compared to other libraries.
sheetjs-style is also up to date, but i had some problems with it. See: Styles not working
xlsx-style is not up to date. Currently 397 commits behind SheetJS:master. I would not use it if possible.
All of these libraries share the same styling options. Here is a bunch of examples:
for (i in ws) {
if (typeof(ws[i]) != "object") continue;
let cell = XLSX.utils.decode_cell(i);
ws[i].s = { // styling for all cells
font: {
name: "arial"
},
alignment: {
vertical: "center",
horizontal: "center",
wrapText: '1', // any truthy value here
},
border: {
right: {
style: "thin",
color: "000000"
},
left: {
style: "thin",
color: "000000"
},
}
};
if (cell.c == 0) { // first column
ws[i].s.numFmt = "DD/MM/YYYY HH:MM"; // for dates
ws[i].z = "DD/MM/YYYY HH:MM";
} else {
ws[i].s.numFmt = "00.00"; // other numbers
}
if (cell.r == 0 ) { // first row
ws[i].s.border.bottom = { // bottom border
style: "thin",
color: "000000"
};
}
if (cell.r % 2) { // every other row
ws[i].s.fill = { // background color
patternType: "solid",
fgColor: { rgb: "b2b2b2" },
bgColor: { rgb: "b2b2b2" }
};
}
}
I used sheetjs-style (which is a fork of sheetjs) to add formatting to cells in excel file.
ws["A1"].s = // set the style for target cell
font: {
name: '宋体',
sz: 24,
bold: true,
color: { rgb: "FFAA00" }
},
};
It's very easy. However, you have to add style to each individual cell. It's not convenient to add style to a range of cells.
UPDATE: The official example use color "FFFFAA00". But I removed the first "FF" and it still works as before. The removed part is used for transparency (see COLOR_SPEC in Cell Styles), but somehow it has no effect when I change it or remove it.
After testing all the above options. For ReactJS I finally found a package that worked perfectly.
https://github.com/ShanaMaid/sheetjs-style
import XLSX from 'sheetjs-style';
var workbook = XLSX.utils.book_new();
var ws = XLSX.utils.aoa_to_sheet([
["A1", "B1", "C1"],
["A2", "B2", "C2"],
["A3", "B3", "C3"]
])
ws['A1'].s = {
font: {
name: 'arial',
sz: 24,
bold: true,
color: "#F2F2F2"
},
}
XLSX.utils.book_append_sheet(workbook, ws, "SheetName");
XLSX.writeFile(workbook, 'FileName.xlsx');
Note following points while adding styling:-
Cell should not be empty
First add data into the cell, then add styling to that cell.
For 2 days I was struck and did not got any styling appearing on my excel file since I was just adding styling before adding the data.Don't do that it won't appear.
I used xlsx-js-style Package and added the styles to my excel in the following way :-
XLSX.utils.sheet_add_aoa(worksheet, [["Firstname"]], { origin: "A1"
});
const LightBlue = {
fgColor: { rgb: "BDD7EE" }
};
const alignmentCenter = { horizontal: "center", vertical: "center", wrapText: true };
const ThinBorder = {
top: { style: "thin" },
bottom: { style: "thin" },
left: { style: "thin" },
right: { style: "thin" }
};
const fillAlignmentBorder = {
fill: LightBlue,
alignment: alignmentCenter,
border: ThinBorder
};
worksheet["A1"].s = fillAlignmentBorder;
Hope this helps.....Happy Coding :-)
I have to implement progress bar in ag-grid table column , i have search in ag-grid documentation section but there is nothing. any other website for the same.
Thank you in advanced.
You can use cellRenderer config of a column to specify which function or compnent should be rendered in the cell.
Here is a link to examples that does not really talk about rendering the progressbar but it shows quite a few examples to render custom elements in the cell. You can modify the HTML of these to return and render an HTML div as per your requirement.
https://www.ag-grid.com/javascript-grid-cell-rendering-components/
Do like this may be it will help you (it is JavaScript version). to get more info click on below link . may be it will help you
https://docs.google.com/document/d/10K54wwj12IH9P1CI1Uv2k3MD__P8-LQDYqL8ofe9Exk/edit?usp=sharing
process bar is from https://getbootstrap.com/docs/4.0/components/progress/
const columnDefs = [
{
headerName: "Process Bar",
minWidth: 150,
field: "process_bar",
sortable: true,
valueFormatter: function (params) {
if (params.value !== undefined) {
if(params.value==""){
return '<div class="progress">
<div class="progress-bar" role="progressbar"style="width: 25%;" aria-valuenow="'+params.value+'" aria-valuemin="0" aria-valuemax="100">25%
</div>
</div>';
}else{
return params.value;
}
}
}
}
];
const gridOptions = {
defaultColDef: {
flex: 1,
resizable: true,
},
getRowStyle: params => {
if (params.data != undefined){
if (params.data.rowColor=="blue") {
return { background: '#f9f9f9' };
}else{
return { background: 'white' };
}
}
},
components: {
loadingRenderer: function (params) {
if (params.value !== undefined) {
return params.value;
} else {
return '<img src="loading.gif">';
}
},
},
singleClickEdit: true,
rowBuffer: 0,
rowSelection: 'multiple',
caseSensitive: false,
rowModelType: 'infinite',
columnDefs: columnDefs,
pagination: false,
paginationPageSize:100,
cacheOverflowSize: 2,
maxConcurrentDatasourceRequests: 1,
infiniteInitialRowCount: 1000,
maxBlocksInCache: 10,
overlayNoRowsTemplate:'<span style="padding: 10px; border: 2px solid #444; background: lightgoldenrodyellow;">No Data Found!</span>',
};
One possible way: create your own loading overlay for the grid.
https://www.ag-grid.com/javascript-grid-overlays/
or
https://www.ag-grid.com/javascript-grid-overlay-component/
In the overlay, you can use any progress bar of choice (e.g. Bootstrap).
I want to create a message dialog in the following way
For example:My combobox has 2 name, “chkbx”(symbolic name for the checkbox), “txtedt”(symbolic name for the text field).
Whenever i select chkbox or txtedt from combobox drop down list, then my combo box should connect me to actual checkbox and textedit element respectively.
I have a “show dialog” button on status bar when i press that button it should popup selected option(checkbox or line edit)
Please suggest me how can i do it.
EDIT Here is the code and the problem i am facing with combobox options is, neither i am not able to get icons in my message dialog nor i dont know how i can see checkbox or line edit in message dialog, i am a beginner and struggling to explore the tricky ways used in QML..
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Dialogs 1.1
import QtQuick.Window 2.0
Item {
id: root
width: 580
height: 400
SystemPalette { id: palette }
clip: true
//! [messagedialog]
MessageDialog {
id: messageDialog
visible: messageDialogVisible.checked
modality: messageDialogModal.checked ? Qt.WindowModal : Qt.NonModal
title: windowTitleField.text
text: customizeText.checked ? textField.text : ""
informativeText: customizeInformativeText.checked ? informativeTextField.text : ""
onButtonClicked: console.log("clicked button " + clickedButton)
onAccepted: lastChosen.text = "Accepted " +
(clickedButton == StandardButton.Ok ? "(OK)" : (clickedButton == StandardButton.Retry ? "(Retry)" : "(Ignore)"))
onRejected: lastChosen.text = "Rejected " +
(clickedButton == StandardButton.Close ? "(Close)" : (clickedButton == StandardButton.Abort ? "(Abort)" : "(Cancel)"))
onHelp: lastChosen.text = "Yelped for help!"
onYes: lastChosen.text = (clickedButton == StandardButton.Yes ? "Yeessss!!" : "Yes, now and always")
onNo: lastChosen.text = (clickedButton == StandardButton.No ? "Oh No." : "No, no")
}
//! [messagedialog]
Column {
anchors.fill: parent
anchors.margins: 12
spacing: 8
Text {
color: palette.windowText
font.bold: true
text: "Message dialog properties:"
}
CheckBox {
id: messageDialogModal
text: "Modal"
checked: true
Binding on checked { value: messageDialog.modality != Qt.NonModal }
}
CheckBox {
id: customizeTitle
text: "Window Title"
checked: true
width: parent.width
TextField {
id: windowTitleField
anchors.right: parent.right
width: informativeTextField.width
text: "Alert"
}
}
Row {
Text {
text: "Combo box items and icon selection:"
}
spacing: 8
function createIcon(str) {
switch(str) {
case Critical:
messageDialog.icon = StandardIcon.Critical
console.log("Critical")
break;
case Question:
messageDialog.icon = StandardIcon.Question
break;
case checkbox:
//how to add checkbox here in order to show it in my message dialog ?
break;
case textedit:
//how to add textedit here in order to show it in message dialog ?
break;
default:
break
}
}
ComboBox {
id : cbox
editable: true
currentIndex: 0
model: ListModel {
id: cbItems
ListElement { text: "Critical"}
ListElement { text: "Question"}
ListElement { text: "checkbox"}
ListElement { text: "textedit"}
}
onCurrentIndexChanged: console.debug(cbItems.get(currentIndex).text)
onAccepted: parent.createIcon(cbItems.get(currentIndex).text)
}
}
CheckBox {
id: customizeText
text: "Primary Text"
checked: true
width: parent.width
TextField {
id: textField
anchors.right: parent.right
width: informativeTextField.width
text: "Attention Please"
}
}
CheckBox {
id: customizeInformativeText
text: "Informative Text"
checked: true
width: parent.width
TextField {
id: informativeTextField
anchors.right: parent.right
width: root.width - customizeInformativeText.implicitWidth - 20
text: "Be alert!"
}
}
Text {
text: "Buttons:"
}
Flow {
spacing: 8
width: parent.width
property bool updating: false
function updateButtons(button, checked) {
if (updating) return
updating = true
var buttons = 0
for (var i = 0; i < children.length; ++i)
if (children[i].checked)
buttons |= children[i].button
if (!buttons)
buttons = StandardButton.Ok
messageDialog.standardButtons = buttons
updating = false
}
CheckBox {
text: "Help"
property int button: StandardButton.Help
onCheckedChanged: parent.updateButtons(button, checked)
}
CheckBox {
text: "Close"
property int button: StandardButton.Close
onCheckedChanged: parent.updateButtons(button, checked)
}
CheckBox {
text: "Cancel"
property int button: StandardButton.Cancel
onCheckedChanged: parent.updateButtons(button, checked)
}
}
}
Rectangle {
anchors {
left: parent.left
right: parent.right
bottom: parent.bottom
}
height: buttonRow.height * 1.2
color: Qt.darker(palette.window, 1.1)
border.color: Qt.darker(palette.window, 1.3)
Row {
id: buttonRow
spacing: 6
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 12
width: parent.width
Button {
text: "Show Dialog"
anchors.verticalCenter: parent.verticalCenter
onClicked: messageDialog.open()
}
Button {
text: "Close"
anchors.verticalCenter: parent.verticalCenter
onClicked: messageDialog.close()
}
}
}
}
I still can't understand what are you going to do. Assume, you want some custom dialog with varying content. First of all, I guess MessageDialog is not good idea just because you cannot define custom controls inside it. But you can create a custom one.
Simple example:
Popup.qml
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
import QtQuick.Window 2.0
Window {
id: mypopDialog
title: "MyPopup"
width: 300
height: 100
flags: Qt.Dialog
modality: Qt.WindowModal
property int popupType: 1
property string returnValue: ""
ColumnLayout {
anchors.fill: parent
anchors.margins: 10
RowLayout {
Layout.fillWidth: true
Layout.fillHeight: true
spacing: 20
Image {
source: popupType == 1 ? "combo.png" : "edittext.png"
}
Loader {
id: loader
Layout.alignment: Qt.AlignRight
Layout.fillWidth: true
sourceComponent: popupType == 1 ? comboboxComponent : editboxComponent
property string myvalue : popupType == 1 ? item.currentText : item.text
Component {
id: comboboxComponent
ComboBox {
id: comboBox
model: ListModel {
ListElement { text: "Banana" }
ListElement { text: "Apple" }
ListElement { text: "Coconut" }
}
}
}
Component {
id: editboxComponent
TextEdit {
id: textEdit
}
}
}
}
Rectangle {
height: 30
Layout.fillWidth: true
Button {
text: "Ok"
anchors.centerIn: parent
onClicked: {
returnValue = loader.myvalue;
mypopDialog.close();
}
}
}
}
}
Here I use Loader to load appropriate content according to popupType property (1 - combobox, 2 - textedit)
So now you can use this file in any place where you want.
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
import QtQuick.Window 2.0
Button {
text: "Test dialog"
onClicked: {
var component = Qt.createComponent("Popup.qml");
if (component.status === Component.Ready) {
var dialog = component.createObject(parent,{popupType: 1});
dialogConnection.target = dialog
dialog.show();
}
}
Connections {
id: dialogConnection
onVisibleChanged: {
if(!target.visible)
console.log(target.returnValue);
}
}
Here I use Connections to get back some result from the dialog. If you don't need it just remove the Connections item
You can use this
For example :
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.1
import QtQuick.Window 2.12
Window {
visible: true
width: 640
height: 480
title: qsTr("main 4")
color: "white"
Button {
onClicked: customMessage.open();
}
// Create Object dialog box
Dialog {
id: customMessage
width: 300 // Set the width of the dialog, which works on the desktop, but it does not work on Android
height: 200 // Set the height of the dialog, which works on the dekstop, but does not work on Android
// Create the contents of the dialog box
contentItem: Rectangle {
width: 600 // Set the width, necessary for Android-devices
height: 500 // Set the height, necessary for Android-devices
color: "#f7f7f7" // Set the color
CheckBox { z: 1;text: 'check it!'}
ComboBox {
z: 1
anchors.right: parent.right
}
// The area for the dialog box message
Rectangle {
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: dividerHorizontal.top
color: "#f7f7f7"
Label {
id: textLabel
text: qsTr("Hello, World!!!")
color: "#34aadc"
anchors.centerIn: parent
}
}
// Create a horizontal divider with the Rectangle
Rectangle {
id: dividerHorizontal
color: "#d7d7d7"
height: 2
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: row.top
}
Row {
id: row
height: 100 // Set height
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
Button {
id: dialogButtonCancel
anchors.top: parent.top
anchors.bottom: parent.bottom
// Set width button halfway line minus 1 pixel
width: parent.width / 2 - 1
style: ButtonStyle {
background: Rectangle {
color: control.pressed ? "#d7d7d7" : "#f7f7f7"
border.width: 0
}
label: Text {
text: qsTr("Cancel")
color: "#34aadc"
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
}
onClicked: customMessage.close()
}
Rectangle {
id: dividerVertical
width: 2
anchors.top: parent.top
anchors.bottom: parent.bottom
color: "#d7d7d7"
}
Button {
id: dialogButtonOk
anchors.top: parent.top
anchors.bottom: parent.bottom
width: parent.width / 2 - 1
style: ButtonStyle {
background: Rectangle {
color: control.pressed ? "#d7d7d7" : "#f7f7f7"
border.width: 0
}
label: Text {
text: qsTr("Ok")
color: "#34aadc"
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
}
onClicked: customMessage.close()
}
}
}
}
}
So I've searched many of the answers and can't seem to find anything specific on this... so here goes..
I have a standard Kendo UI Grid - and I've setup a column as follows:
{ title: "Sharing Enabled?",
field: "permissions_users_apps_user_sharing",
attributes: {
style: "text-align: center; font-size: 14px;"
},
filterable: true,
headerAttributes: {
style: "font-weight: bold; font-size: 14px; width: 40px;"
},
template: function(dataItem) {
if ( dataItem.permissions_users_apps_user_sharing == 0 ) {
return "<input type='checkbox' name='permissions_users_apps_status' id='permissions_users_apps_status' value='1' />"
} else if ( dataItem.permissions_users_apps_user_sharing == 1 ) {
return "<input type='checkbox' name='permissions_users_apps_status' id='permissions_users_apps_status' value='1' checked />"
}
}
},
What I'm trying to do is get the value of this checkbox (to see if it's changed) when I click a COMMAND button I've defined. The ROW is selectable.. so I can get the row's ID. But I can't seem to gather the value of the checkbox.
Anyone have suggestions?
Thanks in advance..
You can get the instance of checkbox in dataBound event when the checkbox state changes.
See if the below code helps you.
....
columns: [
{
{ field: "select", template: '<input id="${BindedColumn}" onclick="GrabValue(this)" type="checkbox"/>', width: "35px", title: "Select" },
}
....
selectable: "multiple, row",
dataBound: function () {
var grid = this;
//handle checkbox change
grid.table.find("tr").find("td:nth-child(1) input")
.change(function (e) {
var checkbox = $(this);
//Write code to get checkbox properties for all checkboxes in grid
var selected = grid.table.find("tr").find("td:nth-child(1) input:checked").closest("tr");
//Write code to get selected checkbox properties
......
//Code below to clear grid selection
grid.clearSelection();
//Code below to select a grid row based on checkbox selection
if (selected.length) {
grid.select(selected);
}
})
}
.....
function GrabValue(e)
{
//Alert the checkbox value
alert(e.value);
//get the grid instance
var grid = $(e).closest(".k-grid").data("kendoGrid");
//get the selected row data
var dataItem = grid.dataSource.view()[grid.select().closest("tr").index()];
}
using this method you get selected checkbox value.
$("#MultiPayment").click(function () {
var idsToSend = [];
var grid = $("#Invoice-grid").data("kendoGrid")
var ds = grid.dataSource.view();
for (var i = 0; i < ds.length; i++) {
var row = grid.table.find("tr[data-uid='" + ds[i].uid + "']");
var checkbox = $(row).find(".checkboxGroups");
if (checkbox.is(":checked")) {
idsToSend.push(ds[i].Id);
}
}
alert(idsToSend);
$.post("/whatever", { ids: idsToSend });
});
for more detail Goto
I have a question related the chart export.
Please see Jsfiddle here
I added a text label using chart.renderer.text on the Yaxis for the latest value of series.
If I directly click button "Export Image". There is no problem, the label can be displayed. I'm using the following way to export image. draw_labels() is a function to draw yaxis label.
$("#b").click(function () {
chart.exportChart(null, {
chart: {
backgroundColor: '#FFFFFF',
width: 972,
height: 480,
events: {
load: function () {
draw_labels(this);
}
}
}
});
});
The problem is after I clicked range selector or change Xaxis range. When I try to export the
chart to image, there is no labels are drawn. The following is the complete code.
The following is the complete code:
$(function () {
var chart;
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
events: {
load: function () {
draw_labels(this);
$("#b").click(function () {
chart.exportChart(null, {
chart: {
backgroundColor: '#FFFFFF',
width: 972,
height: 480,
events: {
load: function () {
draw_labels(this);
}
}
}
});
});
}
}
},
series: [{
name: 'AAPL',
id: 'test',
data: data,
tooltip: {
valueDecimals: 2
}
}],
navigator: {
enabled: false
},
yAxis: {
tickWidth: 0,
id: 'value_axis',
type: 'linear',
gridLineColor: '#EEE',
lineColor: '#D0CDC9',
lineWidth: 0,
minorTickInterval: null,
opposite: true,
offset: 0
},
xAxis: {
events: {
afterSetExtremes: function (e) {
console.log('test');
$('[id="test_text"]').remove();
draw_labels(chart);
}
}
}
});
});
function draw_labels(chart) {
$(chart.series).each(function (i, serie) {
var s_id = serie.options.id;
var temp_id = s_id;
var point = serie.points[serie.points.length - 1];
if (point) {
var pre, post;
if (point.y) {
var last_value_dis = (point.y).toFixed(1);
yaxis_name = 'value_axis';
//Get Yaxis position
var y_axis = chart.get(yaxis_name);
offsite_yaxis = 0;
element_text = chart.renderer.text(
//the text to render
'<span style="font-size:10px;font-weight:bold;color:' + serie.color + ';">' + last_value_dis + '</span>',
//the 'x' position
y_axis.width + y_axis.offset,
//the 'y' position
chart.plotTop + point.plotY + 3).attr({
id: temp_id + '_text',
zIndex: 999
}).add();
}
}
});
}
});
Here, I have fixed it for you. Here is a saved image:
Following changes have been done:
Added a redraw event to your exportchart
redraw: function () {
$("#test_text").remove() ;
draw_labels(this);
}
Changed this line in afterSetExtremes
$('[id="test_text"]').remove();
to
$("#test_text").remove() ;
Earlier one was not working as expected, so I had to change it.
Problem with disappearing text is related with id, when I removed it, label appears. But then I came across second issue, wrong y position. So i declare global variable, then when you call your function, set position of label, and use in chart exporting this variable. As a result label is exported correct.
http://jsfiddle.net/UGbpJ/11/