It's easy enough to add a class to a td in a webgrid, for example:
new WebGridColumn {
ColumnName= "Owl.Species",
Header= "Scientific Name",
Style= "sci-name"
}
The style tag adds the class "sci-name" to the td. How can I add a class to the th for that column without using jQuery which wouldn't be the ideal solution.
I don't think there's a built-in way to do it. You can't even extend the WebGrid classes, as their methods aren't marked virtual. The best way I can think of is to use some CSS, nth-child to target the th element by its index.
<style type='text/css'>
table thead tr th:nth-child(2) {
background: yellow;
}
</style>
Still not ideal, but I think better than using JQuery.
We can do this using of Javascript code as below, it is easiest way.
JsFiddle Example
$("table tr th:nth-child(n)").addClass("col-md-1");
You can use the headerStyle property of WebGrid.GetHtml Parameters for this
Eg:
Hope this helps!!!
Related
I'm having a bit of trouble with vertically centering elements inside of grid column.
Typically I'd use table-cell for something like that, but I'm having problems due to the float nature of Susy. Everything I try seems to fall apart at some point.
For instance if I wanted to center these elements vertically in their respective column how would I do that, assuming I am using the default grid settings.
<div class="section">
<div class="col1">Some Text<br/>Some Text</div>
<div class="col2"><img src=""/></div>
<div class="col3">Some Text</div>
</div>
Much thanks for any help
If you want to use table-cell with Susy, you should. Susy was built to be taken apart and customized. You can use the built-in functions in any way you like. I'm no master of table-based layout, but it sounds like you are. As far as Susy is concerned, it would look something like this:
.section {
display: table;
}
.col1, .col2, .col3 {
display: table-cell;
vertical-align: middle;
}
.col1, .col3 {
width: span(1);
}
.col2 {
width: span(2);
}
The span function works the same way as the span mixin, but only returns a width value. Combine that with your table-cells, and you should be good to go.
We're talking about adding a table-cell output option that will do this for you. If you have ideas for how that should work, open up a github issue and we'll talk. I'd love to hear your thoughts.
I simply cannot get this code to work. I want to put a different background image on each page. I think I should do this by creating different class selectors, and then putting those in the body tags for each page, rather than using an inline style element.
Here's my css class selector:
.contact-grad
{
background-image:url('images/Backgrounds/contact-grad.png');
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
And here I put it in the html for contact:
<body id="contact-grad">
As you can see, it's not working.
Let me know if it will be helpful for me to post the entire html and css. I cannot get any background image to work. I put my code into the w3 validator, and got a "parse" error. Hm...
Thank you!
The body has an id 'contact-grad' but your selector in the css is on a class (that's what the dot do). Try using a hash '#' instead. as in
#contact-grad
{
background-image:url('images/Backgrounds/contact-grad.png');
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
Addendum:
This resource is a good starter for CSS-selectors.
.contact-grad is for a class, use #contact-grad for your id="contact-grad".
You shouldn't have your body as absolute position, better use a div inside the body ;).
How would I hide a column that should be hidden from view. I handled this by hiding the object, but the column still shows in the UI as a skinny column with nothing in the rows. Is there way to prevent the item from being drawn?
grid.Column(null, null, format: #<input type="hidden" name="RevisionId" value="#item.LatestRevisionId"/>)
Thanks.
The WebGrid helper allows you to apply a CSS class to individual columns using the style property. Unfortunately while this will allow you to hide the column inside the tbody section you cannot apply different styles to column headers. You can apply the same style to all columns which makes it pretty useless. So one possibility is to use CSS:
table th:first-child, table td:first-child {
display: none;
}
This assumes that you want to hide the first column and that the client browser supports the :first-child pseudo selector which might not be the case with legacy browsers.
So in case you need to support legacy browsers you could use jQuery to apply a hidden style to the header and the rows of the first column or to simply hide them directly:
$(function () {
$('table th:first-child, table td:first-child').hide();
});
If you want to have more control I would recommend you checking out the MvcContrib Grid or Telerik Grid.
*strong text*Solution from Darin is only partial as the "table th:first-child" will also hide the "canPage:true" grid footer (used for paging).
Solution is to add additional styling.
In the "head" section of your (or alternatively in the CSS file if you want to apply it on all tables):
<style type="text/css">
.nodisplay {display: none;}
</style>
In the Webgrid section:
footerStyle : "table-footer",
...
grid.Column(null, null, style:"nodisplay", ...
In the CSS file:
.table-footer {
display: normal
}
I want to change the pointer to hand when hovering over jqgrid's rows
Is there an API for that?
This can be done more easily using the classes colModel property as below:
{ name: 'Email', index: 'Email', classes: 'pointer' }
From the wiki:
This option allow to add classes to the column. If more than one class will be used a space should be set. By example classes:'class1 class2' will set a class1 and class2 to every cell on that column. In the grid css there is a predefined class ui-ellipsis which allow to attach ellipsis to a particular row. Also this will work in FireFox too.
I just add this into my css file
#mygrid .jqgrow{
cursor:pointer;
}
Use a custom formatter on any cell in the grid. For more info on these, see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter
Here's how I did it. I wanted the first column in my grid to appear like it is a clickable link (but really it triggers a custom jqgrid event, onCellSelect).
Snippet of my grid object:
colModel :[
{name:'ticket', index:'IMINDT', width:125, formatter: pointercursor},
pointercursor is a function name. The code for it is defined like this:
// Custom formatter for a cell in a jqgrid row.
function pointercursor(cellvalue, options, rowObject)
{
var new_formatted_cellvalue = '<span class="pointer">' + cellvalue + '</span>';
return new_formatted_cellvalue;
}
My CSS class of "pointer" is:
.pointer {
cursor: pointer;
text-decoration: underline;
}
That's it!
in css file put this:
.ui-jqgrid .ui-jqgrid-btable { cursor : pointer; }
It seems to me that you have not a jqgrid question, but pure CSS or javascript question. Look at How to get cursor to change before mouse moves when changing the cursor style dynamically for example. It shows how can one change cursor style of a html element. See also in http://www.quirksmode.org/css/cursor.html, that 'hand' is supported not in all browsers.
This may seem like a basic question, but I'm having trouble figuring out how to set the table width to 100% on a YUI datatable.
I tried doing
#dtContainer {
width: 100%;
}
#dtContainer table {
width: 100%
}
but none of these approaches work.
To clarify, I am trying to set the datatable width to 100% when the table is empty and the empty message is displayed.
The generated table is an HTML table; so, I thought this should work.
Dont use .yui-dt table { width:100%;} , It doesn't appear to set the column widths correctly. Use myDataTable.setAttributes({width:"100%"},true); after table render
It turns out the solution is really simple:
.yui-dt table
{
width: 100%;
}
this is an ugly solution. but it works
<script>
window.onload = function() {
setTimeout('document.getElementById("NAME OF CONTAINER DIV").childNodes[1].style.width
= "100%"',1000);
};
</script>
the problem is applying the style pre render is pointless, the javascript is building the table, post render is all I could get to work.
looks like this little style tag works magic:
.yui-dt table { width:100%;}
To maintain aspect ratio across various screens with different resolutions, I had to manually set the column width as percentages that summed up to 100%.
<style type="text/css">
/* YUI Individual Column Width */
#dvAutoWidthList .yui-dt-col-Col1{width: 35%;}
#dvAutoWidthList .yui-dt-col-Col2{width: 10%;}
#dvAutoWidthList .yui-dt-col-Col3{width: 15%;}
#dvAutoWidthList .yui-dt-col-Col4, .yui-dt-col-Col5, .yui-dt-col-Col6, .yui-dt-col-Col7 {width: 10%;}
</style>
PS: Might not be the best way to do this, but it solved my problem!
Kwex.
var dataTable = new Y.DataTable(
{
columns: cols,
data: remoteData,
width: '100%',
}
).render('#dataTable ');
This should do the trick. Worked for me AUI 2.5.1