Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Change Collor in grid

8 Answers 89 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Nikola
Top achievements
Rank 2
Nikola asked on 16 Nov 2012, 01:43 PM
Heey 

How can i change the collor in the grid ? i have alredy tried with 

     <AlternatingItemStyle BorderColor="#ffffff" />

and it wont work .. 

Thanks for answer 

8 Answers, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
answered on 16 Nov 2012, 03:26 PM
Hello,

.RadGrid .rgAltRow {
background-color : Red !important;
}
 
// OR
 
.RadGrid_YOURSKINNAME .rgAltRow {
background-color : Red !important;
}


Thanks,
Jayesh Goyani
0
Nikola
Top achievements
Rank 2
answered on 16 Nov 2012, 03:35 PM
Heey

somehow  wont work still the same 
0
Jayesh Goyani
Top achievements
Rank 2
answered on 16 Nov 2012, 03:38 PM
Hello,

Please also add below style and check.

background-image : none !important;



Thanks,
Jayesh Goyani
0
Nikola
Top achievements
Rank 2
answered on 16 Nov 2012, 03:41 PM
heey

nope ...
0
Jayesh Goyani
Top achievements
Rank 2
answered on 16 Nov 2012, 03:47 PM
Hello,

i have applied below property and its works for me.

http://demos.telerik.com/aspnet-ajax/grid/examples/overview/defaultcs.aspx




Thanks,
Jayesh Goyani
0
Shinu
Top achievements
Rank 2
answered on 19 Nov 2012, 04:42 AM
Hi,

Please try the following CSS to change the border color of the Alternating row.

CSS:
<style type="text/css">
    .RadGrid .rgAltRow td
    {
        border-color: Red !important;
    }
</style>

Thanks,
Shinu.
0
Nikola
Top achievements
Rank 2
answered on 20 Nov 2012, 07:58 AM
my code 


