I'm trying to print all pages of kendo grid
I search alot I used this link
http://docs.telerik.com/KENDO-UI/controls/data-management/grid/walkthrough#printing
to print grid ,but it print the current page.
like this
note linked name still appear as linked and user can press it in print page.
I tried to use this code to load all pages , but it is not work since it show print page then load grid with all page items
var dataSource = gridElement.data("kendoGrid").dataSource;
dataSource.pageSize(dataSource.total());
I want to print all pages of grid in friendly layout , like one export grid to pdf it export friendly grid to print
Edit 1
here is my script to print all grid pages but it not work
$('#printGrid').click(function () {
printGrid();
});
function printGrid() {
var gridElement = $('#PageGrid'),
printableContent = '',
win = window.open('', '', 'width=800, height=500');
var dataSource = gridElement.data("kendoGrid").dataSource;
dataSource.pageSize(dataSource.total());
var htmlStart =
'<!DOCTYPE html>' +
'<html>' +
'<head>' +
'<link href="http://kendo.cdn.telerik.com/' + kendo.version + '/styles/kendo.common.min.css" rel="stylesheet" /> ' +
'<meta charset="utf-8" />' +
'<title>#GlobalResources.Print</title>' +
'<style>' +
'html { font: 11pt sans-serif; }' +
'.k-grid { border-top-width: 0; }' +
'.k-grid, .k-grid-content { height: auto !important; }' +
'.k-grid-content { overflow: visible !important; }' +
'div.k-grid table { table-layout: auto; width: 100% !important; }' +
'.k-grid .k-grid-header th { border-top: 1px solid; }' +
'.k-grid-toolbar, .k-grid-pager > .k-link { display: none; }' +
'</style>' +
'</head>' +
'<body>';
var htmlEnd =
'</body>' +
'</html>';
var gridHeader = gridElement.children('.k-grid-header');
if (gridHeader[0]) {
var thead = gridHeader.find('thead').clone().addClass('k-grid-header');
printableContent = gridElement
.clone()
.children('.k-grid-header').remove()
.end()
.children('.k-grid-content')
.find('table')
.first()
.children('tbody').before(thead)
.end()
.end()
.end()
.end()[0].outerHTML;
} else {
printableContent = gridElement.clone()[0].outerHTML;
}
doc = win.document.open();
doc.write(htmlStart + printableContent + htmlEnd);
doc.close();
win.print();
}
var gridElement = $('#PopUpGrid'),
printableContent = '',
win = window.open('', '', 'width=800, height=500, resizable=1, scrollbars=1'),
doc = win.document.open();
var htmlStart =
'<!DOCTYPE html>' +
'<html>' +
'<head>' +
'<meta charset="utf-8" />' +
'<title>Kendo UI Grid</title>' +
'<link href="http://kendo.cdn.telerik.com/' + kendo.version + '/styles/kendo.common.min.css" rel="stylesheet" /> ' +
'</head>' +
'<body>';
var htmlEnd =
'</body>' +
'</html>';
var gridHeader = gridElement.children('.k-grid-header');
if (gridHeader[0]) {
var thead = gridHeader.find('thead').clone().addClass('k-grid-header');
printableContent = gridElement
.clone()
.children('.k-grid-header').remove()
.end()
.children('.k-grid-content')
.find('table')
.first()
.children('tbody').before(thead)
.end()
.end()
.end()
.end()[0].innerHTML;
} else {
printableContent = gridElement.clone()[0].innerHTML;
}
doc.write(htmlStart + printableContent + htmlEnd);
doc.close();
win.print();
}
I hope you find it usefull. feel free to comment my errors
thanks.
The reason why your code is not working is that you are are setting
var dataSource = gridElement.data("kendoGrid").dataSource; dataSource.pageSize(dataSource.total());
inside your printGrid(). When you call dataSource.pageSize() then grid needs some time to reload records as per new pagesize and therefore your printGrid code doesn't wait for grid dataBound event to get completed. Hence you will only see the current page in your print preview as the grid reload is not completed yet.
So in order to solve this problem. First set datasource page size when user click print button like below:
$('#printGrid').click(function () {
var dataSource = $("#grid").data("kendoGrid").dataSource;
dataSource.pageSize(dataSource.total());
});
Then You need to move the method call printGrid() method to grid's dataBound event with the condition when pagesize equals the total record as below. This condition will confirm that the user has clicked on the print button. As earlier we had set data source pagesize to total record count in printGrid() method:
dataBound: function(e){
var grid = this;
if(grid.dataSource.data().length === grid.dataSource.total())
{
printGrid();
}
},
With this change now printGrid() only get call once grid reload is completed. I have prepared a full working example at dojo :
https://dojo.telerik.com/#vishwas.upadhyay#neuralt.com/uBAMOpuq
Cons
Loading all the records for printing has a serious problems when record size is larger. The browser will take a significant amount of time to load thousands of records or it might be unresponsive. So if your application renders a large number of records then you should be extra careful with this approach.
Related
<?php
echo '<style> #myProgress {
width: 100%;
background-color: grey;
}
#myBar {
width: 1%;
height: 30px;
background-color: green;
} </style>';
echo '<div id="myProgress">
<div id="myBar">1%</div>
</div>';
echo'<script src="jquery-3.2.1.min.js"></script>';
echo '<script type="text/javascript">
function move() {
$.getJSON("convo.php",function(data){});
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
$.getJSON("progress.php",function(results){
width=results;
if (width > 100) {
clearInterval(id);
}
else if(width==100)
{
elem.style.width = width + "%";
elem.innerHTML = width * 1 + "%";
}
else
{
width++;
elem.style.width = width + "%";
elem.innerHTML = width * 1 + "%";
}
});
}
}
</script>';
ob_flush();
flush();
echo '<br>
<button onclick="move()">Click Me</button>'
?>
/**** progress.php ***/
<?php
$content = #file_get_contents('logs/123.txt');
if($content){
exit(json_encode($progress));
}
/**** convo.php ***/
will generate logs/123.txt file
Can i know is there anyway for me to read a txt file & update my progress bar via ajax while the other function is running and updating this txt file?
But the progress bar should be updated real time , without waiting txt file update process finishes.
I already tried doing this but the issue is codeigniter keeps on running first process (.txt file update process) even though I call the 2nd function (updateProgressBar) using ajax while the 1st process is running it keeps on loading without returning data until finishes the 1st process. but when the 1st process is finished it returns the data which is useless .
can i know why codeigniter won't allow me to run 2 functions simultaneously?
Thanks in advance
I want to write a ckeditor plugin that adds a checkbox to the toolbar.
When an img element is selected, the checkbox should reflect whether the image has a certain class or not.
When something else than an image is selected, the checkbox should be
disabled, or maybe invisible.
When I check or uncheck the checkbox, the class should be added/removed to/from the img.
In other words, I want to add something else than a button to the toolbar (those that are added with editor.ui.addButton), and that something should be a checkbox.
How do I do that?
I managed to do it anyway, using editor.ui.add and editor.ui.addHandler. Here is a screenshot:
plugin.js:
CKEDITOR.plugins.add('add_zoomable_to_image',
{
init: function( editor )
{
var disabled_span_color = "#cccccc";
var enabled_span_color = "#000000";
var cb;
var span;
var html =
"<div style='height: 25px; display: inline-block'>" +
"<div style='margin: 5px'><input class='add_zoomable_cb' type='checkbox' disabled='disabled'>" +
"<span class='add_zoomable_span' style='color: " + disabled_span_color + "'> Add zoomable to image</span>" +
"</div>" +
"</div>";
editor.ui.add('add_zoomable_to_image', "zoomable_button", {});
editor.ui.addHandler("zoomable_button",
{
create: function ()
{
return {
render: function (editor, output)
{
output.push(html);
return {};
}
};
}
});
editor.on("selectionChange", function()
{
var sel = editor.getSelection();
var ranges = sel.getRanges();
if (ranges.length == 1)
{
var el = sel.getStartElement();
if (el.is('img'))
{
enable_input();
if (el.hasClass('zoomable'))
check_cb();
else
uncheck_cb();
}
else
disable_input();
}
else
disable_input();
});
editor.on("instanceReady", function ()
{
cb = $('.add_zoomable_cb');
span = $('.add_zoomable_span');
cb.change(function()
{
var element = editor.getSelection().getStartElement();
if (cb.is(':checked'))
element.addClass('zoomable');
else
element.removeClass('zoomable');
});
});
function enable_input()
{
cb.removeAttr('disabled');
span.css('color', enabled_span_color);
}
function disable_input()
{
uncheck_cb();
cb.attr('disabled', 'disabled');
span.css('color', disabled_span_color);
}
function check_cb()
{
cb.attr('checked', 'checked');
}
function uncheck_cb()
{
cb.removeAttr('checked');
}
}
});
CKEditor doesn't include the option to add a checkbox to the toolbar, so your first step is to look at their code and extend it to add the checkbox.
Then look at how other buttons work to modify the content and detect when the selection in the editor changes to reflect its new state, and apply those ideas to your checkbox.
Is there anyway to use validation summary inline kendo grid. please advise. if any link that i could follow.
No, you cannot use a validation summary with Kendo UI grid.
Here is a way to use a validation summary in KendoUI grid
Just make ul element above your grid like
<ul class="errorMessages"></ul>
Then in the edit function of the grid get a reference to the validator and add a click event to the update button
edit : function(e) {
var myValidator = e.sender.editable.validatable
e.container.find('.k-grid-update').click(function() {
if (!myValidator.validate()) {
displayErrors(myValidator)
}
});
}
Then the displayErrors function note I use a custom data attribute to make a friendly name for an input ie instead of using the id="firstName" I add data-myfriendly="First Name" you can use whatever you want title, id, name ect
function displayErrors(validator) {
var errorList = $('ul.errorMessages');
errorList.empty();
var myerrors = validator._errors;
var count = 0;
$.each(myerrors, function(field, errmsg) {
//Set focus on first field
if (count === 0) {
$('#' + field).focus();
count++;
}
//Set css
$('#' + field).css({
'box-shadow' : '0 0 5px #d45252',
'border-color' : '#b03535'
});
var titlerrmsg = $('#' + field).attr("title");
var friendly = $('#' + field).attr("data-myfriendly");
errorList.append('<li><span>' + friendly + ' is</span> ' + titlerrmsg + '</li>');
});
errorList.show();
}
Hope this helps!
I have a javascript that must generate in runtime.The text of script is generate in controller class :
private string mapString
{
get
{
Locations loc = new Locations();
string appPath = Request.ApplicationPath;
loc.ReadXml(Path.Combine(Request.MapPath(appPath) + "\\App_Data", "Locations.xml"));
StringBuilder sb = new StringBuilder();
for (int i = 0; i < loc.Specfications.Count; i++)
{
sb.Append("var myLatLng" + i.ToString() + "= new google.maps.LatLng(" + loc.Specfications[i].Y.ToString() + "," +
loc.Specfications[i].X.ToString() + ");");
sb.Append(" var beachMarker" + i.ToString() + " = new google.maps.Marker({position: myLatLng" + i.ToString() + ",map: map,icon: image,title:'" + loc.Specfications[i].Title + "'});");
....
...
...
ViewData["MapString"] = mapString;
When I use it in script tag :
<script type="text/javascript">
function initialize() {
#Server.HtmlDecode(ViewData["MapString"].ToString())
}
</script>
It dosen't return a true text and it retruns something like this:
contentString0 = '<table width="100%" style="font-family: tahoma; text-align: right; font
**update : The site didn't show my question correctly ,I want to show "'<" but it show "'<"
but it must return :
contentString0 ='
you see that it convert "'<" to "'<" .
But when I use : #Server.HtmlDecode(ViewData["MapString"].ToString()) out of script tag ,all things is OK.
You may want to do it this way, which I think is going to be more flexible than generating code in your controller :
Controller action :
public JsonResult GetCoords()
{
// your code here - im putting a generic result you may
// need to put some logic here to retrieve your location / locations
var result = new { lon = "51.0000", lat = "23.0000" };
return Json(result, JsonRequestBehavior.AllowGet);
}
in your view add :
<script type="text/javascript">
$(document).ready(function () {
$.getJSON('/YourController/GetCoords', function (jsonData) {
var lon = jsonData.lon;
var lat = jsonData.lat;
yourGoogleMapFunction(lon, lat);
});
});
</script>
I'm new to jQuery and trying to combine the use of a tooltip plugin and a lightbox plugin. More specifically, I am using Colorbox and vtip.
Colorbox generates a div which displays an image like this:
<div id="cboxLoadedContent" style="display: block; width: 400px; overflow: auto; height: 498px;">
<br>
<img src="image.jpg" id="cboxPhoto" style="margin: 49px auto auto; border: medium none; display: block; float: none; cursor: pointer;">
<br>
</div>
</code>
I next add class="vtip" title="This is a tip." in order to use the vtip style, but for some reason it does not work when it's a title tag on an element dynamically generated by Colorbox, but works on anything already loaded on the page.
Can anyone explain to me why this is and possibly offer some solutions to fix this problem?
If you don't want to have to re-call the function every time a new element is written to the page, I wrote an update to vtip. I rewrote the vtip function as a jQuery plugin, to be chainable, to allow custom settings, and to work with live elements. Its using a mapping of events, so it will work with jQuery 1.4.3 and up.
(function ($) {
$.fn.vtip = function (options) {
var settings = {
xOffset: -10,
yOffset: 6,
arrow: '/images/vtip_arrow.png'
};
if (options) $.extend(settings, options);
return this.live({
mouseenter: function (a) {
this.t = this.title;
this.title = "";
this.top = (a.pageY + settings.yOffset);
this.left = (a.pageX + settings.xOffset);
$("body").append('<p id="vtip"><img id="vtipArrow" />' + this.t + "</p>");
$("p#vtip #vtipArrow").attr("src", settings.arrow);
$("p#vtip").css("top", this.top + "px").css("left", this.left + "px").fadeIn("fast");
},
mouseleave: function (a) {
this.title = this.t;
$("p#vtip").fadeOut("fast").remove();
},
mousemove: function (a) {
this.top = (a.pageY + settings.yOffset);
this.left = (a.pageX + settings.xOffset);
$("p#vtip").css("top", this.top + "px").css("left", this.left + "px");
}
});
};
})(jQuery);
// You can use it with any class, I'm using the class 'vtip' below.
$(document).ready(function(){
$('.vtip').vtip();
});
// If necessary, add custom settings like so:
$('.vtip').vtip({xOffset:-10,yOffset:10,arrow:'/images/customArrow.png'});
I tried the code/re-written plugin on this page and ran into some complications... perhaps this will work better for someone and save you some time:
(function ($) {
$.fn.vtip = function (options) {
var settings = {
xOffset: -10,
yOffset: 20,
arrow: 'http://simages0.showtimesfast.com/icons2/vtip_arrow.png'
};
if (options) $.extend(settings, options);
return this.live('mouseover mouseout mousemove', function(a){
if(a.type == 'mouseover'){
this.top = (a.pageY + settings.yOffset);
this.left = (a.pageX + settings.xOffset);
$("body").append('<p id="vtip"><img id="vtipArrow" />' + this.title + "</p>");
$("p#vtip #vtipArrow").attr("src", settings.arrow);
$("p#vtip").css("top", this.top + "px").css("left", this.left + "px").fadeIn("fast");
}else if (a.type == 'mouseout'){
$("p#vtip").fadeOut("fast").remove();
}else if (a.type == 'mousemove'){
this.top = (a.pageY + settings.yOffset);
this.left = (a.pageX + settings.xOffset);
$("p#vtip").css("top", this.top + "px").css("left", this.left + "px");
}
});
};
})(jQuery);
Currently in use on http://www.showtimes.ca/ for you to see it working in action. Thanks to Steve above as you led me in the right direction for working with live events.
The clue is at the bottom of the vtip file:
jQuery(document).ready(function($){vtip();})
vtip is being called in document ready. It doesnt know about the elements you havent yet added. You need to recall the vtip function after you've added your elements.
vtip();
PS vtip hasnt been written as a plugin, otherwise you could chain it together with your other code eg
$('div').append('<a>example</a>').vtip(); //currently this wont work
You might want to contact the author and suggest the change, or find another tooltip - there are plenty around.