Telerik Forums / UI for ASP.NET AJAX Forum / ListView /

Radlistview Edit nested Radlistview

Telerik UI for ASP.NET AJAX
Resources Buy Try

6 posts, 0 answers

Adam

2 posts

Member since:
Jun 2011

Posted 29 Jun 2011 Link to this post

Hello,

I am using a Radlistview with a nested Radlistview nested under the top level <ItemTemplate> tag area. In the nested itemTemplate I display groups of emails by groupID's. So each group contains 5 emails within that group. Under each group there is an edit button, so my problem is that when the user clicks the edit button the editItemTemplate doesn't display so the user can edit the group of emails by that pertain to that groupID. And the edit button needs to make all items within that group editable. I tried using my layout under the nested EditItemTemplate tag and also under the parent EditItemTemplate tag.

My code is below. Any help would be great.

Thanks

<%@ Page Language="C#" MasterPageFile="~/Main.master" AutoEventWireup="true" CodeFile="ListDeactivation.aspx.cs" Inherits="ListDeactivation" Title="Partner List Deactivation" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">

    <telerik:RadScriptManager ID="ScriptManager1" runat="server" EnableTheming="True"></telerik:RadScriptManager>

<style type="text/css">

.products

{

    empty-cells: show;

    table-layout: fixed;

    border-collapse: collapse;

    width: 100%;

}

.products th

{

    background-color: #C3D8F1;

    padding: 5px;

    border-bottom: 1px solid #5D8CC9;

    color: #00156E;

    text-align: left;

    width:130px;

}

.products td

{

    padding: 4px 7px 3px 7px;

}

.orders td

{

    padding:0;

    width:auto;

}

.orders table

{

    table-layout:fixed;

    border-collapse:collapse;

    width:100%;

}

.orders table td

{

    width:130px;

    padding: 4px 7px 3px 7px;

    padding:3px 3px 3px 7px;

}

.orders table tr:last-child td

{

    border-bottom:none;

}

.hidden

{

    display:none;

}

</style>



<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

    <AjaxSettings>

        <telerik:AjaxSetting AjaxControlID="UpdatePanel1">

            <UpdatedControls>

                <telerik:AjaxUpdatedControl ControlID="UpdatePanel1" LoadingPanelID="RadAjaxLoadingPanel1" />

            </UpdatedControls>

        </telerik:AjaxSetting>

        <telerik:AjaxSetting AjaxControlID="lstVpanel">

            <UpdatedControls>

                <telerik:AjaxUpdatedControl ControlID="lstVpanel" LoadingPanelID="RadAjaxLoadingPanel1" />

            </UpdatedControls>

        </telerik:AjaxSetting>

    </AjaxSettings>

</telerik:RadAjaxManager>

