Thanks in advance. How to make all bordered excel cells when export? I could not find documantation or manual about that.
To add a border around each Excel cell, you can use the following:
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'excelHtml5',
title: '', // no title row in excel sheet
text: 'Excel', // label for the export button
customize: function ( xlsx ) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$( 'row c', sheet ).attr( 's', '25' );
}
}
]
} );
} );
</script>
This takes advantage of one of the built-in styles available to DataTables when exporting data to Excel. Specifically, the attr( 's', '25' ) function uses style number 25 (normal text with thin black border).
Here is an example of the output:
Related
Would anyone happen to know how to set readonly in a cell/column of gravity forms list field? I need one column for input and the others should not be edited by the user.
Gravity Perks has confirmed the list column is not supported by their plugin.
Add the following to an HTML field on your form:
**
You will need to know the list field id and the column you want to make read-only. If your list field is 32 for instance and you want the second column to be "read-only", you would replace the second line below with .gfield_list_32_cell2
<script>
jQuery(document).ready(function(){
jQuery( '.gfield_list_1_cell1' ).find( 'input, select, textarea' ).each(
function() {
if ( jQuery( this ).val() != '' ) {
jQuery( this ).prop( 'readonly', true );
}
});
});
</script>
I am looking to build a date range picker that's values only consist of January-December of a single year at a time.It will look something like this:
(This is taken from my existing kendo date range picker and poorly photoshopped)
I have built one using the kendo date picker but it seems to require two calendars, one for start date and the other for end date. Being that my range can only span months in a single year, I just need one calendar like below where the user can either click and drag for the desired range, or they can just click two dates. Does anyone know of a date range picker that already functions this way? Or if there is a way to alter the kendo one to do the same?
Thanks.
Edit: Here is my code for my existing date range picker:
var start = $("#StartDate").kendoDatePicker({
value: LastMonthString,
format: "MM/yyyy",
start: 'year',
depth: 'year',
change: startChange,
open: function() {
$('#StartCalendar').append($('#StartDate_dateview'));
},
close: function(e) {
e.preventDefault();
}
}).data("kendoDatePicker");
var end = $("#EndDate").kendoDatePicker({
value: TodaysDateString,
format: "MM/yyyy",
start: 'year',
depth: 'year',
change: endChange,
open: function() {
$('#EndCalendar').append($('#EndDate_dateview'));
},
close: function(e) {
e.preventDefault();
}
}).data("kendoDatePicker");
start.max(end.value());
end.min(start.value());
$("#StartDate").attr("readonly", true);
$("#EndDate").attr("readonly", true);
start.open();
end.open();
This is how I've made it to show years only but you can change the format obviously
$('#sandbox-container').datepicker({
format: "yyyy",
startView: 1,
viewMode: "years",
minViewMode: "years",
minViewMode: "years",
multidate: true,
multidateSeparator: ", ",
autoClose: true,
}).on("changeDate",function(event){
var dates = event.dates, elem = $('#sandbox-container');
if(elem.data("selecteddates") == dates.join(",")) return; //To prevernt recursive call, that lead to lead the maximum stack in the browser.
if(dates.length>2) dates=dates.splice(dates.length-1);
dates.sort(function(a,b){return new Date(a).getTime() - new Date(b).getTime()});
elem.data("selecteddates",dates.join(",")).datepicker('setDates', dates);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<div id="sandbox-container">
<input type="text" id="date" value="">
</div>
(I asked a similar question once before, but the issue has cropped up again.)
I have a very simple pie chart using ZingCharts, but even though all of the examples on the ZingCharts site show percentages on each slice, I can't get the percentages to show. Note that I am using value boxes. I am using the most recent version of ZingCharts from the CDN: https://cdn.zingchart.com/zingchart.min.js
Note that I am looking for the percentage to appear ON the slice, not in the value box which is text attached to each slice by a line.
Here is my code:
<div id="pie-chart"> </div>
<script>
var slices = var slices = slices = [
{"values":[59],"text":"USA"},
{"values":[55],"text":"UK"}
];
var chartData = {
"type":"pie",
"plot":{
"value-box":{
"visible":true,
"placement":"out",
"text":"%t (%v)"
}
},
"series": slices
};
zingchart.render({
id:"pie-chart",
data: chartData,
height:400,
width:"100%"
});
</script>
I want to use a standard pie chart, not a pie chart with more effects.
To show the percentage value on charts, you would need to use the %npv (node-percent-value) token instead of %v which displays the raw value. More information in the pie chart types page : http://www.zingchart.com/docs/chart-types/pie/
Note that the default functionality for a value box is
"value-box" : {
"placement" : "in",
"text" : "%npv%"
}
Therefore, you can choose to omit that from your JSON. In the example below, I have shown the JSON with the options explicitly.
var slices = [
{"values":[59],"text":"USA"},
{"values":[55],"text":"UK"}
];
var chartData = {
"type":"pie",
"series": slices,
"plot" : {
"value-box" : {
"placement" : "in",
"text" : "%npv%"
}
}
};
zingchart.render({
id:"pie-chart",
data: chartData,
height:400,
width:"100%"
});
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<div id="pie-chart"></div>
I want to export the kendo grid data into excel. I am using kendo dropdownlist as a template for some columns.
When i export it exports but it not show the text value for those columns but rather shows value for that fields.
This may not be the "best" solution but it worked for me. Basically I created a function that loops through and processes the row with the dropdown, using a switch statement to set the text based on the value (the data that comes through unfortunately only has the value, rather than the object).
Here is the markup for my grid:
<div id="grid" data-role="grid"
data-sortable=" {mode: 'single' , allowunsort:true }"
data-toolbar="[{template: this.model.getToolbar}]"
data-excel="{ fileName: 'export.xlsx', allPages:'true' }"
data-excel-export="model.curateExcelData"
data-columns="#string.Format(#"[
{{ title:'{0}', field: 'Column1', width:80 }},
{{ title:'{1}', field: 'Column2', width:80 }},
{{ title:'{12}', field: 'DropDownColumn',template: kendo.template($('#dropdown-template').html()),'width':80, sortable: false }},
]", CommonResource.Column1, CommonResource.Column2, CommonResource.DropDownColumn)"
data-bind="source: items"
data-editable="inline">
</div>
And the template:
<script id="dropdown-template" type="text/x-kendo-template">
<input data-role="dropdownlist"
data-auto-bind="false"
data-value-primitive="true"
data-text-field="Text"
data-value-field="Value"
data-bind="value: dropDownValue, source: dropDownValues"
style="width:65px" />
</script>
And here is the function that updates the values for the export (in my case I had a dropdown that was "Days" and "Weeks", which was the 12th column):
curateExcelData: function (data) {
var sheet = data.workbook.sheets[0];
$.each(sheet.rows, function (index, row) {
if (row.type == "data") {
switch (row.cells[12].value) {
case "D":
row.cells[12].value = "Days";
break;
case "W":
row.cells[12].value = "Weeks";
default:
break;
}
}
});
},
How to keep all the qtips inside a container (I have already tried position.container, position.viewport and position.adjust.method) without any luck, my best guess is that I am not using them correctly.
Update:1 I have created a sample app with more details on below url
http://secure.chiwater.com/CodeSample/Home/Qtip
Update:2 I have created jsfiddle link too. http://jsfiddle.net/Lde45mmv/2/
Please refer below screen shot for layout details.
I am calling the area shown between two lines as $container in my js code.
So far I have tried tweaking viewport, adjust method but nothing helped. I am hoping this is possible and I would greatly appreciate any help.
Below is my javascript code which creates qtip2.
//Now create tooltip for each of this Comment number
$('#cn_' + num).qtip({
id: contentElementID,
content: {
text: .....
var $control = $('<div class="qtip-parent">' +
' <div class="qtip-comment-contents">......</div>' +
' <div class="clearfix"></div>' +
' <div class="qtip-footer"><span class="qtip-commenter">...</span><span class="pull-right">...</span></div>' +
'</div>'
);
return $control;
},
button: false
},
show: 'click',
hide: {
fixed: true,
event: 'unfocus'
},
position: {
my: 'top right',
at: 'bottom right',
target: $('#cn_' + num),
container: $container,
//viewport: true,
adjust: { method: 'shift none' }
},
style: {
tip: {
corner: true,
mimic: 'center',
width: 12,
height: 12,
border: true, // Detect border from tooltip style
//offset: 25
},
classes: 'qtip-comment'
},
events: {
show: function (event, api) {
...
},
hide: function (event, api) {
...
}
}
});
Example of jalopnik page which shows what I am looking for (FWIW jalopnik example doesn't use qtip2).
I don't think qtip API supports this functionality. I ended up re-positioning the tooltip on visible event.
I have updated the demo page and jsfiddle link below is code for doing this.
events: {
visible: function (event, api) {
var $qtipControl = $(event.target);
$qtipControl.css({ 'left': contentPosition.left + "px" });
var $qtipTipControl = $qtipControl.find(".qtip-tip");
var $target = api.get("position.target");
$qtipTipControl.css({ "right": 'auto' });
//I am using jquery.ui position
$qtipTipControl.position({
my: "center top",
at: "center bottom",
of: $target
});
}
}
Problem with this approach is that there is noticeable jump when I re-position the qTip. But in lack of any other option for time being I will settle with this.
The ideal approach would be to allow callback method thru position.adjust currently it only supports static values for x and y, if a method was allowed here it would make things much smoother.