I have a ListView using automatic client-side databinding to a web service. Additionally, there is a DataPager placed just after the ListView in the page's markup as in the code pasted below.

When the page loads, the ListView shows data, which means the automatic client-side databinding is working, but the DataPager is showing nothing i.e. there is no pager visible even though there is more than one page of records in the database.

Is there a sample that uses a similar scenario of DataPager with a ListView? I tried searching online, but couldn't find any.

<telerik:RadListView ID="RadListView1" runat="server" RenderMode="Auto" AllowPaging="true" PageSize="5" ItemPlaceholderID="items">
    <ClientSettings>
        <ClientEvents OnDataBinding="RadListView1_Comments_DataBinding" OnDataBound="RadListView1_Comments_DataBound" OnDataSourceResolved="RadListView1_Comments_DataSourceResolved" />
        <DataBinding ItemPlaceHolderID="items">
            <LayoutTemplate>
                        <label for="" class="comments">Comments</label>
                        <div id="items"></div>
                       <%--<div id="pagerContainer"></div>--%>
            </LayoutTemplate>
            <ItemTemplate>
                       <div>
                            <div class="subject">#=Subject#</div>
                            <div class="comment">#=CommentText#</div>
                            <div class="author">by #=Author# on #=CreateDate# </div>
                      </div> 
            </ItemTemplate>
            <EmptyDataTemplate>
                        <div>
                            No Comments have been posted for this page
                        </div>
            </EmptyDataTemplate>
            <DataService Location="~/CommentsService.asmx" DataPath="GetComments" FilterParameterType="Sql" SortParameterType="Sql" CountPropertyName="Count"></DataService>
        </DataBinding>
    </ClientSettings>
</telerik:RadListView>
<telerik:RadDataPager RenderMode="Auto" ID="RadDataPager1" runat="server" PagedControlID="RadListView1">
    <Fields>
        <telerik:RadDataPagerButtonField FieldType="FirstPrev"></telerik:RadDataPagerButtonField>
        <telerik:RadDataPagerButtonField FieldType="Numeric"></telerik:RadDataPagerButtonField>
        <telerik:RadDataPagerButtonField FieldType="NextLast"></telerik:RadDataPagerButtonField>
        <telerik:RadDataPagerGoToPageField></telerik:RadDataPagerGoToPageField>
    </Fields>
</telerik:RadDataPager>

I tried adding the following JavaScript code in the client-side databinding event of ListView so that all needed properties of DataPager get set, but still the DataPager shows nothing.

function RadListView1_Comments_DataBound(sender, args) {
    //set datapager properties
    let dataPager = $find(pageBag.radDataPager1Id);
    dataPager.set_currentPageIndex(sender._currentPageIndex);
    dataPager._totalRowCount = sender._virtualItemCount;
    dataPager.set_pageSize(sender._pageSize);
    dataPager._pageCount = Math.ceil(dataPager._totalRowCount / dataPager._pageSize);
    dataPager._startRowIndex = startRowIndex;
}

I am creating a mobile website using radcomboboxes inside of update controls that are set to autopostback = true.  All of the controls work except on the page's initial load the UI elements are enlarged and look more like buttons.  They are still able to be selected and after the controls postback the elements still do not go back to a normal size. Only after a postback from another control do the UI elements shrink down to a normal size.  

I have tested the radcombobox with checkboxes enabled outside of the update panel and this behavior does not change.  I have a master page that contains jQuery files located in the header, and when I remove one of the js files, the problem disappears with the UI elements disappearing.  Can anyone help me figure out what is preventing the UI elements from rendering properly?

On Load:

After postback:

Hello
  In the ListView, I need to divide the data into 4 groups (GroupItemCount=4)

and the header of each group should have a column name like the needed.png picture

But no matter how hard I tried, I couldn't set the listview so that the names of the columns in each group are displayed, and the output is like the picture show.png

