Search code examples
jqueryasp.netgridviewado.netjquery-bootgrid

jQuery Bootgrid using ADO.Net with SQL Server 2012


I have read that jQuery Bootgrid is simple to use for sorting, paging and searching options and seen the demo's. Can anyone clarify me that can I use this jQuery Bootgrid for my C# ASP.Net application. I m using default GridView option binding with ADO.Net services.

I have read one article in this link, but it explained for php & MySQL. Is it applicable to use the same concept for ADO.Net.

Please some one throw some lights on this.


Solution

  • Bootgrid is a jQuery plugin, which can be populated with json data, or you can build html table by yourself (filling a tbody with tr's and td's).

    Surely you can use it with a C# ASP.NET WebApplication, or WebForms, or anything which can receive a http request, but it won't work binding to an ADO.NET, SQL Server Connection out of the box, as do GridView, because a GridView is a server-side component which is compiled and translated to html by the server. So the client receives only the resulted html, whereas Bootgrid is client-side, which means you can make it work with any kind of server application by using ajax calls.

    You should build an API to receive requests from bootgrid, for example, or fill the html table data manually, as I said. The table must have their structure, like this sample:

    <table id="grid-data" class="table table-condensed table-hover table-striped">
        <thead>
            <tr>
                <th data-column-id="id" data-type="numeric">ID</th>
                <th data-column-id="sender">Sender</th>
                <th data-column-id="received" data-order="desc">Received</th>
                <th data-column-id="link" data-formatter="link" data-sortable="false">Link</th>
            </tr>
        </thead>
    </table>
    

    In the sample above, they only configured the table header with column specifications, take note those data-column-id, data-type, data-anything attributes. They are bootgrid's common configurations.

    In this example, we don't have a tbody with tr's and td's already populated, it's a sample to be loaded with json data.

    Another option is to manually build rows with td's:

    <tbody>
        <tr>
            <td>10238</td>
            <td>[email protected]</td>
            <td>14.10.2013</td>
        </tr>
        ...
    </tbody>
    

    ...and bootgrid will work as well.

    It's really simple to use bootgrid, just take a read in their examples here.