multiple template, change on item count X

2 posts, 0 answers
  1. Christian
    Christian avatar
    69 posts
    Member since:
    Apr 2008

    Posted 24 Oct 2018 Link to this post

    Is there any way to change the template based on a item count in any way?

    have a scenario where i need to create a grid system where every 12e item has a different layout altoghether.

     

    Someone surely must have had this come about at some point and not to familiular with the listview control. 

     

    Christian

  2.
  3. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5243 posts

    Posted 25 Oct 2018 Link to this post

    Hello Christian,

    You can access a control in the item and change its class based on the item index. Here's a basic example I made for you:

    <style>
        .mainContainer {
            border: 2px solid black;
        }
     
        .mainContainer .itm {
            border: 1px solid blue;
            margin: 10px;
        }
     
        .specialItem {
            color: red;
        }
    </style>
    <telerik:RadListView runat="server" ID="rlv1" ItemPlaceholderID="container" OnNeedDataSource="rlv1_NeedDataSource" OnItemDataBound="rlv1_ItemDataBound">
        <LayoutTemplate>
            <div class="mainContainer">
                <asp:Panel runat="server"  ID="container"></asp:Panel>
            </div>
        </LayoutTemplate>
        <ItemTemplate>
            <asp:Label ID="Label1" CssClass="itm" Text='<%#Eval("textField") %>' runat="server" />
        </ItemTemplate>
    </telerik:RadListView>
    protected void rlv1_ItemDataBound(object sender, RadListViewItemEventArgs e)
    {
        if(e.Item.ItemType == RadListViewItemType.DataItem)
        {
            RadListViewDataItem itm = e.Item as RadListViewDataItem;
            if (itm.DataItemIndex % 10 == 0)
            {
                (itm.FindControl("Label1") as Label).CssClass += " specialItem";
            }
        }
    }
     
    protected void rlv1_NeedDataSource(object sender, RadListViewNeedDataSourceEventArgs e)
    {
        (sender as RadListView).DataSource = GetSomeData();
    }
     
    private DataTable GetSomeData()
    {
        DataTable tbl = new DataTable();
        tbl.Columns.Add(new DataColumn("ID", typeof(decimal)));
        tbl.Columns.Add(new DataColumn("textField", typeof(string)));
        tbl.Columns.Add(new DataColumn("valueField", typeof(int)));
        tbl.Columns.Add(new DataColumn("fourthField", typeof(string)));
        for (int i = 0; i < 50; i++)
        {
            tbl.Rows.Add(new object[] {i, "text " + i, i*i, "data " + i });
        }
     
        return tbl;
    }


    Regards,
    Marin Bratanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top