This is a migrated thread and some comments may be shown as answers.

add CheckBox in header of MVC grid with check all option

1 Answer 96 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
vijay
Top achievements
Rank 1
vijay asked on 14 Apr 2011, 05:19 AM
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..

1 Answer, 1 is accepted

Sort by
0
vijay
Top achievements
Rank 1
answered on 15 Apr 2011, 09:22 PM
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>

 

 

Tags
Grid
Asked by
vijay
Top achievements
Rank 1
Answers by
vijay
Top achievements
Rank 1
Share this question
or