Monday, 1 July 2013

Gridview Formatting with Paging

css
--------------------------------------------------
<style type="text/css" media="screen">

    .pager a
    {
            border: 1px solid #EDF5FF;
            color: #0067A5;
            text-decoration: underline;
            padding: 2px 5px;
    }
    .pager span
    {
            background-color: #0067A5;
            border: 1px solid #DBEAFF;
            color: #FFFFFF;
            padding: 2px 5px;
    }
    .pager a:hover
    {
        color: #1E90FF;
    }


    </style>

Inside body
-----------------------------------------------
<asp:GridView ID="GridCourse" runat="server" AutoGenerateColumns="false"
 Width="100%" GridLines="None" ShowHeader="true"
ShowFooter="false" onpageindexchanging="GridCourse_PageIndexChanging"
onrowdatabound="GridCourse_RowDataBound" AllowPaging="true" PageSize="10" >
<Columns>  

<asp:TemplateField HeaderText="SNo">
<HeaderStyle CssClass="DetailsContent" />
<ItemStyle Width="5%" Height="18px"  HorizontalAlign="Center" CssClass="DetailsContent"></ItemStyle>
<ItemTemplate>                      
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Title">
<HeaderStyle CssClass="DetailsContent" />
<ItemTemplate>
<asp:Label ID="lbl_title" runat="server" Text='<%#Eval("Clipping_Title")%>'></asp:Label>
</ItemTemplate>
<ItemStyle Width="30%" Height="18px"  HorizontalAlign="Center" CssClass="DetailsContent"></ItemStyle>
</asp:TemplateField>
<asp:TemplateField HeaderText="Clipping Image">
<HeaderStyle CssClass="DetailsContent" />
<ItemTemplate>
<asp:Image ID="Img_Clipping" runat="server" Height="50px" Width="50px" ImageUrl='<%#"../NewsClippings/"+Eval("Clipping_ImagePath")+"" %>' />
</ItemTemplate>

<ItemStyle Width="25%" Height="18px"  HorizontalAlign="Center" CssClass="DetailsContent"></ItemStyle>
</asp:TemplateField>
<asp:BoundField HeaderText="Posted On" DataField="Upload_On" DataFormatString="{0:d}">
<HeaderStyle  CssClass="DetailsContent"/>
<ItemStyle Width="20%"  HorizontalAlign="Center" CssClass="DetailsContent"/>
</asp:BoundField>
<asp:TemplateField HeaderText="Action">
<HeaderStyle CssClass="DetailsContent" />
<ItemTemplate>
<asp:LinkButton ID="lbtn_Edit" CssClass="Details" runat="server" Text="Edit" CommandName="Edit" CommandArgument='<%#Eval("Clipping_Id") %>'></asp:LinkButton>
<asp:LinkButton ID="lbtn_Delete" CssClass="Details" runat="server" Text="Delete" CommandName="Delete" CommandArgument='<%#Eval("Clipping_Id") %>'></asp:LinkButton>
</ItemTemplate>
<ItemStyle Width="20%" Height="18px"  HorizontalAlign="Center" CssClass="DetailsContent"></ItemStyle>
</asp:TemplateField>
</Columns>  
<HeaderStyle BackColor="Silver" Height="20px" />  
 <PagerStyle HorizontalAlign="Right" CssClass="pager"/>
   
</asp:GridView>


In code
-----------------------------------
 protected void grd_ExistingImage_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        grd_ExistingImage.PageIndex = e.NewPageIndex;    
        int id = bindAvailableCategory(CategoryName);
        bindImagestoGridview(id);
    }

No comments:

Post a Comment