BootGrid Command Buttons, Custom button bootstrap

[pabloso18]

How can I put custom button (Style Bootstrap) in the row "Command"

< th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands < /th >

< td class="text-left">
< button type="button" class="btn btn-default" aria-label="Left Align" >
< span class="glyphicon glyphicon-align-left" aria-hidden="true" >< /span >
< /button >
< /td >

When Run the Application don't show me the button in that row. any suggestion?

[ksidibe]

You should look at this example on the homepage of the plugin: http://www.jquery-bootgrid.com/Examples#command-buttons
The short story is that you need to provide a "Formatter" as a parameter when instantiating the bootgrid class and then using the "onload" event of bootgrid to bind the even handler of those button handle to the appropriate functions.

[pabloso18]

@ksidibe Do you mean in this part of the JS

formatters: {
"commands": function(column, row)
{
return "< button type="button" class="btn btn-xs btn-default command-edit" data-row-id="" + row.id + ""><span class="fa fa-pencil"> " +
"< button type="button" class="btn btn-xs btn-default command-delete" data-row-id="" + row.id + ""><span class="fa fa-trash-o">";
}
}

[ksidibe]

Yes. Also, remember to define the header of the column where you want to have the buttons like this: < th data-column-id="commands" data-formatter="commands" data-sortable="false" >Commands< /th> .

Finally, chain the onload handler as follows:
.on("loaded.rs.jquery.bootgrid", function()
{
/* Executes after data is loaded and rendered */
grid.find(".command-edit").on("click", function(e)
{
alert("You pressed edit on row: " + $(this).data("row-id"));
}).end().find(".command-delete").on("click", function(e)
{
alert("You pressed delete on row: " + $(this).data("row-id"));
});
});

[pabloso18]

@ksidibe @rstaib don't appears... I new of using bootgrid I have this:
in the HTML
< table id="grid" data-toggle="bootgrid" data-url="/currencies/" class="table table-condensed table-hover table-striped" >

< th data-column-id="commands" data-formatter="commands" data-sortable="false" data-header-css-class="customerColumn">commands < /th >

< td >
< button type="button" class="btn btn-xs btn-default command-edit" data-row-id=""> < /button>
< button type="button" class="btn btn-xs btn-default command-delete" > < /button >
< /td >

In the JS:

var grid = $("#grid").bootgrid({
ajax: true,
post: function () {
return {
id: "b0df282a-0d67-40e5-8558-c9e93b7befed"
};
},
url: "/currencies/",
formatters: {
"commands": function (column, row) {
return " < button type="button" class="btn btn-xs btn-default command-edit" data-row-id="" + row.id + ""><span class="fa fa-pencil"> " +
"< button type="button" class="btn btn-xs btn-default command-delete" data-row-id="" + row.id + "">< span class="fa fa-trash-o" >< /span>< /button>";
}
}
}).on("loaded.rs.jquery.bootgrid", function () {
/* Executes after data is loaded and rendered */
grid.find(".command-edit").on("click", function (e) {
alert("You pressed edit on row: " + $(this).data("row-id"));
}).end().find(".command-delete").on("click", function (e) {
alert("You pressed delete on row: " + $(this).data("row-id"));
});
});

[ksidibe]

You are instantiating bootgrid on the same element twice. Try deleting data-toggle="bootgrid" data-url="/currencies/" from the html table definition.

[pabloso18]

@ksidibe if I remove data-toggle="bootgrid" don't show me the records that I get from the database and show me the message "No results found"

[ksidibe]

When I had that problem, it was because of the route definition. I was using url:"/mysuperurl/". Then I changed it to url:"/mysuperurl" (without the trailing /) and that worked.
Also, you should delete this line:
post: function () {
return {
id: "b0df282a-0d67-40e5-8558-c9e93b7befed"
};
},

[pabloso18]

@rstaib @ksidibe Doesn't work, that frustrating... I do a application in ASP.NET MVC 4, my code is like this:
cshtml view/Currency/ currencyIndez.cshtml:

< div class="container-fluid">
< div class="row">
< div class="col-md-9">
< table id="grid" class="table table-condensed table-hover table-striped">
< thead>
< tr>

                    < th data-column-id="Createdate" data-order="desc" data-css-class="cell" data-header-css-class="customerColumn">Create Date </th>
                    < th data-column-id="commands" data-formatter="commands" data-sortable="false" data-header-css-class="customerColumn">Commands </th>

                < /tr>
            < /thead>
            < tbody>

                @if (Model != null)
                {

                    foreach (var item in Model)
                    {
                    < tr>
                        < td>@item.CREATE_DATE</td>
                        < td >
                            <button type="button" class="btn btn-xs btn-default command-edit" ><span class="fa fa-pencil"></span></button> 
                            <button type="button" class="btn btn-xs btn-default command-delete" ><span class="fa fa-trash-o"></span></button>
                        < /td>
                    < /tr>
                    }
                }
            < /tbody>
        < /table>
    < /div>
