Is it possible to freeze first 3 columns of Primefaces' data table?
I'm using Primefaces 3.1
Primefaces does not support fixed columns right now.
Jquery fixed column was used to achieve the same. Reference : http://datatables.net/extras/fixedcolumns/
Example:
var oTable2 = $(primfacesDataTableId).find('table').dataTable({
"sScrollX" : "100%", //Scroll
"sScrollY" : "180",
"bAutoWidth" : false,
"bScrollCollapse" : true,
"bPaginate" : false,
"bSort" : false,
"sInfo" : "",
"sInfoEmpty" : ""
});
var oFC = new FixedColumns(oTable2, {
"iLeftColumns" : 4, //Freezed first for columns
"sHeightMatch" : "auto",
"iLeftWidth" : 405
});
Thanks,
Shikha
For those who are using Primefaces 4.1 or above, this feature is now implemented (it took four years from the first request, by the way):
https://code.google.com/p/primefaces/issues/detail?id=366
You can play with the horizontal scrolling in the showcase.
Related
I have used ag-grid ng in angular application. when number of columns exceeds not getting the horizontal scroll bar.
Are you sure is because of the number of columns? I had the same problem and the solution was take off the pinned option of every column.
For example if you have this:
{headerName: "Athlete", field: "athlete", width: 150, pinned: 'left'}
it has to be:
{headerName: "Athlete", field: "athlete", width: 150}
You can just say,
gridOptions.api.sizeColumnsToFit();
This will set the columns width and hence remove horizontal scrolling.
Sure you haven't got the suppressHorizontalScroll property on the gridOptions object set to true have you ?
var gridOptionsTop = {
columnDefs: columnDefs,
// don't show the horizontal scrollbar on the top grid
suppressHorizontalScroll: false,
enableSorting: true,
};
Try putting in minWidth across EACH columnDefs in ag-grid, this makes sure each has a width prop associated with it, so then if it overflows, a horizontal scroll-bar appears below
columnDefs = [
{minWidth : 100, field: 'a', headerName: 'test1'},
{minWidth: 120, field: 'b', headerName: 'test2'},
{minWidth: 80, field: 'c', headerName: 'test2'}
]
What you may find if you use:
gridOptions.api.sizeColumnsToFit();
Is that some pages take quite a time to shuffle out into the display.
What I found is that there is a flag on the api to show whether the width is dirty or not. Therefore I implemented a method of checking this:
refreshTable() {
if (this.gridColumnApi.columnController && this.gridColumnApi.columnController.bodyWidthDirty) {
this.gridApi.sizeColumnsToFit();
if (this.refreshAttempts) {
this.refreshAttempts--;
setTimeout(() => {
this.refreshTable();
}, 100);
}
} else {
this.refreshAttempts = 0;
}
}
I put this in a service class with an initialiser, the refresh attempts is passed into that too. I suggest going around twice, you may also want to play with the timeout delay as you may not wish such a large one.
The reason this seems to be happening is on some more complex grids is that one shuffle results in a bit of work but the width is still dirty. The next and maybe next one will help.
I'm trying to display two gridviews using the dhtmlx scheduler library. The way we are using the scheduler is so that employees can sign out. Right now, we can view it as a monthly view but we also want to have a day view too.
I was able to create the grid, but when I try to click button it does not display the day report.
Here is a code snippet
scheduler.locale.labels.grid_tab = "Month";
scheduler.createGridView({
name:"grid",
fields:[ // defines columns of the grid
{id:"date", label:'Date', sort:'date', width:300, align:"left"},
{id:"employee", label:'Employee', sort:'str', width:400, align: "*"},
{id:"room_description", label:'Destination', sort:'str', width:600, align:'left'}
],
paging:true,
unit:"month",
step:1
});
scheduler.locale.labels.grid_tab2 = "Day Report";
scheduler.createGridView({
name:"day_grid",
fields:[ // defines columns of the grid
{id:"date", label:'Date', sort:'date', width:300, align:"left"},
{id:"employee", label:'Employee', sort:'str', width:400, align: "*"},
{id:"room_description", label:'Destination', sort:'str', width:600, align:'left'}
],
paging:true,
unit:"day",
step:1
});
Your code seems to work on scheduler demos
http://docs.dhtmlx.com/scheduler/snippet/b9320394
The only thing is that you need to define label for a day_grid view correctly, the variable should be named "day_grid_tab" instead of "grid_tab2"
scheduler.locale.labels.day_grid_tab = "Day Report";
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
} ],...
});
};
I have a div with a DOJO table. I want to display the div in full screen. I have tried using HTML5 API but the height and width are not enlarged in full screen mode. What are the other ways I can achieve a full screen with only the div containing DOJO table with it?? This is the table I have.
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.Pagination");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojox.grid.enhanced.plugins.Filter");
dojo.require("dojox.data.QueryReadStore");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
var gridLayout = [
{
name : "Date & Time",
classes : "title",
field : "date",
width : "140px"
}, {
name : 'Status',
classes : "title",
field : "statusMessage",
fields : [ 'statusMessage', 'statusMessageColor' ],
formatter : formatLink1,
width : "140px"
}];
I write text description in tinymce with spaces and html(line break and others etc etc).then i save it to mysql database.when i get it again and alert it,it shows me as same as it was.so till now it is fine.
When again i add it to tinymce to edit it,all html and spaces disappears..what can be the issue?
Here is my code
$('#description').tinymce({
// Location of TinyMCE script
script_url : 'tinymce/jscripts/tiny_mce/tiny_mce.js',
// General options
width : "825",
height: "300",
theme : "advanced",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_toolbar_location : "top",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,bullist,numlist,spellchecker",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
force_br_newlines : true,
force_p_newlines : false,
gecko_spellcheck : true,
forced_root_block : '', // Needed for 3.x
plugins : "paste,spellchecker",
spellchecker_languages : "+English=en,Russian=ru",
// encoding : "xml",
// Example content CSS (should be your site CSS)
content_css : "tinymce/examples/css/content.css",
//
apply_source_formatting : true,
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
here is how i am getting value
alert(json.description_demo);//this is ok
$("#description").val(json.description_demo);
alert($("#description").val());//now this is not ok..here is issue
tried this also
alert(json.description_demo);//ok
tinyMCE.get('description').setContent(json.description_demo);
alert(tinyMCE.get('description').getContent());//issue not ok
images
You will have to use tinyMce features to get ans set the value.
Try using
tinyMCE.get('description').getContent() to get the value
tinyMCE.get('description').setContent(value from db) to set the value.
Chekout tinymce docs http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent