Hi I am using the datatable to display some data in our website but some reason I am not able to fix the column width to a fixed size, its calculating column width automatically.
I have tried specifying the {"sWidth": "30px;"} for the columns but no luck.
Here I am giving my code which renders the table
jQuery('#dynamic')
.html('<table cellpadding="1" cellspacing="1" border="0" class="properties" id="settingsGrid"></table>');
jQuery('#settingsGrid').dataTable({
// "bJQueryUI": true,
"sPaginationType": "full_numbers",
"aaData": aDataSet,
"aoColumns": [
{"sTitle":"catId", "bVisible": false},
{"sTitle" : "Name","sWidth": "30px;"},
{"sTitle" : "Email","sWidth": "30px;"},
{"sTitle" : "Phone no","sWidth": "30px;"},
{"sTitle" : "Location","sWidth": "30px;"},
{"sTitle" : "No of Properties","sWidth": "30px;"},
{"sTitle" : "Web Site URL","sWidth": "30px;"},
{"sTitle" : "Created Date","sWidth": "30px;"}
],
"aoColumnDefs": [ {
"aTargets": [ 0 ],
"mRender": function ( data, type, row ) {
return data +' '+ row[3];
}
}
],
"bAutoWidth": false,
"bDeferRender": true,
"sScrollY": "350",
"bScrollCollapse": true,
"bFilter" : false,
"bSort" : false,
"bInfo" : false,
"bLengthChange": false,
"iDisplayLength": 10,
"oLanguage": {
"sEmptyTable": "No categories available in your name"
},
"oLanguage": {
"sInfoEmpty": "No entries to show"
},
});
Can anyone guide me where I am going wrong?
Here is a output what I am getting, basically I need to shrink the website column.
Try this piece of code in css:
#settingsGrid td {
width: 30px !important;
}
Related
I have a problem in aligning an item to the right, or anyway at the end of the column.
As you can see in the picture:
even if there is space on the right, it aligns the item left covering part of the text (The complete text is "Battery Level"). I would like to align it near the downward arrow.
I tried to use align:'right' without success.
How could I fix it? this is my code:
columns: {
defaults: {
flex: 1,
},
items: [{
....
},{
text: Strings.positionBatteryLevel,
hidden:true,
sortable: false,
defaults:{
margin:'-31 0 0 55'
},
items: [{
xtype: 'numberfield',
id: 'batteryFilter',
align:'right',
listeners: {
change (e,newValue, oldValue, eOpts ) {
filterGridAttributeType(newValue,'batteryLevel');
}
}
}],
},{
...
There is a config for columns to align the content:
columns: [{
text: 'Battery Level',
sortable: false,
==> align: 'end'
},{
...
I am in trouble with my CSS and I don't find the problem!
Inside the last cell of my datatables I've a dropdown menu that appear clicking on it.
The problem is that the menu "stay" inside the cell and show me scroller!
My fiddle: http://jsfiddle.net/oxs8fp4e/1/
This is my code for table init, but the problem I think is inside CSS of the theme, not table init:
myTable = $('#tabellaArticoli').DataTable({
responsive: {
details: {
type: 'column',
target: 0
}
},
paging: true,
"pageLength": 100,
"lengthMenu": [ [20, 50, 100, -1], [20, 50, 100, "Tutti"] ],
"info": false,
scrollCollapse: false,
scrollX: false,
scrollY: false,
"columnDefs": [
{
orderable: false,
className: 'control',
searchable: false,
targets: 0
},
{ "orderable": false, "targets": 1 },
{ "width": "5%", "orderable": false, "targets": 'azioni' }
]
});
Instead i'd like to show the dropdown like this example: https://keenthemes.com/metronic/preview/demo7/crud/datatables/basic/basic.html
Can someone help me with my css?
EDIT: I've already set scrollX as false: this is not the problem. I think the problem is only inside the CSS
It's nearly the same problem as linked in the 'possible duplicate'-comment. Your table and one or more wrapping elements got the overlow: hidden; style assigned.
In your case you could do the following to achieve that the whole popup-menu becomes visible.
remove/override the overflow-styles:
.table-responsive,
.dataTables_scrollBody {
overflow: visible !important;
}
Change the transform of the dropdown-menu-elements defined by the inline-styles:
transform: translate3d(-120px, 20px, 0px);
I have a panel where in I have a button in the header which helps me to add two textfields in that panel. Now when I click on this button it takes me to a popup form where the user enters the value of the two textfields it wants and then clicks on save button in the header of this popup panel.
The two textfields are added but the value is not set to the value which is entered in the popup form. I think the problem is with the scope. Kindly look at the following code and tell me how to resolve this issue.
xtype: "panel",
id: 'idFieldpanel',
...
header:{
titlePosition: 0,
items:[{
xtype:'button',
text: 'Add',
handler: function(){
var addidFieldPanel= new Ext.form.Panel({
id: 'newidFieldPanel',
width: 250,
height: 100,
floating: true,
closable : true,
layout : {
type : 'vbox',
align : 'stretch'
},
bodyPadding: 10,
items : [
{
xtype : 'textfield',
id : 'newidFieldname',
fieldLabel : 'Name',
name : 'newidFieldname',
flex : 1,
scope : this
},
{
xtype : 'textfield',
id : 'newidFielddataType',
fieldLabel : 'DataType',
name : 'newidFielddataType',
flex : 1,
scope : this
}
],
header : {
titlePosition : 1,
items : [{
xtype: 'button',
text: 'Save',
handler: function() {
ctr++; //this is used so that the id of the added fields do not match and hence they do not overlap
Ext.getCmp('idFieldpanel').add({
xtype:"container",
layout : {
type : 'hbox',
align : 'stretch'
},
defaults: {
bodyPadding: 10,
margin: '10 0 10 10'
},
items: [
{
xtype : 'textfield',
fieldLabel: 'Name',
id: 'idFieldName' + ctr,
name : 'Data',
margin:'0 10 10 0',
flex : 1,
height : 'auto'
},
{
xtype : 'textfield',
fieldLabel: 'Datatype',
name : 'Type',
id: 'idFielddataType' + ctr,
margin: '0 10 10 0',
flex : 1,
height : 'auto'
}
]
});
Ext.getCmp('idFieldName' + ctr).setValue(Ext.getCmp('newidFieldname').getValue());
Ext.getCmp('idFielddataType' + ctr).setValue(Ext.getCmp('newidFielddataType').getValue());
}
}]
}
})
addidFieldPanel.show();
}
}]
}
There are a few things that can help you out here, but first would be to not bother with tracking unique ID's across your components. Let ExtJS handle that for you. Also, removing the nested handlers will make your code a lot easier to read. I put together this fiddle that shows how you can do that.
By not using ID's you can grab reference to parent/child components with the up/down selectors similar to saveBtn.up('panel').
You can also add a form to your popup for easier selecting. Hope this helps to give you an idea of a better way to leverage the framework.
Hi guys I have a dojo datagrid inside a TabContainer/BorderContainer/ContentPane
The datagrid is render progammatically, the code is:
<script>
require(['dojo/request',
'dojo/dom',
'dijit/Dialog',
'dojo/date/locale',
'dojo/_base/array',
'dojo/store/Memory',
'dojo/data/ObjectStore',
"dijit/form/Button",
"dojo/dom-class",
'dojox/grid/DataGrid',
'dijit/form/Select',
'dojox/form/Uploader',
'dojo/data/ItemFileWriteStore',
'dojo/_base/xhr',
'dojox/grid/cells/dijit',
'dojox/grid/cells',
'dojo/date',
'dojo/date/stamp',
'dojo/date/locale',
'dojo/currency',
'dijit/form/DateTextBox',
'dijit/form/CurrencyTextBox',
"dojox/grid/_RadioSelector",
'dojo/ready',
'dojo/domReady!'],
function(request,dom,Dialog,locale,array,Memory, ObjectStore,Button,domClass,DataGrid, ItemFileWriteStore, xhr,cells,cellsDijit,date,stamp, locale,currency,localeCurrency, DateTextBox, CurrencyTextBox,ready){
var dataStore1 = new ObjectStore({ objectStore:new Memory({ data: <?php echo json_encode($constructiondrawingsdata) ?> }) });
var layout1 = [{
defaultCell: { width: 8, editable: false, type: cells._Widget, styles: 'text-align: center;' },
cells: [
{name: 'TYPE', field: 'filepath' ,formatter: displayIcon ,width:3},
{name: 'ID', field: 'id' ,width:2},
{name: 'PROJECT', field: 'project' ,width:5},
{name: 'USER', field: 'user' ,width:8},
{name: 'GROUP', field: 'area' ,width:5},
{name: 'DESCRIPTION', field: 'description' ,width:15},
{name: 'FILE', field: 'filepath' ,formatter: formatlink ,width:20},
{name: 'SIZE', field: 'size' ,width:8},
{name: 'DATE', field: 'date' ,width:8},
{name: 'STATE', field: 'status' ,formatter: formatcolumcolor ,width:18},
{name: 'REMARKS', field: 'remarks' ,width:15}
]
}];
var grid1 = new DataGrid({
id: 'grid1',
query: { id: "*" },
store: dataStore1,
structure: layout1,
loadingMessage: "Loading data...",
noDataMessage : "No results found",
clientSort: 'false',
style: "height: 100%; width: 100%",
canSort: function(col) { return col != 1; },
selectionMode:'single',
rowSelector: '0px'});
grid1.placeAt("gridDiv1");
</script>
<div data-dojo-type="dijit/layout/BorderContainer" style="padding:0px" data-dojo-props="liveSplitters: true, design: 'headline'">
<div id="gridDiv1" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
</div>
</div>
The problem is , when I load the datagrid the first time I only get 7 rows from the database of a total of 9 rows, and then when I refresh the datagrid I get the 9 rows.
Moreover if I press F12 in Google Chrome to see the console and I close it I lose again the last 2 rows of the datagrid (it´s weird right?).
Again if I refresh the datagrid I get the 9 rows.
Anyone has faced this issue?. Thanks in advance
I have a problem that html page not displayed in full page consistently. Need to click toggle size button to expand the html page. Any problem with the code as attached below ?
Any method to ensure each html is displayed in full page ?
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox-button").fancybox({
'padding' : '1',
'margin' : '2',
'autoScale' : false,
'width' : '100%',
'height' : '100%',
'type' : 'iframe',
'autoPlay' : false,
'playSpeed' : 10500,
closeBtn : false,
iframe : {
scrolling : 'no'
},
helpers : {
title : { type : 'inside' },
buttons : {}
}
});
});
</script>
Profitable Plan
Just set autoSize: false. See example - http://jsfiddle.net/j8MQW/
$(".fancybox").fancybox({
autoSize : false,
'padding' : '1',
'margin' : '2',
'autoScale' : false,
'width' : '100%',
'height' : '100%',
'type' : 'iframe',
'autoPlay' : false,
'playSpeed' : 10500,
closeBtn : false,
iframe : {
scrolling : 'no'
},
helpers : {
title : { type : 'inside' },
buttons : {}
}
});