Hi everyone Im trying to add a save button to my quill text editor (code below). I have it typing out to HTML but now I need to have a button that saves it and also a button on a different page that can reload the same thing. I have not found enough information on this that isn't super specific or relates to my project.
Also the text is printing on screen aswell in a "HTML" format and I cant figure out how to get it logging without printing that on screen but this is secondary.
Thank You
{% load static %}
<HTML>
<head>
<link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>
<link rel="stylesheet" href="{% static "css/text_editor.css" %}">
<meta charset="UTF-8">
<title>Collapsible Sidebar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{% static "css/side.css" %}">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<nav class="blue">
<div class="nav-wrapper">
Logo
<a href="/signup/front_page" class="header__image" style="color: orange"><i class="material-
icons">landscape</i></a>
<ul class="right brand-logo">
<li>Sass</li>
<li>Components</li>
<li>Account</li>
<li>LOGOUT</li>
</ul>
</div>
</nav>
</head>
<div class="container" id="editor-container">
<body>
<div id="editor" style=height: 200px></div>
<div id="editor style="height: 200px"></div>
</body>
<div class="container javascript" id="delta-container"></div>
<script>
var toolbarOptions = [
[{ 'font': [] }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
['bold', 'italic'],
[{ 'align': [] }],
[{ 'indent': '-1'}, { 'indent': '+1' }],
[{ 'color': [] }, { 'background': [] }],
[ 'image', 'link', 'video' ],
['blockquote'],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }],
['clean'] // remove formatting button
]
var quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
function logHtmlContent() {
console.log(quill.root.innerHTML);
}
quill.on('text-change', update);
var container = document.querySelector('#delta-container');
update();
function update(delta) {
var contents = quill.getContents();
console.log('contents', contents);
var html = "contents = " + JSON.stringify(contents, null, 2);
if (delta) {
console.log('change', delta)
html = "change = " + JSON.stringify(delta, null, 2) + "\n\n" + HTML;
}
container.innerHTML = HTML;
hljs.highlightBlock(container);
}
</script>
</html>
html,body {
margin: 50;
height: 95%;
}
#container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#editor-container {
height: 100%;
/* added these styles */
flex: 1;
display: flex;
flex-direction: column;
}
#editor {
height: 100%;
/* added these styles */
flex: 1;
overflow-y: auto;
top: 0px;
width: 100%;
}
.container:first-child {
border-right: 0px;
}
Related
I tried implementing the Kendo spreadsheet widget using angular directive but it does not show up.
Here is my code:
HTML:
<div kendo-spreadsheet style="height:580px;" k-options="spreadsheetOptions"></div>
Controller:
$scope.spreadsheetOptions = {
sheets: [{
name: "Food Order",
mergedCells: [
"A1:G1"
],
rows: [{
height: 70,
cells: [{
value: "My Company", fontSize: 32, textAlign: "center"
}]
}],
}],
excel: {
fileName: "Order.xlsx"
}
};
No errors shown in the console either. Any ideas?
Kendo Angular Spreadsheet directive works. Please see below example. You can also paste below example in html file.
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.bootstrap.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.226/js/angular.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<div kendo-spreadsheet style="width:100%" k-options="spreadsheetOptions"></div>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.spreadsheetOptions = {
sheets: [{
name: "Food Order",
mergedCells: [
"A1:G1"
],
rows: [{
height: 70,
cells: [{
value: "My Company", fontSize: 32, textAlign: "center"
}]
}],
}],
excel: {
fileName: "Order.xlsx"
}
};
})
</script>
</body>
</html>
I have some dummy data in a mainMenu.json which will server to populate a list which will be the first template loaded by angular framework when app starts.
chrome console reporting no errors.
But I get a white "blank" page "right image" and not sure where I went wrong. Thanks
//mainMenu.json
[{
"name": "item1",
"image": "item1_"
}, {
"name": "item2",
"image": "item2_"
}, {
"name": "item3",
"image": "item3_"
}]
//--------------------------------------------------------------------
//app.js
var myApp = angular.module('myApp', [
'ngRoute', //turn on deep linking
'appControllers' //js to handle the route
]);
//Configure how the partials are going to run
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/list', {
templateUrl: 'partials/mainMenu.html',
controller: 'MainMenuCtrl'
}).otherwise({ //home page
redirectTo: '/list'
});
}]);
//--------------------------------------------------------------------
// controlers.js
var appControllers = angular.module ('appControllers', []);
appControllers.controller ('MainMenuCtrl', ['$scope', '$http', function ($scope, $http){
$http.get('js/mainMenu.json').success (function (data){
$scope.menuItems = data;
});
}]);
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
main {
margin-top: 40px;
margin-bottom: 40px;
padding: 0.5em;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
}
footer > button {
font-size: 1em;
padding: 0.5em 1em;
}
input {
font-size: 1em;
width: 100%;
}
header, footer {
background-color: white;
}
footer > button {
padding: 0.5em 1em;
width: 31.33%;
margin: 0 1%;
float: left;
box-sizing: border-box;
}
<!--index.html-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<header>
<button class="menuLeft" type="button" >☰</button>
<label class="pageTitle">Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
<main ng-view></main>
<footer>
<button class="menuLeft" type="button" >NO</button>
<button class="menuLeft" type="button" >EXTRA</button>
<button class="menuRight" type="button">YES</button>
</footer>
</body>
</html>
//--------------------------------------------------------------------
<!--mainMenu.html-->
<section>
<ul>
<li ng-repeat="item in menuItems">
<br/>
<p>dummy</p>
<h2>{{item.name}}</h2>
</li>
</ul>
</section>
You have an error in your code
var appControllers = angularModule ('appControllers', []);
It should be
var appControllers = angular.module ('appControllers', []);
To catch an error on $http.get promise do something like this :
$http.get(your_options).then(function(data){
}, function(err){
});
First function is your success callback and the second one is your error callback. More about $http can be found HERE
I have a SPA in Angular. I have a data grid of items. I'd like when an item in the grid is clicked for it to have a particular class applied to it, and then for that item to scroll to the top of the enclosing div.
See Plunkr here: http://plnkr.co/edit/OSPJ5r3P9BHo8YKVtdTT?p=preview
I have the code that applies the class working, but I'm having trouble getting the active (element with class 'open' applied) to scroll to the top of the enclosing div.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.cart = [];
$scope.addToCart = function(index) {
$scope.cart.push(index);
$scope.cartCount = $scope.cart.length;
alert($scope.cartCount);
}
$scope.activeRow = function(index) {
$scope.selectedRow = index;
}
$scope.dataObject = [{
"Number": "001",
"Status": "NCB",
"Compound": "CD19A"
}, {
"Number": "002",
"Status": "NCA",
"Compound": "CD19B"
}, {
"Number": "003",
"Status": "NCR",
"Compound": "CD33C"
}, {
"Number": "004",
"Status": "NCX",
"Compound": "CD33D"
}, {
"Number": "005",
"Status": "NCT",
"Compound": "CD33E"
}, {
"Number": "006",
"Status": "NC9",
"Compound": "CD20F"
}, {
"Number": "007",
"Status": "NC8",
"Compound": "CD20G"
}, {
"Number": "008",
"Status": "NCX",
"Compound": "CD20H"
}, {
"Number": "009",
"Status": "NCY",
"Compound": "CD33I"
}, {
"Number": "010",
"Status": "NCT",
"Compound": "CD33J"
}
];
});
/* Put your css in here */
body {
background: #eee;
}
div.cart {
display: block;
height: 70px;
background: silver;
margin-left: 20px;
width: 200px;
padding: 5px 10px;
margin-bottom: 20px;
margin-top: 20px;
}
.cart h1 {
color: #fff;
line-height: 20px;
}
.item-list-wrapper {
height: 300px;
width: 740px;
border: 1px solid #ddd;
overflow-y: scroll;
margin-left: 20px;
}
.item-list {
height: 70px;
width: 100%;
margin-bottom: 10px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
border: 1px solid #fff;
background: #efefe4;
}
li {
display: inline-block;
list-style: none;
padding: 0 40px 40px 40px;
font-size: 24px;
}
.open {
height: 300px;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap#*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js" data-semver="1.4.7"></script>
<script data-require="angular.js#1.4.x" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular-messages.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-view=""></div>
<div class="cart">
<h1>Cart: {{cartCount}}</h1></div>
<div class="item-list-wrapper">
<div class="item-list" ng-repeat="data in dataObject" ng-click="activeRow($index)" ng-class="{'open':$index == selectedRow}">
<ul>
<li>{{data.Number}}</li>
<li>{{data.Status}}</li>
<li>{{data.Compound}}</li>
<li>
Add to Cart
</li>
</ul>
</div>
</div>
<!--item-list-wrapper -->
</body>
</html>
Looks like I can get this working using $anchorScroll to move to the given element using an anchor ID.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.cart = [];
$scope.addToCart = function(index) {
$scope.cart.push(index);
$scope.cartCount = $scope.cart.length;
alert($scope.cartCount);
}
$scope.activeRow = function(index) {
$scope.selectedRow = index;
$location.hash();
$anchorScroll('anchor-' + index);
}
$scope.dataObject = [{
"Number": "001",
"Status": "NCB",
"Compound": "CD19A"
}, {
"Number": "002",
"Status": "NCA",
"Compound": "CD19B"
}, {
"Number": "003",
"Status": "NCR",
"Compound": "CD33C"
}, {
"Number": "004",
"Status": "NCX",
"Compound": "CD33D"
}, {
"Number": "005",
"Status": "NCT",
"Compound": "CD33E"
}, {
"Number": "006",
"Status": "NC9",
"Compound": "CD20F"
}, {
"Number": "007",
"Status": "NC8",
"Compound": "CD20G"
}, {
"Number": "008",
"Status": "NCX",
"Compound": "CD20H"
}, {
"Number": "009",
"Status": "NCY",
"Compound": "CD33I"
}, {
"Number": "010",
"Status": "NCT",
"Compound": "CD33J"
}
];
});
/* Put your css in here */
body {
background: #eee;
}
div.cart {
display: block;
height: 70px;
background: silver;
margin-left: 20px;
width: 200px;
padding: 5px 10px;
margin-bottom: 20px;
margin-top: 20px;
}
.cart h1 {
color: #fff;
line-height: 20px;
}
.item-list-wrapper {
height: 300px;
width: 740px;
border: 1px solid #ddd;
overflow-y: scroll;
margin-left: 20px;
}
.item-list {
height: 70px;
width: 100%;
margin-bottom: 10px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
border: 1px solid #fff;
background: #efefe4;
}
li {
display: inline-block;
list-style: none;
padding: 0 40px 40px 40px;
font-size: 24px;
}
.open {
height: 300px;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap#*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js" data-semver="1.4.7"></script>
<script data-require="angular.js#1.4.x" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular-messages.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-view=""></div>
<div class="cart">
<h1>Cart: {{cartCount}}</h1></div>
<div class="item-list-wrapper">
<div class="item-list" ng-repeat="data in dataObject" ng-click="activeRow($index)" ng-class="{'open':$index == selectedRow}">
<a id="anchor-{{$index}}"></a>
<ul>
<li>{{data.Number}}</li>
<li>{{data.Status}}</li>
<li>{{data.Compound}}</li>
<li>
Add to Cart
</li>
</ul>
</div>
</div>
<!--item-list-wrapper -->
</body>
</html>
I am using ag-grid plugin in a project. I get json data using $http service. But the grid shows blank in web page. But when json data is applied directly, grid works. I think this is probably due to delay in getting the data from $http. But as per angular concept, the grid should be updated when data comes. Is there any solution to show the html page only when data comes from the server.
Below is my javascript file 'fileBrowser.js':
var fileBrowserModule = angular.module('fileBrowser', ['agGrid']);
fileBrowserModule.controller('fileBrowserController', function($scope, $http) {
$scope.rowData=[
];
$http.get("http://localhost:8080/KKR/flow/sin/allSins.json")
.success(function(data) {
$scope.rowData=JSON.parse("["+JSON.stringify(data)+"]");
console.log($scope.rowData);
});
/*
$scope.rowData=[
{"group":true,"data":{"name":"joe"},
"children":[
{"group":true,"data":{"name":"pat"},
"children":[{"group":true,
"data":{"name":"maya"},
"children":[{"group":false,
"data":{"name":"brook"},
"children":[]},{"group":true,
"data":{"name":"kery"},
"children":[{"group":false,
"data":{"name":"santosh"},
"children":[]}]}]}]},
{"group":false,
"data":{"name":"aravind"},"children":[]}]}
]
*/
var columnDefs = [
{headerName: "Name", field: "name", width: 250,
cellRenderer: {
renderer: 'group',
innerRenderer: innerCellRenderer
}},
{headerName: "Size", field: "size", width: 70, cellStyle: sizeCellStyle},
{headerName: "Type", field: "type", width: 150},
{headerName: "Date Modified", field: "dateModified", width: 150}
];
$scope.gridOptions = {
columnDefs: columnDefs,
rowData: $scope.rowData,
rowSelection: 'multiple',
rowsAlreadyGrouped: true,
enableColResize: true,
enableSorting: true,
rowHeight: 20,
icons: {
groupExpanded: '<i class="fa fa-minus-square-o"/>',
groupContracted: '<i class="fa fa-plus-square-o"/>'
},
onRowClicked: rowClicked
};
$scope.selectedFile = 'Select a file below...';
function rowClicked(params) {
var node = params.node;
var path = node.data.name;
while (node.parent) {
node = node.parent;
path = node.data.name + '\\' + path;
}
$scope.selectedFile = path;
}
function sizeCellStyle() {
return {'text-align': 'right'};
}
function innerCellRenderer(params) {
var image;
if (params.node.group) {
image = params.node.level === 0 ? 'disk' : 'folder';
} else {
image = 'file';
}
var imageFullUrl = '/example-file-browser/' + image + '.png';
return '<img src="'+imageFullUrl+'" style="padding-left: 4px;" /> ' + params.data.name;
}
});
Below is my html file:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="styles/angular/fileBrowser.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
-->
<script src=" https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<!-- you don't need ignore=notused in your code, this is just here to trick the cache -->
<script src="scripts/angular/ag-grid.js?ignore=notused10"></script>
<link rel="stylesheet" type="text/css" href="styles/angular/ag-grid.css?ignore=notused10">
<link rel="stylesheet" type="text/css" href="styles/angular/theme-fresh.css?ignore=notused10">
<script src="scripts/angular/fileBrowser.js"></script>
</head>
<body ng-app="fileBrowser">
<div ng-controller="fileBrowserController"
style="border: 1px solid darkgrey;
width: 600px;
background-color: lightgrey;
border-radius: 5px;
padding: 3px;">
<div style="border: 1px solid darkgrey; margin-bottom: 2px; background-color: white;"> {{selectedFile}}</div>
<div style="width: 100%; height: 400px;"
ag-grid="gridOptions"
class="ag-file-browser">
</div>
</div>
</body>
</html>
Use the ag-Grid API for setting the row data.
Look at this example "Further Example Starting Point" to see.
Code is
$scope.gridOptions.api.setRows(res.data);
I have modified previous answer. Instead of setRows we can use setRowData. This works for me:
$scope.gridOptions.api.setRowData(res.data);
This is my code
<!DOCTYPE html>
<html class="no-js" ng-app="test"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<title></title>
<meta content="width=device-width" name="viewport">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css">
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.js"></script>
<style>
body {
padding: 60px;
min-height: 600px;
}
.grid {
width: 900px;
height: 400px;
}
.placeholder {
height: 50%;
width: 50%;
border: 3px solid black;
background: #ccc;
}
</style>
</head>
<body ng-controller="Main">
<h2>Grid</h2>
<button ng-click="export()">Export to Csv</button>
<button ng-click="exportPdf()">Export to Pdf</button>
<div class="custom-csv-link-location">
<br />
<span class="ui-grid-exporter-csv-link"> </span>
</div>
<br />
<div>
<div ui-grid="gridOptions" ui-grid-pagination ui-grid-resize-columns ui-grid-selection ui-grid-exporter ui-grid-move-columns class="grid"></div>
</div>
<button ng-click="print()">Print</button>
<!-- <div class="placeholder"> -->
<!-- </div> -->
<br>
<br>
<script>
var app = angular.module('test', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.pagination', 'ui.grid.selection', 'ui.grid.exporter', 'ui.grid.moveColumns']);
app.controller('Main', function ($scope, $http, $filter, uiGridConstants) {
$scope.filteredData = [];
$scope.gridOptions = {};
$scope.gridOptions = {
paginationPageSizes: [10, 15, 20],
paginationPageSize: 10,
columnDefs: [
{ name: 'id', enableColumnMenu: false },
{ name: 'name', pinnedLeft: true, enableColumnMenu: false },
{ name: 'age', pinnedRight: true, enableColumnMenu: false },
{ name: 'company', enableColumnMenu: false },
{ name: 'email', enableColumnMenu: false },
{ name: 'phone', enableColumnMenu: false },
//{ name: 'about', width: 200, enableColumnMenu: false }
],
exporterPdfDefaultStyle: { fontSize: 9 },
exporterPdfTableStyle: { margin: [10, 10, 10] },
exporterPdfTableHeaderStyle: { fontSize: 10, bold: true, italics: true, color: 'red' },
exporterPdfOrientation: 'portrait',
exporterPdfPageSize: 'A3',
//exporterPdfMaxGridWidth: 1000,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
}
};
$http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.success(function (data) {
$scope.gridOptions.data = data;
});
$scope.export = function () {
var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
$scope.gridApi.exporter.csvExport('all', 'all', myElement);
};
$scope.exportPdf = function () {
var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
$scope.gridApi.exporter.pdfExport('all', 'all', myElement);
};
});
</script>
</body>
</html>
In the above code i have 500 rows data to display with paging , but when user click print button printing total grid data by using angularjs. so please could somebody help me to resolve this,because i am new to this technology
Hint 1:
If you refer in how to print with ui-grid, the ui-grid website indicates help at Exporting Data, where you can export your data from the grid menu.
Hint 2
If you want to manage exporting to Pdf in a custom menu item, you have to define something like this:
$scope.gridOptions = {
gridMenuCustomItems = [
{
title: 'Exporting as PDF',
action: function ($event) {
var exportColumnHeaders = uiGridExporterService.getColumnHeaders(this.grid, uiGridExporterConstants.ALL);
var exportData = uiGridExporterService.getData(this.grid, uiGridExporterConstants.ALL, uiGridExporterConstants.ALL, true);
var docDefinition = uiGridExporterService.prepareAsPdf(this.grid, exportColumnHeaders, exportData);
if (uiGridExporterService.isIE() || navigator.appVersion.indexOf("Edge") !== -1) {
uiGridExporterService.downloadPDF(this.grid.options.exporterPdfFilename, docDefinition);
} else {
pdfMake.createPdf(docDefinition).download();
}
},
order: 2
}
}
Note: You have to include reference to this at your angular controller: uiGridExporterService, uiGridExporterConstants
Hint 3
If you have any trouble printing more than 500 rows, there is a bug in the pdfmake.js library that is used by the ui-grid component. For this, you have a workaround at github. You have extra info at this github issue.