Modern #CSS3 for a WebForms #GridView and #WebSharper

Can we use Metro UI CSS to modernize a GridView?

metro

Sure, yes we can.

The code

Let’s start from the .aspx page.

<asp:GridView class="table" data-role="table"
    OnRowDataBound="GridView_RowDataBound" ID="GridViewNomination"
    runat="server" AllowSorting="True" AutoGenerateColumns="True"
    DataKeyNames="CargoID,DeliveryID"
    DataSourceID="SqlDataSourceNomination">

So, the good things are

  • we can manage the data server side with a standard DataSource
  • we can autogenerate the columns

Notice that we AllowSorting but we don’t AllowPaging: it is managed by the Metro UI.

Obviously we need the style reference at the start

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    	<link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css">

and the script at the end of our Content.

    <script src="https://cdn.metroui.org.ua/v4/js/metro.min.js">

Finally, in the code behind, there is a trick to activate the table headers!

GridViewTrade.DataBound += (object o, EventArgs ev) =>
{
    GridViewTrade.HeaderRow.TableSection = TableRowSection.TableHeader;
};
GridViewTrade.DataBind();

Ok, now we are ready for the F# version with WebSharper!
In the servet module, we have types even for the script resources!
The stylesheets are not shown but are the same as above and can be included in the resources too.

[<Require(typeof<JQuery.Resources.JQuery>)>]
type MetroScript() =
    inherit Resources.BaseResource("https://cdn.metroui.org.ua/v4/js/metro.min.js")


module ServerModel =
    let Entries = 
        [ ("test", "go"); ("again", "ping") ] 
        |> List.append  (string i,string i)) [1..20] 
        |> List.toSeq 
    let EntryMap = Map( Entries )

and a Page to show this modern table

let TablePage ctx =
    Templating.Main ctx EndPoint.Table "My Table Page" [
        h1 [] [text "My Table"]
        p [] [text "This is a test for using WebSharper with Metro-Ui-Css"]
        div [] [client ]
        table [attr.``class`` "table"; attr.``data-`` "role" "table"; attr.id "demo-table"] [
            yield thead [] [
                tr [] [
                    th [attr.``class`` "sortable-column sort-asc"] [text "Col 1"]
                    th [attr.``class`` "sortable-column"] [text "Col 2"]
                ] ]
            for KeyValue(key, value) in ServerModel.EntryMap do
                yield tr [] [
                    td [] [text key]
                    td [] [text value]
                ]
        ]
        Doc.WebControl (new Web.Require())
    ]

In the client

let Inspector () =
    a [ attr.``class`` "button ml-1"
        on.click (fun el ev -> JS.Inline("$('#demo-table').data('table').toggleInspector()") |> ignore )
        ]  [span [attr.``class`` "mif-cog"] []]

So cool!))

my_metro_table_fsharp

 

Advertisements

5 thoughts on “Modern #CSS3 for a WebForms #GridView and #WebSharper

  1. If you added metro-all.css, then you do not need to add the rest of the style files (metro-color.css, metro-rtl.css, metro-icons.css). they are already included in metro-all.css.

    Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s