asp.net programatically created table and css priority - c#

I have a table which I create programatically in my code behind file and set the colours of alternate row to gray for easier visibility like so:
<New cells and rows created here>
tblResults.GridLines = GridLines.Both;
tblResults.BorderStyle = BorderStyle.Solid;
tblResults.HorizontalAlign = HorizontalAlign.Center;
if (rowNumber % 2 == 1)
{
tblRow.BackColor = System.Drawing.Color.LightGray;
}
tblResults.Rows.Add(tblRow);
tblResults.CssClass = "myclass" ;
pnlContent.Controls.Add(tblResults);
I also want to have the rows highlighted when a user hovers over them like so:
.myclass tr:hover
{
background: #FCF;
}
Now the hover only seems to work for the rows which are not highlighted gray from the c# code which I assumes takes precedence over the css.
How can I also make those gray rows work with the css hover?

Try this hope it helps, I think some where the Style inside the page is overwriting your light Grey Background. Try this it will be ease to find the solution
if (rowNumber % 2 == 1)
{
tblRow.Attributes.Add("Class","ClassName_grey");
}
else{
tblRow.Attributes.Add("Class","ClassName_nothing")
}
.myclass tr:hover
{
background: #FCF;
}
.ClassName_grey {
background: #eeeeee;
}

You might try
.myclass tr:hover
{
background-color: #FCF;
}
Or adding the !important qualifier. The former is basically setting the same style as the server-side code should be, whereas your code was setting the less specific background (all aspects of it, not just colour).
Otherwise try viewing the source or using developer tools to see what style attribute you need to overwrite.

Related

Indent wrapped text on dynamically created checkbox

I have a dynamically created checkbox from code behind that has a long label on my webform asp.net project. When the text wraps to a new line the new line of text starts directly under the checkbox itself. How can I dynamically set the checkbox so the new line is automatically indented if needed. Not all dynamically created checkboxes have a long label.
Here is my code that creates the checkbox:
MyObject obj = SetNewObject("Supervisor");
CheckBox objCheck6 = new CheckBox();
objCheck6.ID = obj.GetFieldValue("Name");
objCheck6.Text = GetControlTitle("Supervisor");
objCheck6.Checked = obj.GetFieldValue("Value").ToLower() == "true";
tableCell1.Controls.Add(objCheck6);
I have tried a couple things that have not worked. I tried the following, one at a time and each seemed to have zero effect on the checkbox or checkbox's text at all:
objCheck6.Style.Add("margin-left", "20px");
objCheck6.LabelAttributes.Add("margin-left", "20px");
objCheck6.TextAlign = TextAlign.Right;
objCheck6.TextAlign = TextAlign.Left;
A point in the right direction would be much appreciated. Thanks!
Edit your css and add this so all the labels from the checkBoxes are affected.
label{
display: block;
margin-top: -18px;
margin-left: 20px;
}
If this causes a problem because you have other labels in your page, name that css class and add it dynamically to your checkBox like this:
objCheck6.InputAttributes["class"] = "className";
UPDATE
This can also be achieved with the code mentioned in the comments:
objCheck6.LabelAttributes.Add("style", "display:block;margin-top:-18px;margin-left:20px;");
I used this question as a reference.

Can a C# DataGridView cell be both Multiline and single line?

I'm building a DataGridView dynamically, and the textboxes potentially have an AutoComplete custom source associated with them. Under some circumstances, when I set textbox.Multiline to true, I get the following effect. If I'm not actively editing the cell, it looks like this:
However, if I try to edit the cell, it looks like this:
If I move the cursor around this edit mode cell, focus hops out of the cell entirely, instead of moving the text or expanding the cell height. It looks as if it's trying to be in multiline and single line mode at the same time, but I'm not sure.
Any thoughts?
I found a solution - not a root cause. In EditingControlShowing, I do the following:
textBox.Dock = textBox.Multiline ? DockStyle.Fill : DockStyle.None;
where I've set textBox = (TextBox) e.Control;
It's a sledgehammer solution, but it works.
Lets give a name to the DataGridView object: dgv,
So On dgv_CellEnter event add following lines
int idxcol = dgv.Columns["YourColumnName"].Index;
if (e.ColumnIndex == idxcol)
dgv.Columns[idxcol].DefaultCellStyle.WrapMode = DataGridViewTriState.False;
and on dgv_CellLeave event add the following lines
int idxcol = dgv.Columns["YourColumnName"].Index;
if (e.ColumnIndex == idxcol )
{
dgv.Columns[e.ColumnIndex].DefaultCellStyle.WrapMode = DataGridViewTriState.True;
}

