Using bootstrap toggle with Awesome MVC Grid - asp.net-mvc

Question

I'm trying to incorporate a bootstrap toggle into a column of my AwesomeMVC Grid (http://demo.aspnetawesome.com/GridDemo) but the toggle doesn't get rendered correctly even after initializing the bootstrap toggle. This is because the AwesomeMVC grid gets rendered after page load.
I don't want to implement a timeout in initializing the bootstrap toggles as Grid loading times may be different.
Has anyone tried implementing any similar bootstrap plugin with AwesomeMVC?
Here's my code sample.
View
#(Html.Awe().Grid("UserList")
.Url(Url.Action("GetUser", "User"))
.Persistence(Persistence.Local)
.Selectable(SelectionType.None)
.Parent("pagesize", "pagesize")
.Columns(
new Column { Name = "Name", Header = "FullName", Width = 72, SortRank = 1, Sort = Sort.Asc },
new Column { Name = "Active", Header = "Active", Width = 60, ClientFormatFunc = "CustomActive", Group = true}
))
Javascript
//Custom content for Active ClientFormatFunc
var CustomActive = function (GetUserList_Result) {
return "<input type=\"checkbox\" class=\"checkbox-toggle\" data-toggle=\"toggle\" data-on=\"Yes\" data-off=\"No\" data-size=\"small\">";
}
$(function () {
$(".checkbox-toggle").bootstrapToggle();
});

Answer 1

there's the aweload event that you can hook up to, also when you render the checkbox I think you need to set its checked state, so you should end up with something like this:
#(Html.Awe().Grid("UserList")
.Url(Url.Action("GetUser", "User"))
.Persistence(Persistence.Local)
.Parent("pagesize", "pagesize")
.Columns(
new Column { Name = "Name", Header = "FullName"},
new Column { ClientFormatFunc = "CustomActive", Width = 75}))
<script type="text/javascript">
$(function () {
$('#UserList').on('aweload', function () {
$(this).find(".checkbox-toggle").bootstrapToggle();
});
});
//Custom content for Active ClientFormatFunc
var CustomActive = function (model) {
var checked = model.Active ? 'checked = "checked"' : '';
return '<input type="checkbox" ' + checked + ' class="checkbox-toggle" data-toggle="toggle" data-on="Yes" data-off="No" data-size="small">';
};
<script>
I also removed .Selectable(SelectionType.None) because it is like that by default, and also I see that you group by a boolean column (active) not sure if that makes sense, it will just split your grid in 2 groups, Column.Name is not required, it is used for binding to model for sorting/grouping, and it's better to always have at least 1 column without width (if you set width to all columns and the grid width doesn't match they work as percentages)