I am using kendoui grid , which is shown when I click in a bubbletree(its like tree structure). The data in the grid comes dynamically on clicking bubbletree . The kendoui grid loads fine on first click but the grid overlaps on second click and so on gets overlapping .
I am using following code.
function showKendouiGrid(nodeCoordinate) {
var kendouiConstants = {
BASE_URL: 'http://',
DATA_URL: '/eventbot/public/bubbletreedata/list-category?category=' + nodeCoordinate.label,
PAGE_SIZE: 20,
GRID_HEIGHT: 100
}
jQuery("#grid").kendoGrid({
columns: [{
field: 'label',
title: "Activitiy",
}],
dataSource: {
serverPaging: true,
pageSize: kendouiConstants.PAGE_SIZE,
transport: {
read: {
url: kendouiConstants.BASE_URL + window.location.host + kendouiConstants.DATA_URL,
dataType: "json",
type: "GET"
}
},
schema: {
data: "data",
total: "total"
},
serverFiltering: true,
},
height: kendouiConstants.GRID_HEIGHT,
pageable: {
refresh: true,
pageSizes: true
},
selectable: "row",
scrollable: true,
filterable: true,
sortable: true,
});
}
There is another issue also that , the footer of kendoui grid shows "no items to display" , while it has items on it .
Thanks in advance.
Every time you click on the bubble tree, the grid is regenerated on the previous version of the grid. So, the first time you do it, all is fine and you end up with newly generated kendogrid markup which has its own wrapper elements in HTML. Next time you create the grid, it is recreated on the older and the wrappers are 'rewrapped' inside the previous ones.
What you should do is either .destroy() the grid or just change the grid datasource when the tree is clicked.
Related
How to display the time label of the timelineDay view of the fullcalendar at the bottom ?
as you can see in this image below. the time is on top of the grid. I want it to be at the bottom of the grid. How do we do that? there's no article about it in the official documentation.
below is my code to display those things you see in the image above. I wonder what parameter or property do we need to add so that the time will appear at the bottom, not on top
var calendarEl = document.getElementById('calendar');
var calendar = new Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid','timeline'],
header: {
left: 'prev,next today',
center: 'title',
right: 'timeGridDay,timeGridWeek,dayGridMonth,listWeek'
},
defaultView: 'timelineDay',
allDaySlot: false,
slotLabelFormat: {
hour: 'numeric',
hour12: false,
minute: '2-digit',
omitZeroMinute: true,
meridiem: 'false'
},
showNonCurrentDates: true,
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function(arg) {
// is the "remove after drop" checkbox checked?
if (document.getElementById('drop-remove').checked) {
// if so, remove the element from the "Draggable Events" list
arg.draggedEl.parentNode.removeChild(arg.draggedEl);
}
}
});
calendar.render();
Note: am referring to the "HOURS" displayed,not the control buttons on top
Try adding a footer section and move it there from your header section. The footer takes the same exact values as a header and will display at the bottom of the calendar. For more info you should check out https://fullcalendar.io/docs/toolbar
Since the public 7.0 release of PrimeFaces includes ChartJs, I thought I'd give it a try.
It works fine, however so far I have not been able to properly display data with values changing over time in a line chart.
chart.js has cartesian time axes for this purpose, however in PrimeFaces , only CartesianLinearAxes is available.
Feeding date objects (instead of String labels) to ChartData simply results in no x-axis being drawn.
Am I missing something or did they just skip this functionality when including chart.js in Primefaces?
OK great questions.
First, PF knows they did not implement time yet but there is an open ticket: https://github.com/primefaces/primefaces/issues/4564
Second, have no fear you can use the Extender feature to make it work. Here is an example we used.
In your Java model for your chart set the Extender feature on.
chartModel.setExtender("chartExtender");
In your XHTML add this JavaScript code function to match when you set in #1 Java bean.
function chartExtender() {
//copy the config options into a variable
var options = $.extend(true, {}, this.cfg.config);
options = {
//remove the legend
legend: {
display: false
},
scales: {
xAxes: [{
display: true,
type: "time",
time: {
parser: 'h:mm:ss a',
tooltipFormat: 'h:mm:ss a',
unit: 'hour',
displayFormats: {
'hour': 'h:mm:ss a'
}
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Your Y Axis',
fontSize: 13,
}
}]
}
};
//merge all options into the main chart options
$.extend(true, this.cfg.config, options);
};
You can see the different time formats available from ChartsJS using MomentJS.
Just a complement to do the extender works, use this.cfg.config.options = {...
for exemple:
function extName() {
this.cfg.config.options = {
legend: {
display: false
}
};
};
I have set selectable field in KendoGrid as "multiple,row" but still I am not able to select multiple rows using Ctrl key though it is working fine with Shift key.
Earlier it was working fine but after I had set virtualization in grid, it stopped working. Then I removed virtualization but still it is not working correctly since then. I have even restarted Visual studio, closed all the sessions but to no effect.
Can anyone please suggest a solution.
Please find the code below:
var sampleData = [];
var sampleDataSource= new kendo.data.DataSource({
data: sampleData ,
autoBind : false
});
$("#grid").kendoGrid({
dataSource: sampleDataSource,
height: 440,
selectable: "multiple",
sortable: true,
columns:[
{field: "Year", width:50, title: "Year"},
{field: "Name", title: "Name"}
]
});
I am NOT using serverPaging and Virtual Paging.
Scenario : I have a dropdownlist when get changed it loads the grid.First time I load 100 data items & everything works correctly.
When I change the dropdownlist which will fetch large data like 20,000 total data items it get loaded & works correctly if the navigation is through clicking page number at bottom of grid.
Problem : when I click 'Go to the Last Page' button it shows the Previous POST request's last part of dataItems(90-100 previous date items )showing 100 as total dataitems wrongly.When I click previous page number it loads 80-90 items of correct data updating total size 20,000.
I find if I refresh the grid using pageable refresh button and navigate to the last page it works correctly..After grid's initialisation I tried of calling datasource read() and grid's refresh() but still problem persist.
Kindly help. I am using Kendo UI v2013.1.226.
Thanks in Advance.
FYI: I cant use serverPaging and Virtual Paging due to some restriction .
var myDataSrc = new kendo.data.DataSource({
pageSize : 20,
batch: true,
transport:
{
read: {
url: "../../api/getList",
dataType: 'json',
complete: function(e) {}
},
parameterMap: function(options, operation) {
if (operation == 'read') {
return {
dropdDownId : selectedDD.id
};
}
}
},
schema :
{ model :
{
id : "id",
fields :{
id : {type : "number"},
name:{type:"string"}
}
}
}
});
$("#myGrid").kendoGrid({
dataSource : myDataSrc,
selectable : true,
navigatable : true,
resizable : true,
sortable : true,
pageable:{refresh:true},
scrollable : true,
autoBind : true,
filterable:true,
columns : [ {
field : "name",
title : "name",
width : 150
} ],...
});
};
In the code below, if I set the activeTab to 0, the contents of /viewer/welcome show up as expected. If I set activeTab to 1 (like below), the second tab is activated on load, but when I click on the first tab, the content never displays. I can see it loading the content for the tab BEFORE I click on the tab (if I set autoLoad: false, it doesn't load it at all), but even though it loaded, it doesn't display.
{
xtype: 'tabpanel',
activeTab: 1,
items: [
{
xtype: 'panel',
loader: {
url: '/viewer/welcome/',
renderer: 'html',
autoLoad: true
},
layout: {
type: 'fit'
},
title: 'Welcome'
},
...
}
Why doesn't the content of the tab actually render when the tab is activated? Why does it work if that tab is the active tab on load, but not when it is activated otherwise?
If I make these changes, the text displays all the time as expected, but I get an extra page load from the spurious activate call.
{
xtype: 'tabpanel',
activeTab: 1,
items: [
{
xtype: 'panel',
loader: {
url: '/viewer/welcome/',
renderer: 'html',
autoLoad: false
},
layout: {
type: 'fit'
},
title: 'Welcome',
listeners: {
activate: function(me, opts) {
me.getLoader().load();
}
}
},
...
}
I'm just not understanding why the tabs are not managing this content as part of being a tab.....
I think the problem here is what you have indicated - the tabs are not managing content. The reason why they are not managing it properly is the HTML content that gets returned from loader is just that - some HTML, it is not an ExtJS Component. It is arguable that ExtJS "should" manage content that it has loaded but the docs allude to the contrary: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Component-cfg-html It might be worth while filing a bug on this.
Also, I noticed you had a fit layout specified on the welcome panel. Since you have no other items contained in that panel, you probably don't need that setting - incidentally it may (or may not) improve how the loaded html fragment gets handled.
Good luck.
I found out that in ExtJS 5.1 using the reference name didn't work. Had to put in an itemId