Hello,

I am trying to get the background/background color of the RAD HTML 5 Column Chart to be transparent but no matter what I do it is always white, unless, of course, I set it to some other color besides white (e.g. green).

I want to lay the chart on a larger background image but the charts plot background is always white.

How can  I make the chart transparent so I can see the background image underneath it?


<div style="padding:200px 0px 0px 0px;height:1000px;width:1000px;background-image:url(bearbackground.png);">
    <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="800" Height="500" Transitions="true" BackColor="Transparent">
                <Appearance>
                    <FillStyle BackgroundColor="Transparent"></FillStyle>
                </Appearance>
                <Legend>
                    <Appearance Visible="false" ></Appearance>
                </Legend>
                <PlotArea>
                    <Appearance>
                        <FillStyle BackgroundColor="Transparent"></FillStyle>
                    </Appearance>
                    <XAxis AxisCrossingValue="0" Color="#b3b3b3" MajorTickType="Outside" MinorTickType="Outside"
                        Reversed="false">
                        <Items>
                            <telerik:AxisItem LabelText="Bear 1"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="Bear 2"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="Bear 3"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="Bear 4"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="Bear 5"></telerik:AxisItem>
                        </Items>
                        <LabelsAppearance DataFormatString="{0}" RotationAngle="0" Visible="false"></LabelsAppearance>
                        <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
                        <MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
                    </XAxis>
                    <YAxis AxisCrossingValue="0" Color="#b3b3b3" MajorTickSize="1" MajorTickType="Outside"
                        MaxValue="50000" MinorTickSize="1" MinorTickType="Outside" MinValue="0" Reversed="false"
                        Step="10000" Visible="false">
                        <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
                        <MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
                        <TitleAppearance Position="Center" RotationAngle="0" Text="Votes"></TitleAppearance>
                    </YAxis>
                    <Series>
                        <telerik:ColumnSeries Name="Bears" Stacked="false">
                            <Appearance>
                                <FillStyle BackgroundColor="#ff0000"></FillStyle>
                            </Appearance>
                            
                            <Items>
                                <telerik:SeriesItem YValue="25000"></telerik:SeriesItem>
                                <telerik:SeriesItem YValue="12000"></telerik:SeriesItem>
                                <telerik:SeriesItem YValue="39000"></telerik:SeriesItem>
                                <telerik:SeriesItem YValue="39000"></telerik:SeriesItem>
                                <telerik:SeriesItem YValue="39000"></telerik:SeriesItem>
                            </Items>
                        </telerik:ColumnSeries>
                    </Series>
                </PlotArea>
            </telerik:RadHtmlChart>
</div>

Here is the source view of the generated javascript. It can be clearly seen that the background color is being set to white despite the fact that the configuration says Transparent:

WebForm_InitCallback();Sys.Application.add_init(function() {
    $create(Telerik.Web.UI.RadHtmlChart, {"_chartArea":"{background: \u0027#ffffff\u0027}","_chartTitle":"{visible :true}","_plotArea":"{categoryAxis: { line: { width: 1, color: \u0027#b3b3b3\u0027}, minorTickType: \u0027outside\u0027,title :{visible :true},labels :{visible: false},minorGridLines :{visible :true, color: \u0027#f7f7f7\u0027},majorGridLines :{visible :true, color: \u0027#efefef\u0027}, axisCrossingValue: 0, categories: [\u0027Bear 1\u0027,\u0027Bear 2\u0027,\u0027Bear 3\u0027,\u0027Bear 4\u0027,\u0027Bear 5\u0027]},valueAxis:[{visible: false}],appearance: {background: \u0027#ffffff\u0027}}","_series":"series: [{color: \u0027#ff0000\u0027,name: \u0027Bears\u0027,tooltip :{visible :true},type: \u0027column\u0027, data: [25000,12000,39000,39000,39000],labels :{font: \u002712px Arial,Helvetica,sans-serif\u0027, visible :true, position: \u0027outsideEnd\u0027}}]","_uniqueId":"RadHtmlChart1","clientStateFieldID":"RadHtmlChart1_ClientState","height":"250px","skin":"Default","width":"800px"}, null, null, $get("RadHtmlChart1"));
});
//]]>

Thanks,
Eric

The following grid opens an Edit Template instead of firing the OnInitInsert event when I click LinkButton2, and I can't figure out why.


