="width: 200px">
                                    <a href="javascript:void(0);"
                                        title="#= owner.get_sortExpressions().getSortOrder('CategoryID') #"
                                        onclick="$find('#= owner.get_id() #').sort('CategoryID');">CategoryID</a>
                                </th>
                                <th style="width: 200px">
                                    <a href="javascript:void(0);"
                                        title="#= owner.get_sortExpressions().getSortOrder('ReorderLevel') #"
                                        onclick="$find('#= owner.get_id() #').sort('ReorderLevel');">ReorderLevel</a>
                                </th>
                                <th style="width: 20px">
                                    <a href="javascript:void(0);"
                                        title="#= owner.get_sortExpressions().getSortOrder('Discontinued') #"
                                        onclick="$find('#= owner.get_id() #').sort('Discontinued');">Discontinued</a>
                                </th>
                            </tr>
                        </thead>
                        <tbody id="itemPlaceHolder">
                        </tbody>
                    </table>
                    <div id="pager" class="RadDataPager RadDataPager_Default" style="border:none">
                        <div class="rdpWrap">
                            <input type="button" class="rdpPageFirst" onclick="$find('#=owner.get_id()#').page('First')"></input>
                            <input type="button" class="rdpPagePrev" onclick="$find('#=owner.get_id()#').page('Prev')"></input>
                        </div>
                        <div class="rdpWrap">
                            <input type="button" class="rdpPageNext" onclick="$find('#=owner.get_id()#').page('Next')"></input>
                            <input type="button" class="rdpPageLast" onclick="$find('#=owner.get_id()#').page('Last')"></input>
                        </div>
                    </div>
                </div>
            </LayoutTemplate>
            <ItemTemplate>
                <tr class="rlvI #= isSelected? 'rlvISel' : '' #"
                    onclick="$find('#= owner.get_id() #').toggleSelection(#= index #)"
                    style="cursor:default">
                    <td>
                        <input type="checkbox" #= isSelected? 'checked="checked"' : '' # />
                    </td>
                    <td>
                        #= ProductID #
                    </td>
                    <td>
                        #= ProductName #
                    </td>
                    <td>
                        #= format(UnitPrice, "{0:C}") #
                    </td>
                    <td>
                        #= CategoryID #
                    </td>
                    <td>
                        #= ReorderLevel #
                    </td>
                    <td>
                        <input type="checkbox" disabled="disabled" #= Discontinued? "checked='checked'" : ""#></input>
                    </td>
                </tr>
            </ItemTemplate>
            <DataService Location="~/Services/GridWcfService.svc"
                         DataPath="GetDataAndCount"
                         SortParameterType="Linq"
                         FilterParameterType="Linq" />
        </DataBinding>
        <ClientEvents OnTemplateDataBound="templateDataBound" />
    </ClientSettings>
</telerik:RadListView>

<%--We add a hidden data pager to have its styles applied on the page--%>
<telerik:RadDataPager RenderMode="Lightweight" ID="RadDataPager1" runat="server" style="display:none"></telerik:RadDataPager>
````
````JavaScript
<script type="text/javascript">
    function toggleAllItems(checkbox, listView) {
        if (checkbox.checked) {
            listView.selectAllItems();
        }
        else {
            listView.clearSelectedItems();
        }
    }

    function templateDataBound(sender, args)
    {
        var headerCheckBox = document.getElementById("headerCheckBox");
        if (headerCheckBox)
        {
            headerCheckBox.checked = sender.get_selectedIndexes().length === sender.get_dataSource().length;
        }
    }
</script>
````


## Binding to OData Services

Binding RadListView to OData service is quite straightforward. The only two required parameters are **Location** and **HttpMethod="Get"**. OData services require GET requests in RadListView. Additionally, if a remote OData request is accessed (and it supports JSONP), **ResponseType="JSONP"** is also added to ensure RadListView can make a remote service request:



````ASP.NET
<telerik:RadListView ID="RadListView1" runat="server" Skin="Default"
    AllowPaging="true" AllowMultiItemSelection="true" PageSize="8"
    AllowMultiFieldSorting="true" AllowNaturalSort="false">
    <ClientSettings>
        <DataBinding ItemPlaceHolderID="itemPlaceHolder">
            <LayoutTemplate>
                <div class="RadListView RadListView_Default" style="width:800px;">
                    <table style="width: 100%" cellspacing="0">
                        <thead>
                            <tr class="rlvHeader">
                                <th style="width: 20px">
                                    <input type='checkbox'
                                        id="headerCheckBox"
                                        onclick="toggleAllItems(this, $find('#= owner.get_id() #'));"
                                        #= owner.get_dataSource().length === owner.get_selectedIndexes().length? "checked='checked'" : "" #></input>
                                </th>
                                <th style="width: 20px">
                                    <a href="javascript:void(0);"
                                        title="#= owner.get_sortExpressions().getSortOrder('ProductID') #"
                                        onclick="lv.sort('ProductID');">ProductID</a>
                                </th>
                                <th style="width:350px">
                                    <a href="javascript:void(0);"
                                        title="#= owner.get_sortExpressions().getSortOrder('ProductName') #"
                                        onclick="lv.sort('ProductName');">ProductName</a>
                                </th>
                                <th style="width: 20px">
                                    <a href="javascript:void(0);"
                                        title="#= owner.get_sortExpressions().getSortOrder('UnitPrice') #"
                                        onclick="lv.sort('UnitPrice');">UnitPrice</a>
                                </th>
                                <th style="width: 200px">
                                    <a href="javascript:void(0);"
                                        title="#= owner.get_sortExpressions().getSortOrder('CategoryID') #"
                                        onclick="lv.sort('CategoryID');">CategoryID</a>
                                </th>
                                <th style="width: 200px">
                                    <a href="javascript:void(0);"
                                        title="#= owner.get_sortExpressions().getSortOrder('UnitsInStock') #"
                                        onclick="lv.sort('UnitsInStock');">UnitsInStock</a>
                                </th>
                                <th style="width: 20px">
                                    <a href="javascript:void(0);"
                                        title="#= owner.get_sortExpressions().getSortOrder('Discontinued') #"
                                        onclick="lv.sort('Discontinued');">Discontinued</a>
                                </th>
                            </tr>
                        </thead>
                        <tbody id="itemPlaceHolder">
                        </tbody>
                    </table>
                    <div id="pager" class="RadDataPager RadDataPager_Default" style="border:none">
                        <div class="rdpWrap">
                            <input type="button" class="rdpPageFirst" onclick="$find('#=owner.get_id()#').page('First')"></input>
                            <input type="button" class="rdpPagePrev" onclick="$find('#=owner.get_id()#').page('Prev')"></input>
                        </div>
                        <div class="rdpWrap rdpNumPart">
                            #= renderNumericPager(owner) #
                        </div>
                        <div class="rdpWrap">
                            <input type="button" class="rdpPageNext" onclick="$find('#=owner.get_id()#').page('Next')"></input>
                            <input type="button" class="rdpPageLast" onclick="$find('#=owner.get_id()#').page('