I have two angular ui-grids in one html page but I would like to remove row selection highlighting from one of them. How can I accomplish this? I tried removing the 'ui-grid-row-selected' class in ui-grid-unstable.js but then that removes the highlight for the other grid as well which I do not want. Any help would be greatly appreciated.
Just remove the ui-grid-selection attribute from the html and make enableRowSelection : false on the second grid. Those two will make sure selection is disabled on the rows.
Use this class with specific ID for the grid you want to remove highlighting.
#gridStyle .ui-grid-row.ui-grid-row-selected > [ui-grid-row] .ui-grid-cell {
background-color: #c9dde1; // Change to normal background-color to remove highlighting
}
Related
When inserting a table into the editing area of Summernote editor, how do I outline the boarders of the table sections with a line? For example - the way Word does it's tables.
All help appreciated.
If you open Microsoft Word and insert a box, you will see that the boxes have boarders around them. SummerNote does display a very very faint line around the boxes of the table but on a white background it's impossible to see. I would like to draw darker and even thicker lines around the boxes. I would like to provide an example from Word but can't see a way to do it. Yes, I think I can edit CSS given some guidance.
Summernote calls tableClassName when table is created via jquery's addClass method. So I used that to inject my jquery code like this:
<script>
$('#xyz').summernote({
tableClassName: function()
{
$(this).addClass('table table-bordered')
.attr('cellpadding', 12)
.attr('cellspacing', 0)
.attr('border', 1)
.css('borderCollapse', 'collapse');
$(this).find('td')
.css('borderColor', '#ccc')
.css('padding', '15px');
},
});
</script>
Link for Information
Instead of displaying it like the common Rangeselector display, is there a way to make it like a dropdown? Appreciate your help with this. Thank you.
You can use exporting module to generate a custom button with a dropdown feature. Inside exporting.buttons.toggle object you can create menuItems array which will contain list of the buttons. Each button has onclick event which will let you to call rangeSelector.clickButton(index, redraw) function, responsible for selecting a specific range. Lastly, you can hide original range selector, for example using CSS:
.highcharts-range-selector-buttons {
visibility: hidden;
}
API Reference:
http://api.highcharts.com/highstock/exporting.buttons
http://api.highcharts.com/highstock/rangeSelector
Example:
http://jsfiddle.net/8rrotg5a/
I am using JQGrid and I want column drag and drop feature for this I enabled set sortable = true option. Now the problem is when I have scrollbar and trying to reorder the last columns by dragging the UI of header is mess up as shown below. When I click on country column this column placed at other end.
I had fixed my issue... Sorry its my bad... I was mess up with some css of other components.
Thank you Oleg for helping me and also for wonderful grid component.
I'm trying to disable the checkbox on a specific row based on some property of it's Bean (or just make the whole row generally unselectable), but I can't really see any method or property I could use to get a handle of the checkboxes on the left hand side added when using a multi-selection model or something as broad as disabling the whole row. Any thoughts on how this could be achieved, or where I should be looking?
You can use CSS to hide uncheckable rows. First set their styles using setRowStyleGenerator:
grid.setRowStyleGenerator(row -> {
boolean uncheckable = (Boolean)
row.getItem().getItemProperty("uncheckable").getValue();
return uncheckable ? "uncheckable-row" : "";
});
Then change styles in your .scss, they should look something like:
.v-grid-row.uncheckable-row td {
background: #b1b9d6 none repeat scroll 0 0;
}
.v-grid-row.uncheckable-row td:first-child {
visibility: hidden;
}
.v-grid-row.uncheckable-row.v-grid-row-selected > .v-grid-cell {
background-image: none;
border-color: #d4d4d4;
color: inherit;
text-shadow: inherit;
}
Here I hide the whole cell with checkbox (if hiding the content of td itself, user will still be available to select the row), use a different color for these rows and prevent them from being highlighted when "select all" checkbox is active. Surely, further styling is available. Since we only hide them from user, they still can be selected with grid.select() and located in grid.getSelectedRows() collection, you should filter them manually (by using some "uncheckable" property, as shown above).
It is not possible to disable checkbox on a specific row.
One solution is to use generated column and/or custom renderer.
if you are using twitter bootstrap as your responsive framework, you should be able to find that row and give it a class of ".inactive", and if that doesn't work you can always rig it but placing and absolute positioned box with a height and width of 100% inside of that row and z-index it to at least 250. That should make everything in that row un-clickable!
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 :)