Colors (Styles) from WebGrid when exporting

zeljko.skoric@hrpro.hr — Thu, 04 May 2017 12:05:09 GMT

Hello,

I would like to know if there is a way to get styles from the grid which has some cells "colored".

What I mean is this:

I have a grid like the one in the picture I attached, with some cells colored red and green.
(This was done in InitializeRow event on the server side).

Now, when I export this grid, I can't seem to find this information (about this red and green styles) on the "e" object passed to my export handler:

Private Sub WebGrid1_Export(ByVal sender As System.Object, ByVal e As ExportEventArgs) Handles WebGrid1.Export

Is it even possible to get this data from the ExportEventArgs object?
And if it is, how to get it?

The example on the attached picture was done using v8_0_7200 grid.

Thank you very much!

Crosslight Styling

thomas.albert@tea-net.ch — Mon, 30 Jun 2014 11:42:11 GMT

Hello Crosslight Support,

I have a question about styling. Crosslight ships with many pre build UI components. When buildung an app for a customer, the customer often wants his/her own corporate identity (fonts, colors, backgrounds, icons, ...) to appear in the app's UI.

Is there a way to easily re-style the UI components included in Crosslight? Can this be done programmatically? Do you have other proposals, resources, samples or best practices in styling an app developed with Crosslight?

Thanks for your assistance.

Thomas

WebInput 3 Cannot Set Width Using CssClass Style

PRISMAY — Thu, 07 Jan 2010 10:40:07 GMT

Seems that I can't set the width unless I use the WebInput Width property. I've tried everything I can think of via CssClass and the width will not use my class setting.

The styles used on the test page:

<style type="text/css">
.Ctl_Calendar
{
	background-color: #ffffff;
	border: solid 0px #DDCCCC;
	font-family: Calibri;
	font-size: 10pt;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	width: 100%;
	height: 22px;
}

.Ctl_Calendar_Frame
{
	border: solid 1px #DDCCCC;
	width: 100%;
	height: 22px;
}

.Ctl_Calendar_DropDown
{
	font-family: Webdings;
	border: none;
	background-color: white;
	color: #DDCCCC;
	cursor: pointer;
}

.Ctl_Calendar_TextBox
{
	background-color: White;
	border-style: none;
	font-family: Calibri;
	font-size: 9pt;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	border-collapse: collapse;
	width: 100%;
	height: 22px;
}
</style>

Seems that I can't set the width unless I use the WebInput Width property. I've tried everything I can think of via CssClass and the width will not use my class setting.

<ISWebInput:WebInput ID="dt1" runat="server" IsDesignInitialize="False"
    CssClass="Ctl_Calendar" CausesValidation="False" 
    MaxDate="12/31/9998 23:59:59" MinDate="1753-01-01" UseDefaultStyle="true">

<CultureInfo CultureName="en-US"></CultureInfo>

<DisplayFormat IsEnabled="true" IsValidateOnChange="true" Type="DateTime"
    Format="dd-MMM-yy">
    <ErrorWindowInfo IsEnabled="true">
    </ErrorWindowInfo>
</DisplayFormat>
<DateTimeEditor IsEnabled="true"></DateTimeEditor>
<EditFormat IsEnabled="true" IsValidateOnChange="true" IsValueSpinnable="true"
    ErrorText="Invalid date selected" Type="DateTime" Format="MM/dd/yyyy">
    <MaskInfo EmptyAsNull="true" MaskExpression="00/00/0000"></MaskInfo>
    <ErrorWindowInfo IsEnabled="true">
    </ErrorWindowInfo>
</EditFormat>
<DropDownStyle>
    <Active CssClass="Ctl_Calendar_DropDown"></Active>
    <Normal CssClass="Ctl_Calendar_DropDown"></Normal>
    <Over CssClass="Ctl_Calendar_DropDown"></Over>
</DropDownStyle>
<FrameStyle>
    <Active CssClass="Ctl_Calendar_Frame"></Active>
    <Normal CssClass="Ctl_Calendar_Frame"></Normal>
    <Over CssClass="Ctl_Calendar_Frame"></Over>
</FrameStyle>
<TextBoxStyle>
    <Active CssClass="Ctl_Calendar_TextBox"></Active>
    <Normal CssClass="Ctl_Calendar_TextBox"></Normal>
    <Over CssClass="Ctl_Calendar_TextBox"></Over>
</TextBoxStyle>
    <HighLight IsEnabled="True" />
</ISWebInput:WebInput>

<br />

