I am working on jqgrid with ASP.NET WEB API.
I want to add two rows in the footer of jqgrid.
So a little search on the net brought me to this link (2010) which says "It is not possible", I am thinking as the answer is of 2010, may be by now some thing / some workaround may have been made possible for this.
What do I want to show in footer ?
I want to show two rows
Total for data preset in current page
Grand total for data present in all of the pages
I am able to pass the data and read the data, the question is how to use this data and create two footer rows in jqgrid.
Any thoughts ?
I found the question interesting, so I created the demo which demonstrates one from the possible implementation of two-rows footer:
The main idea is to add the second row in the table where the standard footer already exist. To eliminate possible problems with other parts of jqGrid code I replaced footrow class name in the custom row to myfootrow. To have the same CSS settings for the second footer as the original tooter has I included the copy of .ui-jqgrid tr.footrow td from ui.jqgrid.css with the same definitions for .ui-jqgrid tr.myfootrow td:
.ui-jqgrid tr.myfootrow td {
font-weight: bold;
overflow: hidden;
white-space:nowrap;
height: 21px;
padding: 0 2px 0 2px;
border-top-width: 1px;
border-top-color: inherit;
border-top-style: solid;
}
The full code you will find below
footerrow: true,
loadComplete: function () {
var $this = $(this),
sum = $this.jqGrid("getCol", "amount", false, "sum"),
$footerRow = $(this.grid.sDiv).find("tr.footrow"),
localData = $this.jqGrid("getGridParam", "data"),
totalRows = localData.length,
totalSum = 0,
$newFooterRow,
i;
$newFooterRow = $(this.grid.sDiv).find("tr.myfootrow");
if ($newFooterRow.length === 0) {
// add second row of the footer if it's not exist
$newFooterRow = $footerRow.clone();
$newFooterRow.removeClass("footrow")
.addClass("myfootrow ui-widget-content");
$newFooterRow.children("td").each(function () {
this.style.width = ""; // remove width from inline CSS
});
$newFooterRow.insertAfter($footerRow);
}
$this.jqGrid("footerData", "set", {invdate: "Total (page):", amount: sum});
// calculate the value for the second footer row
for (i = 0; i < totalRows; i++) {
totalSum += parseInt(localData[i].amount, 10);
}
$newFooterRow.find(">td[aria-describedby=" + this.id + "_invdate]")
.text("Grand Total:");
$newFooterRow.find(">td[aria-describedby=" + this.id + "_amount]")
.text($.fmatter.util.NumberFormat(totalSum, $.jgrid.formatter.number));
}
In the code I set additional information in columns invdate and amount of the footer.
Related
I am using Angular Material Data table in my application. I need to display multiple columns with a horizontal scroll table. I am facing an issue with the table row border. It's not displaying an entire width of the row. Please check the attached image for your reference. Please help me to resolve this issue.
Please check the Link for Code reference
https://stackblitz.com/edit/angular-mdxik6?file=app%2Ftable-basic-example.html
Thanks in Advance.
Both header row and column rows are display flex by default,
changing it to display inline-flex will fix above issue
.mat-header-row, .mat-row {
display: inline-flex;
}
Use display grid in case of ipad and mobile device screens
mat-table {
display: -ms-grid ;
display: grid;
}
This might help someone else as this is an old post. Please refer to https://stackblitz.com/edit/angular-mdxik6-gnpzuh?embed=1&file=app/table-basic-example.css
Just add the following to your your-comp-component.css or your-comp-component.scss
.mat-row, .mat-header-row {
min-width: 2800px;
width: 100%;
}
Best resolve I did overcome this problem.
Hold dynamic data column with css
columns = [
{columnDef: 'select', width: 75},
...........
]
Recalculate css min width if you implement a show/hide function
recalculateCss() {
let cellWidth = 0;
for (let i = 0; i < this.selected.length; i++) {
const cell = this.selected[i];
const column = this.columns.filter((value, index) => value.columnDef === cell);
cellWidth += column[0] ? column[0].width : 0;
}
this.minWidth = cellWidth;
}
Add css in both mat-header-row and mat-row
[style.min-width.px]="minWidth"
You have style properties that are working against each other. You've set min-width: 150px; for each column, and you have 13 columns which totals 1950px. Plus you've set width: 1123px; on each row which is (obviously) less than 1950px. Also, you set max-width: 1123px; - same width as your rows - on the table itself, but the table needs to be wider than the row in order to show the scrollbar. If you fix those problems, the border will display properly. Try setting just your row width and leaving out the table and column widths settings.
Material uses a flex layout so you could add align-self: stretch; to the columns CSS. This should stretch the auto-sized items to fit the table.
Edit
Stackblitz
Removing your header and cell width element helps. You want to set your rows to have a 100% width then set a desired minimum.
.mat-row, .mat-header-row {
min-width: 1123px;
width:100%;
}
Guys this is will help you solving such issues
You have to start using :
width: max-content;
.mat-row,
.mat-header-row {
min-width: 1123px;
width: 100%;
width: max-content;
}
.mat-table {
overflow: scroll;
max-height: 500px;
}
.mat-cell,
.mat-header-cell {
min-width: 90px;
}
/*unnecessary to make table header fixed*/
.mat-header-row {
top: 0;
position: sticky;
z-index: 1;
background-color: inherit;
text-align: center;
}
find browsers support : https://caniuse.com/#search=fit-content
You need to set the expected with of the table in mat-table{min-width} plus the mat-row left and right paddings (24px each).
In your example case:
.mat-table {
min-width: calc((13 * 150px) + 48px);
}
or
.mat-table {
min-width: 1998px;
}
Hope this helps!!!
Try to use below styling. It helps to render data & borders correctly when more columns in mat-table. (horizontal scrolling issue resolved)
.mat-header-cell{
background-color: inherit;
}
I'm trying to hide the horizontal scrollbar of a Angular ui-grid, but I can't find the right property. (Property enableScrollbars=false removes both.)
Is it possible to remove only the horizontal scrollbar?
With the latest version on Github v3.0.0-rc.16 you can disable horizontal and vertical Scrollbar separately.
Instead of
enableScrollbars = false;
use
enableHorizontalScrollbar = value;
enableVerticalScrollbar = value;
with
value = 0; /* NEVER */
value = 1; /* ALWAYS */
value = 2; /* WHEN_NEEDED */
UPDATE:
If you want to use constants instead of the integer-value, look at corresponding post:
Using ui-grid constants to disable scrollbars
UPDATE:
The option WHEN_NEEDED doesn't seem to be available at the moment.
Maybe this will be changed again, so please look for the available constants in the source code.
The Constants are defined in
https://github.com/angular-ui/ui-grid/blob/master/packages/core/src/js/constants.js
At now, the option WHEN_NEEDED doesn't seem to be available at the moment (ui-grid 3.1.1). So I have worked around by jQuery and CSS:
For simple, we just need do this:
.ui-grid .ui-grid-render-container-body .ui-grid-viewport {
overflow-x: auto !important;
/* or use: overflow-x: hide!important; */
}
To more flexible, we can use CSS class and jQuery. First, we add one more class:
.ui-grid-render-container-body .ui-grid-viewport.no-horizontal-bar {
overflow-x: hidden !important;
}
In controller, we will use this class by jQuery:
$timeout(function(){
if (!!$scope.gridOptions.data) {
$('.ui-grid-render-container-body .ui-grid-viewport').addClass("no-horizontal-bar");
}
});
To hide the blank gap when use selecting and grouping (http://i.imgur.com/veevhgQ.png), we use:
$timeout(function(){
if (!!$scope.gridOptions.data) {
/* To hide the blank gap when use selecting and grouping */
$('.ui-grid-render-container-left .ui-grid-viewport').height($('.ui-grid-render-container-left .ui-grid-viewport').height() + 17);
$('.ui-grid-render-container-body .ui-grid-viewport').addClass("no-horizontal-bar");
}
});
With 17px is height of the gap when we use selecting and grouping feature.
Demo: http://plnkr.co/edit/D9PKPkvuRy2xA6UNNXCp?p=preview
With this solution we can show the horizontal bar again easily.
If you are allowed to use flexboxes:
.ui-grid-render-container-body {
.ui-grid-header {
padding-right: 17px;
.ui-grid-header-viewport {
width: 100%;
.ui-grid-header-canvas {
width: 100%;
.ui-grid-header-cell-wrapper {
display: block;
width: 100%;
.ui-grid-header-cell-row {
display: flex;
min-width: 0;
.ui-grid-header-cell {
flex: 1 1 0;
min-width: #col-min-width;
}
}
}
}
}
}
.ui-grid-viewport {
overflow: auto !important;
display: flex;
.ui-grid-canvas {
flex: auto;
min-width: 0;
[role="row"] {
display: flex;
min-width: 0;
.ui-grid-cell {
flex: 1 1 0;
min-width: #col-min-width;
}
}
}
}
}
Where col-min-width is a minWidth that you would normally set in the gridOptions. Also you have to set the ui-grid-header's padding-right (which is 17px in this example) to the width of your browser's scrollbar with the javascript on certain events: number of rows changed, container resized etc. Scrollbar width = ui-grid-viewport's offsetWidth - clientWidth. Using a hardcoded value for scrollbar width is bad because different browsers have different (and even configurable) values for that.
Alright, I'm launching this website (beta) in an hour but I've just noticed an ugly bug. I've added a new counter (1, 2, 3, etc..) was previously using <ol>.
Look at this picture the before:
everything was even, the vote up button, the text all the way down.
Now the live version after adding new counter: www.leapfm.com is un even. (when it becomes double digits)
Please use FireBug or Chrome Developer Tools, if you need any further code I will provide it ASAP.
original code:
.subtext1 {
font-family: Verdana;
font-size: 7pt;
color: #828282;
}
.song {
height: 42px;
}
.counter {
float: left;
margin-right: 2px;
font-size: 14px;
}
.subtext {
font-family: Verdana;
font-size: 7pt;
color: #828282;
}
.title {
font-family: Verdana;
font-size: 10.3pt;
color: #828282;
}
(I'm adding an answer because I can't preview my code with a comment and they're not giving me enough space.)
Yes, an ol (or table) would've worked. But a quick-fix solution would be to give the counter a fixed width (say 30px). The only problem with this would be if you started having a lot more digits.
If you wanted to fix this using JavaScript (which would work forever), use code like this (jQuery).
<script type="text/javascript">
var counters = $(".counter");
var counterLen = counters.length; //one based
//convert to zero based
var largestWidth = counters[counterLen - 1].offsetWidth + "px";
//WAY ONE: DO IT WITH A STYLESHEET (I recommend this)
var stylesheetDiv = $("<div>");
stylesheetDiv.html("<style type=\"text/css\">.counter{width: " + largestWidth + "}</style>");
$("head").append(stylesheetDiv);
//WAY TWO: DO IT WITH A JQUERY LOOP
counters.css({width: largestWidth});
</script>
I used way one before. I'm pretty sure I have to do the div with a stylesheet inside for IE8.
For .subtext1, give it a margin-left: 15px.
For .counter, give it a height of 100% or 22px.
And delete the multiple between .title and .subtext1.
I'm building a phonegap mobile app with jqm 1.3.
I have a listview element, each list item have 2 actions, rename when swipe right, and delete when swipe left. What I want to achieve is a behavior like in gmail mobile application. When some list item is dragged aside (more than some threshold), another "layer" is shown with related buttons. currently I'm using code from jquery mobile swipe list demo, with popup on swipe event, but it is not fulfill my needs.
How this stuff can be implemented ?
Is there any plugin to achieve that functionality?
I tried to make something like this. The working demo is here - http://jsfiddle.net/Q9htn/19/
First HTML:
<ul id="list" data-role="listview"></ul>
Then some CSS. I am not very happy with having to define row height this way and I am sure there must be better ways how to do this fully dynamically, but hopefully it should be OK for this purpose. It makes sure that the row stays as it is during the animations which happen.
.row {
height: 1em;
}
.item {
position: absolute;
display: inline-block;
width: 100%;
right: -1em; /* This makes the item to fly out to the right */
}
.menu {
width: 100%;
display: inline-block;
text-align: center;
}
JavaScript:
var items = ["Audi", "Mercedes", "Skoda", "Rover", "Nisan", "Mazda", "Toyota"];
$.each(items, function(index, item) {
var li = $("<li class='row'>");
var contents = $("<span class='item'>" + item + "</span>");
contents.attr("data-customid", index); // Set some id
li.append(contents);
$("#list").append(li);
});
$("#list").listview("refresh");
// Attach swiperight handler on the list
$("#list").on("swiperight",">li",function(e){
var li = $(this);
var contents = $(li.children()[0]);
var item = contents.text(); // Get the item value
var itemId = contents.attr("data-customid");
var delButton = $("<a>").text("Yes").click(function(e){
// Delete handler, fade out menu and remove the row
menu.fadeOut(function(){
li.remove();
alert("Deleted " + item + " with ID = " + itemId);
});
});
var cancelButton = $("<a>").text("No").click(function(e){
// Cancel Handler, remove menu and show the item
menu.fadeOut(function(){
contents.animate({width: 'toggle'}, function(){
menu.remove();
});
});
});
// Create the menu
var menu = $("<span />").append("Sure? - ").append(delButton).append(" | ").append(cancelButton)
.css("display", "none")
.addClass("menu");
// Insert the menu
contents.after(menu);
// Slide the item
contents.animate({width: 'toggle'}, function(){
// And fade in the menu
menu.fadeIn();
});
});
I have 3 main problems with my sifr implementation . Has taken me 2 days of trying to fix without any tangible results.
cant get navigation lists to work in firefox. I have followed all suggested fixes for this, including setting the replace on a higher level element - still doesnt work! here is my current code:
sIFR.replace(louisiana, {
selector: 'ul.tabs3 li'
,css: [ '.sIFR-root { font-size: 20px;}', 'a { color: #cc3333; text-decoration: none; padding:0px 8px; margin: 0;}', 'a:link { color: #555555; }', 'a:hover { color: #cc3333; }' ]
,thickness: 50
,wmode: 'transparent'
});
it works in safari, but clicking on each navigational link is like an exercise in patience - extremely slow to load.
cant get content in jquery tabs to losd. only first tab works. I have read the proposed fixes about using something like the code below on the scrolling div - doesnt work for me.
position: absolute;
left: -10000px;
i have also come across a solution which says to use a call back function with my tab code. I have no idea how to do that. here is my tab code:
$(function() {
$("ul.tabs3").tabs("div.panes3 > div",
{ history: true,
current: 'current',
// event:'mouseover',
effect: 'fade'
});
});
</script>
I cant get the code to exclude certain elements to be replaced to work. at the top of my config file I have:
parseSelector.pseudoClasses = {
'not': function(nodes, selector) {
var result = [];
each: for(var i = 0, node; i < nodes.length; i++) {
node = nodes[i];
var ignore = parseSelector(selector, node.parentNode);
for(var j = 0; j < ignore.length; j++) {
if(ignore[j] == node) continue each;
}
result.push(node);
}
return result;
}
}
and the replace code is :
sIFR.replace(louisiana, {
selector: "h2, div:not(.filter) h2"
,css: '.sIFR-root { font-size: 30px; color: #444444; }'
,thickness: 70
,forceSingleLine: true
,wmode: 'transparent'
});
I really need help with this - have been going for 2 days and totally clueless at this point.
sIFR shouldn't cause any slowdowns if you click on a link inside a sIFR movie, not sure what's up there. The selector looks good, but you might want to try without the transparency.
Wouldn't immediately know how to fix the tab thing either. sIFR is, by nature, hard to make work with tab interfaces. It's not really designed for menus either.
When you use the selector h2, div:not(.filter) h2 you're replacing all <h2>s and those not in div.filter. Try removing the h2, bit and see if that helps.