Help me please

     <telerik:RadListView ID="RadListView1" runat="server" ItemPlaceholderID="ph1" 
                   ClientIDMode="Static"  onsorting="RadListView1_Sorting" 
                   DataKeyNames="SiteID" DataSourceID="SqlDataSource1" AllowMultiFieldSorting="true">
               <ItemTemplate>
                    <tr align="left">
                        <td align="center">
                            <asp:Label ID="Label1" Text='<%#Eval("SiteID") %>' runat="server" />
                        </td>
                        <td align="left">
                            <asp:Label ID="Label2" Text='<%#Eval("DisplayName") %>' runat="server" />
                        </td>
                        <td >
                            <asp:Label ID="Label3" Text='<%#Eval("RegularHrs") %>' runat="server" />
                        </td>
                        <td >
                            <asp:Label ID="Label4" Text='<%#Eval("OverTimeHrs") %>' runat="server" />
                        </td>
                    </tr>
                </ItemTemplate>  
                <LayoutTemplate>  
                <center>
                    <table cellpadding="10" cellspacing="0" class="stripe" width="100%" id="tblResults">
                        <tr>
                            <td width="50" align="center"><a>ID</a></td>
                            <td width="100" align="left"><a href="#" onclick="RadListView1_Sorting();return false;">Site Name</a></td>
                            <td align="left"><h3>RH</h3></td>
                            <td width="75" align="left"><h3>OTH</h3></td>
                            <td width="135" align="left"><h3>Sent To</h3></td>
                        </tr> 
                        <asp:PlaceHolder ID="ph1" runat="server" />                                               
                    </table>
                    </center>
                                                   
                </LayoutTemplate>
                </telerik:RadListView>

I have al ListView with an internal datasource defined as:

                           <telerik:RadListView ID="fileList" runat="server" ItemPlaceholderID="FileInfoPlaceHolder"
                              Width="100%" EnableEmbeddedSkins="false" AllowMultiFieldSorting="False" AllowPaging="true" PageSize="50">

                              <LayoutTemplate>
                                 <div style="width: 100%">
                                    <table>
                                       <thead>
                                          <tr>
                                             <td class="lvtop">
                                                <img alt="" src="assets/spacer.gif" height="1" width="400" /></td>
                                             <td class="lvtop">
                                                <img alt="" src="assets/spacer.gif" height="1" width="120" /></td>
                                             <td class="lvtop lvtopr">
                                                <img alt="" src="assets/spacer.gif" height="1" width="90" /></td>
                                          </tr>
                                          <tr>
                                             <td class="lvhead" style="white-space: nowrap">Datei</td>
                                             <td class="lvhead" style="white-space: nowrap">Aktion</td>
                                             <td class="lvhead lvheadr" style="text-align: center; width: 80px; white-space: nowrap">Start</td>
                                          </tr>
                                          <tr>
                                             <td class="lvhead">
                                                <img alt="" src="assets/spacer.gif" height="1" width="400" /></td>
                                             <td class="lvhead">
                                                <img alt="" src="assets/spacer.gif" height="1" width="120" /></td>
                                             <td class="lvhead lvheadr">
                                                <img alt="" src="assets/spacer.gif" height="1" width="90" /></td>
                                          </tr>
                                          <tr>
                                             <td colspan="3" style="text-align: center">
                                                <telerik:RadDataPager ID="fileList_pagetop" runat="server" Culture="de-DE" SEOPagingQueryPageKey="" CssClass="lvhead" PagedControlID="artList" Skin="Outlook" PageSize="50"
                                                   BackColor="#F0F0F0" BorderColor="#D0D0D0" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana, Arial, Sans serif" ForeColor="#0456a8" Font-Size="11px">
                                                   <Fields>
                                                      <telerik:RadDataPagerButtonField FieldType="FirstPrev" FirstButtonText="Erste" LastButtonText="Zurück" />
                                                      <telerik:RadDataPagerGoToPageField CurrentPageText="Seite" TotalPageText="von" SubmitButtonText="Zeigen" TextBoxWidth="40" />
                                                      <telerik:RadDataPagerButtonField FieldType="NextLast" NextButtonText="Nächste" LastButtonText="Letzte" />
                                                      <telerik:RadDataPagerPageSizeField PageSizeText="Dateien pro Seite:" PageSizeControlType="RadDropDownList" HorizontalPosition="RightFloat" PageSizes="10,20,50" />
                                                   </Fields>
                                                </telerik:RadDataPager>
                                             </td>
                                          </tr>
                                       </thead>
                                       <tbody>
                                          <tr id="FileInfoPlaceHolder" runat="server">
                                          </tr>
                                       </tbody>
                                       <tfoot>
                                          <tr>
                                             <td colspan="3" style="text-align: center">
                                                <telerik:RadDataPager ID="fileList_pagebottom" runat="server" Culture="de-DE" SEOPagingQueryPageKey="" CssClass="lvhead" PagedControlID="artList" Skin="Outlook" PageSize="50"
                                                   BackColor="#F0F0F0" BorderColor="#D0D0D0" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana, Arial, Sans serif" ForeColor="#0456a8" Font-Size="11px">
                                                   <Fields>
                                                      <telerik:RadDataPagerButtonField FieldType="FirstPrev" FirstButtonText="Erste" LastButtonText="Zurück" />
                                                      <telerik:RadDataPagerGoToPageField CurrentPageText="Seite" TotalPageText="von" SubmitButtonText="Zeigen" TextBoxWidth="40" />
                                                      <telerik:RadDataPagerButtonField FieldType="NextLast" NextButtonText="Nächste" LastButtonText="Letzte" />
                                                      <telerik:RadDataPagerPageSizeField PageSizeText="Dateien pro Seite:" PageSizeControlType="RadDropDownList" HorizontalPosition="RightFloat" PageSizes="10,20,50" />
                                                   </Fields>
                                                </telerik:RadDataPager>
                                             </td>
                                          </tr>
                                       </tfoot>
                                    </table>
                                 </div>
                              </LayoutTemplate>

                              <ItemTemplate>
                                 <tr>
                                    <td class="lvcell">
                                       <%# Container.DataItem %>
                                    </td>
                                    <td class="lvcell"></td>
                                    <td class="lvcell lvcellr" style="text-align: justify; width: 90px; white-space: nowrap">
                                       <asp:ImageButton ID="GotoButton" CommandName="Goto" CommandArgument="goto" runat="server" ImageUrl='~/assets/moveright.gif' Width="25" Height="25" ImageAlign="AbsMiddle" ToolTip="Gehe zur Produktanzeige der E-ISBN" />
                                    </td>

                                 </tr>
                              </ItemTemplate>

                              <EmptyDataTemplate>
                                 <table style="width: 70%">
                                    <tr>
                                       <td class="labelcol"><i>Keine Dateien im Verzeichnis gefunden</i></td>
                                    </tr>
                                 </table>
                              </EmptyDataTemplate>

                              <ValidationSettings EnableModelValidation="False" EnableValidation="False" />

                           </telerik:RadListView>