<telerik:RadGrid ID="ModelGrid" runat="server" AllowFilteringByColumn="True" Width="1125px"
                                        Height="300px" OnDeleteCommand="Model_Delete" OnEditCommand="Model_Edit" OnInsertCommand="Model_Insert"
                                        CellSpacing="0" GridLines="Vertical" EnableViewState="True" OnNeedDataSource="Model_NeedDataSource">
                                        <ClientSettings>
                                            <Selecting AllowRowSelect="True" />
                                            <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True">
                                            </Scrolling>
                                        </ClientSettings>
                                        <MasterTableView Width="100%" CommandItemDisplay="Top" DataKeyNames="ModelId" AutoGenerateColumns="False">
                                            <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
                                            <RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">
                                            </RowIndicatorColumn>
                                            <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
                                            </ExpandCollapseColumn>
                                            <Columns>
                                                <telerik:GridBoundColumn DataField="ModelNumber" AllowFiltering="true" FilterControlAltText="Filter Model Number column"
                                                    ItemStyle-HorizontalAlign="Left" HeaderText="Model Number" SortExpression="ModelNumber"
                                                    UniqueName="ModelNumber" HeaderStyle-Width="250px">
                                                </telerik:GridBoundColumn>
                                                <telerik:GridBoundColumn DataField="Description" AllowFiltering="true" FilterControlAltText="Filter Description column"
                                                    ItemStyle-HorizontalAlign="Left" HeaderStyle-Width="250px" HeaderText="Description"
                                                    SortExpression="Description" UniqueName="Description">
                                                </telerik:GridBoundColumn>
                                                <telerik:GridBoundColumn DataField="ProductLine" AllowFiltering="true" FilterControlAltText="Filter Product Line column"
                                                    ItemStyle-HorizontalAlign="Left" HeaderText="Product Line" HeaderStyle-Width="200px"
                                                    SortExpression="ProductLine" UniqueName="ProductLine">
                                                </telerik:GridBoundColumn>
                                                <telerik:GridBoundColumn DataField="AssetTypes" AllowFiltering="true" FilterControlAltText="Filter AssetTypes column"
                                                    ItemStyle-HorizontalAlign="Left" HeaderStyle-Width="150px" HeaderText="Asset Types"
                                                    SortExpression="AssetTypes" UniqueName="AssetTypes">
                                                </telerik:GridBoundColumn>
                                                <telerik:GridBoundColumn DataField="DisplayPosition" AllowFiltering="false" HeaderText="Default Position"
                                                    SortExpression="DisplayPosition" HeaderStyle-Width="150px" UniqueName="DisplayPosition"
                                                    HeaderStyle-HorizontalAlign="Center">
                                                </telerik:GridBoundColumn>
                                                <telerik:GridBoundColumn DataField="Height" AllowFiltering="false" HeaderStyle-Width="60px"
                                                    HeaderStyle-HorizontalAlign="Center" HeaderText="Height" SortExpression="Height"
                                                    UniqueName="Height">
                                                </telerik:GridBoundColumn>
                                                <telerik:GridBoundColumn DataField="Width" AllowFiltering="false" HeaderStyle-Width="60px"
                                                    HeaderStyle-HorizontalAlign="Center" HeaderText="Width" SortExpression="Width"
                                                    UniqueName="Width">
                                                </telerik:GridBoundColumn>
                                                <telerik:GridBoundColumn DataField="Depth" AllowFiltering="false" HeaderStyle-Width="60px"
                                                    HeaderStyle-HorizontalAlign="Center" HeaderText="Depth" SortExpression="Depth"
                                                    UniqueName="Depth">
                                                </telerik:GridBoundColumn>
                                                <telerik:GridBoundColumn DataField="UseRackUnits" AllowFiltering="false" HeaderStyle-Width="100px"
                                                    HeaderStyle-HorizontalAlign="Center" HeaderText="In Rack Units" SortExpression="UseRackUnits"
                                                    UniqueName="UseRackUnits">
                                                </telerik:GridBoundColumn>
                                            </Columns>
                                            <CommandItemTemplate>
                                                <div style="padding: 5px 5px;">
                                                    <asp:LinkButton ID="btnEditSelected" runat="server" CommandName="EditSelected" Visible='<%# ModelGrid.EditIndexes.Count == 0 %>'><img style="border:0px;vertical-align:middle;" alt="" src="../Images/Edit.gif"/>Edit</asp:LinkButton>&nbsp;&nbsp;
                                                    <asp:LinkButton ID="btnUpdateEdited" runat="server" CommandName="UpdateEdited" Visible='<%# ModelGrid.EditIndexes.Count > 0 %>'><img style="border:0px;vertical-align:middle;" alt="" src="../Images/Update.gif"/>Update</asp:LinkButton>&nbsp;&nbsp;
                                                    <asp:LinkButton ID="btnCancel" runat="server" CommandName="CancelAll" Visible='<%# ModelGrid.EditIndexes.Count > 0 || ModelGrid.MasterTableView.IsItemInserted %>'><img style="border:0px;vertical-align:middle;" alt="" src="../Images/Cancel.gif"/>Cancel editing</asp:LinkButton>&nbsp;&nbsp;
                                                    <asp:LinkButton ID="LinkButton2" runat="server" CommandName="InitInsert" Visible='<%# !ModelGrid.MasterTableView.IsItemInserted %>'><img style="border:0px;vertical-align:middle;" alt="" src="../Images/AddRecord.gif"/>Add new</asp:LinkButton>&nbsp;&nbsp;
                                                    <asp:LinkButton ID="LinkButton1" OnClientClick="javascript:return confirm('Delete selected Model?')"
                                                        runat="server" CommandName="DeleteSelected"><img style="border:0px;vertical-align:middle;" alt="" src="../Images/Delete.gif"/>Delete</asp:LinkButton>&nbsp;&nbsp;
                                                </div>
                                            </CommandItemTemplate>
                                        </MasterTableView>
                                        <ClientSettings EnablePostBackOnRowClick="true">
                                            <Selecting AllowRowSelect="True"></Selecting>
                                            <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True" />
                                        </ClientSettings>
                                        <FilterMenu EnableImageSprites="False">
                                        </FilterMenu>
                                    </telerik:RadGrid>

