We Keep Coding

Why does setting objectPosition cause my JavaScript to crash?

Style objectPosition Property gives this example of setting objectPosition:
document.getElementById("myImg").style.objectPosition = "0 10%";
However, when I try to set objectPosition it causes my JavaScript to crash.
In the following code I use CSS to set objectPosition like this:
#img1 {
object-position: 0 0;
width: 635px ;
height: 580px ;
}
Near the bottom of function getImg, my debug code (the “insert” statement) shows it set to “0px 0px”. However, if I proceed this with
imgStyle.objectPosition = "0 0";
The “insert” statement and all following statements are not executed. Here’s my full code with the offending statement commented out:
"use strict";
const numberOfFigures = document.getElementsByTagName('figure').length;
const scale = 3; // scaling up factor
// The function "insert" is used purely for debug purposes
function insert(figNum) {
document.getElementById("para").innerHTML = "OK so far" + figNum;
}
// Create all thumbnails & big images.
for (let i = 0; i < numberOfFigures; i++) {
getImg(i + 1);
}
function getImg(figNum) {
// Create the thumbnails and big images
let startPosn = "0px"; // x-coordinate of object-position for thumbnail
var btnDiv = document.createElement('div');
btnDiv.setAttribute("id", "bigImg" + figNum);
btnDiv.style.backgroundColor = "white";
// Get the figure caption
const figcap = document.getElementById("fig" + figNum).firstElementChild;
btnDiv.innerHTML =
'<button type="button"' +
'class="displayBtn"' +
'onclick="hideBigImg (' +
figNum +
')">Hide large image</button>';
const btnPtr = figcap.appendChild(btnDiv);
/* Append the button to the
figcaption */
var imgDiv = document.createElement('div');
imgDiv.setAttribute("id", "imgDiv" + figNum);
if (figNum === 1) {
/* First image needs height: 100vh or only the top slice is
displayed. Other images may be messed up if this is applied to
them. */
imgDiv.innerHTML = '<' + 'img id="img' + figNum + '" ' +
'class = "sprite-img" ' +
'src="bates-sprite.jpeg" ' +
'style="height: 100vh; ' +
'transform-origin: top left; ' +
'transform: scale(' +
scale + ');">';
} else {
imgDiv.innerHTML = '<' + 'img id="img' + figNum + '" ' +
'class = "sprite-img" ' +
'src="bates-sprite.jpeg" ' +
'style="transform-origin: top left; ' +
'transform: scale(' +
scale + ');">';
}
const imgPtr = btnPtr.appendChild(imgDiv);
/* Append the img to the
button */
/* Make imgDiv high enough to hold the scaled up image & make the
accompanying text visible.
IMPORTANT to do this AFTER creating & appending the. */
// Get the height and width of the image
let img = document.getElementById("img" + figNum);
const imgStyle = getComputedStyle(img);
// Set imgDiv to exactly hold image
imgDiv.style.width = parseInt(imgStyle.width) * scale + "px";
imgDiv.style.height = parseInt(imgStyle.height) * scale + "px";
imgDiv.style.overflow = "hidden"; // Clip off rest of sprite
/*********************** Create thumbnail here *************/
let thumbHTML = '<' + 'div id="thumbDiv' + figNum + '" ' +
'onclick = "showBigImg(' +
figNum + ')" ' +
'style="float: left; ' +
'height: imgStyle.height; ' +
'width: imgStyle.width; ' +
'margin-right: 1.5em; ' +
'background-color: white; ' +
'border: thick solid black;"> ' +
'<' + 'img id="img' + figNum + '" ' +
'class = "sprite-img" ' +
'src="bates-sprite.jpeg" ' +
'style="transform-origin: top left; ' +
'transform: scale(0.5);" ' +
'onclick = "showBigImg(' +
figNum + ')";>' +
'</div>';
figcap.insertAdjacentHTML("afterend", thumbHTML);
/* Append the
thumbnail to the
figcaption */
/* Shrink the div to match the size of the thumbnail, and free up all the
blank space which the full size image would have occupied if it hadn't
been reduced with transform: scale */
let thumbnail = document.getElementById("thumbDiv" + figNum);
thumbnail.style.width = parseInt(imgStyle.width) / 2 + "px";
thumbnail.style.height = parseInt(imgStyle.height) / 2 + "px";
// Set object-position for image in sprite
//imgStyle.objectPosition = "0 0";
insert(imgStyle.objectPosition);
hideBigImg(figNum);
}
function showBigImg(figNum) {
document.getElementById('bigImg' + figNum).style.display = 'block';
document.getElementById('thumbDiv' + figNum).style.display = 'none';
}
function hideBigImg(figNum) {
document.getElementById('bigImg' + figNum).style.display = 'none';
document.getElementById('thumbDiv' + figNum).style.display = 'block';
}
/* Global constants */
:root {
--shrink: 0.30;
/* Size compressed to 30% */
}
figure {
display: block;
width: 96%;
float: left;
border-width: thin;
}
figcaption {
background-color: yellow;
}
.sprite-img {
background-repeat: no-repeat;
object-fit: none;
}
#img1 {
object-position: 0 0;
width: 635px;
height: 580px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="general.css">
</head>
<body>
<figure id="fig1">
<figcaption>Camberley Mail</figcaption>
<p id="para">Text to go with picture.</p>
</figure>
</body>
</html>