<asp:Label runat="Server" ID="lblTitle" Font-Size="Large" ForeColor="#339ec6" Font-Bold="True" >List Deactivation</asp:Label>



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



    <asp:Label id="lblError" runat="server" Font-Bold="true" ForeColor="Red"></asp:Label>



        <div id="topDiv" runat="server" cellpadding="0" cellspacing="0" style="position:relative;">



            <div style="position: relative; top: 20px">

                <asp:Label ID="lblPartners" runat="server" Font-Bold="true" Text="Partners:"></asp:Label>

            </div>

            <div style="left: 175px; position: relative;">

                <telerik:RadComboBox ID="cbTeams" runat="server" AutoPostBack="true" Skin="Default" OnSelectedIndexChanged="cbTeams_SelectedIndexChanged">

                    <CollapseAnimation Duration="10" Type="InOutElastic" />

                </telerik:RadComboBox>

            </div>





            <hr />

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

            <telerik:RadListView ID="lvSeeds" AllowPaging="True" OnItemDataBound="lvSeeds_ItemDataBound" AllowMultiItemSelection="true" ItemPlaceholderID="SeedHolder" OnItemCommand="listView_ItemCommand" runat="server" Skin="Outlook" OnPageIndexChanged="lvSeeds_PageIndexChanged">

                <ValidationSettings EnableValidation="true" />

                <LayoutTemplate >



                <table cellpadding="0" cellspacing="0" width="100%;" style="clear: both;">

                        <tr>

                            <td>

                                <telerik:RadDataPager ID="RadDataPager1" runat="server" PagedControlID="lvSeeds"

                                    PageSize="6">

                                    <Fields>

                                        <telerik:RadDataPagerButtonField FieldType="FirstPrev" />

                                        <telerik:RadDataPagerButtonField FieldType="Numeric" />

                                        <telerik:RadDataPagerButtonField FieldType="NextLast" />

                                        <telerik:RadDataPagerTemplatePageField>

                                            <PagerTemplate>

                                                <div style="float: right">

                                                    <b>Items

                                                        <asp:Label runat="server" ID="CurrentPageLabel" Text="<%# Container.Owner.StartRowIndex+1%>" />

                                                        to

                                                        <asp:Label runat="server" ID="TotalPagesLabel" Text="<%# Container.Owner.TotalRowCount > (Container.Owner.StartRowIndex+Container.Owner.PageSize) ? Container.Owner.StartRowIndex+Container.Owner.PageSize : Container.Owner.TotalRowCount %>" />

                                                        of

                                                        <asp:Label runat="server" ID="TotalItemsLabel" Text="<%# Container.Owner.TotalRowCount%>" />

                                                        <br />

                                                    </b>

                                                </div>

                                            </PagerTemplate>

                                        </telerik:RadDataPagerTemplatePageField>

                                    </Fields>

                                </telerik:RadDataPager>

                            </td>

                        </tr>

                    </table>

                   <asp:Panel ID="HierarchyPanel" runat="Server">

                        <table id="products" class="products">

                            <thead>

                                <tr>

                                <th></th>

                                <th>Seed Name</th>

                                <th>Domain</th>

                                <th>Password</th>

                                <th>Status</th>

                                </tr>

                            </thead>

                            <tbody>

                                <tr id="SeedHolder" runat="server"></tr>

                                <tr>

                                <td>

                                    <asp:Button id="btnInsert" runat="server" Text="Insert Seed" OnClick="btnInsert_Click" />

                                </td>

                                </tr>

                            </tbody>

                        </table>

                    </asp:Panel>

                </LayoutTemplate>



                <ItemTemplate>

                        <tr>

                            <td></td>

                            <td style="border:none" colspan="4" class="hidden">

                                <%# Session["groupID"] = Eval("groupID").ToString() %>

                            </td>

                        </tr>

                        <tr class="orders">

                            <td></td>

                            <td colspan="4">

                                <telerik:RadListView ID="nestedView" runat="server" DataKeyNames="seedID" ItemPlaceholderID="nestedHolder">

                                <LayoutTemplate>

                                    <table>

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

                                    </table>

                                    <br />

                                    <br />

                                    <table>

                                    <tr>

                                        <td style="float:right">

                                            <asp:Button ID="btnEdit" runat="server" Text="Edit" CommandName="Edit" CausesValidation="false" />

                                        </td>

                                    </tr>

                                    </table>

                                </LayoutTemplate>

                                <ItemTemplate>

                                        <tr>



                                            <td>

                                               <%# Eval("seedName")%>

                                            </td>

                                            <td>

                                               <%# Eval("DomainName")%>

                                            </td>

                                            <td>

                                                <%# Eval("password")%>

                                            </td>

                                            <td>

                                               <%# Eval("statusName")%>

                                            </td>

                                        </tr>



                                    </ItemTemplate>



                                    <EditItemTemplate>

                    <fieldset style="float:left; width: 350px; margin-top: 5px; margin-left: 5px;

                                margin-right: 5px; margin-bottom: 5px; padding-left: 15px;">

                        <table cellpadding="0" cellspacing="0" style="height: 100%;width: 100%">

                        <tr>

                            <td>

                                <table cellpadding="5" cellspacing="1">

                                    <tr>

                                        <td style="width: 10%">Seed:</td>

                                        <td style="width: 20%">

                                          <asp:TextBox ID="txtSeedName1" runat="server" Text='<%# Bind("SeedName") %>' />

                                          <asp:RequiredFieldValidator ID="rvSeedName" runat="server" ControlToValidate="txtSeedName1"

                                            ErrorMessage="Please enter seed name" Display="Dynamic" />

                                        </td>

                                        <td>

                                            <asp:Label ID="lblDomain1" runat="server" Text="gmail.com" />

                                        </td>

                                    </tr>

                                    <tr>

                                        <td style="width: 10%">Password:</td>

                                        <td style="width: 20%">

                                          <asp:TextBox ID="txtPassword1" TextMode="Password" runat="server" Text='<%# Bind("Password") %>' />

                                          <asp:RequiredFieldValidator ID="rvSeedPassword" runat="server" ControlToValidate="txtPassword1"

                                            ErrorMessage="Please enter seeds password" Display="Dynamic" />

                                        </td>

                                    </tr>

                                </table>

                            </td>

                        </tr>

                        <tr>



                            <td>

                                <asp:Button ID="btnPerformInsert" runat="server" Text="Insert" CommandName="PerformInsert" />



                                <asp:Button ID="btnCancelInsert" runat="server" Text="Cancel" CommandName="Cancel" CausesValidation="false" />

                            </td>

                        </tr>

                    </table>

                    </fieldset>

                </EditItemTemplate>



                                </telerik:RadListView>

                            </td>

                        </tr>

                </ItemTemplate>



                <InsertItemTemplate>

                    <fieldset style="float:left; width: 350px; margin-top: 5px; margin-left: 5px;

                                margin-right: 5px; margin-bottom: 5px; padding-left: 15px;">

                        <table cellpadding="0" cellspacing="0" style="height: 100%;width: 100%">

                        <tr>

                            <td>

                                <table cellpadding="5" cellspacing="1">

                                    <tr>

                                        <td style="width: 10%">Seed:</td>

                                        <td style="width: 20%">

                                          <asp:TextBox ID="txtSeedName1" runat="server" Text='<%# Bind("SeedName1") %>' />

                                          <asp:RequiredFieldValidator ID="rvSeedName" runat="server" ControlToValidate="txtSeedName1"

                                            ErrorMessage="Please enter seed name" Display="Dynamic" />

                                        </td>

                                        <td>

                                            <asp:Label ID="lblDomain1" runat="server" Text="gmail.com" />

                                        </td>

                                    </tr>

                                    <tr>

                                        <td style="width: 10%">Password:</td>

                                        <td style="width: 20%">

                                          <asp:TextBox ID="txtPassword1" TextMode="Password" runat="server" Text='<%# Bind("Password1") %>' />

                                          <asp:RequiredFieldValidator ID="rvSeedPassword" runat="server" ControlToValidate="txtPassword1"

                                            ErrorMessage="Please enter seeds password" Display="Dynamic" />

                                        </td>

                                    </tr>

                                    <tr>

                                        <td style="width: 10%">Seed:</td>

                                        <td style="width: 20%">

                                          <asp:TextBox ID="txtSeedName2" runat="server" Text='<%# Bind("SeedName2") %>' />

                                          <asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" ControlToValidate="txtSeedName2"

                                            ErrorMessage="Please enter seed name" Display="Dynamic" />

                                        </td>

                                        <td>

                                            <asp:Label ID="lblDomain2" runat="server" Text="hotmail.com" />

                                        </td>



                                    </tr>

                                    <tr>

                                        <td style="width: 10%">Password:</td>

                                        <td style="width: 20%">

                                          <asp:TextBox ID="txtPassword2" TextMode="Password" runat="server" Text='<%# Bind("Password2") %>' />

                                          <asp:RequiredFieldValidator ID="RequiredFieldValidator8" runat="server" ControlToValidate="txtPassword2"

                                            ErrorMessage="Please enter seeds password" Display="Dynamic" />

                                        </td>



                                    </tr>

                                    <tr>

                                        <td style="width: 10%">Seed:</td>

                                        <td style="width: 20%">

                                          <asp:TextBox ID="txtSeedName3" runat="server" Text='<%# Bind("SeedName3") %>' />

                                          <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtSeedName3"

                                            ErrorMessage="Please enter seed name" Display="Dynamic" />

                                        </td>

                                        <td>

                                            <asp:Label ID="lblDomain3" runat="server" Text="yahoo.com" />

                                        </td>



                                    </tr>

                                    <tr>

                                        <td style="width: 10%">Password:</td>

                                        <td style="width: 20%">

                                          <asp:TextBox ID="txtPassword3" TextMode="Password" runat="server" Text='<%# Bind("Password3") %>' />

                                          <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtPassword3"

                                            ErrorMessage="Please enter seeds password" Display="Dynamic" />

                                        </td>



                                    </tr>



                                    <tr>

                                        <td style="width: 10%">Seed:</td>

                                        <td style="width: 20%">

                                          <asp:TextBox ID="txtSeedName4" runat="server" Text='<%# Bind("SeedName4") %>' />

                                          <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtSeedName4"

                                            ErrorMessage="Please enter seed name" Display="Dynamic" />

                                        </td>

                                        <td>

                                            <asp:Label ID="lblDomain4" runat="server" Text="gmx.com" />

                                        </td>



                                    </tr>

                                    <tr>

                                        <td style="width: 10%">Password:</td>

                                        <td style="width: 20%">

                                          <asp:TextBox ID="txtPassword4" TextMode="Password" runat="server" Text='<%# Bind("Password4") %>' />

                                          <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="txtPassword4"

                                            ErrorMessage="Please enter seeds password" Display="Dynamic" />

                                        </td>

                                    </tr>



                                    <tr>

                                        <td style="width: 10%">Seed:</td>

                                        <td style="width: 20%">

                                          <asp:TextBox ID="txtSeedName5" runat="server" Text='<%# Bind("SeedName5") %>' />

                                          <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="txtSeedName5"

                                            ErrorMessage="Please enter seed name" Display="Dynamic" />

                                        </td>

                                        <td>

                                            <asp:Label ID="lblDomain5" runat="server" Text="aol.com" />

                                        </td>



                                    </tr>

                                    <tr>

                                        <td style="width: 10%">Password:</td>

                                        <td style="width: 20%">

                                          <asp:TextBox ID="txtPassword5" TextMode="Password" runat="server" Text='<%# Bind("Password5") %>' />

                                          <asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ControlToValidate="txtPassword5"

                                            ErrorMessage="Please enter seeds password" Display="Dynamic" />

                                        </td>



                                    </tr>



                                </table>

                            </td>

                        </tr>

                        <tr>



                            <td>

                                <asp:Button ID="btnPerformInsert" runat="server" Text="Insert" CommandName="PerformInsert" />



                                <asp:Button ID="btnCancelInsert" runat="server" Text="Cancel" CommandName="Cancel" CausesValidation="false" />

                            </td>

                        </tr>

                    </table>

                    </fieldset>

                </InsertItemTemplate>



                </telerik:RadListView>

                </asp:Panel>

            </div>



    </asp:Panel>



    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Skin="Default" runat="server" Transparency="10" EnableSkinTransparency="true">

        <asp:Label ID="lblLoading" Font-Size="large" runat="server" ForeColor="Red">Loading...</asp:Label>

    </telerik:RadAjaxLoadingPanel>



