i m using a jqgrid on asp.net mvc... i have a specific requirement....The data in the grid is list of values that are to be set on each row... and each row has a Date column... While displaying the grid, i want a different row color on sunday and saturday.. while the rest of the rows are white.. How to achieve this in jquery jqgrid?
You can "bring colors" in your grid with respect of setCell method of jqGrid (see this answer as an example) or jQuery.addClass, jQuery.css (see this and this). You should do this after the grid contain is loaded, for example, inside of your loadComplete event handler.
If you want set background-color style on the cell you should understand one small problem. The class 'ui-widget-content' used for every grid row already defines the background-color per background style (!!! not per background-color). So to have effects you should make changes of the background-color style in one from the following ways: 1) just use background: yellow instead of background-color: yellow (see this). 2) remove 'ui-widget-content' class with jQuery.removeClass('ui-widget-content') (see this); 3) change style of the row more explicit like $("#"+rowid)[0].style.backgroundColor = "yellow" (see this as an example). Choose the ways which you prefer.
Related
In Vaadin 13, I'm using grids. In other programs (eg even Excel) one can create "highlights" of the cells (either the whole cell's baground is highlighted in a color, eg yellow or red or the cell font is higlighted is in a different color) depending on a condition. (This is often used to provide quick visual alerts to the user.)
Is there a safe/easy way to achieve this in Vaadin 13? (I couldn't find any "approved/standard" ways of how to do this using Java & Vaadin 13; I'm not very strong with javascript, but can dabble with it if it's the only "right" way to do this....)
From Vaadin 13 onwards there is setClassNameGenerator method in Grid and Column, which takes lambda as paremeter, returning String. This can be used to produce CSS class name(s) based on e.g. item values. You can then have style module gor the Grid in your shared-styles.html and use these class names there to add e.g. the highlighting of cells etc.
I have a ui grid that has 20 columns, and I would like to be able to tell what the next column will be as I scroll through the horizontal axis so that I can have some text that will tell the users what the names of all the columns they can't see are.
Anyone know if this is possible? As I watch the the inspector and scroll through the columns, I see html attributes changing.
---UPDATE 1----
This is what is all looks like (where it says "home #" is dynamic and will change to show the next column that is out of site)
Based on the ui-grid configuration that you use to render the grid, you already know the order of the columns. You can use this information together with the visible on each column added by the gird itself.
What you need to do is bind a event handler on scroll to iterate over the columns on each change and check the visibility of them. Then the first one with visible === false is the upcoming.
Here is a working Plunker where is used this flag.
I tried to get a cell to expand it's height dynamically.
Is there a way to adjust the height of a row(GridRow) after it is rendered?
If not, then I will try to use an expandable grid or tree in a grid.
Is it possible to display an expandable grid off a specific cell/column?
Currently I see all expandable grids/tree grids that take up the entire row below the parent.
Thanks
Add this css to your styles:
.ui-grid-viewport .ui-grid-cell-contents {
word-wrap: break-word;
white-space: normal !important;
}
.ui-grid-row, .ui-grid-cell {
height: auto !important;
}
.ui-grid-row div[role=row] {
display: flex ;
align-content: stretch;
}
You can see an answer to the same question here: https://github.com/angular-ui/ng-grid/issues/3239#issuecomment-91045267
UI-Grid virtualizes the rows, meaning that it only renders a small subset of the data, and leaves everything that wouldn't be in view unrendered. This means the grid needs to know how tall every row is, so that it can calculate positioning.
If it had to measure every row when rendered this would cause the browser to repaint over and over and performance would be miserable.
You'll find that other virtualized tools (like Ionic's collection-repeat) have the same limitation.
Update:
To answer your second question: you can set a height property on the GridRow object (not your entity, you can use getRow from the grid API to get the GridRow object) and the grid will use this height when rendering the row.
And your third question: no, expandable is only built to work off entire rows. It might be possible to alter what sort of data is displayed in a sub-grid based on clicks in certain cells, but that would require some changes to the expandable code.
I am trying to use jqGrid to display tabular data in groups (shown in image below) and having trouble displaying headers for each group (as Hierarchical jqGrid displays columns headers for child grids). I have included how default jqGrid Grouping looks like.
Is there any way to implement this? Also is it possible to display summary in group header row instead of footer?
Thank you
What you want contains too many changes in the standard structure of the grid. I suppose that you want that the "Groups" header and sub-headers "Group Header 1", "Group Header 2", "Group Header 3" should be resizable. It seems me a little too difficult in the implementation.
Probably you should use better subgrids instead of data grouping? If you need hold the width of last columns of subgrids synchronous with the width of last columns of the main grid you can use approach which I described in the answer. You can use resizeStop callback to catch changing of column size and you can call setColWidth method (see the answer for more details) on another grid (on main grid and other opened subgrids).
I have three radio buttons which have the same theme in jquery. If I select one of them, the color of the button will change to the color specified in my .ui-btn-active class in the css. My radio buttons are named Can meet, not sure and Decline. I want my Decline radio button to have a different color than the two others when it is selected (the color red).
I'm using Jquery mobile and have customized the css for which colors I want to have on the different themes and I have changed the .ui-btn-active to .ui-btn-active-a and .ui-btn-active-b and made them with different values. I have tried to switch between the two ui-btn-active classes without no luck, and I have tried the addClass(..) and removeClass(..) without luck. I made a method in my jquery-mobile.js which look like this:
$.mobile.changeAction = function( activeBtn){
$.mobile.activeBtnClass = activeBtn;
}
where my activeBtn parameter will be a string to choose which activeBtnClass I want to have. I think the problem is that I have problems refreshing the activeBtnClass after overriding it, I have tried some refreshing methodes without no luck.
As long as the radio buttons have different colors when active I will be very thankful.
Following styles should do the trick:
.ui-radio:nth-child(1) .ui-icon-radio-on.ui-icon{
background-color:green;
}
.ui-radio:nth-child(2) .ui-icon-radio-on.ui-icon{
background-color:grey;
}
.ui-radio:nth-child(3) .ui-icon-radio-on.ui-icon{
background-color:red;
}
Sample jsfiddle.
To style Horizontally stacked select options:
.ui-radio:nth-child(1) .ui-radio-on span.ui-btn-inner{
background-color:green;
}
.ui-radio:nth-child(2) .ui-radio-on span.ui-btn-inner{
background-color:grey;
}
.ui-radio:nth-child(3) .ui-radio-on span.ui-btn-inner{
background-color:red;
}
Sample jsfiddle.
Why not just create custom themes for all of the states that you might want? You can have multiple custom themes, and only use them when you'd like. I have 7 themes in my CSS, and this way you can always incorporate them later if you'd like without having to do so much custom coding.
You can just apply the theme with the data-theme="f" (or other letter swatch) element attribute.
Here's jQuery ThemeRoller 1.1.1 http://jquerymobile.com/themeroller/index.php. If you're just making small changes to the theme, such as an active state, just copy the theme, and make the changes and save as a new swatch. You can go from A-Z :)