I have embedded a PowerBI report. This is the Javascript with the page setup.
For some reason I don't get a vertical scrollbar in my report. When I open it in the workspace online the scrollbars work just fine. I already tried switching between different 'View' options in PowerBi but that does not seem to make a difference.
<H2>PowerBI</H2>
<p><i>User: {{username}} | AccessLevel: {{access_level}}</i></p>
<div id="reportContainer" style="height: 80vh;"></div>
<script type="text/javascript">
window.onload = function () {
// Get models. models contains enums that can be used.
var models = window['powerbi-client'].models;
var embedConfiguration = {
type: 'report',
id: '{{txtembedreportid}}',
embedUrl: '{{txtreportembed}}',
tokenType: models.TokenType.Embed,
accessToken: '{{txtaccesstoken}}',
settings: {
layoutType: models.LayoutType.Custom,
customLayout: {
pageSize: {
type: models.PageSizeType.Widescreen,
}
},
panes:{
bookmarks: {
visible: false
},
fields: {
expanded: false
},
filters: {
expanded: false,
visible: false
},
pageNavigation: {
visible: true
},
selection: {
visible: true
},
syncSlicers: {
visible: true
},
visualizations: {
expanded: false
}
}
}
};
var $reportContainer = $('#reportContainer');
var report = powerbi.embed($reportContainer.get(0), embedConfiguration);
report.fullscreen();
}
</script>
Try adding the "displayOption" property with value "FitToWidth" in customLayout object, as this option will try to fit the report as per the total available size for the page and will introduce a scrollbar for the remaining part if necessary.
Also change "Widescreen" to "Custom" in pageSizeType object
After all changes, your embedConfiguration will become as following.
var embedConfiguration = {
type: 'report',
id: '{{txtembedreportid}}',
embedUrl: '{{txtreportembed}}',
tokenType: models.TokenType.Embed,
accessToken: '{{txtaccesstoken}}',
settings: {
layoutType: models.LayoutType.Custom,
customLayout: {
displayOption: models.DisplayOption.FitToWidth, // Add "FitToWidth"
pageSize: {
type: models.PageSizeType.Custom, // Change to "Custom"
}
},
panes:{
bookmarks: {
visible: false
},
fields: {
expanded: false
},
filters: {
expanded: false,
visible: false
},
pageNavigation: {
visible: true
},
selection: {
visible: true
},
syncSlicers: {
visible: true
},
visualizations: {
expanded: false
}
}
}
};
Refer docs: https://learn.microsoft.com/en-us/javascript/api/overview/powerbi/custom-layout
Related
Maybe complex question but i want try...
In vue component, (which is modal window for administration slider with few slide types like video, image...) i want have whole modal structure in json object. So i was created baseTypeStructure (inputs common for all slide types), avalibleTypeStructure (inputs for specific slide type) and activeTypeStructure (complete inputs structure after pick some slide type)
But i am in vue (and js) pretty new and i have complications with reactivity...
So if you pick some slide type i bind activeTypeStructure from baseTypeStructure and specific type from avalibleTypeStructure. (by type key)
But i have problems with reactivity... On one side i need reactive behavior because there are input values... on other side there are informations about visibility... and if i change in activeTypeStructure visibility to true, that value is changed in avalibleTypeStructure if i make clone (without reactivity), every change slide type i do reset all values...
Can anybody help with this? Resolve it this way (as one json format for whole modal). Maybe absolute bad thinking?
data() {
return {
detailModalIsOpened: false,
loading: false,
action: '',
title: 'default',
baseTypeStructure: {
inputs: {
name: {
visible: true,
value: ''
},
type: {
visible: true,
value: '',
selected: [],
slideTypes: []
},
duration: {
visible: true,
value: 5000
},
image: {
inputs: {
imageFile: {
visible: false,
value: ''
}
}
},
video: {
inputs: {
videoFile: {
visible: false,
value: ''
}
}
}
}
},
avalibleTypeStructures: {
none: {},
image: {
// name: 'image',
inputs: {
imageFile: {
visible: true,
value: ''
}
}
},
video: {
// name: 'video',
inputs: {
videoFile: {
visible: true,
value: ''
}
}
}
},
activeTypeStructure: {},
}
}
Javascript from this Metronic v5.05 theme.
I have a page where I have a datatable printed and it displays fine.
I have put the whole javascript code that I use for display the table
but it is important for me that the tables reloads new data, if there is any.
I think I know how I would build this without datables.js but the guy
that I am building this project for insists I have to use it so I have to.
I have this code to make it work on my page.
//== Class definition
var Dashboard = function() {
//== Hændelser hentes
var datatableIncidents = function() {
if ($('#LOGMSGS').length === 0) {
return;
}
var datatable = $('.m_datatable').mDatatable({
layout: {
theme: 'default',
class: 'm-datatable--brand',
scroll: false,
height: null,
footer: false,
header: true,
height: 400,
smoothScroll: {
scrollbarShown: true
},
spinner: {
overlayColor: '#000000',
opacity: 0,
type: 'loader',
state: 'brand',
message: true
},
icons: {
sort: {asc: 'la la-arrow-up', desc: 'la la-arrow-down'},
pagination: {
next: 'la la-angle-right',
prev: 'la la-angle-left',
first: 'la la-angle-double-left',
last: 'la la-angle-double-right',
more: 'la la-ellipsis-h'
},
rowDetail: {expand: 'fa fa-caret-down', collapse: 'fa fa-caret-right'}
}
},
sortable: false,
pagination: true,
search: {
// search delay in milliseconds
delay: 400,
// input text for search
input: $('#generalSearch'),
},
data: {
type: 'remote',
source: {
read: {
url: 'http://beredskabsweb.dk/Template/alert-log-json.php'
}
},
pageSize: 20,
saveState: {
cookie: true,
webstorage: true
},
},
layout: {
theme: 'default',
class: '',
scroll: false,
footer: false
},
sortable: true,
filterable: true,
pagination: true,
columns: [
{
field: "alertMessageTime",
title: "Tid",
width: 100,
filterable: true,
template: function(row) {
return '<time>'+row.alertMessageTime+'</time>';
},
},
{
field: "alertMessageText",
title: "Text",
filterable: true,
template: function(row) {
return row.alertMessageText;
},
},
{
field: "alertMessageAuthor",
title: "Forfatter",
width: 240,
filterable: true,
template: function(row) {
return ''+row.MemberUsername+'';
},
},
]
});
}
return {
//== Init demos
init: function() {
// datatables
datatableIncidents();
setInterval( function () { datatableIncidents();},4000);
}
};
}();
//== Class initialization on page load
jQuery(document).ready(function() {
Dashboard.init();
setInterval(Dashboard,2000);
});
As you see i have tried to put this code in the bottom so that it should reload, but it doesn't.
setInterval(Dashboard,2000)
You can use the reload api by metronic. You can see the docs here
http://keenthemes.com/metronic/documentation.html#sec14-5
First, you should export your datatable variable from the class so you can use it for other use like add function to reload the table or etc. I added below line:
return {
datatable: function() {
return datatable;
}
};
After that, you also should create function to reload the table by the variable we just export before and by using reload api by metronic.
reload: function {
demo().datatable().reload();
}
Complete code:
//== Class definition
var Dashboard = function() {
//== Hændelser hentes
var datatableIncidents = function() {
if ($('#LOGMSGS').length === 0) {
return;
}
var datatable = $('.m_datatable').mDatatable({
layout: {
theme: 'default',
class: 'm-datatable--brand',
scroll: false,
height: null,
footer: false,
header: true,
height: 400,
smoothScroll: {
scrollbarShown: true
},
spinner: {
overlayColor: '#000000',
opacity: 0,
type: 'loader',
state: 'brand',
message: true
},
icons: {
sort: {asc: 'la la-arrow-up', desc: 'la la-arrow-down'},
pagination: {
next: 'la la-angle-right',
prev: 'la la-angle-left',
first: 'la la-angle-double-left',
last: 'la la-angle-double-right',
more: 'la la-ellipsis-h'
},
rowDetail: {expand: 'fa fa-caret-down', collapse: 'fa fa-caret-right'}
}
},
sortable: false,
pagination: true,
search: {
// search delay in milliseconds
delay: 400,
// input text for search
input: $('#generalSearch'),
},
data: {
type: 'remote',
source: {
read: {
url: 'http://beredskabsweb.dk/Template/alert-log-json.php'
}
},
pageSize: 20,
saveState: {
cookie: true,
webstorage: true
},
},
layout: {
theme: 'default',
class: '',
scroll: false,
footer: false
},
sortable: true,
filterable: true,
pagination: true,
columns: [
{
field: "alertMessageTime",
title: "Tid",
width: 100,
filterable: true,
template: function(row) {
return '<time>'+row.alertMessageTime+'</time>';
},
},
{
field: "alertMessageText",
title: "Text",
filterable: true,
template: function(row) {
return row.alertMessageText;
},
},
{
field: "alertMessageAuthor",
title: "Forfatter",
width: 240,
filterable: true,
template: function(row) {
return ''+row.MemberUsername+'';
},
},
]
});
return {
datatable: function() {
return datatable;
}
};
}
return {
//== Init demos
init: function() {
// datatables
datatableIncidents();
setInterval( function () { datatableIncidents();},4000);
},
reload: function {
demo().datatable().reload();
}
};
}();
//== Class initialization on page load
jQuery(document).ready(function() {
Dashboard.init();
setInterval(Dashboard.reload(),2000);
});
I wish to create a grid that each row has grid inside it.
Both grids need to be editable and I managed to do so. However, when I try to add a new row to the outer grid, all the data inside it gone.
You can find the demo here: http://dojo.telerik.com/UqURE
Can you please help with this issue?
Thanks!
var outerDataSource= new kendo.data.DataSource({
schema: {
model: {
field1: { type: "string", validation: { required: true } },
field2: { type: "boolean", validation: { required: true } },
field3: { type: "string", validation: { required: true } }
}
}
});
$("#outerGrid").kendoGrid({
dataSource: outerDataSource,
detailInit: onExpansion,
toolbar: ["create"],
columns: [
{ field: "field1", title: "field1" },
{ field: "field2", title: "field2" },
{ field: "field3", title: "field3" },
{ command: ["destroy"], title: " " }],
editable: true
});
function onExpansion(e) {
var insideDataSource= new kendo.data.DataSource({
schema: {
model: {
in1: { type: "string", validation: { required: true } },
in2: { type: "string", validation: { required: true } }
}
},
data: [{
in1: "Click to edit",
in2: "Click to edit"
}]
});
var headers = $("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: insideDataSource,
width: 90,
toolbar: ["create"],
editable: true,
columns: [
{ field: "in1" },
{ field: "in2" },
{ command: ["destroy"], title: " " }]
});
};
Answer from Telerik:
Please note that operations like paging, sorting, filtering and
editing cause the Grid to rebind and reevaluate all templates inside
it (including the details). That why in order to preserve the child
Grid data between rebinds you should either save it to remove service
(link to documentation here) or add it as navigation property
collection to the parent Grid model (demo is available here).
http://www.telerik.com/forums/hirarchialy-editable-grids
I'm using jQuery jtable. I know this is should be easy and simple but i can't get it work, from the document
the syntax should be like this , (Am i wrong?)
$('#myTable').jtable('getRowByKey', {key: 2})
and this is my jtable
$('#myTable').jtable({
paging: false,
sorting: false,
actions: {
},
fields: {
intTest: {
key: true,
create: false,
edit: false,
list: false,
},
Name: {
title: 'Name',
width: '50%'
}
}
}).jtable('load');
But i always get null from above synxtax, Any idea what could be wrong?
You can try this :
<script type="text/javascript">
$(document).ready(function () {
$('#myTable').jtable({
paging: false,
sorting: false,
actions: {
listAction: 'ControllerName?action=list',
createAction:'ControllerName?action=create',
updateAction: 'ControllerName?action=update',
deleteAction: 'ControllerName?action=delete'
},
fields: {
intTest: {
key: true,
create: false,
edit: false,
list: false,
},
Name: {
title: 'Name',
width: '50%'
}
}
});
$('#myTable').jtable('load');
});
</script>
Try this:
var rowElement = $('#myTable').jtable('getRowByKey', 2);
I am using Jtable (Jquery based).
I have some trouble with the child table.
In the child table I added a new button in the toolbar.
With this new button in the toolbar, che close icon disappear, how can I fix it?
(if I remove the toolbar element the X of close button is correctly displayed).
$('#ListHeader').jtable({
title: 'ExpensesAccounts' ,
actions: {
listAction: function (postData, jtParams) {
return getListDataHeader();
}
},
fields: {
ID:{
key: true,
list:false
},
Details: {
title: '',
width: '5%',
sorting: false,
edit: false,
saveUserPreferences: false,
create: false,
display: function (headerData) {
//Create an image that will be used to open child table
var $img = $('<img src="../Images/viewDetails.png" width="20p" height="20p" title="View Details" />');
//Open child table when user clicks the image
$img.click(function () {
$('#ListHeader').jtable('openChildTable',
$img.closest('tr'),
{
title: headerData.record.Title + ' - Row' ,
saveUserPreferences: false,
paging: true,
pageSize: 3,
showCloseButton:true,
toolbar: {
items: [{
icon: '../scripts/jtable/themes/metro/add.png',
text: 'Add New Row',
click: function (headerID) {
window.location = "InsertRow.aspx";
}
}]
},
actions: {
listAction: function (postData, jtParams) {
return getListDataRow(headerData.record.ID, jtParams.jtStartIndex, jtParams.jtPageSize);
//return { "Result": "OK", "Records": [] };
},
deleteAction: function (postData) {
return deleteItem(postData, 'Expense Account Rows');
}
},
fields: {
HeaderID: {
type: 'hidden',
defaultValue: headerData.record.ID
},
ID: {
key: true,
create: false,
edit: false,
list: false
},
Title: {
title: 'Title',
width: '20%'
}
}
}, function (data) { //opened handler
data.childTable.jtable('load');
});
});
//Return image to show on the person row
return $img;
}
},
Title: {
title: 'Title'
},
Status: {
title: 'Status',
width: '8%'
}
}
});
$('#ListHeader').jtable('load');
Thanks,
Nk