</asp:Content>
Marin
Admin

1057 posts

Posted 05 Jul 2011 Link to this post

Hello Adam,
It depends how you have bound the ListView controls. If you want to use automatic operations then you will have to bind the control declaratively and set the datasource properties EnableInsert, EnableUpdate etc to true as shown in this demo. If you are binding the control from code behind then you will have to handle the ItemCommand event and manually perform there the desired operation as shown in this help topic.
Also the Edit button should be placed inside the ItemTemplate otherwise it cannot determine which one of all the items in the ListView to put in edit mode. If you need all the items to be editable you will need to handle the edit command and manually put them in edit mode. Also you should set AllowMultiItemEdit="true". Finally you will need to separately ajaxify the inner ListView so that the Edit button updates only the inner ListView otherwise the item will not be displayed in edit mode. Here is some sample code:

<td colspan="4">

                                    <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel">

                                        <telerik:RadListView ID="nestedView" OnItemCommand="nestedListView_ItemCommand" OnNeedDataSource="nestedListView_DataSource"

                                            runat="server" DataKeyNames="seedID" AllowMultiItemEdit="true" ItemPlaceholderID="nestedHolder">

. . . .

</telerik:RadListView>

                                    </telerik:RadAjaxPanel>

protected void nestedListView_ItemCommand(object sender, RadListViewCommandEventArgs e)

    {

        RadListView RadListView1 = (sender as RadListView);

        foreach (var item in RadListView1.Items)

        {

            RadListView1.EditIndexes.Add(item.DisplayIndex);

        }

        RadListView1.Rebind();

    }

