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>
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>
5 Answers, 1 is accepted
0
Al
Top achievements
Rank 1
Rank 1
answered on 20 Jan 2015, 09:44 PM
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.
0
Rohit
Top achievements
Rank 1
Rank 1
answered on 21 Jan 2015, 09:19 AM
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
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
0
Rohit
Top achievements
Rank 1
Rank 1
answered on 21 Jan 2015, 03:47 PM
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.
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.
0
Hello,
Please try with the prop method instead of attr and let me know if the problem persists:
Regards,
Daniel
Telerik
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.
0
Rohit
Top achievements
Rank 1
Rank 1
answered on 22 Jan 2015, 01:27 PM
Thanks Daniel,
Yes, it worked.
Yes, it worked.