check if a scroll bar is visible in a datagridview

I would like to display something if the data grid View is long and showing a scroll bar but don't know how to check if the scroll bar is visible. I can't simply add the rows since some may be not visible. I can't use an event since my code is already in an event.
you can try this out:
foreach (var scroll in dataGridView1.Controls.OfType<VScrollBar>())
{
//your checking here
//specifically... if(scroll.Visible)
}
I prefer this one :
//modif is a modifier for the adjustment of the Client size of the DGV window
//getDGVWidth() is a custom method to get needed width of the DataGridView
int modif = 0;
if (DataGridView.Controls.OfType<VScrollBar>().First().Visible)
{
modif = SystemInformation.VerticalScrollBarWidth;
}
this.ClientSize = new Size(getDGVWidth() + modif, [wantedSizeOfWindow]);
so the only Boolean condition you need is:
if (DataGridView.Controls.OfType<VScrollBar>().First().Visible)
{
//want you want to do
}
The DataGridView's Scrollbars Property can be questioned using the ScrollBars Enumeration by masking it with the one you are interested in like this:
if ((dataGridView1.ScrollBars & ScrollBars.Vertical) != ScrollBars.None) ...
Note, that the two 'ScrollBars' are different things here!
The answer from terrybozzio works only if you use the System.Linq namespace.
A solution without using System.Linq is shown below:
foreach (var Control in dataGridView1.Controls)
{
if (Control.GetType() == typeof(VScrollBar))
{
//your checking here
//specifically... if (((VScrollBar)Control).Visible)
}
}
To determine if the vertical scrollbar is present, you need to check how tall your visible rows are and compare against the datagridview height.
if(dgv1.Height > dgv1.Rows.GetRowsHeight(DataGridViewElementStates.Visible))
{
// Scrollbar not visible
}
else
{
// Scrollbar visible
}
Though to be more exact you may need to include a check of column widths as the presence of a horizontal scrollbar could create a vertical scrollbar that otherwise isn't there.

Css changes asp tablecell, without resizing it

I make a tablecell using C# in my code behind, and I add a CSS class to the label inside the cell to rotate it:
.vertical {color:#333;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform:rotate(270deg);
-moz-transform:rotate(270deg);
-o-transform: rotate(270deg);
white-space:nowrap;
display:block;
}
The problem is that after I rotate my label, my table cell (and table) have not resized to fit the new text. Is there a way using CSS or an attribute I can use to have my table re-size automatically to fit the new content?
I'd appreciate any help.
---EDIT---
So after playing around with some the CSS class, I realized the source of my problem. Basically, after I apply CSS changes - my tables don't resize. They still size as if the content was not modified.
Is it possible to make my tables re-size after the CSS style changes the size of my tablecells?
You need to calculate the new height of your Label and then set it's containing element to that height. This fiddle is what I am talking about.
<table>
<tr>
<td id="someLabel" class="vertical">some stuff</td>
<td>some other stuff sljk fkas jd</td>
</tr>
...
</table>​
and then using jQuery
$.fn.textWidth = function () {
var html_org = $(this).html();
var html_calc = '<span>' + html_org + '</span>';
$(this).html(html_calc);
var width = $(this).find('span:first').width();
$(this).html(html_org);
return width;
};
$(function(){
var someLabelSize = $("#someLabel").textWidth();
$("#someLabel").css("height", (someLabelSize + 5));
});
Just change the selectors to reflect your needs.

EXT JS change row column

I saw a couple of posts on how to change the color of a grid's row.
I tried to implement it like this:
Grid:
viewConfig: {
stripeRows: false,
getRowClass: function (rec, idx, rowPrms, ds) {
return 'master-row'
}
}
CSS:
master-row {background: red; color:Green}
the color Green is displaying fine, the backgorund isn't. I also tried with background-color, but no luck
What may I be missing?
Use this:
.master-row .x-grid-cell {background: red; color:Green}
You're adding a class so you'll need to use the css class selector (a point).
To color the cells u need to give the underlying grid cell a color and background color

Categories

Resources