This is the code to set the datasource:

   Protected Sub fileList_NeedDataSource(ByVal source As Object, ByVal e As Telerik.Web.UI.RadListViewNeedDataSourceEventArgs) Handles fileList.NeedDataSource

      Dim filepath As String = appldata.getSYSTEMParam("ChapterUploadPath")
      Dim files As New ArrayList(Directory.GetFiles(filepath, "*.xlsx").Length)
      'Dim files As New List(Of String)

      For Each f As String In Directory.GetFiles(filepath, "*.xlsx")
         files.Add(Path.GetFileName(f))
      Next

      fileList.DataSource = files

      fileDirectory.Text = "Alle Dateien im Verzeichnis " & filepath & ":"

   End Sub

The effect is the same if I use list(of string) instead of arrayList.

The number of files read from the directory is 10. The ListView shows these then lines but indicates 1714 pages with 10 entries each. Paging is possible but only the page number changes, the list of 10 always shows in the same form.

How to reduce the listview to the real number of items present?

I am using Radlistview control drag and drop functionality. Radlistview items are drag and dropping into Repeater control. this functionality working in chrome older version but not working in latest chrome version. I have verified my code..args.get_destinationElement().id;  method returning repeater id   in older version  but in newer version this method returning Radlistview control id. so destination element id returning wrong in newer version. how to overcome on this issue. please help me on this. please find the below my code. 