< /div>

< /div>

JS:
var grid = $("#grid").bootgrid({
ajax: true,
url: "/currencies",
formatters: {
"commands": function (column, row) {
return "< button type="button" class="btn btn-xs btn-default command-edit" data-row-id="" + row.id + "">< span class="fa fa-pencil"> < /button> " +
"< button type="button" class="btn btn-xs btn-default command-delete" data-row-id="" + row.id + ""><span class="fa fa-trash-o"> < /button>";
}
}
}).on("loaded.rs.jquery.bootgrid", function () {
/* Executes after data is loaded and rendered */
grid.find(".command-edit").on("click", function (e) {
alert("You pressed edit on row: " + $(this).data("row-id"));
}).end().find(".command-delete").on("click", function (e) {
alert("You pressed delete on row: " + $(this).data("row-id"));
});
});

[ksidibe]

There are two issues I can see with you code. First, when using bootgrid, you do not include the tags in you table. So, all you need is:
< table id="grid" class="table table-condensed table-hover table-striped">
< thead>
< tr>
< th data-column-id="Createdate" data-order="desc" data-css-class="cell" data-header-css-class="customerColumn">Create Date
< th data-column-id="commands" data-formatter="commands" data-sortable="false" data-header-css-class="customerColumn">Commands
< /tr>
< / head>
</ table>

