RadListView with paging - Add item to item index 0 on each page

10 posts, 0 answers
  1. Tas
    Tas avatar
    8 posts
    Member since:
    Sep 2012

    Posted 06 Dec 2013 Link to this post

    Hi,
    I have a RadListView that is populated from a database. It displays data in a grid format. The RadListView contains paging and has the OnNeedDataSource property set that is used to populate the RadListView with data. PLease see below for the code.

    <telerik:RadListView ID="RadListView1" runat="server"

    ItemPlaceholderID="ProductsContainer" DataKeyNames="ProductId" AllowPaging="true" PageSize="12"

    OnItemCommand="RadListView1_ItemCommand" OnNeedDataSource="RadListView1_NeedDataSource">

    <LayoutTemplate>

    <fieldset id="FieldSet1" style="border: none; padding: 0px;">

    <asp:PlaceHolder ID="ProductsContainer" runat="server"></asp:PlaceHolder>

    <div style="clear: both">

    </div>

    <div style="border-top: dashed 0px #CACACA; padding-top: 30px;">

    <div style="float: left; margin-left: 0%;">

    <asp:Button runat="server" ID="btnFirst" CommandName="Page" CommandArgument="First"

    Text="<<" Enabled="<%#Container.CurrentPageIndex > 0 %>" CssClass="Button_Grid_Pager"></asp:Button>

    <asp:Button runat="server" ID="btnPrev" CommandName="Page" CommandArgument="Prev"

    Text="<" Enabled="<%#Container.CurrentPageIndex > 0 %>" CssClass="Button_Grid_Pager"></asp:Button>

    <span style="vertical-align: middle; line-height: 22px; display: inline-block;">&nbsp;&nbsp;Page

    <%#Container.CurrentPageIndex + 1 %>

    of

    <%#Container.PageCount %></span>&nbsp;&nbsp;

    <asp:Button runat="server" ID="btnNext" CommandName="Page" CommandArgument="Next"

    Text=">" Enabled="<%#Container.CurrentPageIndex + 1 < Container.PageCount %>" CssClass="Button_Grid_Pager"></asp:Button>

    <asp:Button runat="server" ID="btnLast" CommandName="Page" CommandArgument="Last"

    Text=">>" Enabled="<%#Container.CurrentPageIndex + 1 < Container.PageCount %>" CssClass="Button_Grid_Pager"></asp:Button>

    </div>

    <div style="border: none; padding-top: 2px;">

    <span style="vertical-align: middle; font-weight: normal; line-height: 22px; padding-left: 15px;">Items per page:&nbsp;&nbsp;</span>

    <telerik:RadComboBox runat="server" ID="cmbPageSize"

    OnSelectedIndexChanged="cmbPageSize_SelectedIndexChanged"

    AutoPostBack="true" Width="60px" Skin="Default"

    SelectedValue="<%#Container.PageSize %>">

    <Items>

    <telerik:RadComboBoxItem Text="4" Value="4"></telerik:RadComboBoxItem>

    <telerik:RadComboBoxItem Text="12" Value="12"></telerik:RadComboBoxItem>

    <telerik:RadComboBoxItem Text="36" Value="36"></telerik:RadComboBoxItem>

    <telerik:RadComboBoxItem Text="100" Value="100"></telerik:RadComboBoxItem>

     

    </Items>

    </telerik:RadComboBox>

    </div>

    </div>

    </fieldset>

    </LayoutTemplate>

    <ItemTemplate>

    <fieldset class="item">

    <asp:Panel ID="ItemContainer" runat="server">

    <asp:ImageButton ID="imgbtnProductDetails" runat="server" ImageUrl='<%# "prodimages/" & Eval("ProdRef") & "-1_Grid.jpg"%>'

    AlternateText='<%# Eval("ImageAltText") %>' Width="240px"

    CommandName="SelectProduct" CommandArgument='<%# Eval("ProductId")%>' Enabled='<%# IIf(Eval("IsVoucher") = True, False, True)%>' />

    </asp:Panel>

    </fieldset>

    </ItemTemplate>

    </telerik:RadListView>


    I want to know how I can, dynamically (code behind) always display an image in item position / grid position 0 in the RadListView, so that it is always displayed on every page, in the same position, of the RadListView....for example see below where (X) is where I want to display the image on every page...

    X......... item1.....item2
    item3....item4.....item4
    item6....item7.....item8

    Thanks for your time.
  2. Kostadin
    Admin
    Kostadin avatar
    1711 posts

    Posted 11 Dec 2013 Link to this post

    Hi Tas,

    I am afraid that you could not add items dynamically instead if you are not using a client side data binding. You could check out the following live example which demonstrates how to append data. Another possible approach is to add the image into your LayoutTemplate and this way will be visible on each page.

    Regards,
    Kostadin
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tas
    Tas avatar
    8 posts
    Member since:
    Sep 2012

    Posted 16 Dec 2013 Link to this post

    Hi,
    So there is no way in server side code to dynamically add a RedListViewDataItem to a RadListView???
    I understand I can use the LayoutTemplate but I want to add the image as an Item, in Index position 0 (zero) on every page - i.e. the existing items on the page would get 'pushed along' and the image inserted in position (0). This, as far as I can see, is not possible in the layout template - it would make perfect sense to achieve this functionality here but I don't have any good examples or documentation from Telerik on this.
    Any help on this would be much appreciated.
    Thank you.
  5. Kostadin
    Admin
    Kostadin avatar
    1711 posts

    Posted 19 Dec 2013 Link to this post

    Hello Tas,

    I am afraid that you could not add items to the RadListView dinamically as this will change the structure of the control and the ViewState will star throwing error. Also the pager will not display the correct number of items on the page and I believe that more issues will occur. The only possible solution is to add them on the client as it is demonstrated in the previously provided live example.

    Regards,
    Kostadin
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. Manu
    Manu avatar
    24 posts
    Member since:
    Aug 2015

    Posted 29 Apr in reply to Kostadin Link to this post

    hi,

    Good day!

    i have same problem, but small correction.

    i am binding data totally client side, and based on timer i am appending data to listview.

    but thing is i want to append records to the top of list view. is it possible? if so, how?

    thanks in advance :)

  7. Kostadin
    Admin
    Kostadin avatar
    1711 posts

    Posted 04 May Link to this post

    Hello Manu,

    Could you please let me know whether you are adding a new records to your datasource. In such case you need to add them at the beginning since the RadListView display the records in the same order if no sort is applied. Otherwise I would appreciate if you can elaborate more on your scenario.

    Regards,
    Kostadin
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  8. Manu
    Manu avatar
    24 posts
    Member since:
    Aug 2015

    Posted 26 Sep in reply to Kostadin Link to this post

    Hi Kostadin,

    I solved the above issue, but i stuck up with some problem.

    i am binding data through client side java script getting data through ajax.

    problem is i have to give color to the item based on the column data.

    *********************

     <ItemTemplate>
                  <div onclick="ItemClick(this,#= UID #,#= LogType #,#= SLNReader#);" id="div_ItemFront">
                              <img src="../Handler.ashx?id=#= EmpID #" style="width:60px;height:50px"/>
                                <span class="name">#= EmpID #</span>
                                <span class="company">#= Name #</span>
                                <span class="title">#= DOOR #</span>
                    </div>
        </ItemTemplate>

    ************************************

    for div div_ItemFront i have to apply css soon after data binds. this has to be done only in client side.

    note:if i apply static class to the div it is applying.

    this is my data how i am binding

    ************************************

     if (json != null) {
                                            var data = [];                                        
                                            for (var i = 0; i < json.length; i++) {                                            
                                                var item = json[i];
                                                data[data.length] = {
                                                    SLNO: item.SLNO,
                                                    EventTime: item.EventTime,
                                                    TYPE: item.TYPE,
                                                    DOOR: item.DOOR,
                                                    EmpID: item.EmpID,
                                                    Name: item.Name,
                                                    UID: item.UID,
                                                    CARDNO: item.CARDNO,
                                                    LogType: item.LogType,
                                                    SLNReader: item.SLNReader
                                                };
                                            }                                        
                                            var listview = $find("<%= RadListView_Logs.ClientID%>");
                                            listview.set_dataSource(data);
                                            listview.dataBind();

    ************************

    based on logtype i should change the background color of the div.

    Need your help to this.

    Thanks in advance

  9. Manu
    Manu avatar
    24 posts
    Member since:
    Aug 2015

    Posted 28 Sep in reply to Manu Link to this post

    No Thanks! I have done after some R&D. it is working as expected.

    ***********************************************

     <ItemTemplate>
                            <div onclick="ItemClick(this,#= UID #,#= LogType #,#= SLNReader#);" class="item" id="Div_ItemFront#= SLNO#">                           
                                <img src="../Handler.ashx?id=#= EmpID #" style="width:60px;height:50px"/>
                                <span class="name">#= EmpID #</span>
                                <span class="company">#= Name #</span>
                                <span class="title">#= DOOR #</span>                                                              
                            </div>
                                </ItemTemplate>

    ***************************************************

    for the div i am generating unique id during binding listview.

    *******************************************************************

    if (json != null) {
                                            var data = [];
                                            for (var i = 0; i < json.length; i++) {
                                                var item = json[i];
                                                data[data.length] = {
                                                    SLNO: item.SLNO,
                                                    EventTime: item.EventTime,
                                                    TYPE: item.TYPE,
                                                    DOOR: item.DOOR,
                                                    EmpID: item.EmpID,
                                                    Name: item.Name,
                                                    UID: item.UID,
                                                    CARDNO: item.CARDNO,
                                                    LogType: item.LogType,
                                                    SLNReader: item.SLNReader
                                                };
                                            }                                        
                                            var listview = $find("<%= RadListView_Logs.ClientID%>");
                                            listview.set_dataSource(data);
                                            listview.dataBind();
                                          
                                            for (i = 0; i < data.length; i++) {
                                                var slno = data[i].SLNO;
                                                if (data[i].LogType == 3) {                                               
                                                    $('#Div_ItemFront' + slno).addClass('item');
                                                } else if (data[i].LogType == 2) {                                                
                                                    $('#Div_ItemFront' + slno).addClass('backgroundcolorRed');
                                                } else {                                                
                                                    $('#Div_ItemFront' + slno).addClass('backgroundcolorGreen');
                                                }
                                            }

    *******************************************************************

    after that based on length i am just looping the items. based on condition i am applying css.

    But looping is a bad idea. if any suggestion please reply to this post.

    Thanks

  10. Kostadin
    Admin
    Kostadin avatar
    1711 posts

    Posted 28 Sep Link to this post

    Hello Manu,

    You can add a condition logic to set the class name to the div element. Please check out the following code snippet which demonstrates that.
    "# if (HasIcon == true) { #" +
            "<div class='icon' />" +
        "# } else { #" +
             "<div class='noicon' />"" +
        "# } #"

    Regards,
    Kostadin
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  11. Manu
    Manu avatar
    24 posts
    Member since:
    Aug 2015

    Posted 29 Sep in reply to Kostadin Link to this post

    thanks i will try it.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017