Add an Ascx control to every item in a TreeList

[Hamza]

Hi everyone !

I have a page with my group of products and my products based on a TreeList (retrieved from database - See : "GroupProduct.png") It's a RadTreeList. Every item should have some parameters that expands once user clicks on the product or group of products based on a table "group_product_ext" in the same way shown in "Mockup.png" (It can be a GridView or whatever). Parameter should be editable with AJAX and user can apply or cancel his changes.

The problem is : How should I use the ascx control ? Which item would go for parameters that can expands ? And how to link the ascx control containing these parameters just under the groups of products and the products?

 

Some help for include a custom ascx control to my page containing a label, a checkbox and a textbox for the parameter would be awesome (it can be filled with basic data just for test)

 

A simple project of the radtreelist : Link removed by Admin because the project violates the UI for ASP.NET AJAX EULA.

A similar result to my expectation is something like this : https://www.telerik.com/clientsfiles/331457_TreeView.png?sfvrsn=9f67e1ee_0

 

 

[Marin Bratanov]

Hi Hamza,

Perhaps the easiest way to do this is to add a button that will open the details/editing page that will contain the desired user control. You can see how to pass a parameter to it in the following demo (it is for RadGrid, but the concept is identical): https://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandwindow/defaultcs.aspx?product=window.

Another option would be to use a template column in the treelist and have that user control render there in all rows, but this will likely slow down the page and it will not result in that nested appearance, instead, the edit form will be in the corresponding cell it is defined in.

The third option I can suggest is to use a grid with hierarchy as it can easily allow you to edit a row in any of the levels: https://demos.telerik.com/aspnet-ajax/grid/examples/hierarchy/hierarchy-with-templates/defaultcs.aspx. and here's on using automatic CRUD operations with the declarative data source of a table view: https://demos.telerik.com/aspnet-ajax/grid/examples/data-editing/automatic-crud-operations/defaultcs.aspx.

On a side note, I removed the link to the project because it contains licensed versions of our assemblies and sharing them publicly like this violates our EULA. I kindly ask that you refrain from doing that in the future.

Regards,
Marin Bratanov
Progress Telerik

[Hamza]

Hello Marvin,

 

Thanks fot your answer ! I am actually using a RadTreeList with "TreeListEditCommandColumn" and "EditFormSettings" to get my user control. Every single item have a special GUID ID, how can I pass this Id when I click on the "TreeListEditCommandColumn" button Edit so I can load my parameters on the user control's code behind? 

I am sorry about sharing a public link with Telerik assemblies. I am removing the project from the internet !

Thank you!

[Marin Bratanov]

Hi Hamza,

I am attaching below an example based on our editing demo that shows how you can access data from the parent item inside the edit form user control. Here are the key steps:

• add the desired field to the DataKeyNames collection

  <telerik:RadTreeList RenderMode="Lightweight" ID="RadTreeList1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="LocationID" ParentDataKeyNames="ParentLocationID" AllowPaging="true" PageSize="10" AutoGenerateColumns="false"
      EditMode="EditForms">
      <EditFormSettings EditFormType="WebUserControl" UserControlPath="WebUserControl.ascx"></EditFormSettings>

• use an event like Page_Load or later in the user control to get the container of the user control which is a TreeListEditFormItem and its ParentItem will be the item you edit

  public partial class WebUserControl : System.Web.UI.UserControl
  {
      protected void Page_Load(object sender, EventArgs e)
      {
          Label1.Text = (this.NamingContainer as Telerik.Web.UI.TreeListEditFormItem).ParentItem.GetDataKeyValue("LocationID").ToString();
      }
  }

 

Regards,
Marin Bratanov
Progress Telerik

[Hamza]

 

Hi Marin,

 

Thank you for your working solution, I finally used a public property :

Public Property DataItem As Object
        Get
            Return _dataItem
        End Get
        Set(ByVal value As Object)
            _dataItem = value
        End Set
End Property

that gets the value of the clicked item on the page load, with all their properties !

Thank you again !

 

Best regards !