dotnetco.de

Use jQuery Bootgrid with asp.net Gridview

I’ve used Twitters Bootstrap template in several asp.net projects. I’m surprised that I had no large gridviews in these projects, but just when I needed one t3n has published an article containing information about jQuery Bootgrid.This plugin makes a grid much more convenient, so I set it up in my project and it works brillant.

Here are the steps to be done to implement jQuery-Bootgrid into your existing asp:Gridview, so you should already have setup your gridview and data retrieval on your own. Once this is done, the following steps are necessary to use jQuery-Bootgrid. You will find the whole source code of WebForm1.aspx and Webform1.aspx.vb at the bottom of the article

  1. Add jQuery, Bootstrap and jquery-Bootgrid to your project. This contains several JavaScript-Files and Stylesheets.
    <!-- jQuery, http://jquery.com/ -->
       <script src="//code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
       <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
       <!-- Bootstrap, http://getbootstrap.com/ -->
       <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
       <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
       <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"
           type="text/javascript"></script>
       <!-- Bootgrid, http://jquery-bootgrid.com/ or https://github.com/rstaib/jquery-bootgrid -->
       <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.1.4/jquery.bootgrid.min.js"
           type="text/javascript"></script>
       <link rel="Stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.1.4/jquery.bootgrid.min.css" />

     

  2. Inform Bootgrid about the grid to be prepared. 2 Steps are necessary:
    1. Add data-toggle=”bootgrid” to your grid, and
    2. Activate Bootgrid on your gridview. Additionally I personally don’t like case-sensitivity so I turned it off, of course that’s up to you.

    <script type="text/javascript" language="javascript">
           $(function () {
               $('#<%= MyGridview.ClientID %>').bootgrid({
                   caseSensitive: false
               });
           });
    </script>

     

  3. Add data-grid-id for all columns. You could not add it right into your aspx because you would get an error message “Type ‘System.Web.UI.WebControls.BoundField’ does not have a public property named ‘data-column-id’.” Therefore you have to do this in the backend. Create a Handler for your Gridview.RowCreated and add the attributes to your header.
    Private Sub MyGridview_RowCreated(sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles MyGridview.RowCreated
          If Not e Is Nothing Then
              If e.Row.RowType = DataControlRowType.Header Then
                  e.Row.Cells(0).Attributes.Add("data-column-id", "companyname")
                  e.Row.Cells(1).Attributes.Add("data-column-id", "customernumber")
                  e.Row.Cells(2).Attributes.Add("data-column-id", "creationdate")
                  e.Row.Cells(3).Attributes.Add("data-column-id", "search")
              End If
          End If
      End Sub

     

  4. Set up gridview to build also theader. By default, gridview creates a HTML-Table with only tbody. For Bootgrid it’s important to have also theader. To do this set the following attribute:
    Griview.HeaderRow.TableSection = TableRowSection.TableHeader

     

Now you should be able to compile your application and it should work fine!

Here are some more information which you might find useful once your grid works fine:

How to sort numeric columns

As you see, ‘CustomerNumber’ is a numeric column, but Bootgrid sorts it using string sorting, means e.g. ‘100’ is listed before ’70’. To change this behavior, you could simply set the data-converter to numeric in the backend: e.Row.Cells(1).Attributes.Add(“data-converter”, “numeric”)

How to sort date columns

Sorting date columns is a bit tricky, because you need to transfer the provided date into javascript date format for sorting and later on back to string for displaying. Of course Bootgrid does this for you, but you have to take care about the format.If you have a look at the example code below, column ‘CreationDate’ is provided as string, not as date column: row(“CreationDate”) = Today.AddMonths(-1).ToString(“yyyy-MM-dd”). This helps to ensure that the date is formatted in a way which javascript understands so it’s easier to write the converters. Of course you could use your own format and take care to update the converter accordingly. In my example I’ve created a new converter called ‘datetime’ with a very basic structure (For a better output you could of course use special libraries like moment.js). In the backend you need to set the datetime-converter for the correct column and make sure that the datevalues in the column are in a format which is understandable for your converter. Easiest way is of course to supply the values as string instead of date so you control the format in both backend and frontend accordingly.

converters: {
                    datetime: {
                        from: function (value) { return new Date(value); },
                        to: function (value) {
                            var d = value.getDate();
                            var m = value.getMonth();
                            m += 1;  // JavaScript months are 0-11
                            var y = value.getFullYear();
                            return (d + "." + m + "." + y);
                        }
                    }
                }

 

 Add a hyperlink column

Sometimes you also need to have some hyperlink columns in your grid. As Bootgrid takes over the control of your grid, Hyperlinks defined in your gridview would not work anymore. But Bootgrid has a feature for it: Formatters. You could define formatters on your own. In my example code I have a column ‘Search’ (which is not sortable) linking to Bing to search for the companyname. In your formatter you could reference all values from the current row, e.g. see row.search: The data-column-id ‘search’ is defined in backend and then used in the formatter.

formatters: {
                   "link": function (column, row) {
                       return "<a href=\"http://www.bing.com/search?q=" + row.search + "\">" + column.id + ": " + row.companyname + "</a>";
                   }
               }

 

The complete source code

Here is WebForm1.aspx and WebForm1.aspx.vb. It’s all set up to have a master page ‘Site1.Master’ which is the default created by Visual Studio, no changes there.

 

Webform1.aspx

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site1.Master"
    CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication1.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <!-- jQuery, http://jquery.com/ -->
    <script src="//code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
    <!-- Bootstrap, http://getbootstrap.com/ -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"
        type="text/javascript"></script>
    <!-- Bootgrid, http://jquery-bootgrid.com/ or https://github.com/rstaib/jquery-bootgrid -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.1.4/jquery.bootgrid.min.js"
        type="text/javascript"></script>
    <link rel="Stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.1.4/jquery.bootgrid.min.css" />
    <script type="text/javascript" language="javascript">
        $(function () {
            $('#<%= MyGridview.ClientID %>').bootgrid({
                caseSensitive: false,
                formatters: {
                    "link": function (column, row) {
                        return "<a href=\"http://www.bing.com/search?q=" + row.search + "\">" + column.id + ": " + row.companyname + "</a>";
                    }
                },
                converters: {
                    datetime: {
                        from: function (value) { return new Date(value); },
                        to: function (value) {
                            var d = value.getDate();
                            var m = value.getMonth();
                            m += 1;  // JavaScript months are 0-11
                            var y = value.getFullYear();
                            return (d + "." + m + "." + y);
                        }
                    }
                }
            });
        });
            </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:GridView ID="MyGridview" runat="server" AutoGenerateColumns="false" CssClass="table table-bordered"
        data-toggle="bootgrid">
        <Columns>
            <asp:BoundField HeaderText="Company" DataField="CompanyName" />
            <asp:BoundField HeaderText="Customer Number" DataField="CustomerNumber" />
            <asp:BoundField HeaderText="Creation Date" DataField="CreationDate" />
            <asp:BoundField HeaderText="Search Bing" DataField="Search" />
        </Columns>
    </asp:GridView>
</asp:Content>

 

Webform1.aspx.vb

Public Class WebForm1
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            With MyGridview
                .DataSource = GetDatatable()
                .DataBind()
                .HeaderRow.TableSection = TableRowSection.TableHeader
            End With
        End If
    End Sub
    Private Function GetDatatable() As DataTable
        Dim dt As New DataTable
        dt.Columns.Add("CompanyName")
        dt.Columns.Add("CustomerNumber")
        dt.Columns.Add("CreationDate")
        dt.Columns.Add("Search")
        Dim row As DataRow
        row = dt.NewRow
        row("CompanyName") = "Company abc"
        row("CustomerNumber") = 100
        row("CreationDate") = Today.AddMonths(-1).ToString("yyyy-MM-dd")
        row("Search") = "abc"
        dt.Rows.Add(row)
        row = dt.NewRow
        row("CompanyName") = "Company def"
        row("CustomerNumber") = 1001
        row("CreationDate") = Today.AddDays(-15).ToString("yyyy-MM-dd")
        row("Search") = "def"
        dt.Rows.Add(row)
        row = dt.NewRow
        row("CompanyName") = "company ghi"
        row("CustomerNumber") = 70
        row("CreationDate") = Today.AddDays(-25).ToString("yyyy-MM-dd")
        row("Search") = "ghi"
        dt.Rows.Add(row)
        row = dt.NewRow
        row("CompanyName") = "cOmPaNy jkl"
        row("CustomerNumber") = 345
        row("CreationDate") = Today.AddDays(-5).ToString("yyyy-MM-dd")
        row("Search") = "jkl"
        dt.Rows.Add(row)
        Return dt
    End Function
    Private Sub MyGridview_RowCreated(sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles MyGridview.RowCreated
        If Not e Is Nothing Then
            If e.Row.RowType = DataControlRowType.Header Then
                e.Row.Cells(0).Attributes.Add("data-column-id", "companyname")
                e.Row.Cells(1).Attributes.Add("data-column-id", "customernumber")
                e.Row.Cells(1).Attributes.Add("data-converter", "numeric")
                e.Row.Cells(1).Attributes.Add("data-align", "right")
                e.Row.Cells(2).Attributes.Add("data-column-id", "creationdate")
                e.Row.Cells(2).Attributes.Add("data-converter", "datetime")
                e.Row.Cells(3).Attributes.Add("data-column-id", "search")
                e.Row.Cells(3).Attributes.Add("data-sortable", "false")
                e.Row.Cells(3).Attributes.Add("data-formatter", "link")
            End If
        End If
    End Sub
End Class

Site1.Master

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site1.master.vb" Inherits="WebApplication1.Site1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

 

Continue reading…

55000 Downloads!

Vor dem Finale bereits eine Bilanz: Inzwischen wurde die App “Fussball im FreeTV” für iPhone, Android und Windows Phone über 55.000-mal installiert!! Und die durchschnittliche Bewertung beträgt immer noch mehr als 4 von 5 Sterne! Vielen Dank Euch allen!

Uns allen wünschen wir ein packendes Finale und einen verdienten Sieger! Und danach haben wir uns alle einen sonnigen Urlaub verdient. Aber keine Sorge, auch wenn ihr im Urlaub seid werden wir natürlich Euren Fussballkalender auf dem Laufenden halten, Sat-Fernsehen oder Internet gibt es ja inzwischen fast überall 🙂

Windows Phone holt auf

Vor einiger Zeit hat die Android Version von “Fussball im FreeTV” die Version für Windows Phone überholt, aber Windows Phone holt nun wieder auf. Ob es daran liegt, daß “Fussball im FreeTV” auf Platz 1 der Empfehlungen von Microsoft für die Fussball-WM liegt? Den Höchstwert der Downloads an einem Tag hielt bislang die Android Version mit 288 Downloads am 23. April diesen Jahres als das Champions League Halbfinale zwischen Real Madrid und Bayern München anstand. Diesen Wert konnte die Windows Phone Version nun überbieten und knackte sowohl die 300er als auch die 400er Marke: 481-mal wurde die Windows Phone Version am WM-Eröffnungstag installiert! Ob während der WM die 500er Marke von Windows Phone oder Android geknackt wird? Oder die 1000er-Marke für alle 3 Betriebssysteme zusammen? Continue reading…

Create HTML5 Charts using ASP.net and RGraph

On an existing web project I wanted to draw some charts: bar charts, pie charts etc. I had a look at Highcharts which looks very good and has some very nice effects (like animation or putting several charts into one) but in an HTML5 book (HTML5 & CSS3 from O’Reilly) I read about RGraph. That’s a free open source javascript library under MIT license so you could use it in every project you want, personal or commercial. It’s using the new canvas tag, see RGraph Homepage for details.

In Richards Support Forum I saw some requests regarding integration into ASP.net, and as there is no summary so far I’ll add it here. In fact it’s very easy to implement it into ASP.net WebForms.

This tutorial shows how to integrate Richards ‘Getting Starting’ example into ASP.net with retrieving the chart data from the backend.

So first follow all the steps described in Richards tutorial and run your ASP.net application, it should display the chart as expected.

Continue reading…

Microsofts Empfehlung zur Fussball WM!

Letzte Woche haben wir hier bereits darüber berichtet, daß “Fussball im FreeTV” auch 1 Jahr nach der ersten Veröffentlichung weiterhin auf Platz 1 der Fussball-Apps für Windows Phone steht. Gestern hat nun Microsoft über ihre Facebook-Seite Windows Phone DE App-Empfehlungen zur Fussball-WM 2014 veröffentlichen. Und auch hier auf Platz 1: Fussball im FreeTV! Wir bedanken uns nicht nur bei den bereits 40000 Benutzern sondern in diesem Fall natürlich auch bei Microsoft für diese Wertschätzung! Continue reading…

Weiterhin Platz 1 der Fussball-Apps!

Auch nach 7 Monaten steht die App “Fussball im FreeTV” weiterhin auf Platz 1 aller Fussball-Apps im Windows Phone Store! Kurz vor der WM 2014 in Brasilien möchten wir die Chance nutzen und uns für Euer Vertrauen bedanken! Inzwischen wurde alleine die WindowsPhone App über 14000 mal installiert und erreicht weiterhin eine durchschnittliche Bewertung von 4,4 Sternen! Es freut uns sehr das Euch unsere App so gut gefällt. Continue reading…

Auch Android mit 10000 Downloads!

Nachdem vor 2 Wochen bereits die Windows Phone App den 10000. Download verzeichnete knackte “Fussball im FreeTV” nun auch für Android die 10000er Marke! Die Android-Version wurde 1 Monat nach der Windows Phone Version publiziert, hat also schon nach 6 1/2 Monaten 10000 Downloads vorzuweisen. Und auch mit der Android-Version sind die Anwender sehr zufrieden wie die Bewertung von 4,4 Sternen zeigt. Vielen Dank und weiterhin viel Spaß mit der App! Continue reading…