Hi

I'm using telerik.web.ui version 2013.1.220.35 and was wondering if the following is a known bug.
On a radgrid when I apply an "ItemStyle-VerticalAlign" property in the MasterTableView, instead of in the individual columns, then (at least for) the GridEditCommandColumn and GridDropDownColumn, the style gets applied to every alternate row only.

For the skeletal mark up listed below, notice that the MasterTableView defines ItemStyle-VerticalAlign="Top".
See attached screenshot for this markup. you will see that the Edit Image and the text in the "Type"  column is "Top" aligned only on alternate rows. To make these values Top aligned on every row, I need to specify the ItemStyle-VerticalAlign on each column.

So I was wondering if 
a - This is a known issue with specifying  ItemStyle-VerticalAlign in the MasterTableView
b - There is a way so that I can specify this value in a single place on the radgrid so that it correctly applies to all columns.



Thanks

I have two grids on the page. Both are configured to use the OnNeedDataSource event. The detail grid is rebound in the OnSelectedIndexChange of the master grid.  The detail grid has an edit template with a dropdownlist.  The dropdown list is bound to an ObjectDataSource.  I'm attempting to bind the dropdownlist in the following event handler;


However, before it can get here, I get an error: "Sys.WebForms.PageRequestManagerServerErrorException: 'ddlAssetType' has a SelectedValue which is invalid because it does not exist in the list of items."

The code doesn't hit a breakpoint set in the OnSelect method of the ObjectDataSource, so the dropdownlist hasn't been bound yet. What am I doing wrong?

See attached screenshot.

Does anyone know how to remove the column border lines?  I'd like to remove the one in between the final 2 columns in the screen shot (the one right before the Delete (X) button).

Also, when I'm using the Tab key to move from column to column, I'd like to prevent the Delete (X) button from being able to be tabbed to.  Any ideas on how to do this?

Thanks again.

I have a column in my grid for entering a zip code and it is defined as:
                           
I want to use the following control to edit it:


If I leave the <MaskedTextBox> line in, it crashes out and won't let me save.  BUT, if I remove JUST the <MaskedTextBox> line, it works but then I have no way to adjust the styling of the editor.

Anyone else run into this or know of an example that works that you could point me to?

Thanks.

I have a grid that uses a MaskedTextField for a Zip Code column defined as:



If you look at the attached screen shot of what it looks like in Edit mode, you'll see that the text box used during edit is sized well beyond the width of the column.  I have tried changing it to the following but it has no impact.




Any ideas on how I can get this text box to display using 98% of the field's width like I do all of the other fields?  I'm using the same approach for the other fields which work perfectly, only the MaskedColumn exhibits this behavior.

I know I made previous post regarding the error that occurs by using this code ('GridMaskedColumnEditor -> MaskedTextBox' declaration causes an error during runtime); so I'm hoping that someone else has used a different approach that has gotten around this.

Thanks.

I'm checking if the internet is available or not by pinging my server. This method is called in onClientClicking event of the button.

If not connected to the internet I want to prevent the postback.
It displays 'Not connected to internet' message but after the user clicks 'OK' , it does a postback.

Hi everybody!
I have a problem. I want to display information to radgrid. I need format data but have a problems. Example :
I do:
2123244  I formated:  2123244.00
7424 I formated: 7424.00
1.22 I formated::  1.22
But I need:
2123244 I need format: 2 123 244
7424 I need format: 7 424
1.22 I need format:  1.22
(All in a radgrid)
Have you any ideas?
Thanks you very much!

Hi,

On your default example of the async upload control, you have some text and images that appear before and after the upload control.
(see attachment: telerikasyncuploaddemo.jpg)

When I add anything in front or behind the control, it puts the control on it's own line.
(see attachment: howtogetallonsameline.jpg)

I've tried to trace your css to see how you're getting it all on one line and can't get it right...don't want to spend any more time on this...help!!!