how to create a responsive grid view in Asp.net c#
  • Hello,
    I want to create a responsive gridveiw in asp.net that changes its
    behaviour on multiple devices and looks good on each device. I need to
    do this on Phone, Tablet and PC. Please tell me how can i do this.
  • 3 Comments sorted by
  • Vote Up1Vote Down phpcoderphpcoder
    11.00 Karma Accepted Answer
    Use of responsive websites has
    increased by a high number. Most of websites are responsive in nature
    that they support almost all devices like mobile, Tablet and PC.
    It
    is easy to use a resposnive grid view in PHP where as Microsoft
    Asp.net, c# and Visual studio dont have any special tool for creating
    responsive Gridview.
    Today i will tell you how can we create a responsive table or responsive grid view in Asp.net c#
    Please see below step by step tutorial for creating responsive table or responsive grid view in Asp.net c#


    DOWNLOAD PROJECT

    Step 1- Download Open source Responsive table Jquery Plugin named footable from http://themergency.com/footable/ and extract it your hard-disk. i have downloaded Footable version 2
    Step 2- Goto folder Demos/js and copy files named jquery-1.9.1.min.js and footable.js
    Step 3- Now create a new Asp.net C# Project/website in Visual Studio
    Step 4-Create folder named js in your website project
    Step 5-Inside your js folder import files jquery-1.9.1.min.js and footable.js and your directory structure should look like this

    image
    Step 6- Now add Footable JS files to your Web page head section

    image
    Step 7-Create a Database in MSSQL server to show some values from database to Grid view. I have created table with following data


    image

    Step 8: Now create a Grid view in Webpage and fill it with data. After creating Grid view page will look like this

    image

    Step 9:  Now its time for making table responsive.
    Go to Default.aspx and add following code to GridView code

    CssClass="footable" 


    and add following after
     <script type="text/javascript">
    $(function () {
    $('#<%=gv_dataGrid.ClientID %>').footable({
    breakpoints: {

    phone: 300,
    tablet: 640
    }
    });
    });
    </script>

    Step 10: Now open default.aspx.cs and add following after DataBind();
                     gv_dataGrid.UseAccessibleHeader = true;
    gv_dataGrid.HeaderRow.TableSection = TableRowSection.TableHeader;
    TableCellCollection cells = gv_dataGrid.HeaderRow.Cells;
    cells[0].Attributes.Add("data-class", "expand");
    cells[5].Attributes.Add("data-hide", "phone,tablet");
    cells[6].Attributes.Add("data-hide", "phone,tablet");
    cells[7].Attributes.Add("data-hide", "phone,tablet");
    cells[8].Attributes.Add("data-hide", "phone,tablet");
    cells[2].Attributes.Add("data-hide", "phone,tablet");
    cells[3].Attributes.Add("data-hide", "phone,tablet");
    cells[4].Attributes.Add("data-hide", "phone,tablet");


    Step 11: And you are done creating a responsive Grid View.
    Your Responsive Layout will look like this.
    ON PC image

    ON Mobile
    image

    ON Tablet:

    image

    DOWNLOAD PROJECT HERE
  • thanks for your detail example.
  • How can I add sorting using footable in header column ? also paging using footable ?

Howdy, Stranger!

It looks like you're new here. If you want to get involved, or you want to Ask a new Question, Please Login or Create a new Account by Clicking below

Login with Facebook

Tagged

Popular Posts of the Week

Optimum Creative