locked
I need to do my webgrid in a "responsive web design" mode, are there any examples of doing webgrids without the @grid.html RRS feed

  • Question

  • User483055775 posted

    I need to do my webgrid in a "responsive web design" mode,  are there any examples of doing webgrids without the @grid.html.   

    Thanks

    Monday, July 14, 2014 10:30 PM

Answers

All replies

  • User-821857111 posted

    You can use a foreach loop and render whatever HTML you want. Here's an example that includes paging: http://www.mikesdotnetting.com/Article/150/Web-Pages-Efficient-Paging-Without-The-WebGrid

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 15, 2014 2:34 AM
  • User379720387 posted

    Bootstrap will let you do that.

    You would put a div around your webGrid and assign  class="table table-responsive"

    Tuesday, July 15, 2014 5:10 AM
  • User483055775 posted

    WM, I am not seeing this be responsive - can you point me at an example.  Thanks

    DonnieS

    Tuesday, July 15, 2014 9:21 AM
  • User379720387 posted

    It works. And bootstrap puts an obscure slider bar in place to give an indication.

    http://techbrij.com/asp-net-gridview-twitter-bootstrap-responsive-design

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 15, 2014 10:24 AM
  • User483055775 posted

    I see it now - and I need to think through the columns that wouldnt be seen as the screen contracts.  Thanks

    Donnie

    Tuesday, July 15, 2014 11:52 AM
  • User483055775 posted

    I got that working but - its really ugly.  I need to pretty it up quite a bit.

    Thanks

    DonnieS

    Tuesday, July 15, 2014 11:53 AM
  • User379720387 posted

    I am telling mobile users that they can scroll right on the graph.

    You can use any of the other bootstrap classes to make the table more palatable.

    Tuesday, July 15, 2014 1:51 PM
  • User483055775 posted

    How and where do you use this   (  ItemStyle-CssClass="hidden-phone" HeaderStyle-CssClass="hidden-phone"  )  - in a web pages (webmatrix) app.

    @grid.GetHtml(
    tableStyle: "grid",
    headerStyle: "head",
    alternatingRowStyle: "alt",
    columns: grid.Columns(
    grid.Column(format: @<a href="~/EditIncome?incomesysid=@item.IncomeSysID">Edit</a>),
    grid.Column(columnName:"Description",header:"IncomeDescription", style: "wDesc" ),
    grid.Column(columnName:"Type",header:"IncomeType",style: "wType"),
    grid.Column(columnName:"AnnualEarnings",header:"Annual Amount:", format: (item) => string.Format("{0:C}", item.AnnualEarnings)),
    grid.Column(columnName:"AgeStart", header:"Age this Starts"),
    grid.Column(columnName:"AgeStop",header:"Age this Stops"),
    grid.Column(columnName:"AnnualIncreaseRate", header:"Annual Increase Rate"),
    grid.Column(columnName:"TaxablePct",header:"Taxable Portion"),
    grid.Column(format: @<a href="~/DeleteIncome?incomesysid=@item.IncomeSysID">Delete</a>)
    )
    )

    Saturday, July 19, 2014 11:24 AM
  • User379720387 posted

    <div class = "your stuff here">
    @grid.GetHtml(
    tableStyle: "grid",
    headerStyle: "head",
    alternatingRowStyle: "alt",
    columns: grid.Columns(
    grid.Column(format: @<a href="~/EditIncome?incomesysid=@item.IncomeSysID">Edit</a>),
    grid.Column(columnName:"Description",header:"IncomeDescription", style: "wDesc" ),
    grid.Column(columnName:"Type",header:"IncomeType",style: "wType"),
    grid.Column(columnName:"AnnualEarnings",header:"Annual Amount:", format: (item) => string.Format("{0:C}", item.AnnualEarnings)),
    grid.Column(columnName:"AgeStart", header:"Age this Starts"),
    grid.Column(columnName:"AgeStop",header:"Age this Stops"),
    grid.Column(columnName:"AnnualIncreaseRate", header:"Annual Increase Rate"),
    grid.Column(columnName:"TaxablePct",header:"Taxable Portion"),
    grid.Column(format: @<a href="~/DeleteIncome?incomesysid=@item.IncomeSysID">Delete</a>)
    )
    )
    </div>

    Saturday, July 19, 2014 9:01 PM
  • User483055775 posted

    How and where do you use this   (  ItemStyle-CssClass="hidden-phone" HeaderStyle-CssClass="hidden-phone"  ) for the particular fields that you want to hide as the size of the display shrinks  - in a web pages (webmatrix) app.  I got this code from the example you posted - which was not a web pages/webmatrix example - so I am trying to understand where to put what I saw in the example.  The place you noted of "Your stuff here"  doesnt seem to be where you would put line specific item-style-CssClass items.    Do you have a .cshtml example?

    Thanks

    DonnieS

    Your example:
     <Columns>
       <asp:BoundField DataField="FirstName" HeaderText="First Name"   />
       <asp:BoundField DataField="LastName" HeaderText="Last Name" ItemStyle-CssClass="hidden-phone" HeaderStyle-CssClass="hidden-phone"   />
      <asp:BoundField DataField="Email" HeaderText="Email" ItemStyle-CssClass="hidden-phone" HeaderStyle-CssClass="hidden-phone" />
      <asp:TemplateField HeaderText="Address" HeaderStyle-CssClass="visible-desktop" ItemStyle-CssClass="visible-desktop">               

     

    My code:

    <div class="table table-responsive">
    @grid.GetHtml(
    tableStyle: "grid",
    headerStyle: "head",
    alternatingRowStyle: "alt",
    columns: grid.Columns(
    grid.Column(format: @<a href="~/EditIncome?incomesysid=@item.IncomeSysID">Edit</a>),
    grid.Column(columnName:"Description",header:"IncomeDescription", style: "wDesc" ),
    grid.Column(columnName:"Type",header:"IncomeType",style: "wType"),
    grid.Column(columnName:"AnnualEarnings",header:"Annual Amount:", format: (item) => string.Format("{0:C}", item.AnnualEarnings)),
    grid.Column(columnName:"AgeStart", header:"Age this Starts"),
    grid.Column(columnName:"AgeStop",header:"Age this Stops"),
    grid.Column(columnName:"AnnualIncreaseRate", header:"Annual Increase Rate"),
    grid.Column(columnName:"TaxablePct",header:"Taxable Portion"),
    grid.Column(format: @<a href="~/DeleteIncome?incomesysid=@item.IncomeSysID">Delete</a>)
    )
    )</div>

    Saturday, July 19, 2014 9:19 PM
  • User483055775 posted

    Mike, could you point me at an example that puts uses the foreach loop that your example showed and then makes it look somewhat like what the webgrid would look like ? 

    Thanks

    DonnieS

    Saturday, July 19, 2014 9:35 PM
  • Saturday, July 19, 2014 9:36 PM
  • User483055775 posted

    My code for that webgrid is below - the "style:  (put anything you want here )"  doesnt work - and I can not figure out what I am doing wrong.  I assume that the "style: xxx"  is our way of using  in-line css   - but I cant make that work.  Thanks for your patience and your time.

    DonnieS

    <div class="table table-responsive">
    @grid.GetHtml(
    tableStyle: "grid",
    headerStyle: "head",
    rowStyle: "gridrow",
    alternatingRowStyle: "gridrow_alternate",
    mode: WebGridPagerModes.All,
    columns: grid.Columns(
    grid.Column(format: @<a href="~/EditIncome?incomesysid=@item.IncomeSysID">Edit</a>),
    grid.Column(columnName:"Description",header:"IncomeDescription", style: "ItemStyle-CssClass=hidden-phone HeaderStyle-CssClass=hidden-phone" ),
    grid.Column(columnName:"Type",header:"IncomeType",style: "wType"),
    grid.Column(columnName:"AnnualEarnings",header:"Annual Amount:", format: (item) => string.Format("{0:C}", item.AnnualEarnings)),
    grid.Column(columnName:"AgeStart", header:"Age this Starts", style: "width:250px" ),
    grid.Column(columnName:"AgeStop",header:"Age this Stops"),
    grid.Column(columnName:"AnnualIncreaseRate", header:"Annual Increase Rate"),
    grid.Column(columnName:"TaxablePct",header:"Taxable Portion"),
    grid.Column(format: @<a href="~/DeleteIncome?incomesysid=@item.IncomeSysID">Delete</a>)
    )
    )
    </div>

    Saturday, July 19, 2014 10:31 PM