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.
Related
Dynamically adding a mix of sticky and non-sticky columns to mat-table seems to break it. You can see the demo here: https://stackblitz.com/edit/angular-mfxahi?file=src/app/table-sticky-columns-example.ts
I suspect that the issue is due to Angular not knowing the actual width of the content in the column, however setting width or min-width to .mat-header-cell, .mat-cell doesn't help. When inspecting the columns you can see that left CSS attribute is not set to correct value.
I cannot change the table to use static definitions as it is reused in different scenarios. Any idea how to fix this issue?
Instead of setting the width on .mat-header-cell or .mat-cell, set width and left on the columns which are sticky (.mat-column-<label>). In order for it to work, the left value needs to be set to at least the width of the previous column:
.mat-column-name {
width: 110px;
}
.mat-column-position {
width: 80px;
left: 110px !important;
}
Note: you need to use !important since left is set on .mat-header-cell and .mat-cell directly.
If you want to style the sticky columns more dynamically, you can add the styling to your column definition and then use it in the template:
const DEFINITIONS: ColumnDefintion[] = [
{label: 'name', sticky: true, style: {'width':'100px', 'left':'0px'}},
{label: 'position', sticky: true, style: {'width':'80px', 'left':'100px'}},
{label: 'weight'},
{label: 'symbol'},
]
<!-- ... -->
<ng-container *ngIf="colDef.sticky" [matColumnDef]="colDef.label" sticky>
<th mat-header-cell *matHeaderCellDef [ngStyle]="colDef.style">{{colDef.label}}</th>
<td mat-cell *matCellDef="let element" [ngStyle]="colDef.style">{{element[colDef.label]}}</td>
</ng-container>
<!-- ... -->
Working example: Stackblitz
i had the same problem it seems to be a general issue if you play with sticky and dynamic cols.
GitHub Link: https://github.com/angular/components/issues/15885
This worked for me:
#ViewChild(MatTable) table: MatTable<any>;
ngAfterViewChecked(): void {
if (this.table) {
this.table.updateStickyColumnStyles();
}
}
hope it works for you too.
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.
I have a very simple webgrid with 3 columns:
View
columns: grid.Columns(
grid.Column("Applicant Name",
format: (item) => #Html.ActionLink((string)item.Name, "EditApplicant", "Applicant", new { id = item.ApplicantId },
null), style: "AppName")
, grid.Column("Role", "Role", style: "Role")
, grid.Column("ApplicantSkills", "Skills", style: "AppSkills")
I want to set my columns to a fixed width. I have tried using percentage widths here and exact widths like 500px, 100px etc, and they all work initially, but are lost after postback.
css:
.AppSkills {
width: 70%;
}
.AppName {
width: 20%;
}
.Role {
width: 10%;
}
My grid is a results grid, which is populated from a number of filters, so every time the user selects different filters and clicks search the results are changed and the grid re-populated. What im finding is the grid column width style is being lost. Here is what my screen looks like. Initially it looks fine, but after selecting different filters and hitting search, the grid column widths are lost.
I have tried posting my form as a GET and a POST to see if it was the Get that was losing the formatting. But both yield the same results.
#using (Html.BeginForm("Search", "Home", FormMethod.Post))
{
Is there anything obvious I'm doing wrong here? Or is there any way I can ensure a fixed width on my grid columns so they don't move about?
You're missing spaces after the commas, so it's probably treating one of the entries as a big unbreakable word. If you can't change the underlying data, assuming it isn't the code doing the concatenation, you might be able to use the css word-break property to sort it.
Make sure that after postback that the grids still have the classes applied to them.
Also, please post the HTML for us to view so we can diagnose the problem since we are not to sure if they are styled divs or a table.
If it is a table, try running the following CSS. Basically, it will target the columns individually without class names, just in case the classes are lost during postback.
td:nth-child(3) {
width: 70%; /* targeting the skills column */
}
td:nth-child(1) {
width: 20%; /* targeting the name column */
}
td:nth-child(2) {
width: 10%; /* targeting the role column */
}
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/
As the title says, I would like the message of Ext.Msg.alert() to in center align. I tried this:
Ext.Msg.alert({
title: 'Success',
msg: 'Deleted',
buttons: Ext.Msg.OK,
baseCls: 'msgbox'
});
CSS:
.msgbox {
text-align: center;
}
It is still on left align. How do I do this?
The displayed text is a displayfield component that has the same size that its text then, even when it is centered, you cannot see it aligned as you want.
So, the solution is to make it bigger. In my example i do it using a css class. Take a look at it:
var w = Ext.Msg.alert({
title: 'Success',
msg: 'Deleted',
buttons: Ext.Msg.OK,
autoShow: false,
cls: 'msgbox'
});
w.down('.displayfield' ).addCls('displayfield-fullsize');
and the class is, as you can imagine:
.displayfield-fullsize{
width: 100% !important;
}
See it working here: http://jsfiddle.net/lontivero/F7HE3/3/