How to "enable" the jquery bootgrid grid/table

Question

I'm trying to incorporate a grid/table in my html5 page populated with data from sql server using razor. I am a complete and absolute newbie. My page works and the SQL query works. Last thing I need is to get the table to look and behave like the basic bootgrid example here: http://www.jquery-bootgrid.com/Examples#basic

I've done the following:

Created a new cshtml page/site and installed Bootstrap, jquery and the jquery bootgrid using the Nuget package manager.
Added references to these js and css files from html page's head section.
Created a html table and populated with data from SQL Server
Formatted the table using bootstrap. Up to here, everything works.

Now I cannot get any of bootgrid look and feel to activate. I've gone through the "documentation" page on the bootgrid website and even copied one of the samples off their site but nothing works.

On stackoverflow, I did a search and found the following three posts that kind of relates to my problem but didn't lead me to any solutions.

I must be missing some step or something that activates the bootgrid functionality.

Here is my basic CSHTML page I'm using to test/learn bootgrid:

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>My Site's Title</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="~/Content/bootstrap.min.css">
        <link rel="stylesheet" href="~/Content/jquery.bootgrid.min.css">
        <script src="~/Scripts/jquery-1.11.2.min.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
        <script src="~/Scripts/jquery.bootgrid.min.js"></script>
    </head>
    <body>

        <!--jQuery Bootgrid-->
        <div class="container">
            <h1>JQuery Bootgrid</h1>
            <table id="grid-basic" class="table table-bordered table-hover table-striped table-condensed" data-toggle="bootgrid">
            <thead>
                <tr class="active">
                    <th data-column-id="id" data-type="numeric" data-identifier="true">Group ID</th>
                    <th data-column-id="group_name" data-order="desc">Group Name</th>
                    <th data-column-id="group_desc">Group Description</th>
                </tr>
            </thead>        
            <tbody>
            @foreach(var xrow in selectedData){
                <tr>
                    <td>@xrow.GroupID</td>
                    <td>@xrow.GroupName</td>
                    <td>@xrow.GroupDesc</td>
                </tr>
            }
            </tbody>
        </table>
     </div>
</body>`
</html>

What am I missing?

Many thanks

Sorry I hit enter in this comment box all the time then the post submits ... Aaaargh — christoff.botes, Apr 27 '15 at 14:01
OK I figured it out. The bootgrid website says that you can initiate the grid functionality with either javascript or via attributes in the tags. In my post above, I use the tag attributes route which doesn't work. Before I posted I also tried with javascript and obviously it didn't work but my javascript had one fault in. See required below. — christoff.botes, Apr 27 '15 at 14:04
I added this JS to the html . . VERY IMPORTANT to notice: In HTML, my table has an id tag with value "tb1". In the javascript, I pass "#tb1" to the bootgrid function. I don't understand this at all, but that was my problem. — christoff.botes, Apr 27 '15 at 14:04
which `js`?? I don't think adding `js` to html head creates any problem other than problem w.r.t performance!! — Guruprasad J Rao, Apr 27 '15 at 14:06
Ok.. I think you haven't seen my answer though I posted it before!! :) Anyways!! Gald you got it.. Happy coding.. :) — Guruprasad J Rao, Apr 27 '15 at 14:13

score 2 · Accepted Answer · answered Apr 27 '15 at 14:00

2

I think you are missing this

$("#grid-basic").bootgrid();

Have you written this anywhere in your js file???

answered Apr 27 '15 at 14:00

Guruprasad J Rao

29,410
14
101
200

Yes, this is correct. That JS need to be added to the HTML HEAD. And the part that says "#grid-basic" means that your html table must have an ID tag of "grid-basic" (without the #). In my example, I called the table "tb1" in the html table tag and therefore my javarscript line looks like: $("#tb1").bootgrid(); – christoff.botes Apr 27 '15 at 14:14
But if you see your question you have given `grid-basic` as `table id` and so the above answer goes matching!! Anyhow you just changed to whatever you have implemented!! That's ok.. :) – Guruprasad J Rao Apr 27 '15 at 14:16

score 0 · Answer 2 · answered Apr 27 '15 at 14:17

The bootgrid functionality must be activated using Javascript called on the HTML page. Full page code below: Note my HTML table called "tb1" and the javascript line in the HEAD that calls bootgrid function but passed through a value of "#tb1".

@{
    var db = Database.OpenConnectionString("server=.\\SQLEXPRESS;database=BlueprintManager;trusted_connection=True", "System.Data.SqlClient");
    var selectedData = db.Query("SELECT * FROM tbBPGroups");
    var grid = new WebGrid(source: selectedData);
}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>My Site's Title</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="~/Content/bootstrap.min.css">
        <link rel="stylesheet" href="~/Content/jquery.bootgrid.min.css">
        <script src="~/Scripts/jquery-1.11.2.min.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
        <script src="~/Scripts/jquery.bootgrid.js"></script>

        <script>
            function testBtn() {
                alert("Start prettify");
                $("#tb1").bootgrid();
                alert("end prettify");
            }
        </script>
    </head>
    <body>

        <!--jQuery Bootgrid-->
        <div class="container">
            <h1>JQuery Bootgrid</h1>
            <table id="tb1" class="table table-bordered table-hover table-striped table-condensed">
            <thead>
                <tr class="active">
                    <th data-column-id="id" data-type="numeric" data-identifier="true">Group ID</th>
                    <th data-column-id="group_name" data-order="desc">Group Name</th>
                    <th data-column-id="group_desc">Group Description</th>
                </tr>
            </thead>        
            <tbody>
            @foreach(var xrow in selectedData){
                <tr>
                    <td>@xrow.GroupID</td>
                    <td>@xrow.GroupName</td>
                    <td>@xrow.GroupDesc</td>
                </tr>
            }
            </tbody>
        </table>

        <br>
        <br>

        <Button id="init-basic" type="button" class="btn btn-lg btn-primary" onclick="testBtn();">
            Activate Bootgrid Now >>>
        </button>
     </div>

    </body>
</html>

How to "enable" the jquery bootgrid grid/table

2 Answers2