Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Here is the code I'm using to export Kendo multiple grid to Excel, how can I export with all pages
Example - multiple grid Excel export
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jszip.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<style>
#products .k-grid-toolbar
{
display:none !important;
}
</style>
</head>
<body>
<button id="export" class="k-button"><span class="k-icon k-i-excel"></span>Export to Excel</button>
<div id="products"></div>
<div id="orders"></div>
<script>
// used to sync the exports
var promises = [
$.Deferred(),
$.Deferred()
];
$("#export").click(function(e){
// trigger export of the products grid
$("#products").data("kendoGrid").saveAsExcel();
// trigger export of the orders grid
$("#orders").data("kendoGrid").saveAsExcel();
// wait for both exports to finish
$.when.apply(null, promises)
.then(function(productsWorkbook, ordersWorkbook) {
// create a new workbook using the sheets of the products and orders workbooks
var sheets = [
productsWorkbook.sheets[0],
ordersWorkbook.sheets[0]
];
sheets[0].title = "Products";
sheets[1].title = "Orders";
var workbook = new kendo.ooxml.Workbook({
sheets: sheets
});
// save the new workbook,b
kendo.saveAs({
dataURI: workbook.toDataURL(),
fileName: "ProductsAndOrders.xlsx"
})
});
});
$("#products").kendoGrid({
toolbar: ["excel"],
excel: {
allPages: true
},
dataSource: {
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/Products",
dataType: "jsonp"
}
},
pageSize: 20
},
height: 550,
pageable: true,
excelExport: function(e) {
e.preventDefault();
promises[0].resolve(e.workbook);
}
});
$("#orders").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
pageSize: 20,
serverPaging: true
},
height: 550,
pageable: true,
columns: [
{ field:"OrderID" },
{ field: "ShipName", title: "Ship Name" },
{ field: "ShipCity", title: "Ship City" }
],
excelExport: function(e) {
e.preventDefault();
promises[1].resolve(e.workbook);
}
});
</script>
</body>
</html>
Let me know if any concern.
Related
I am using Jitsi-Meet iframe Api to have a custom video calling feature. It is working as expected. However I would like to add a feature to this. The feature is to auto-join or auto-start the meeting on http load. How do I do this instead of the user manually pressing the join button?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src='https://meet.jit.si/external_api.js'></script>
<script>
$(document).ready(function () {
var domain = "meet.jit.si";
var options = {
roomName: "TestingMeet",
width: "100%",
height: 1080,
parentNode: document.querySelector("#meet"),
configOverwrite: {
},
interfaceConfigOverwrite: {
DEFAULT_BACKGROUND: "#3b98ff",
noSsl: true,
SHOW_JITSI_WATERMARK: false,
HIDE_DEEP_LINKING_LOGO: true,
SHOW_BRAND_WATERMARK: false,
SHOW_WATERMARK_FOR_GUESTS: false,
SHOW_POWERED_BY: false,
TOOLBAR_BUTTONS: [
'microphone', 'camera', 'closedcaptions', 'desktop', 'fullscreen',
'fodeviceselection', 'hangup', 'profile', 'recording',
'livestreaming', 'etherpad', 'sharedvideo', 'settings', 'raisehand',
'videoquality', 'filmstrip', 'feedback', 'stats', 'shortcuts',
'tileview'
],
}
}
var api = new JitsiMeetExternalAPI(domain, options);
api.executeCommands({
displayName: ['nickname'],
toggleVideo: [],
toggleAudio: []
});
});
</script>
<style>
.title {
text-align: center;
font-family: "Segoe UI";
font-size: 48px;
}
</style>
</head>
<body>
<div id="meet"></div>
</body>
</html>
I got it, there is an option called as configOverwrite; and you have to add this inside:
var options = {
roomName: "RoomName",
width: "100%",
height: 1080,
parentNode: document.querySelector("#meet"),
configOverwrite: {
prejoinPageEnabled: false //This here
},
...
...
Another way, just pass #config.prejoinPageEnabled=false, in the url and done.
Now you should pass:
configOverwrite: {
prejoinConfig: {
enabled: false
}
}
When I try to create a BarChart in js view tab, it gives me this error.
Here is my html code
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<link rel="stylesheet" type="text/css" href="Styles/MainPage.css"/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m, sap.viz"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("empcrud");
//sap.ui.localResources("Styles");
var app = new sap.m.App("AppId", { initialPage: "idEMainPage1" });
var page = sap.ui.view({ id: "idEmpDetails1", viewName: "empcrud.EmpDetails", type: sap.ui.core.mvc.ViewType.JS });
var page1 = sap.ui.view({ id: "idEMainPage1", viewName: "empcrud.MainPage", type: sap.ui.core.mvc.ViewType.JS });
var page2 = sap.ui.view({ id: "idGrafPage1", viewName: "empcrud.Grafik", type: sap.ui.core.mvc.ViewType.JS });
app.addPage(page).addPage(page1).addPage(page2);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
And here is my view code where I use sap.viz.ui5
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions: [
{
axis: 1,
name: 'Uname',
value: "{Uname}"
}
],
measures: [
{
name: 'Modno',
value: '{Modno}'
},
],
data: {
path: "/results"
}
});
var oBarChart = new sap.viz.ui5.Bar({
width: "80%",
height: "400px",
plotArea: {
//'colorPalette' : d3.scale.category20().range()
},
title: {
visible: true,
text: 'Modno Grafiği'
},
dataset: oDataset
});
When I try to paste my view code in html script its works fine, also with xml view it works. I think its about the connection between js view and html. However view can not see sap.viz.Is there a way to define sap.viz in js or how can I overcome that?
Thanks.
The problem is about sapui lib, just add online core library and just works fine.
"https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
I'm using Kendo UI 2013.2.716 and JQuery 2.0.3 and I am placing a grid on my page, and my question is:
Does anyone know how to tell what has been destroyed by the destroy command from the grid?
For example:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="kendo.common.min.css" rel="stylesheet" />
<link href="kendo.default.min.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script type="text/javascript">
$(document).ready(function() {
var products = [];
for(var i = 1; i <= 40; i++) {
products.push({
ProductId: i,
ProductName: "Product " + i
});
}
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
id: "ProductId",
fields: {
ProductName: { type: "string" },
}
}
},
requestEnd: function (e) {
if (e.type === "destroy") {
alert("OK, so something got destroyed, but what??");
}
}
},
editable: "inline",
columns: [
"ProductName",
{ command: "destroy", title: " ", width: "100px" }
]
});
});
</script>
</body>
</html>
I found the requestEnd callback in the documentation but I am totally flummoxed as to know where the item that was destroyed would be. I just need the ID of the item really so that I can update other parts of my page appropriately.
I am wondering if I need to capture it somehow beforehand.
You need to configure the transport object on your datasource. In your current configuration, does anything really get destroyed? Sure, the item may disappear from your grid, but I wonder if it's still there in the datasource. Maybe that's what you intended.
http://docs.kendoui.com/api/framework/datasource#configuration-transport.destroy
If you're just looking for a way to get at the data that's being destroyed, hook into the parameterMap() function of the transport object. In there you can manipulate the object being deleted before the operation is executed.
http://docs.kendoui.com/api/framework/datasource#configuration-transport.parameterMap
Thanks to #Brett for pointing out the destroy property on the transport. This code does the trick - allowing me to capture what was being destroyed (see the transport.destroy part):
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="kendo.common.min.css" rel="stylesheet" />
<link href="kendo.default.min.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
schema: {
model: {
id: "ProductId",
fields: {
ProductName: { type: "string" },
}
}
},
transport: {
read: function (options) {
var products = [];
for(var i = 1; i <= 40; i++) {
products.push({
ProductId: i,
ProductName: "Product " + i
});
}
options.success(products);
},
destroy: function (options) {
var data = $("#grid")
.data("kendoGrid").dataSource.data();
var products = [];
for(var i = 0; i < data.length; i++) {
if (data[i].ProductId !== options.data.ProductId) {
products.push(data[i])
}
}
options.success(products);
alert("Woo hoo - the product with the ID: "
+ options.data.ProductId + " was destroyed!");
}
}
},
editable: "inline",
columns: [
"ProductName",
{ command: "destroy", title: " ", width: "100px" }
]
});
});
</script>
</body>
</html>
I am trying to capture the text from a Kendo AutoComplete component and save it to a variable to later use in other components. The code is below and I have a link to the code at jsbin.com. Note: the code jsbin.com does not work for me in IE9, Firefox and Chrome work fine.
I attach my onSelect function fires when a selecton is made in the autoComplete control. I then assign the dataItem to my variable "selectedGeoname". I successfully write the object's text property to an element on screen and I use an alert to confirm that selectedGeoname is populated by the object.
However, when I later try to use the variable to pass the value to another component, the variable is null. I instantiate both components and declare the variable inside $(document)ready. I would have to believe that this is all ablout scope so perhaps one of you javascript wizards can help poor old .Net guy to fix this code.
Thanks,
Greg
HTML as follows:
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css"
rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css"
rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.dataviz.min.css"
rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css"
rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<title></title>
</head>
<body>
<p>
<label for="customer">Choose a customer:</label>
<input id="customer" />
<div id="result"></div>
</p>
<p>
<label for="stores">Choose a store:</label>
<input id="stores" />
</p>
<script type="text/javascript">
$(document).ready(function () {
$("#customer").kendoAutoComplete({
dataTextField: "name",
dataSource: {
serverFiltering: true,
transport: {
read: {
url: "http://ws.geonames.org/searchJSON",
dataType: "json",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
name_startsWith: function () {
return $("#customer").val();
}
}
}
},
schema: {
data: "geonames"
}
},
filter: "startswith",
placeholder: "Select Customer...",
height: 500,
suggest: true,
select: onSelect
});
var selectedGeoname;
function onSelect(e) {
var dataItem = this.dataItem(e.item.index());
selectedGeoname = dataItem;
//output
$("#result").html(selectedGeoname.name);
alert(selectedGeoname);
}
$("#stores").kendoDropDownList({
autoBind: false,
enable: true,
dataTextField: "StoreName",
dataValueField: "StoreId",
dataSource: {
serverFiltering: true,
transport: {
read: {
url: '#Url.Action("JsonGetStores", "Home")',
data: {
customer: selectedGeoname
}
}
}
}
});
});
</script>
</body>
</html>
You can use this code as your onSelect to achieve this:
function onSelect(e) {
selectedGeoname = this.value();
//output
$("#result").html(selectedGeoname.name);
alert(selectedGeoname);
}
When called from the context of the AutoComplete object this.value() can be used to get the value of the AC input element.
If you need to access the current value of the variable outside of the scope you can use this method: $("#customer").data("kendoAutoComplete").value().
Hope this helps!
I am trying to do simple operations with dojo datagrid before I move on to complicated ones. However, I am now stuck at saving to store. I am using the code in the browser and the players data in a .json file, for convenience, I put all in the source code for now.
When I refresh the browser, the data I just saved is not updated to the json file. Why is it so? And how do I fix it?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<style type="text/css">
.dojoxGrid table { margin: 0; }
html, body { width: 100%; height: 100%; margin: 0; }
</style>
<script type="text/javascript">
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.form.Button");
dojo.addOnLoad(function() {
// our test data store for this example:
var store = new dojo.data.ItemFileWriteStore({
//url: 'players.json'
data: {
label: 'pId',
items: [{"Player":"Wayne Gretzky","Games":"1487","Points":"2857","PPG":"1.92"},
{"Player":"Mark Messier","Games":"1756","Points":"1887","PPG":"1.07"},
{"Player":"Gordie Howe","Games":"1767","Points":"1850","PPG":"1.04"},
{"Player":"Ron Francies","Games":"1731","Points":"1798","PPG":"1.03"},
{"Player":"Marcel Dionne","Games":"1348","Points":"1771","PPG":"1.31"},
{"Player":"Steve Yzerman","Games":"1514","Points":"1755","PPG":"1.16"},
{"Player":"Mario Lemieux","Games":"915","Points":"1723","PPG":"1.88"},
{"Player":"Joe Sakic","Games":"1378","Points":"1641","PPG":"1.19"},
{"Player":"Jaromir Jagr","Games":"1273","Points":"1599","PPG":"1.25"},
{"Player":"Phil Esposito","Games":"1282","Points":"1590","PPG":"1.24"}]}
});
// set the layout structure:
var layout = [{
field: 'Player',
name: 'Player',
width: '200px',
styles:"text-align:center;"
},
{
field: 'Games',
name: 'Games Played',
width: '50px',
styles:"text-align:center;"
},
{
field: 'Points',
name: 'Points',
width: '50px',
styles:"text-align:center;"
},
{
field: 'PPG',
name: 'Points Per Game',
width: '50px',
styles:"text-align:center;"
}];
// create a new grid:
var grid = new dojox.grid.DataGrid({
query: {
Player: '*'
},
store: store,
clientSort: true,
rowSelector: '20px',
structure: layout
},
document.createElement('div'));
// append the new grid to the div "gridContainer":
dojo.byId("gridContainer").appendChild(grid.domNode);
// Call startup, in order to render the grid:
grid.startup();
//dojo.forEach(grid.structure, function(itemData, index, list){
//itemData.editable = true;
//});
var btnAdd = new dijit.form.Button({
label: "Add",
onClick: function(){
grid.store.newItem({
Player: "Someone",
Games: "1000",
Points: "1000",
PPG: "1.0"
});
}
}, "btnAdd");
var btnRemove = new dijit.form.Button({
label: "Remove",
onClick: function(){
var items = grid.selection.getSelected();
if(items.length){
dojo.forEach(items, function(selectedItem){
if(selectedItem !== null){
grid.store.deleteItem(selectedItem);
}
});
}
}
}, "btnRemove");
var btnSave = new dijit.form.Button({
label: "Save",
onClick: function(){
grid.store.save({onComplete: saveDone, onError: saveFailed});
}
}, "btnSave");
});
function saveDone(){
alert("Done saving.");
}
function saveFailed(){
alert("Save failed.");
}
</script>
</head>
<body class=" tundra">
<button id="btnAdd" type="button"></button>
<button id="btnRemove" type="button"></button>
<button id="btnSave" type="button"></button>
<br />
<div id="gridContainer" style="width: 100%; height: 100%;"></div>
</body>
</html>
The source code is also here: http://jsfiddle.net/cDCWk/
You need to implement something server side to handle the .save() part of dojo.data.ItemFileWriteStore as explained here.
I have modified your source code, in order for it to be a bit easier to deal with: http://jsfiddle.net/kitsonk/cDCWk/1/
Also, personally, implementing something server-side for ItemFileWriteStore might be a bit silly when you can far more easily integrate the Grid with the dojox.data.JsonRestStore or the new dojo.store.JsonRest.