Greetings,
Marin
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Ali

5 posts

Member since:
Mar 2013

Posted 10 Mar 2013 Link to this post

Dear Sir,
Concerning the " Editable RadListView with tiled layout" could i show and hide the edit and delete button whenever i need or according to user priveleges

Thanks and Best Regards
Ali Moustafa
Marin
Admin

1057 posts

Posted 12 Mar 2013 Link to this post

Hi,
Yes, you can do this. The buttons are defined in the ItemTemplate of the RadListView so you can simply iterate over the items and call FindControl on each item to access the respective button and then show or hide it according to your requirements.
All the best,
Marin
the Telerik team

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 their blog feed now.

Ali

5 posts

Member since:
Mar 2013

Posted 23 Mar 2013 Link to this post

Dear sir ,
Radlist view edit template example on Telerik database on customerphotos table shows the following fields

Name:

Title:

City:

Country:

Phone:

my question is how do I add the address field( in design time) to be shown and edited ,updated or even inserted in the Radlistview templates

note that I show and update the photo too

============================
what i did is reconfiguring the sqldatasource and added the field address from customerphotos
then i added in design time in edititemtemplate a binded textbox to that field but when i press update after writing in the address field and selecting an image ,I got the following error

Parameter '@Photo' exceeds the size limit for the sql_variant datatype.

Marin
Admin

1057 posts

Posted 27 Mar 2013 Link to this post

Hello,
There shouldn't be any problem in adding the Address field to the CRUD operation of the RadListView assuming it is a string field you can follow the same approach as used in the "Country" and "City' fields. The error that you get is that the @Photo parameter is exceeding the size of the sql_variant data type. For images and photos it is recommended to use one of the specific SQL data type intended for storing such information (such as: binary, varbinary, image, etc.) sql_variant is a more general type it is not the best choice for storing large binary data.
All the best,
Marin
the Telerik team

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 their blog feed now.

Radlistview Edit nested Radlistview

Adam

Marin

Ali

Marin

Ali

Parameter '@Photo' exceeds the size limit for the sql_variant datatype.

Marin