<asp:Content ID="Content1" ContentPlaceHolderID="MainRegionContentPlaceHolder" runat="server">
<link rel="Stylesheet" type="text/css" href="ReportStyle.css" />   
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1"></telerik:RadScriptManager>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function onRequestStart(sender, args) {
                if (args.get_eventTarget().indexOf("ExportToExcelButton") >= 0 ||
                 args.get_eventTarget().indexOf("ExportToWordButton") >= 0 ||
                 args.get_eventTarget().indexOf("ExportToCsvButton") >= 0) {
                    args.set_enableAjax(false);
                }
            }
            function getOuterHTML(obj) {
                if (typeof (obj.outerHTML) == "undefined") {
                    var divWrapper = document.createElement("div");
                    var copyOb = obj.cloneNode(true);
                    divWrapper.appendChild(copyOb);
                    return divWrapper.innerHTML
                }
                else
                    return obj.outerHTML;
            }
 
 
 
 
            function PrintRadGrid() {
                {
                    var previewWnd = window.open('about:blank', '', '', false);
                    var sh = '<%= ClientScript.GetWebResourceUrl(UserGrid.GetType(),String.Format("Telerik.Web.UI.Skins.{0}.Grid.{0}.css",UserGrid.Skin)) %>';
                var shBase = '<%= ClientScript.GetWebResourceUrl(UserGrid.GetType(),"Telerik.Web.UI.Skins.Grid.css") %>';
                var styleStr = "<html><head><link href = '" + sh + "' rel='stylesheet' type='text/css'></link>";
                styleStr += "<link href = '" + shBase + "' rel='stylesheet' type='text/css'></link></head>";
                var htmlcontent = styleStr + "<body>" + getOuterHTML($find('<%= UserGrid.ClientID %>').get_element()) + "</body></html>";
             previewWnd.document.open();
             previewWnd.document.write(htmlcontent);
             previewWnd.document.close();
             previewWnd.print();
 
             if (!$telerik.isChrome) {
                 previewWnd.close();
             }
         }
     }
 
        </script>
    </telerik:RadCodeBlock>
  
 
 
 
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <ClientEvents OnRequestStart="onRequestStart" />
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="UserGrid">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="UserGrid" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxPanel runat="server" Height="600px" ID="RadAjaxPanel1">
        <div class="qsf-demo-canvas">
            <div class="LBU" runat="server" id="lbu_div">
                <telerik:RadComboBox ID="rcbLocationBusinessUnits" runat="server" Visible="false" Width="186px" Label="LocationBusinessUnit: " AutoPostBack="true" OnSelectedIndexChanged="rcbLocationBusinessUnits_SelectedIndexChanged"></telerik:RadComboBox>
            </div>
            <div class="BU">
                <telerik:RadComboBox ID="rcbBusinessUnits" runat="server" Visible="false" Width="186px" Label="BusinessUnit: " AutoPostBack="true" OnSelectedIndexChanged="rcbBusinessUnits_SelectedIndexChanged"></telerik:RadComboBox>
            </div>
            <div class="Dep">
                <telerik:RadComboBox ID="rcbDepartments" runat="server" Visible="false" Width="186px" Label="Departments: " AutoPostBack="true" OnSelectedIndexChanged="rcbDepartments_SelectedIndexChanged"></telerik:RadComboBox>
            </div>
             <p class="Button">
                <asp:Button ID="Button1" runat="server" Text="Show Report" OnClick="Button1_Click" />
                <asp:Button ID="Button2" runat="server" Text="Show Month/Year Report" OnClick="Button2_Click" />
             </p>
             
            <div>
                <p>
                    <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Administrator/printer-icon.png" Visible="false" OnClick="ImageButton1_Click" />
                </p>
            </div>
 
            <div class="UserGrid">
                <telerik:RadGrid ID="UserGrid" runat="server" Visible="false" CellSpacing="0" GridLines="None" AllowPaging="true" PageSize="10" OnItemCommand="UserGrid_ItemCommand" Height="400">
            
                     <ExportSettings HideStructureColumns="true">
                    </ExportSettings>
                    <MasterTableView CommandItemDisplay="Top" AutoGenerateColumns="false">
                        <CommandItemSettings ShowAddNewRecordButton="false" />
                        <PagerStyle Mode="NextPrevNumericAndAdvanced" />
                        <CommandItemSettings ShowExportToExcelButton="true" ShowExportToCsvButton="false" ShowExportToWordButton="false" />
                        <RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">
                            <HeaderStyle Width="20px"></HeaderStyle>
                        </RowIndicatorColumn>
                        <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
                            <HeaderStyle Width="20px"></HeaderStyle>
                        </ExpandCollapseColumn>
                                    
                        <Columns>
                            <telerik:GridBoundColumn DataField="FirstName" FilterControlAltText="Filter FirstName column" HeaderText="First Name" SortExpression="FirstName" UniqueName="FirstName">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="LastName" FilterControlAltText="Filter LastName column" HeaderText="Last Name" SortExpression="LastName" UniqueName="LastName">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="VacationDays" FilterControlAltText="Filter VacationDays column" HeaderText="Vacation Days" SortExpression="VacationDays" UniqueName="VacationDays">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="UsedVacationDays" FilterControlAltText="Filter UsedVacationDays column" HeaderText="Used" SortExpression="UsedVacationDays" UniqueName="UsedVacationDays">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="BookedVacationDays" FilterControlAltText="Filter BookedVacationDays column" HeaderText="Booked" SortExpression="BookedVacationDays" UniqueName="BookedVacationDays">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="ForecastVacationDays" FilterControlAltText="Filter ForecastVacationDays column" HeaderText="Forecast" SortExpression="ForecastVacationDays" UniqueName="Forecast">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="January" FilterControlAltText="Filter January column" HeaderText="January" SortExpression="January" UniqueName="January">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="February" FilterControlAltText="Filter Febuary column" HeaderText="February" SortExpression="February" UniqueName="February">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="March" FilterControlAltText="Filter Febuary column" HeaderText="March" SortExpression="March" UniqueName="March">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="April" FilterControlAltText="Filter Febuary column" HeaderText="April" SortExpression="April" UniqueName="April">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="May" FilterControlAltText="Filter May column" HeaderText="May" SortExpression="May" UniqueName="May">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="June" FilterControlAltText="Filter June column" HeaderText="June" SortExpression="June" UniqueName="June">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="July" FilterControlAltText="Filter July column" HeaderText="July" SortExpression="July" UniqueName="July">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="August" FilterControlAltText="Filter August colum" HeaderText="August" SortExpression="August" UniqueName="August">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="September" FilterControlAltText="Filter September colum" HeaderText="September" SortExpression="September" UniqueName="September">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="October" FilterControlAltText="Filter October colum" HeaderText="October" SortExpression="October" UniqueName="October">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="November" FilterControlAltText="Filter November colum" HeaderText="November" SortExpression="November" UniqueName="November">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="December" FilterControlAltText="Filter December colum" HeaderText="December" SortExpression="December" UniqueName="December"></telerik:GridBoundColumn>
 
                        </Columns>
                    </MasterTableView>
 
                    <FilterMenu EnableImageSprites="False"></FilterMenu>
                </telerik:RadGrid>
                </div>
        </div>


stylesheet

/** Customize the demo canvas */
.qsf-demo-canvas {
    position: absolute;
}
    .qsf-demo-canvas label {
        display: none;
    }
 
 
    * Combobox containers .qsf-demo-canvas .LBU,
    .qsf-demo-canvas .BU,
    .qsf-demo-canvas .Dep {
        position: relative;
        /*top: auto;*/
    }
 
    /*.qsf-demo-canvas .LBU {left: 61px;}
    .qsf-demo-canvas .BU {left: 279px;}
    .qsf-demo-canvas .Dep {left: 497px;}
    /* Button and results */
    .qsf-demo-canvas .Button {
        /*margin: 0;
    padding: 0;
    position: absolute;
    top: 220px;
    right: 61px;
    left: auto;*/
    }
 
    .qsf-demo-canvas .result {
        position: absolute;
        top: 225px;
        left: 61px;
    }
 
.UserGrid .rgAltRow td{
    position: absolute;
    width: 750px;
    visibility: visible;
    overflow-x: auto;
    border-color:Red!important;
  
}

0
Accepted
Shinu
Top achievements
Rank 2
answered on 20 Nov 2012, 09:07 AM
Hi,

After inspecting your code, I found that you are using ".UserGrid" instead of ".RadGrid". You shoud override the default style using .RadGrid.
CSS:
.RadGrid .rgAltRow td
{
    border-color: Red !important;
}

Thanks,
Shinu.
Tags
Grid
Asked by
Nikola
Top achievements
Rank 2
Answers by
Jayesh Goyani
Top achievements
Rank 2
Nikola
Top achievements
Rank 2
Shinu
Top achievements
Rank 2
Share this question
or