<ISWebInput:WebInput ID="dt2" runat="server" IsDesignInitialize="False"
    CssClass="Ctl_Calendar" CausesValidation="False" 
    MaxDate="12/31/9998 23:59:59" MinDate="1753-01-01" UseDefaultStyle="false">

<CultureInfo CultureName="en-US"></CultureInfo>

<DisplayFormat IsEnabled="true" IsValidateOnChange="true" Type="DateTime"
    Format="dd-MMM-yy">
    <ErrorWindowInfo IsEnabled="true">
    </ErrorWindowInfo>
</DisplayFormat>
<DateTimeEditor IsEnabled="true"></DateTimeEditor>
<EditFormat IsEnabled="true" IsValidateOnChange="true" IsValueSpinnable="true"
    ErrorText="Invalid date selected" Type="DateTime" Format="MM/dd/yyyy">
    <MaskInfo EmptyAsNull="true" MaskExpression="00/00/0000"></MaskInfo>
    <ErrorWindowInfo IsEnabled="true">
    </ErrorWindowInfo>
</EditFormat>
<DropDownStyle>
    <Active CssClass="Ctl_Calendar_DropDown"></Active>
    <Normal CssClass="Ctl_Calendar_DropDown"></Normal>
    <Over CssClass="Ctl_Calendar_DropDown"></Over>
</DropDownStyle>
<FrameStyle>
    <Active CssClass="Ctl_Calendar_Frame"></Active>
    <Normal CssClass="Ctl_Calendar_Frame"></Normal>
    <Over CssClass="Ctl_Calendar_Frame"></Over>
</FrameStyle>
<TextBoxStyle>
    <Active CssClass="Ctl_Calendar_TextBox"></Active>
    <Normal CssClass="Ctl_Calendar_TextBox"></Normal>
    <Over CssClass="Ctl_Calendar_TextBox"></Over>
</TextBoxStyle>
    <HighLight IsEnabled="True" />
</ISWebInput:WebInput>

<br />

<ISWebInput:WebInput ID="WebInput1" runat="server" IsDesignInitialize="False"
    CssClass="Ctl_Calendar" CausesValidation="False" Width="100%"
    MaxDate="12/31/9998 23:59:59" MinDate="1753-01-01" UseDefaultStyle="true">

<CultureInfo CultureName="en-US"></CultureInfo>

<DisplayFormat IsEnabled="true" IsValidateOnChange="true" Type="DateTime"
    Format="dd-MMM-yy">
    <ErrorWindowInfo IsEnabled="true">
    </ErrorWindowInfo>
</DisplayFormat>
<DateTimeEditor IsEnabled="true"></DateTimeEditor>
<EditFormat IsEnabled="true" IsValidateOnChange="true" IsValueSpinnable="true"
    ErrorText="Invalid date selected" Type="DateTime" Format="MM/dd/yyyy">
    <MaskInfo EmptyAsNull="true" MaskExpression="00/00/0000"></MaskInfo>
    <ErrorWindowInfo IsEnabled="true">
    </ErrorWindowInfo>
</EditFormat>
<DropDownStyle>
    <Active CssClass="Ctl_Calendar_DropDown"></Active>
    <Normal CssClass="Ctl_Calendar_DropDown"></Normal>
    <Over CssClass="Ctl_Calendar_DropDown"></Over>
</DropDownStyle>
<FrameStyle>
    <Active CssClass="Ctl_Calendar_Frame"></Active>
    <Normal CssClass="Ctl_Calendar_Frame"></Normal>
    <Over CssClass="Ctl_Calendar_Frame"></Over>
</FrameStyle>
<TextBoxStyle>
    <Active CssClass="Ctl_Calendar_TextBox"></Active>
    <Normal CssClass="Ctl_Calendar_TextBox"></Normal>
    <Over CssClass="Ctl_Calendar_TextBox"></Over>
</TextBoxStyle>
    <HighLight IsEnabled="True" />
</ISWebInput:WebInput>

The first calendar uses the default style, the second does not and the third uses the Width property. Note that only the third one works because it explicitly uses the Width property. The first and second do not adhere to the CssClass which has the width set to 100%.

You can put the code above in a table and set the cell width to, say, 400px and you'll see that only the third object sizes to fit the cell, the other two do not.

Also, the calendar that does not use the default style, i.e., UseDefaultStyle="false" crashes when I try to pull it down with the error "Microsoft Javascript runtime error: 'd' is null or not an object." The javascript code snippet it breaks at is the dotfuscated v4e272.d.innertHTML=vde196; where v4e272 is valid but d is indeed null.

Intersoft Community - Styles

Colors (Styles) from WebGrid when exporting

Crosslight Styling

WebInput 3 Cannot Set Width Using CssClass Style