CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
christoff.botes
christoff.botes

Reputation: 91

How to "enable" the jquery bootgrid grid/table

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:

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

Upvotes: 2

Views: 4937

Answers (2)

christoff.botes
christoff.botes

Reputation: 91

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>

Upvotes: 0

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

I think you are missing this

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

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

Upvotes: 2

Related Questions