So, in you cshtml file, you need to delete:
```html
< tr>
                      < td>@item.CREATE_DATE</td>
                        < td >
                            <button type="button" class="btn btn-xs btn-default command-edit" ><span class="fa fa-pencil"></span></button> 
                            <button type="button" class="btn btn-xs btn-default command-delete" ><span class="fa fa-trash-o"></span></button>
                        < /td>
< /tr>

2- Whatever url you are referring to when instantiating the bootgring class, that url must return json. NO HTML. I see that in your csHtml, you are iterating through your model an manually creating the elements. You can't do that. Here's what I recommend.
Option A (if you want to use the same URL to service both requests for html and JSON): In your controller, check to see if the Request is an Ajax Request the you should serialize the model into JSON and return that. If the request is not Ajax then you can fetch the model and pass it the view.
An example of how that can be done. place this at the top of you controller: using System.Web.Script.Serialization;

then add this to the method handling the request:

public ActionResult SomeActionMethod() 
{
.
.
.
.
.
   if (Request.IsAjaxRequest())
   {
     var jsonSerialiser = new JavaScriptSerializer();
     var json = jsonSerialiser.Serialize(myListOfModels);
     return json;
   }
.
.
.
.
.

}

Option B: create a completely separate route that only returns JSON, and call that URL instead
i Here's an example(from the plugin's page) of the data that must be returned by the URL: {
"current": 1,
"rowCount": 10,
"rows": [
{
"id": 19,
"sender": "123@test.de",
"received": "2014-05-30T22:15:00"
},
{
"id": 14,
"sender": "123@test.de",
"received": "2014-05-30T20:15:00"
},
...
],
"total": 1123
}

[ksidibe]

By the way, one small update. You should set the json key rows to the array of models. You should also set rowCount to modelList.count() and finally properly set the value of total.

[pabloso18]

@ksidibe In my controller have this method with the option A

public ActionResult CurrencyIndex()
{

        var currenlist = (from r in context.currency select r);

        if (Request.IsAjaxRequest())
        {
            var jsonSerialiser = new JavaScriptSerializer();
            var json = jsonSerialiser.Serialize(currenlist.ToList());
            return View(json);
        }

        return View(currenlist.ToList());
    }

how in the view get the values model without iterating the model and manually creating the elements

[ksidibe]

When servicing a request from bootgrid, you are not supposed to return a view. You are supposed to return a JSON.
Also, I noticed that in your Javascript, your command formatter returns an empty string. You should have:

formatters: {
        "commands": function(column, row)
        {
            return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.id + "\"><span class=\"fa fa-pencil\"></span></button> " + 
                "<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" data-row-id=\"" + row.id + "\"><span class=\"fa fa-trash-o\"></span></button>";
        }
    }

Finally, here's what I would do if I were you. Create a URL that returns this static JSON object:

{
  "current": 1,
  "rowCount": 10,
  "rows": [
    {
      "id": 19,
      "sender": "123@test.de",
      "received": "2014-05-30T22:15:00"
    },
    {
      "id": 14,
      "sender": "123@test.de",
      "received": "2014-05-30T20:15:00"
    }
  ],
  "total": 1123
}

Make the table work with that static dummy data. Then you can rewrite your controller properly.

[pabloso18]

@ksidibe Achieve That worked with static dummy data, it is advance. now I did this method

public ActionResult listCurrencyJson() {
var json = "";
if (Request.IsAjaxRequest())
{
var jsonSerialiser = new JavaScriptSerializer();
json = jsonSerialiser.Serialize(context.currency.ToList());
return Json(json, JsonRequestBehavior.AllowGet);
}
return Json(json, JsonRequestBehavior.AllowGet);
}

And in the JS call that method

var grid = $("#grid").bootgrid({
ajax: true,
url: "/Currency/listCurrencyJson",
formatters: {
"commands": function(column, row)
{
return "< button type="button" class="btn btn-default btn-lg delete" data-row-id="" + row.id + "">< span class="glyphicon glyphicon-star" aria-hidden="true"> < /span> Star < /button>" +
"< button type="button" class="btn btn-xs btn-default command-edit" data-row-id="" + row.id + "">< span class="fa fa-pencil"> < /span> < /button> " +
"< button type="button" class="btn btn-xs btn-default command-delete" data-row-id="" + row.id + ""> < span class="fa fa-trash-o"> < /span> < /button>";
}
}
}).on("loaded.rs.jquery.bootgrid", function () {
/* Executes after data is loaded and rendered */
grid.find(".command-edit").on("click", function (e) {
alert("You pressed edit on row: " + $(this).data("row-id"));
}).end().find(".delete").on("click", function (e) {
alert("You pressed delete on row: " + $(this).data("row-id"));
});
});

But when run, give a error, Unhandled exception at line 565, column 9 in http://localhost:58969 /Scripts/jquery.bootgrid.js

0x800a138f - JavaScript runtime error: Unable to get property 'length' of undefined or null reference

function renderRows(rows) , show me the parameters "rows" is "undefined"

[ksidibe]

Like I mentioned in my previous post, the keys of the should include "rows", "current", "rowCount". Your json does not contain thoses keys. That's what the error is saying.
the code should be:

public ActionResult listCurrencyJson() {
var json = "";
if (Request.IsAjaxRequest())
{
var keyValues = new Dictionary<string, Currency>
               {
                   { "rows", context.currency.ToList()},
                   { "rowCount", context.currency.count() },
                   {"current", Request.params.getValue("current")}
               };

JavaScriptSerializer js = new JavaScriptSerializer();
string json = js.Serialize(keyValues); 
return Json(json, JsonRequestBehavior.AllowGet);
}
return Json(json, JsonRequestBehavior.AllowGet);
}

Finally, since the issue you are having is not related to the bootgrid plugin, and in order to keep this forrum as useful as possible, I recommend that you post a question on Stackoverflow. You can post the link here and I can try an help you there instead.

[pabloso18]

@ksidibe I have error with the dictionary but I open a post in the Stackoverflow for your help

http://stackoverflow.com/questions/28346446/info-from-database-and-transform-in-json-to-show-in-bootgrid-in-the-view

[pabloso18]

@ksidibe when I serializer the keyValues in the row have DateTime Column and show me in the gird /Date(1422943200000)/ and not the normal format 2/03/2015 12.00.00 PM

[ksidibe]

Can you post the skeleton of the Currency class?

[pabloso18]

@ksidibe in the currency class don't have the column of the database that is a DateTime. I get the data of that specific column directly of the context of entity framework

[ksidibe]

Let's step back for a minute. What data are you trying to display?

[pabloso18]

@ksidibe I get data from the context of entity framework, table currency. I want to display the date of the column "CreateDate" that type of that column is DateTime

in keyValues get this result and show me a normal format
CREATE_DATE {2/3/2015 12:00:00 AM}
but when string json = js.Serialize(keyValues); the result of the Json is this
"CREATE_DATE":"/Date(1422943200000)/
And the bootgrid show me that result, I want to show the normal format

[rstaib]

@pabloso18 Please ask here only questions regarding bootgrid not ASP.Net MVC specific questions and don't mixup too many questions so it is easier for people to help you. For questions regarding ASP.Net MVC please go to Stackoverflow. Thanks!

@ksidibe Thanks for helping @pabloso18

[byeblogs]

how to make entire row using font-weight:bold ????????? i tired to get search... remember just one row.???