Hi all i have one problem in list box in which i would like to bind image with data on condition . Like when user is active i like to display different image , when he is not working like to display different image . this time i am displaying name in different color on his status like not working then in Red color, working with green color.
My html is
<asp:ListBox ID="ddlDriver" Width="100%" AutoPostBack="true" OnSelectedIndexChanged="ddlDriver_SelectedIndexChanged"
runat="server" BackColor="White" Height="380px">
</asp:ListBox>
Code :
if (_driv.DriverStatus == 1)
{
ddlDriver.Items[i].Text = ddlDriver.Items[i].Value + "-" + ddlDriver.Items[i].Text + " " + OrderTota;
ddlDriver.Items[i].Attributes.CssStyle.Add(HtmlTextWriterStyle.Color, "red");
}
else if (_driv.DriverStatus == 2)
{
ddlDriver.Items[i].Text = ddlDriver.Items[i].Value + "-" + ddlDriver.Items[i].Text + " " + OrderTota;
ddlDriver.Items[i].Attributes.CssStyle.Add(HtmlTextWriterStyle.Color, "green");
}
please help me about this issue.
You may define two css classes with appropriate background-image property and conditionally set class on items in code-behind
Related
I have a solution which have boxes. If the user wants three boxes it will look like this:
The user can also choose 2 different colors for _each_box. If the user choose one color for one box, the box background color will be changed to that color. If the user enter two colors instead, a linear gradient will be set. These data will be sent as a variable via props:
firstColorBox1
secondColorBox1
firstColorBox2
secondColorBox2
and so on. These can have values such as "red" or hex-codes. I also have another props "nrofboxes" which is the number of boxes. I use this variable for my for loops.
To dynamically change the css of the boxes, I am using inline CSS which is manipulated via props. In short, I have a state with an empty array. Each box inline style properties will be saved in this array and extracted via its index in a for-loop. Too handle each box specific css style I have done like this:
I have an empy array in state where each individual style object till be added to:
boxStyle: []
in componentDidMount
for (var i = 1; i <= Number(this.props.nrofboxes); i++){
let style = {backgroundColor:"", };
let concatToState;
if(this.props["firstColorBox" + i] || this.props["secondColorBox" + i] ) {
if(this.props["firstColorBox" + i] && this.props["secondColorBox" + i] ){
style["backgroundImage"] = `linear-gradient(${this.props["firstColorBox" + i]}, ${this.props["secondColorBox" + i]})`
concatToState = this.state.boxStyle.concat(style);
this.setState({boxStyle:concatToState})
}
else if(this.props["firstColorBox" + i]) {
style.backgroundColor = `${this.props["firstColorBox" + i]}`
concatToState = this.state.boxStyle.concat(style);
this.setState({boxStyle:concatToState})
} }}
Above I have a loop for each box, and I check if it has value in both props and if so --> add linear gradient, and if not --> add background color. Notice how I go through each box dynamically via:
this.props["firstColorBox" + i]
I then add the value of the color/props to an object, and concat it to state:
style.backgroundColor = `${this.props["firstColorBox" + i]}`
concatToState = this.state.boxStyle.concat(style);
this.setState({boxStyle:concatToState})
The idea is to take the index of the specific box style in the state array in a for loop in render.
In render, I output all boxes via a for loop:
for (var i = 1; i <= Number(nrofboxes); i++){
boxes.push(
<div className={globalStyles["a-Grid-col"] + " " + globalStyles["w-sm12"] + " " + globalStyles["w-lg" + size] + " " + globalStyles["w-xl" + size] + " " + styles["w-link-box-container"]}>
<div className={styles["link-box"]} >
<a href={this.props["linkurl" + i]} style={this.state.boxStyle[i]} >
<h4 className={styles["link-box-header-container"]}>
<small className={styles["link-box-header-title"] + " " + (this.props.themefontcolor ? styles["w-themed-color"] : "")}>{this.props["linktitle" + i]}</small>
<span className={styles["link-box-header-text"] + " " + (this.props.themefontcolor ? styles["w-themed-color"] : "")}>{this.props["linktext" + i]}</span>
</h4>
</a>
</div>
</div>
);
}
As you can see above, I try to get each specific style object from the state via the for loop like this:
style={this.state.boxStyle[i]}
However, it does not work. If the firstColorBox1 is = "red", the expected behaviour would be that only the first box will be red but it looks like this:
2 problems: instead of a red background color, the border is red. And not only that, all three boxes are affected by it instead of only the first one.
And if I hardcode the inline style to be red like this:
style={{backgroundColor:"red"}}
it will look like this:
It should be equal, but there is no red border and the backgroundColor is set properly. Why is that? I guess something with my loops is wrong.
I'm trying to set a global stylesheet for all my buttons.
Doing it for a specific button like the following, works as expected:
button->setStyleSheet(QString("QPushButton:focus {") +
"outline: 0;" +
"background-color: #" + BUTTON_HIGHLIGHT_BG_COLOR + "; " +
"color: #" + BUTTON_HIGHLIGHT_TXT_COLOR + "; " +
"}"
);
But if I make it global, like this:
qApp->setStyleSheet(QString("QPushButton:focus {") +
"outline: 0;" +
"background-color: #" + BUTTON_HIGHLIGHT_BG_COLOR + "; " +
"color: #" + BUTTON_HIGHLIGHT_TXT_COLOR + "; " +
"}"
);
the focused buttons get the correct font color, but they don't seem to have a background (although the background I'm setting for them is different from the main layout's background.)
BUTTON_HIGHLIGHT_BG_COLOR and BUTTON_HIGHLIGHT_TXT_COLOR are strings for colors (e.g. "FF0000")
What could be the cause that it works for a specific widget, but fails globally?
update:
I followed #ThorngardSO's answer and finally solved it by changing:
stackedWidget->setStyleSheet("background-color: white;");
to:
stackedWidget->setStyleSheet("QStackedWidget { background-color: white; }");
which was in the loading screen (first screen)
You should try to narrow it down as much as possible:
Is this the only rule in your global stylesheet? If not, remove all other rules for testing purposes and see what happens.
Get a clear grasp on the widget-hierachy of your button (perhaps it's the child of a groupbox which is itself a child of a mainwindow), and then check:
Do any of those widgets in the hierachy have a stylesheet set? If yes, remove those stylesheets for testing purposes and see what happens.
Do you, at any time, call functions like setPalette() or setAutoFillBackground() on any of the widgets in the hierachy (or have the auto-fill-background property set in the designer)? If yes, remove those calls and see what happens.
Not that it's your problem, but you're assembling that constant string at runtime from bits and pieces. Don't do that. Instead, you can simply concatenate string literals in C and C++ simply by putting them next to each other.
qApp->setStyleSheet(QStringLiteral(
"QPushButton:focus {"
"outline: 0;"
"background-color: #" BUTTON_HIGHLIGHT_BG_COLOR "; "
"color: #" BUTTON_HIGHLIGHT_TXT_COLOR "; "
"}"
));
If you wanted the colors to be changeable at runtime, use the %-substitution:
qApp->setStyleSheet(QStringLiteral(
"QPushButton:focus {"
"outline: 0;"
"background-color: #%1; "
"color: #%2; "
"}"
).arg(background).arg(foreground));
I have a RadGrid with a filtercontrol on it. The grid fits the size of the window, but certain views have quite a few columns and when the columns get shrunk down, the filter controls don't resize to fit. Is there any way to set those filter controls to auto fix within the width of the column?
In latest RadGrid, there is an easy fix for this. Just set the filter control width in your markup or code-behind as shown below.
Set Filter Control width in markup
<telerik:GridBoundColumn DataField="ProductName" FilterControlWidth="80%"
HeaderText="Product Name" UniqueName="ProductName" HeaderStyle-Width="130px"
AllowFiltering="true"></telerik:GridBoundColumn>
Set Filter Control Width in code-behind
boundColumn.FilterControlWidth = Unit.Percentage(80);
As shown in the screenshot, the filter textbox width is beyond the header column. To set it within limit you can use the following JQuery code.
$(document).ready(function fn() { $(".riTextBox").css("width", "80%"); });
In this 'riTextBox' is css class of filter textbox generated by RadGrid. You can set the width as you need.
Last time I checked, the size of the filter button was 20.16px, so you can use put this in your css:
.RadGrid .rgFilterBox {
width: calc(100% - 20.16px);
}
You might take a look at column editors. I think they'll let you control the style of controls nested in the grid from outside of the grid.
<telerik:GridBoundColumn ColumnEditorID="TextBoxColumnEditor" ... />
<telerik:GridTextBoxColumnEditor ID="TextBoxColumnEditor" runat="server">
<TextBoxStyle Width="500" />
</telerik:GridTextBoxColumnEditor>
Here's a link that explains it in detail:
http://www.telerik.com/help/aspnet/grid/grdstylingthroughdeclarativecustomeditors.html
I have faced this issue and didn't find the 80% width solution sufficient. As your column gets wider, the gap between the filter button and the text box grows and it isn't a very clean solution. I have a mostly working solution for the problem that uses jQuery to create appropriate wrappers around the elements. It currently doesn't work well for situation where you are using a column that would filter for a date range (uses two date filters in the Telerik controls), but other than that has served me well.
function fixRadGridFilterBar() {
jQuery('.rgFilterRow > td').each(function () {
var cell = jQuery(this);
var isDate = false;
if (cell.children().length) {
var filterBox = cell.find('.riTextBox');
if (filterBox.length) {
if (cell.find('.RadPicker').length){
filterBox = cell.find('.RadPicker');
filterBox.css("width", "100%");
isDate = true;
}
}
if (!filterBox.length) {
filterBox = cell.find('.rgFilterBox');
}
if (filterBox.length) {
var filterWidth = cell.find('.rgFilter').outerWidth();
var padRight = isDate ? 0 : parseInt(cell.css('padding-right'));
var marginRight = parseInt(cell.css('margin-right'));
var filterPadding = (isNumber(padRight) ? padRight : 0) + (isNumber(marginRight) ? marginRight : 0);
cell.css('position', 'relative');
cell.children().wrap("<div class='filter-input'></div>");
filterBox.parent().css('float', 'left').css('width', '100%');
filterBox.wrap('<div></div>');
filterBox.parent().css('padding-right', (filterWidth + filterPadding).toString() + 'px');
cell.find('.rgFilter').parent().css('width', filterWidth.toString() + 'px').css('position', 'absolute').css('right', '0');
cell.children().wrapAll("<div style='position:relative;'></div>");
}
}
});
jQuery('.RadGrid > table').each(function () {
jQuery(this).wrap('<div class="rgHeaderWrapper"></div>');
});
}
For example currently, the value is set with lblAmount.Text = Amount & " €"
How can i add (dynamically) superscript to the € sign?
use the SUP tag.
lblAmount.Text = Amount & "<sup>€</sup>"
You do this best by adding either a style attribute or by adding a class (and adding the style in a style tag or a css file.
<asp:Label id="lblAmount" runat="server"></asp:Label><asp:Label id="lblAmountSymbol" runat="server" CssClass="yourclass"></asp:Label>
span.yourclass {
font-size:9px;
vertical-align:top;
}
or
<asp:Label id="lblAmount" runat="server"></asp:Label><asp:Label id="lblAmountSymbol" runat="server"></asp:Label>
and this, in your code file
Me. lblAmount.Style.Add(HtmlTextWriterStyle.FontSize, "9px")
Me. lblAmount.Style.Add(HtmlTextWriterStyle.VerticalAlign, "top")
You could also use the html equivalent sup:
Me. lblAmount.Text = Amount & " <sup>€</sup>"
Goto Start->Programs->Accessories->System tools->Character Map
Now select this Character ² from the Characters listed.
Click Select
Click Copy
Then try to change the text of any control by pasting this Character in the Lable or Button Caption at Properties.
Even you can wrting code also like this:
Code\Button1.Text = "mm ²"\Code
This is working fine with me.
The html formating is applied great in this case.
The Surname is displayed with size 5.
lblWelcome.Text = "Welcome:<font size=''5''>" & txtSurname.Text & "</font>"
Why the html style is not applied in this example?
lblWelcome.Text = "Welcome:<font color=''white''>" & txtSurname.Text & "</font>"
Please, please, please don't use font tags. Also, if you really want to output HTML from the server side then you should be using a Literal control.
Here is an example of how I would do it:
aspx/ascx file:
Welcome: <asp:Literal id="lit1" runat="server" />
code behind:
lit1.Text = "<span class='welcome'>" & txtSurname.Text & "</span>"
OR your other example:
lit1.Text = "<span class='welcomeBig'>" & txtSurname.Text & "</span>"
css:
span.welcome { color:#fff; }
span.welcomeBig { font-size:24px; }
Hope this helps
As an alternative, you could use the ASP.NET Literal web control and set its Mode property to Encode or Transform.
Literal1.Mode = LiteralMode.Encode
Literal.Text = "Welcome:<font color='white'>" & txtSurname.Text & "</font>"
In the above code, the HTML elements will be transformed into proper HTML, leaving just the surname text in white.
You could just set the ForeColor property on the Label.
lblWelcome.Text = txtSurname.Text;
lblWelcome.ForeColor = "white";
You'd have to put the 'Welcome' outside the label, but it would probably make more logical sense.
Welcome:<asp:Label id="lblWelcome" runat="server" />
Also don't forget to HTML encode the surname: Server.HtmlEncode(txtSurname.Text);