function trackDropping(sender, args) {
    debugger;
   var dest = args.get_destinationElement();    
   if (!dest || !dest.id || dest.id.indexOf("TeamLink") < 0) {
       args.set_cancel(true); 
    }

Telerik Web UI ListView Items Drag-and-drop Demo | Telerik UI for ASP.NET AJAX

Hi, 

I'm trying to create a dynamic ListViewDataGroup with code-behind value for 'groupField', is that possible ?

<telerik:RadListView ID="lv_xxx"
                EnableViewState="false"
                ItemPlaceholderID="itemPlaceHolder"
                OnItemDataBound="lv_xxx_ItemDataBound"
                runat="server"  >

                <LayoutTemplate>
				.....
				</LayoutTemplate>

                <DataGroups > 
                <telerik:ListViewDataGroup GroupField='<%= this.XXX >' DataGroupPlaceholderID="groupPlaceHolder" SortOrder="Ascending"  > 
                        <DataGroupTemplate>
                            <tr>
                                <td>
                                    <%# (Container as RadListViewDataGroupItem).DataGroupKey %>
                                </td>
                            </tr>
                            <asp:PlaceHolder ID="itemPlaceHolder" runat="server"></asp:PlaceHolder>
                        </DataGroupTemplate>
                    </telerik:ListViewDataGroup>
                </DataGroups>

                <EmptyDataTemplate> 
                </EmptyDataTemplate>

                <ItemTemplate>
				......
				/ItemTemplate> 
           </telerik:RadListView> 

thanks

When a button in a RadListView is clicked, I want to change the text of the button on the client side.  I can find the listview and the index of the row, but can't set the button text of the clicked button.  The code below always changes the text of the button in the first record.

Also, is there an easier way to find the button without adding an attribute in radlistview1_ItemDataBound?

function updateBtn(sender, args) {
   var listview = $find('<%=radlistview1.ClientID%>');
   var myindex = sender._element.getAttribute("rowindex");
   var btn = $telerik.findControl(document.documentElement, "radbutton1");
   //How to select the button that was clicked?
   btn.set_text("Clicked"); //works for first row only
   }

<telerik:RadListView runat="server" ID="radlistview1" DataSourceID="SqlDataSource1" DataKeyNames="myRecordid">
   <ItemTemplate>
   
   <telerik:RadButton runat="server" ID="radbutton1" Text='button'
       ButtonType="StandardButton" RenderMode="Auto"
       OnClientClicked = "updateBtn"
       AutoPostBack="false" UseSubmitBehavior="false">
   </telerik:RadButton>

   </ItemTemplate>
</telerik:RadListView>

Private Sub radlistview1_ItemDataBound(sender As Object, e As RadListViewItemEventArgs) Handles radlistview1.ItemDataBound
   ' Add an attribute to the button that can be passed to JS 
   If TypeOf e.Item Is RadListViewDataItem Then
      Dim item As RadListViewDataItem = TryCast(e.Item, RadListViewDataItem)
      Dim btn As RadButton = TryCast(item.FindControl("radbutton1"), RadButton)
      btn.Attributes.Add("rowindex", item.DataItemIndex.ToString())
   End If
End Sub

Hi,

In the code below I would like to know how can I apply the skin "Glow" but ONLY in the RadListView1 (and obviously everything within it).

I am not managing how to do that. Any idea?

This is my ASPX code:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="iPMP.aspx.vb" Inherits="custom_scripts_iPMP_iPMP" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" href="ipmpstyle.css?26" class="Telerik_stylesheet" />
    <link rel="stylesheet" href="ListView.css" class="Telerik_stylesheet" />
    <link rel="stylesheet" href="ListViewExtra.css" class="Telerik_stylesheet" />

    <style type="text/css">
        .RadAutoCompleteBox_Default .racTokenList
        {
            border-radius: 5px;
            border-color: dimgrey;
        }
    </style>
    <style type="text/css">
        [style*="--aspect-ratio"] > :first-child {
        width: 100%;
        }
        [style*="--aspect-ratio"] > img {
        height: 100%;
        }
        @supports (--custom:property) {
        [style*="--aspect-ratio"] {
        position: relative;
        }
        [style*="--aspect-ratio"]::before {
        content: "";
        display: block;
        padding-bottom: calc(100% / (var(--aspect-ratio)));
        }
        [style*="--aspect-ratio"] > :first-child {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        }
        }
    </style>

</head>
 
<body>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

    <script type="text/javascript">

        function requesting(sender, eventArgs) {

            var acbox = $find('<%= RadAutoCompleteBox1.ClientID %>');
            var acboxcontents = acbox.get_inputElement();
            typed = acboxcontents.value;
        }

    </script>

    <form id="form1" runat="server" style="border-radius:15px; background:rgba(146,167,160,.5); border-style:solid; border-width:1px; border-color:white; padding:20px;height:120px;">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />

        <telerik:RadAjaxManager ID="ajaxmanager1" runat="server" EnableAJAX="true">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadAutoCompleteBox1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadAutoCompleteBox1" LoadingPanelID="radloadingpanel1" />
                        <telerik:AjaxUpdatedControl ControlID="divLoading" LoadingPanelID="radloadingpanel1" />
                        <telerik:AjaxUpdatedControl ControlID="lblNoOEMParts" LoadingPanelID="radloadingpanel1" />
                   </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

        <telerik:RadAjaxLoadingPanel ID="radloadingpanel1" runat="server" AnimationDuration="0" InitialDelayTime="1000"></telerik:RadAjaxLoadingPanel>

        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="false" />
        <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server" DecoratedControls="All" DecorationZoneID="demo-container" EnableRoundedCorners="false" />
        <telerik:RadAjaxPanel ID="rap1" runat="server" EnableAJAX="true">
            <div style="font-family:'robotoregular';font-style:italic;color:#ffffff;margin-bottom:7px;">Type in year, model and part name (eg. 2010 Accord Alternator)</div>

            <telerik:RadAutoCompleteBox RenderMode="Lightweight" runat="server" ID="RadAutoCompleteBox1" ClientID="RadAutoCompleteBox1" 
                autopostback="true" 
                InputType="Token" Width="100%" Visible="true"
                AllowCustomEntry = "false"
                DropDownWidth="300px"
                onclientrequesting="requesting"
                Filter="StartsWith"
                >

                <WebServiceSettings Path="iPMP.asmx" Method="GetItems" />

            </telerik:RadAutoCompleteBox>

            <div ID="divLoading" style="width:20px;position:relative;visibility:hidden;display:none;text-align:right;margin-top:-32px;float:right;margin-right:15px;z-index:1000" runat="server" autopostbcak="true"><img alt="" src="loading.gif" /></div>

            <br />
            <asp:label id="lblNoOEMParts" ClientID="lblNoOEMParts" runat="server" visible="false" style="margin-top:-50px;position:absolute;">No OEM parts available found!</asp:label>

            <asp:Panel ID="pnlListView" runat="server" Visible="false" style="margin-top:-100px">
                <div class="demo-container size-wide" id="demo-container">
                    <table>
                        <tr>
                            <td>
                                <telerik:RadListView ID="RadListView1" runat="server" RenderMode="Lightweight"
                                    ItemPlaceholderID="CustomersContainer" AllowPaging="true" OnPageIndexChanged="RadListView1_PageIndexChanged">
                                    <LayoutTemplate>
                                        <legend>Alternate Parts</legend>
                                        <table>
                                            <tr>
                                                <td>
                                                    <telerik:RadDataPager RenderMode="Lightweight" ID="RadDataPager1" runat="server" PagedControlID="RadListView1"
                                                        PageSize="2" CssClass="pagerStyle">
                                                        <Fields>
                                                            <telerik:RadDataPagerButtonField FieldType="FirstPrev"></telerik:RadDataPagerButtonField>
                                                            <telerik:RadDataPagerButtonField FieldType="Numeric" PageButtonCount="4"></telerik:RadDataPagerButtonField>
                                                            <telerik:RadDataPagerButtonField FieldType="NextLast"></telerik:RadDataPagerButtonField>
                                                            <telerik:RadDataPagerPageSizeField PageSizeComboWidth="60" PageSizeText="Page size: "></telerik:RadDataPagerPageSizeField>
                                                            <telerik:RadDataPagerGoToPageField CurrentPageText="Page: " TotalPageText="of" SubmitButtonText="Go"
                                                                ></telerik:RadDataPagerGoToPageField>
                                                        </Fields>
                                                    </telerik:RadDataPager>
                                                </td>
                                            </tr>
                                        </table>
                                        <fieldset id="FiledSet1" class="mainFieldset">
                                            <div class="RadListView RadListView_<%# Container.Skin %>">
                                                <asp:PlaceHolder ID="CustomersContainer" runat="server"></asp:PlaceHolder>
                                            </div>
                                            <div class="clearFix">
                                            </div>
                                        </fieldset>
                                    </LayoutTemplate>
                                    <ItemTemplate>
                                        <fieldset class="fieldset itemFieldset">
                                            <legend>Part: <%#Eval("Description")%></legend>
                                            <table class="dataTable">
                                                <tr class="rlvI">
                                                    <td>
                                                        <table class="itemTable">
                                                            <tr>
                                                                <td>
                                                                    <table class="innerItemTable">
                                                                        <tr>
                                                                            <td>
                                                                                Stock: <%#Eval("StockTicketNumber")%>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                Mileage: <%#Eval("Mileage")%>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                Cond.: <%#Eval("ConditionsAndOptions")%>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>
                                                                                Price: $<%# Eval("RetailPrice")%>
                                                                            </td>
                                                                        </tr>
                                                                    </table>
                                                                </td>
                                                                <td>
                                                                    <img src=<%#Eval("PartPic")%> style="height:90px;" />
                                                                </td>
                                                            </tr>
                                                        </table>
                                                    </td>
                                                </tr>
                                            </table>
                                        </fieldset>
                                    </ItemTemplate>
                                </telerik:RadListView>
                            </td>
                        </tr>
                    </table>   
                </div>
            </asp:Panel>
        </telerik:RadAjaxPanel>
   </form>
</body>
</html>

Any idea on how do that?

Thanks!

First of all I am not too much experienced with Telerik controls and I confess that it puzzles me but I am not going to give up!

So, I am not being able to reproduce the demo at https://demos.telerik.com/aspnet-ajax/listview/examples/overview/defaultvb.aspx?show-source=true.

I simplified the code to use it with my own data (code below) and I am experiencing two problems:

1. Instead to appear in two columns it only appear as a single list; and
2. It 's not skinning as it should.

To see my test in action please check http://aspdotnetstorefront.pamsauto.com/tests/ListViewTest.aspx

And this is my code: