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

[Tas]

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.

[Kostadin]

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

[Tas]

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.

[Kostadin]

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

[Bhavya]

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 :)

[Kostadin]

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

[Bhavya]

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

[Bhavya]

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

[Kostadin]

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

[Bhavya]

thanks i will try it.