Issue in changing styles for grid

Discussion in 'CSS' started by srinig29, Feb 21, 2010.

0
  1. #1
    Hi All, I'm using a Radgrid to show some data's, and using styles i'm changing the alignment of the grid fields. Now the problem is When grid loads for the first time it shows grid layout and other things but when i try to change the display type, evrything changes there are no layouts and the fields appearing in a normal white page.. I know i'm doing something wrong so can anyone point out that for me? i'll put the sample code of what i did here below.

    
<head runat="server">
    <title></title>
    <link id="Link1" href="~/Grid.WebBlue.css" rel="stylesheet" type="text/css" runat="server" />
    <style type="text/css">
        .display1 .thumb img
        {
            float: left;
            width: 200px;
            height: 150px;
        }
        .display1 .title
        {
            font-weight: bold;
            font-family: Arial Black;
            color: #f30;
        }
        .display1 .description
        {
            font-weight: bold;
            color: #333;
        }
        .display2 .thumb img
        {
            width: 150px;
            height: 150px;
        }
        .display2 .title
        {
            float: left;
            font-size: 25px;
            color: #f30;
        }
        .display2 .description
        {
            display: none;
        }
        .display3 .thumb img
        {
            display: none;
        }
        .display3 .title
        {
            font-size: 25px;
            color: #03f;
        }
        .display3 .description
        {
            font-size: 18px;
            color: #f30;
        }
    </style>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

        <script type="text/javascript">
            function pageLoad(sender, eventArgs) {
                // alert("Page Loaded")
                var mtv = $find("RadGrid1").get_masterTableView();
                LoadGrid()
            }
            function LoadGrid() {
                MyTelerikGrid.MyWebService.GetImageDetails(0, 2, OnComplete, OnError);

            }
            function OnComplete(result) {
                var tableView = $find('<%= RadGrid1.ClientID %>').get_masterTableView()
                if (tableView != null) {
                    tableView.set_dataSource(result.ReturnData);
                    tableView.set_virtualItemCount(5);
                    tableView.dataBind();
                }
                else {
                    alert('grid is null')
                }
            }

            function OnError(error) {
                alert(error.get_message());
            }

            function on_Command(sender, args) {
                args.set_cancel(true);
                var pageSize = sender.get_masterTableView().get_pageSize();
                var currentPageIndex = sender.get_masterTableView().get_currentPageIndex();
                MyTelerikGrid.MyWebService.GetImageDetails(currentPageIndex, pageSize, OnComplete, OnError);
            }
            //            changestyle = function(base_class) {
            function changestyle(base_class) {
                document.getElementById('RadGrid1').setAttribute('class', base_class);
            }
        </script>

    </telerik:RadCodeBlock>
</head>
<body>
    <form id="form1" runat="server">
    <a href="javascript:changestyle('display1')" id="display1">show style1</a><br />
    <a href="javascript:changestyle('display2')" id="display2">show style2</a><br />
    <a href="javascript:changestyle('display3')" id="display3">show style3</a><br />
    <br />
    <br />
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Services>
            <asp:ServiceReference Path="~/MyWebService.asmx" />
        </Services>
    </telerik:RadScriptManager>
    <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" CssClass="display1"
        PageSize="2">
        <PagerStyle Mode="NextPrevAndNumeric" />
        <MasterTableView>
            <Columns>
                <telerik:GridTemplateColumn HeaderText=" ">
                    <ItemTemplate>
                        <%--<div id="RadGridDiv" class="display1">--%>
                        <div class="thumb">
                            <%--<asp:Image ID="Name" ImageUrl="Images/Penguins.jpg" runat="server" AlternateText="Srini Image" />--%>
                            <asp:Image ID="Image" ImageUrl='"Images/" + <% ("<asp:Label ID="Name" runat="server" />") %>'
                                runat="server" AlternateText="Srini Image" />
                            <br />
                        </div>
                        <div class="title">
                            <asp:Label ID="Title" runat="server" />
                            <br />
                        </div>
                        <div class="description">
                            <asp:Label ID="Description" runat="server" />
                            <br />
                            <br />
                        </div>
                        <%--</div>--%>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
        <ClientSettings>
            <ClientEvents OnCommand="on_Command" />
        </ClientSettings>
    </telerik:RadGrid>
    </form>
</body>
    Code (markup):
    Thanks in advance
     
    srinig29, Feb 21, 2010 IP