add CheckBox in header of MVC grid with check all option

[vijay]

I am using Telerick Grid control in MVC3 application.
1.I could able to added a checkbox in column using client template.But i want to add Checkbox in the Column header which should act as check all option.
2.Check box selection should persist on paging..
Iam using ajax binding
can you please send the cshtml(razor) code to solve this..

[vijay]

I have found the solution....to persist the state of checkbox...here below are the code. Any idea on adding checbox to header and act as check all.

@model

 

IEnumerable<Class>

 

 

@{ Html.Telerik().Grid(Model)

 

.Name(

 

"Grid")

 

 

.ClientEvents(events => events

 

.OnRowDataBound(

 

"onRowDataBound"))

 

 

.Columns(columns =>

 

{

 

columns.Bound(o => o.Id)

 

.Sortable(

 

false)

 

 

.Filterable(

 

false)

 

 

.ClientTemplate(

 

"<input type='checkbox' name='checkedRecords' onclick='MarkSelection()' value='<#= Id #>' />")

 

 

.Title(

 

"")

 

 

.Width(36)

 

.HtmlAttributes(

 

new { style = "text-align:center" });

 

 

columns.Bound(o => o.Title).Width(100);

 

columns.Bound(o => o.Description).Width(200);

 

})

 

.DataBinding(dataBinding => dataBinding.Ajax()

 

.Select(

 

"Action Method", "Controller Name"))

 

 

.Scrollable()

 

.Pageable()

 

.Sortable()

 

.Filterable()

 

.Render()

 

;}

 

 

 

<p>

 

 

here are Jquery which is needed.

 

 

 

 

 

 

<script type="text/javascript">

 

 

 

var selectedRows = new Array();

 

 

 

 

function onRowDataBound(e) {

 

 

 

 

var id = $(e.row).find('input:checkbox').val();

 

 

 

 

if ($.inArray(id, selectedRows) > -1) {

 

 

 

 

$(e.row).find(

 

'input[type="checkbox"]')[0].checked = true;

 

 

}

 

}

 

 

 

function MarkSelection() {

 

 

$(

 

':checked').each(function (i) { var id = $(this).val(); selectedRows.push(id); });

 

 

$.unique(selectedRows)

 

 

 

}

 

 

 

</script>

 

 

 

 

</p>