This is a migrated thread and some comments may be shown as answers.

[Solved] Radlistview Edit nested Radlistview

5 Answers 371 Views

ListView

This is a migrated thread and some comments may be shown as answers.

Adam asked on 30 Jun 2011, 01:16 AM

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 />

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

5 Answers, 1 is accepted

answered on 05 Jul 2011, 11:43 AM

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.

answered on 23 Mar 2013, 11:48 AM

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.

answered on 27 Mar 2013, 03:55 PM

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.