Select All CheckBox Not Working

6 posts, 0 answers
  1. Rohit
    Rohit avatar
    14 posts
    Member since:
    Jan 2015

    Posted 20 Jan 2015 Link to this post

    Hi All,

    In ASP.NET MVC application we are using Kendo Grid, the grid is bind to a data model.
    We have a Checkbox column and CheckAll check box at the header.

    At the initial page load, if I click on CheckAll CheckBox it works fine but after that event the checkall doesnt work. Not sure where I am doing wrong.

     I have seperate javascript file which has toggleSelection() function.

    toggleSelection = function() {
        var chk = document.getElementById('allBox').checked;
        $(".box").attr("checked", chk);
    }

    Following is my .cshtml code for grid.

    <body>

        <link href="@Url.Content("~/Content/kendo/kendo.common.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/kendo.default.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/kendo.dataviz.default.min.css")" rel="stylesheet" type="text/css" />

       @using (Html.BeginForm("ReplaySelectedInboundMessages", "Home"))
       {
        <div id="gridContent">
            <h1>All Messages</h1>  
        @(Html.Kendo().Grid<ViaPath.MessageReplay.MvcApp.Models.LogModel>(Model)
        .Name("gridTable")   
        .HtmlAttributes(new {style = "font-family: verdana,arial,sans-serif; font-size: 11px;color: #333333;border-color: #999999;"})   
        .Columns(columns => 
            {
              columns.Template(@<text><input class="box"  id="assignChkBx" name="assignChkBx" type="checkbox" value="@item.LogID"/></text>).HeaderTemplate(@<text><input class="selectAll" type="checkbox" id="allBox" onclick="toggleSelection()"/></text>).Width(20);
               

                columns.Bound(p => p.LogID).Template(p => Html.ActionLink(((string)p.LogID), "MessageDetails", new { logid = p.LogID })).Width(200);
                columns.Bound(p => p.ReceivePortName).Width(100).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
                columns.Bound(p => p.SendPortName).Width(100);
                columns.Bound(p => p.loggedDate).Width(100);
                columns.Bound(p => p.ControlID).Width(100);
                columns.Bound(p => p.SenderID).Width(100);
                columns.Bound(p => p.ReceiverID).Width(100);
                columns.Bound(p => p.InterchangeID).Width(100);
                columns.Bound(p => p.ReplayedCount).Width(100);
                columns.Bound(p => p.RetryCount).Width(100);
                columns.Bound(p => p.AckCode).Width(20);
            })
                                                                      .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
                                                                      .Pageable()
                                                                      .Sortable()
                                                                      .Scrollable(src => src.Height(430))
                                                                      .Resizable(resize => resize.Columns(true))

                                                                      )

             <br />
            <br />
            <input type="Submit" name="btnReplayMessage" value="Replay" title="Replay Message" \>
    </div>  
          
           
       }
    </body>

  2. Al
    Al avatar
    1 posts
    Member since:
    Aug 2014

    Posted 20 Jan 2015 Link to this post

    Not sure if you are running into the same problem I just had, but turn off "sortable" for that column and see if the "select all" check box works.
  3. Rohit
    Rohit avatar
    14 posts
    Member since:
    Jan 2015

    Posted 21 Jan 2015 Link to this post

    Thanks Al,

    Yes I did try disabling the whole sorting to the table and also to that column, still it doesnt work. Any ideas or clues will be great help.

    Cheers
    Rohit
  4. Rohit
    Rohit avatar
    14 posts
    Member since:
    Jan 2015

    Posted 21 Jan 2015 Link to this post

    Hi Telerik,

    Request you to kindly look into my problem. Basically I am trying to write a POC application and once proved we will be going ahead with the purchase of the licence.

    I am still stuck with the select All check box problem. I have attached the screen shot of the web application. Any help will be greatly appreciated. 



  5. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 22 Jan 2015 Link to this post

    Hello,

    Please try with the prop method instead of attr and let me know if the problem persists:
    toggleSelection = function() {
        var chk = document.getElementById('allBox').checked;
        $(".box").prop("checked", chk);
    }


    Regards,
    Daniel
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Rohit
    Rohit avatar
    14 posts
    Member since:
    Jan 2015

    Posted 22 Jan 2015 Link to this post

    Thanks Daniel,

    Yes, it worked.

Back to Top