I am facing issue with data displayed in Dojo enhanced grid. Grid containd two records(rows) but it is not displayed properly and also a horizontal scroll is coming which is scrollable beyond headers of the dojo grid.
I am creating a dojo enhanced grid programmatically as below:-
GRID Code:-
grid= new dojox.grid.EnhancedGrid({
id:"grid",
noDataMessage: noRecMsg,
escapeHTMLInData:false,
plugins: {
filter: {
closeFilterbarButton: false
},indirectSelection: true,
pagination: {
pageSizes: ["25", "50", "100", "All"],
description: true,
sizeSwitch: false,
pageStepper: true,
gotoButton: false,
/*page step to be displayed*/
maxPageStep: 3,
/*position of the pagination bar*/
position: "top"
}},
selectionMode: "single",
autoWidth: true,
rowSelector: '20px'},
document.createElement('div'));
dojo.byId("gridDiv").appendChild(grid.domNode);
grid.startup();
Store and Layout code as:-
gridLayout = [];
gridLayout.push({
'field': gridField,
'name': gridHeader,
'width': '120px'
});
grid.setStore(store);
grid.setStructure(gridLayout);
HTML Code:-
<div id="Det" data-dojo-type="dojox.widget.Portlet" title=" Listing" dragRestriction="true" >
<table width="100%" height="50%" border="0">
<tr><td>
<div id=" gridDiv " ></div>
</td></tr></table>
</div>
I am trying to remove horizontal scroll and also to display rows without vertical scrolling.
Please guide/ help in resolving this. Tried some options like (grid.resize(), autoHeight, autoWidth) but none worked yet.
Regards,
Sagar
enhanced grids have two main divs ("dojoxGridContent", "dojoxGridScrollbox") u can fined them using firebug once page rendered. below is part of how it is converted to html tags
<div role="presentation" dojoattachpoint="scrollboxNode" class="**dojoxGridScrollbox**" style="height: 461px; overflow: hidden;">
<div role="presentation" hidefocus="hidefocus" dojoattachpoint="contentNode" class="**dojoxGridContent**" style="height:100%; overflow-y:auto;">
you will need to override the overflow attribute for "dojoxGridContent" deiv e.x overflow-y: auto (which will set the vertical scrolling to true and the horizontal to false)
dojo.query('.dojoxGridContent').attr('style','overflow-y:auto;');
another approach is to increase the height of the "dojoxGridContent" div to be using same syntax aboec.
Related
After reimplementing the fab speed dial based on the demo presneted on angular material, I've managed to set the position, but I can't seem to figure out how to setup the spacing between the dials.
They're really close to eachother. I've tried setting the margin and padding, but in the button, but it doesn't seem to be right, because it applies even in close mode, whereas intended only to be set in open mode.
Link to codepen demo of my code
HTML
<div ng-controller="DemoCtrl as demo" layout="column" ng-cloak="" class="fabSpeedDialdemoBasicUsage" ng-app="MyApp">
<div style="position: fixed; bottom: 15px; right: 50%" >
<md-fab-speed-dial md-open="demo.isOpen" md-direction="up"
class="md-fling" ng-cloak>
<md-fab-trigger >
<md-button aria-label="menu" class="md-fab md-warn" ng-style="navIconStyle" >
<md-icon md-svg-src="img/icons/menu.svg"></md-icon>
</md-button>
</md-fab-trigger>
<md-fab-actions>
<md-button ng-repeat="button in demo.pageButtons" class="md-fab md-raised md-icon-button "
aria-label="{{button.label}}" style="background-color:orange;margin-top:10px;">
<md-icon md-svg-icon="{{button.icon}}"></md-icon>
</md-button>
</md-fab-actions>
</md-fab-speed-dial>
</div>
</div>
JS
(function() {
'use strict';
angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('DemoCtrl', function() {
this.pageButtons =
[
{
icon: "img/icons/menu.svg",
label: "News"
},
{
icon: "img/icons/menu.svg",
label: "Schedule"
},
{
icon: "img/icons/menu.svg",
label: "Home"
}
]
});
})();
You can create a ng-style that corresponds to an array of styles
Since we're focused on the speed dial, the open state and close state depends on directive's argument md-open, which here is assigned by isOpen.
So when isOpen = true, then we can set 10px padding, otherwise if close, then set padding to false, and make it 0px. We can do this by creating an array of those two css styles. Then cast the boolean value of isOpen state with an integer, so the array of style corresponds accordingly.
In Html's md-button tag
ng-style="navIconStyle[navController.isOpen ? 1 : 0]"
In Js controller
$scope.navIconStyle =
[
{
"margin-bottom" : "0px"
},
{
"margin-bottom" : "10px"
}
]
I tried adding ng-style, but it seems that Angular Material framework overwrites the style while expanding. I ended up adding a separate class and using ng-class attribute.
ng-class="{'spaced': demo.isOpen }"
And define the class as below. Use appropriate side of margin based on where FAB is opening. My case, menu was configured to open on left, so I set margin on right.
.md-button.md-fab.md-mini.spaced {
margin-right: 8px !important;
}
I'm having a small issue with AngularJS and ng-grid.
I want to add a row in the footer that contains total values for each column. Using a footer template I managed to do that, so far so good.
Is there any way I can resize these columns based on the size of the grid's columns? Or at least set the row width to follow the width of the grid canvas?
Thanks in advance.
By using CoulmnDefs and using the same widths in your footer template.
$scope.gridOptions = {
data: 'myData',
enablePaging: true,
showFooter: true,
footerRowHeight:'30px',
footerTemplate: '<div style="width: 20%; display: inline-block;">{{total1}}</div><div style="width: 60%; display: inline-block;">{{total2}}</div><div style="display: inline-block;">{{total3}}</div>',
totalServerItems: 'totalServerItems',
columnDefs: [{
field: 'name',
width: '20%'
}, {
field: 'allowance',
width: '60%'
}, {
field: 'paid'
}],
pagingOptions: $scope.pagingOptions,
filterOptions: $scope.filterOptions
};
This is based on old Plunker I found somwhere.
If the grid gets to small this still goes bonkers. Try to set a minwidth for the grid in style.css or the for the columns in columnDefs and the footer template.
When using datatables with jquery mobile, I can not seem to get a horizontal scroller going. I have tried every combination of sScrollX and sScrollY I can think of.
To see an example of the lack of vertical scroller, please try the webapp example I put up here.
On an iphone or some other small screen try the following:
1) Switch the slider from Graph to Table
2) Hit the favorites button
3) Scroll down the left panel and select "MSFT".
You will see only the first few columns. You can scroll up and down but not to the right.
I tried sScrollX and sScrollY but the scrolling is then inconsistent and buggy. At the moment I've disabled both and at least vertical scrolling works ok.
Any help would be much appreciated as I've now been fighting this for a week!
Please find the current datatables code below:
var table = $('#table_container').dataTable( {
"symbol": symbol,
"exchange": exchange,
"aoColumns": columnData,
"aoColumnDefs": [
{ "aTargets": [0], "mRender": function (data, type, full) {return dateFormat(data)} },
{ "aTargets": [1], "mRender": function (data, type, full) {return volumeNumber(data)} },
{ "aTargets": [8], "mRender": function (data, type, full) {return volumeNumber(data)} },
{ "aTargets": [14], "mRender": function (data, type, full) {return volumeNumber(data)} },
{ "aTargets": ["_all"], "mRender": function (data, type, full) {return numberWithCommas(parseFloat(data).toFixed(2))} },
],
"aaSorting": [[ 0, "desc" ]],
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bInfo": false,
"bAutoWidth": false,
"bProcessing": true,
//"sScrollX": "100%",
//"sScrollY": "100%",
//"sDom": 'r<"H"lf><"datatable-scroll"t><"F"ip>',
"bScrollCollapse": false,
"bServerSide": true,
"sAjaxSource": str,
"bDeferRender": true,
"fnServerData": function( sUrl, aoData, fnCallback ) {
$.ajax( {
"url": sUrl,
"data": aoData,
"success": fnCallback,
"dataType": "jsonp",
"cache": false
} );
}
} );
Try like this
$(document).ready(function() {
$('#example').dataTable( {
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true
} );
} );
Refer this Fiddle Demo
Wrap the table in a div.
You can set the overflow value to auto.
<div class="table-container">
<table>
...
</table>
</div>
CSS
.table-container{
overflow: auto
}
another way is to set the overflow to hidden, and then set the overflow-x (horizontal scrolling) to scroll. This has the benefit of also allowing you to set the -webkit-overflow-scrolling to touch, which will allow for momentum scrolling on mobile devices.
CSS
.table-container{
overflow: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
I have inspected the CSS of your APP from the link you provided.
To get the table to scroll in any direction independently you will need to set a desired width and height in your .dataTables_wrapper class. Vertical scrolling works in your APP because the Table is not actually scrolling itself but the Whole Page is. If your APP will not have any other content below the table then the table height can be set all the way to the bottom of the Page or else you will need to have a small Gap at the bottom so a user can touch and scroll further down the Page. Also If you are aiming your app on different mobiles then you need some jquery code to calculate screen size and update the width and height in the .dataTables_wrapper class on the fly so the table will fit the screen from left and right and to the bottom. Any excess width and height will be scrolled if the table contents are longer than the size. If the APP is just for one mobile then its easy to play around with the width and height in the class to get the desired size of the table.
Example
.dataTables_wrapper {
position: relative;
clear: both;
height: 400px;
width: 400px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
Your main_container css should be like this, so delete the rest. Otherwise you will have another horizontal scroll bar that does nothing.
#main_container {
overflow: hidden;
}
Although scroll bars are usually hidden from mobile browsers unlike desktop browsers, if you want add this css trick to hide them from view. This trick only works for webkit browsers such as Google/Safari/Native Android etc.
::-webkit-scrollbar {
width: 0px;
}
It may be a good idea to you have Fixed Table Header so a person can see what data relates to the columns when they are scrolling. There are lots of ways to achieve this, below i added a link i found
http://fixedheadertable.com/
I have a page with dropdown list and Dialog component from the jQuery UI library.
But the issue is dropdown list appears over dialog box in IE7 .In chrome,Mozilla Firefox it works fine.
Here is the code for jquery:-
var divdialog = $('#divdialog'); divdialog.dialog('destroy');
divdialog.dialog({
autoOpen: true,
height: 310,
width: 570,title: "Look Up",
modal: true,
open: function () {$('#testframe').attr("src", strValue);
$('#testframe').height($(this).height()-5); $('#testframe').width($(this).width()-10);
},
close: function (e) {
$('#divdialog').remove();
//divdialog.html('');
// divdialog.dialog('destroy');
},
resizable: true,
resize: function() { $('#divdialog iframe').hide(); },
resizeStop: function() { $('#divdialog iframe').show();
$('#divdialog iframe').height($(this).height()-10);
$('#divdialog iframe').width($(this).width()-10); } ,
closeOnEscape:true,
draggable:true
})
Here is the code for UI:-
<div id="divdialog" style="display:none;">
<iframe id="testframe" frameborder="0" title="dialogBox"><p>not supportted iframe</p></iframe>
</div>
<asp:DropDownList ID="ddlRoleNames" runat="server" Width="180px"
OnSelectedIndexChanged="ddlRoleNames_SelectedIndexChanged" AutoPostBack="true">
</asp:DropDownList>
Any ideas on this issue?
That might be because of the Z-index, why because even if your element is having the z-index as 1000, there will be a chance of having that element below the element with z-index as 1, if the both are not in the same stacking contexts.
So try giving the position as absolute in dropdown and let me know .
have a look at the below question also which may help
IE7 Z-Index Layering Issues
Hope this helps
I want to get the following to display in a single line. I have tried using styles float and display.
Show this input <input type="text" name="filterOp" id="filterOp"/> inline.
<script type="text/javascript">
new Ext.form.ComboBox({
applyTo: 'filterOp',
triggerAction: 'all',
name: 'item',
mode: 'local',
lazyInit: true,
displayField: 'name',
valueField: 'id',
forceSelection: true,
typeAhead: true,
inputType:'text',
fieldLabel: 'Item selection',
style: "display: inline-block",
store: new Ext.data.JsonStore({
autoLoad: true,
url: 'reporting/json_report_filter_operators.jsp',
root: 'rows',
fields:['id', 'name']
})
})
</script>
The simplest way to do this is to override the styles on the page.
First, wrap your paragraph in a P tag with a special id.
<p id="my-inline-override">
Show this input <input type="text" name="filterOp" id="filterOp"/> inline.
</p>
Then you can add a CSS selector to your page that makes sure the DIV tag added by Ext JS displays inline (note that "x-form-field-wrap" is the class of the inserted DIV wrapper, you can see this if you use chrome developer tools to browse the DOM).
<style>
#my-inline-override div.x-form-field-wrap {
display: inline;
}
</style>
I'm sorry, your question is a bit confusing. What exactly are you trying to get on a single line? The combo box? The code? Each item in the combo box? If it's each item just widen the combo box, or make each element have overflow hidden and a fixed width.