The reason why the program 'crashes' or more specifically throws an Exception is because you are trying to modify the properties of a read-only object.
In detail:
const img = document.querySelector("img");
const imgStyle = getComputedStyle(img); // imgStyle is a read-only object
imgStyle.objectPosition = "0 0";
The above code will throw:
Uncaught DOMException: Failed to set the 'object-position' property on 'CSSStyleDeclaration': These styles are computed, and therefore the 'object-position' property is read-only.
As stated in the MDN documentation:
"The object from getComputedStyle is read-only, and should be used to inspect the element's style — including those set by a element or an external stylesheet.
The element.style object should be used to set styles on that element, or inspect styles directly added to it from JavaScript manipulation or the global style attribute."
So, based on the docs, you should use the element.style object for setting the properties:
img.style.objectPosition = "0 0";

How to add a line break in oldschool javascript div

I have to alter the following code somehow to add line breaks to the labels on the buttons generated by AddRemoteButtonText. Tried everything I found on this site, but nothing worked yet (most probably because I`m just starting out coding javascript). Mostly tried adding another variable to the function and then implementing it by "\n" .
var size = 20;
var repeat_timer;
function AddRemoteButtonText(num, posx, posy, wx, wy, color, label, remote, command, initial_delay, repeat_delay)
{
document.write('<div id="' + num + '" class="button ' + color + '" style="position:absolute; top:' + posy + 'px; left:' + posx + 'px; height:' + wy + 'px; width:' + wx + 'px; line-height: ' + wy + 'px;" align="center">' + label + '</div>');
document.getElementById(num).onmouseup = function () { SendIRCommand (num,remote,command,initial_delay,repeat_delay); EndSendCommand (num) };
document.getElementById(num).onmouseleave = function () { EndSendCommand (num) };
}
}
};
Thanks for your answer!

Add '<br>' like in the below example
document.write(variable +'<br/>'+ variable2);

I would probably do it like this (simplified for example purposes):
var i = 0;
var aboveLineBreak;
var belowLineBreak;
function AddRemoteButtonText() {
console.log(i);
//define some text to print to the button
aboveLineBreak = "above br" + i;
belowLineBreak = "below br" + i;
//create a button object
var btn = document.createElement("DIV");
//add our text, including the line break, to the button
btn.appendChild(document.createTextNode(aboveLineBreak));
btn.appendChild(document.createElement("BR"));
btn.appendChild(document.createTextNode(belowLineBreak));
//define our button's CSS style
btn.setAttribute("class", "button red");
//to set the position, do:
//btn.style.position = "absolute";
//btn.style.top = whatever;
//and so on...
//add listeners if needed...
btn.onmouseup = function () { console.log("foo"); };
//finally add the button to the document's body and increment i
document.body.appendChild(btn);
i++;
}
.button {
width: 33%;
height: 45px;
}
.red {
background-color: darkred;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<button onClick="AddRemoteButtonText();"> Add Remote Button Text </button>
</body>
</html>
Not the most beautiful buttons, but if you simply substitute my CSS with your own you should have a working line break. If not, we will need you to post your CSS so we can have a look at it.

Make the parent div as big as its child

I got some div in a parent div. The parent div should only be as big as its child divs.
So this is the current view
function record(id, title, description, content, dateOfCreation) { // the object
this.id = id;
this.title = title;
this.description = description;
this.content = content;
this.dateOfCreation = dateOfCreation;
this.lastEdited = dateOfCreation;
}
function init(){
var elements = []; // all records get stored here
for (var i = 0; i < 3; i++) { // create some objects
elements.push(new record(
i,
"title " + i,
"description " + i,
"content " + i,
"date " + i));
}
$(elements).each(function (index, currentRecord) { // create the div containers
var recordContainer = $("<div></div>");
recordContainer.addClass("recordContainer");
$(document.body).append(recordContainer);
recordContainer.append($("<div>" + currentRecord.title + "</div>"));
recordContainer.append($("<div>" + currentRecord.description + "</div>"));
recordContainer.append($("<div>" + currentRecord.dateOfCreation + "</div>"));
recordContainer.append($("<div>" + currentRecord.lastEdited + "</div>"));
});
}
init(); // call the routine
.recordContainer{
margin: 10px;
border: solid;
border-width: 1px;
border-radius: 2px;
border-color: #e8e9e9;
box-shadow: 1px 1px 1px #999999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
So I want recordContainer having a relative size. When looking for some information, I tried out adding display: inline; to "recordContainer". But then doing this, the container gets weird (?). You need to try it out, then you will see what I mean.
How can I achieve my desired div?

If you need them to be narrow but remain stacked vertically, use display: table, see the snippet below.
If you need them to be narrow and go onto the same line (and possibly wrap if that no longer fits), use display: inline-block.
function record(id, title, description, content, dateOfCreation) {
this.id = id;
this.title = title;
this.description = description;
this.content = content;
this.dateOfCreation = dateOfCreation;
this.lastEdited = dateOfCreation;
}
function init() {
var elements = []; // all records get stored here
for (var i = 0; i < 3; i++) { // create some objects
elements.push(new record(i, "title " + i, "description " + i, "content " + i, "date " + i));
}
$(elements).each(function(index, currentRecord) {
var recordContainer = $("<div></div>");
recordContainer.addClass("recordContainer");
$(document.body).append(recordContainer);
recordContainer.append($("<div>" + currentRecord.title + "</div>"));
recordContainer.append($("<div>" + currentRecord.description + "</div>"));
recordContainer.append($("<div>" + currentRecord.dateOfCreation + "</div>"));
recordContainer.append($("<div>" + currentRecord.lastEdited + "</div>"));
});
}
init(); // call the routine
.recordContainer {
margin: 10px;
border: solid;
border-width: 1px;
border-radius: 2px;
border-color: #e8e9e9;
box-shadow: 1px 1px 1px #999999;
display: table;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

I made some changes to improve semantics and performance as well. The problem is that the element "DIV" is by default a block element and therefore occupy the entire horizontal space.
I hope this solution helps you.
function record(id, title, description, content, dateOfCreation) { // the object
this.id = id;
this.title = title;
this.description = description;
this.content = content;
this.dateOfCreation = dateOfCreation;
this.lastEdited = dateOfCreation;
}
function init(){
var elements = []; // all records get stored here
for (var i = 0; i < 3; i++) { // create some objects
elements.push(new record(
i,
"title " + i,
"description " + i,
"content " + i,
"date " + i));
}
$(elements).each(function (index, currentRecord) { // create the div containers
var recordContainer = $("<div class='recordContainer'><div class='container container-" + index + "'></div></div>");
$(document.body).append(recordContainer);
$(".container-" + index).append("<div>" +
"<p>" + currentRecord.title + "</p>" +
"<p>" + currentRecord.description + "</p>" +
"<p>" + currentRecord.dateOfCreation + "</p>" +
"<p>" + currentRecord.lastEdited + "</p></div>");
});
}
init(); // call the routine
.recordContainer{
display: inline-block;
margin: 0;
}
.container{
margin: 0 .5em;
padding: .5em;
border: 1px solid #cccccc;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 1px 1px 10px #ccc;
-moz-box-shadow: 1px 1px 10px #ccc;
box-shadow: 1px 1px 10px #ccc;
}
.container p {
text-align: center;
}
.container p:nth-child(odd){
background: #eee;
margin: 0;
padding: .3em .5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

how to create slideshow for string 64 type image in MVC

I'm having trouble to create image slideshow. An image fetched from data base and binded into view model. it working fine. now i want to create slideshow with available images. i had tried like this.
$(function () {
function loop() {
$('.slider .inner-wrap').fadeIn("slow").css('marginLeft', 0).delay(2000)
.animate({ "marginLeft": "-200px" }, 700).delay(2000)
.animate({ "marginLeft": "-400px" }, 700).delay(2000)
.fadeOut("slow", loop);
}
loop();
});
.slider {
width: 200px;
height: 200px;
overflow: hidden;
margin: 30px auto;
background-image: url('http://www.thatssotrue.com/images/ajax_loader.gif');
background-size: 50px 50px;
background-position: center center;
background-repeat: no-repeat;
}
.slider img {
width: 200px;
height: 200px;
}
.inner-wrap {
width: 600px;
}
.item-1, .item-2, .item-3 {
display: inline-block;
vertical-align: top;
}
<tr>
<td>
<div class="slider">
<div class="inner-wrap">
<img class=" item-1" id="slides" />
</div>
</div>
</td>
</tr>
this is how i had bind my images
for (var i = 0; i < images.length; i++) {
var imgid = i;
var imagetemp = "<img id='" + imgid + "'style='margin:5px;cursor:zoom-in;width:200px;height: 150px;' onclick='getid(this)' src='" + clubimage[i] + "'>";// onclick='getid(this)'
var slider = "<img id='" + imgid + "'src='" + clubimage[i] + "'>";
$("#image").append(imagetemp);
$("#slides").append(slider);
}
My images unable to shows here. please help me. thankyou

Finally i had achieved my slideshow in knockout js. complete solutions is here.
my ajax response. I had call swapImage() method in it.
success: function (data) {
image = JSON.parse(data.imageResult);
self.bindimage(image);
for (var i = 0; i < image.length; i++) {
var imgid = i;
var imagetemp = "<img id='" + imgid + "'style='margin:5px;cursor:zoom-in;width:200px;height: 150px;' onclick='getid(this)' src='" + image[i] + "'>";
var imgslide = "<li><img class='slides' style='margin:5px' src='" +image[i] + "'/></li>";
$("#image").append(imagetemp);
}
swapImage();
if (data.imageResult == '"Invalid Connection"') {
alert("Invalid Connection");
}
i had created javascript method like this.
var i = 0;
function swapImage() {
var im = image[i];
$("#imgslide").empty();
var imgid = 'galimg' + i;
var imagesilde = "<img id='" + imgid + "'style=width:500px;height:450px;'rel='alternate' src='" + image[i] + "'/>";
$("#imgslide").fadeIn("slow", "swing");
$("#imgslide").append(imagesilde);
if (i < image.length - 1) i++; else i = 0;
setTimeout('swapImage()', 3000);
}
And bind into HTML tag like this.using selector
<div id="imgslide" />
Finally i got my requirement.

Print wide html table using HTML/css/javascript (with responsive design)

I have tried the code from the article to print my wide table in a single page, that worked great only for Google Chrome. Couldn't get it working on IE as mentioned in the article and comments. Below is my sample code with IE I tried almost for hours and couldn't get the issue.
function printGrid() {
var gridElement = $('#grid'),
printableContent = '',
win = window.open('', '', 'scrollbars=1,resizable=1,width=1150,height=650,left=0,top=0'),
doc = win.document.open(),
dataSource = $("#grid").data("kendoGrid").dataSource;
var htmlStart =
'<!DOCTYPE html>' +
'<html>' +
'<head>' +
'<meta charset="utf-8" />' +
'<link href="../Content/kendo/2014.1.318/kendo.common.min.css" rel="stylesheet" />' +
'<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: fixed; border:1px solid #000000; width: 100% !important; }' +
'.k-grid .k-grid-header th { border-top: 1px solid; border:1px solid #000000;}' +
'.k-grid td {border:1px solid #000000;} ' +
'.k-grid-toolbar, .k-grid-pager > .k-link { display: none; }' +
'#media only screen and (max-width: 760px),(min-device-width: 768px) and (max-device-width: 1024px) {table, thead, tbody, th, td, tr { display:block;width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;float:left;clear:left;}' +
'thead tr {position: absolute;top: -9999px;left: -9999px;}' +
'tr {border: 1px solid #ccc;}' +
'td {border: none;border-bottom: 1px solid #eee;position: relative;padding-left: 50%;height:10px;}' +
'td:before {position: absolute;top: 6px;left: 6px;width: 45%;padding-right: 10px;white-space: nowrap;}' +
'td:nth-of-type(1):before {content: "Column1";}' +
'td:nth-of-type(1):before {content: "Column2";}' +
'td:nth-of-type(1):before {content: "Column3";}' +
'td:nth-of-type(1):before {content: "Column4";}' +
'td:nth-of-type(1):before {content: "Column5";}' +
'td:nth-of-type(1):before {content: "Column6";}' +
'td:nth-of-type(1):before {content: "Column7";}' +
'td:nth-of-type(1):before {content: "Column8";}' +
'td:nth-of-type(1):before {content: "Column9";}' +
'td:nth-of-type(1):before {content: "Column10";}' +
'td:nth-of-type(1):before {content: "Column11";}' +
'td:nth-of-type(1):before {content: "Column12";}' +
'td:nth-of-type(1):before {content: "Column13";}' +
'td:nth-of-type(1):before {content: "Column14";}' +
'td:nth-of-type(1):before {content: "Column15";}' +
'}' +
'#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {' +
'body {padding: 0;margin: 0;width: 320px;}' +
'}' +
'#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {' +
'body {width: 495px;}' +
'}' +
'</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.write(htmlStart + printableContent + htmlEnd);
doc.close();
var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/ ') >= 0;
var isChrome = !!window.chrome && !isOpera;
if (!isChrome)
win.print();
}

Tried a different solution to print as shown in the demo here http://salman-w.blogspot.com/2013/04/printing-wide-html-tables.html. It worked !
Note: I am using a Kendo grid, with that the following solution perfectly works ! This has some additional filter display stuff.etc. Please remove the same if not required. I am sure it can be optimized, but this is the quick code that works.
function printGrid() {
var gridElement = $('#grid'),
firstprintableContent = '',
lastprintableContent = '',
win = window.open('', '', 'scrollbars=1,resizable=1,width=1150,height=650,left=0,top=0'),
doc = win.document.open(), dataSource = $("#grid").data("kendoGrid").dataSource;
//get the filter values
var filterHtml = "", operator = "", fieldName = "", localCounter = 0;;
var fieldArray = new Array("Field1", "Field2", "Field3", "Field4", "Field5", "Field6", "Field7", "Field8", "Field9", "Field10", "Field11", "Field12", "Field13", "Field14", "Field15");
var nameArray = new Array("Column1", "Column2", "Column3", "Column4", "Column5", "Column6", "Column7", "Column8", "Column9", "Column10", "Column11", "Column12", "Column13", "Column14", "Column15");
//Logic for getting the filters and displaying them on the print page
var currentFilter = dataSource.filter();
if (currentFilter) {
currentFilter.filters.forEach(function (filter, index) {
localCounter = localCounter + 1;
if (filter.operator == "neq")
operator = "not equals to";
if (filter.operator == "eq")
operator = "equals to";
if (filter.operator == "startswith")
operator = "starting with";
for (var iCounter = 0; iCounter < 15; iCounter++) {
if (filter.field == fieldArray[iCounter]) {
fieldName = nameArray[iCounter];
break;
}
}
if (localCounter > 1)
filterHtml += "<p style='padding-left:9.1em'>" + fieldName + " " + operator + " " + "'" + filter.value + "'" + "</p>";
else
filterHtml += fieldName + " " + operator + " " + "'" + filter.value + "'" + "<br/> ";
});
}
else
filterHtml = "None";
var htmlStart =
'<!DOCTYPE html>' +
'<html>' +
'<head>' +
'<meta charset="utf-8" />' +
'<style>' +
'html { font: 11pt sans-serif; }' +
'table { width: 100%; border-collapse: collapse;table-layout:fixed;}' +
'tr:nth-of-type(odd) { background: #eee;}' +
'th { background: #DDDDDD;white-space: nowrap; color: white; font-weight: bold; pointer-events:none;cursor:default;text-decoration:none;}' +
'td, th { padding: 6px; border: 1px solid #ccc; text-align: left;outline:1px solid #ccc}' +
'tr {border: 1px solid #ccc;}' +
'</style>' +
'</head>' +
'<body>' +
'<div class="site-header__logo col-xs-4">' +
'<img src="/Content/images/mark-red-48x52.png" alt=" Products">' +
'<img src="/Content/images/logo-299x63.png" alt="Products">' +
'</div>' + '<br/><br/>' +
'Applied Data Filters' + ':' + " " + filterHtml + '<br/>' +
'<center><strong><h2>' + 'My grid' + '</h2></strong> </center>' + '<br/>';
var htmlEnd = '</body>' + '</html>';
//get the total columns, hidden columns and shown columns
var totalColumns = $("#grid").data("kendoGrid").columns.length;
var hiddencolumnsarray = [];
var showncolumnsarray = [];
if (totalColumns > 0) {
for (i = 0; i < totalColumns; i++) {
if ($("#grid").data("kendoGrid").columns[i].hidden) {
hiddencolumnsarray.push(i);
}
else {
showncolumnsarray.push(i);
}
}
}
if (showncolumnsarray.length > 8) {
iMoreColumns = 1;
//show only the first eight columns if user is viewing more than 8 columns
printfirsteightcolumns();
firstprintableContent = getPrintableContent(gridElement);
printlastsevencolumns();
lastprintableContent = getPrintableContent(gridElement);
} else {
iMoreColumns = 0;
firstprintableContent = getPrintableContent(gridElement);
}
//set the columns visibility back to normal once the print HTML is captured with the respective number of columns
printshowhidecolumns();
if (showncolumnsarray.length > 8)
doc.write(htmlStart + firstprintableContent + "<br/>" + "<div style='page-break-before:always;'>" + lastprintableContent + "</div>" + htmlEnd);
else
doc.write(htmlStart + firstprintableContent + htmlEnd);
var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/ ') >= 0;
var isChrome = !!window.chrome && !isOpera;
if (!isChrome)
win.print();
}
function getPrintableContent(gridElement) {
var gridHeader = gridElement.children('.k-grid-header');
if (gridHeader[0]) {
var thead = gridHeader.find('thead').clone().addClass('k-grid-header');
printableContent = gridElement.css('height', '')
.clone()
.children('.k-grid-header').remove()
.end()
.children('.k-grid-content').css('height', '')
.find('table')
.first()
.children('tbody').before(thead)
.end()
.end()
.end()
.end()[0].outerHTML;
} else {
printableContent = gridElement.clone()[0].outerHTML;
}
return printableContent;
}
function printfirsteightcolumns() {
var counter = 0;
var columns = $("#grid").data("kedoGrid").columns;
jQuery.each(columns, function (index) {
if (counter > 8) {
$("#grid").data("kendoGrid").hideColumn(parseInt(counter));
}
counter = counter + 1;
});
}
function printlastsevencolumns() {
var counter = 0;
var columns = $("#grid").data("kedoGrid").columns;
jQuery.each(columns, function (index) {
if (counter > 8) {
$("#grid").data("kendoGrid").showColumn(parseInt(counter));
}
else {
$("#grid").data("kendoGrid").hideColumn(parseInt(counter));
}
counter = counter + 1;
});
}
Cheers,
Srini