Using bootstrap toggle with Awesome MVC Grid

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();
});

Omu · Accepted Answer · 2015-02-26T10:41:04.103

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)

Thanks Omu! I'm binding it to a model thus the name column, as for the grouping, it's part of the requirements. Thanks for the width tip, it's a neat trick to keep one without width spec. — jinxed_coder, Mar 01 '15 at 06:32

Using bootstrap toggle with Awesome MVC Grid

1 Answers1