Treelist (ASP.NET AJAX) child items not in edit mode

1 Answer 66 Views
TreeList
Stephen
Top achievements
Rank 1
Stephen asked on 29 Mar 2023, 04:22 AM | edited on 30 Mar 2023, 04:48 AM

Hi,

I'm trying to use the Treelist for a data source with the following definition

public class MyGridItem
{
	public string ID { get; set; }
	public string Name { get; set; }
	public string ParentID { get; set; }
	public bool IsIncluded { get; set; }
	public bool IsExcluded { get; set; }
}

In markup I've got


<telerik:RadTreeList ID="RadTreeMarkers" runat="server" ParentDataKeyNames="ParentID" DataKeyNames="ID" AutoGenerateColumns="false"
	OnNeedDataSource="RadTreeMarkers_NeedDataSource" AllowMultiItemEdit="true" ExpandCollapseMode="Client" EditMode="InPlace"
	AllowPaging="false" AllowSorting="false" OnItemDataBound="RadTreeMarkers_ItemDataBound">
	<Columns>
		<telerik:TreeListBoundColumn DataField="ID" UniqueName="ID" Visible="false" ForceExtractValue="Always"></telerik:TreeListBoundColumn>
		<telerik:TreeListBoundColumn DataField="ParentID" UniqueName="ParentID" Visible="false"></telerik:TreeListBoundColumn>
		<telerik:TreeListBoundColumn DataField="Name" UniqueName="Name" HeaderText="Mark" ReadOnly="true"></telerik:TreeListBoundColumn>
		<telerik:TreeListCheckBoxColumn DataField="IsIncluded" UniqueName="IsIncluded" HeaderText="Included" ForceExtractValue="Always"></telerik:TreeListCheckBoxColumn>
		<telerik:TreeListCheckBoxColumn DataField="IsExcluded" UniqueName="IsExcluded" HeaderText="Excluded" ForceExtractValue="Always"></telerik:TreeListCheckBoxColumn>
	</Columns>
</telerik:RadTreeList>

And then in the code behind I've got
protected void RadTreeMarkers_NeedDataSource(object sender, TreeListNeedDataSourceEventArgs e)
{
	var treeData = MyFacade.GetTreeData();
	var treeDataGridItems = treeData.Select(m => new GridItem
	{
		ID = m.ID.ToString(),
		Name = m.Name,
		ParentID = m.ParentID.HasValue ? m.ParentID.Value.ToString() : string.Empty,
		IsIncluded = m.IsIncluded.HasValue && m.IsIncluded == true,
		IsExcluded = m.IsIncluded.HasValue && m.IsIncluded == false
	}
	).ToList();
	RadTreeMarkers.DataSource = treeDataGridItems;
}

protected void RadTreeMarkers_ItemDataBound(object sender, TreeListItemDataBoundEventArgs e)
{
	if (e.Item is TreeListDataItem item)
	{
		item.Edit = true;
	}
}

The intention is for (only) the two checkboxes to be always editable in the client.

However, when rendered in the client the root items are editable but none of the child items is editable.

What am I doing wrong?

Doncho
Telerik team
commented on 31 Mar 2023, 04:40 PM

Hi Stephen,

I would assume that you would like to initially load all Items in Edit mode. If so, this can be achieved with an approach similar to the one for doing the same in RadGrid, see Put All Items in Edit Mode.

Here is how this would look like for RadTreeList:

protected void RadTreeList1_PreRender(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        foreach (TreeListDataItem item in RadTreeList1.Items)
        {
            item.Edit = true;
        }
        RadTreeList1.Rebind();
    }
}

In case the TreeList should be loaded expanded, you can use the ItemDataBound event to expand the root items programmatically

protected void RadTreeList1_ItemDataBound(object sender, Telerik.Web.UI.TreeListItemDataBoundEventArgs e)
{
    var item = e.Item as TreeListDataItem;
    if (item != null)
    {
        item.Expanded = true;
    }
}

Stephen
Top achievements
Rank 1
commented on 02 Apr 2023, 10:25 PM

Hi @Doncho,

Thanks for the suggestion. Actually I had tried that already as I'd seen it in other posts, but it's not working.

Stephen
Top achievements
Rank 1
commented on 05 Apr 2023, 02:07 AM | edited

Hi @Doncho,

The only way I was able to get this to work was to set the ExpandCollapseMode to 'Combined' and also add the ItemDataBound method you suggested.

That doesn't seem quite right though - surely it should be able to do it with ExpandCollapseMode as 'Client'?

Stephen.

1 Answer, 1 is accepted

Sort by
1
Accepted
Doncho
Telerik team
answered on 05 Apr 2023, 12:32 PM

Hi Stephen,

When the ExpandCollapseMode is set to Client, all the items should be expanded programmatically in the server-side code and should be put in edit mode.

If you want to load all the Items expanded by default, you can toggle their expand state on the client side with some JavaScript code in the TreeListCreated event.

Here is a sample you can test:

<telerik:RadTreeList ID="RadTreeMarkers" runat="server" ParentDataKeyNames="ParentID" DataKeyNames="ID" AutoGenerateColumns="false"
    OnNeedDataSource="RadTreeMarkers_NeedDataSource" AllowMultiItemEdit="true" ExpandCollapseMode="Client" EditMode="InPlace"
    AllowPaging="false" AllowSorting="false" OnPreRender="RadTreeMarkers_PreRender">
    <ClientSettings>
        <ClientEvents OnTreeListCreated="treeListCreated" />
    </ClientSettings>
    <Columns>
        <telerik:TreeListEditCommandColumn></telerik:TreeListEditCommandColumn>
        <telerik:TreeListBoundColumn DataField="ID" UniqueName="ID" Visible="true" ForceExtractValue="Always"></telerik:TreeListBoundColumn>
        <telerik:TreeListBoundColumn DataField="ParentID" UniqueName="ParentID" Visible="true"></telerik:TreeListBoundColumn>
        <telerik:TreeListBoundColumn DataField="Name" UniqueName="Name" HeaderText="Mark" ReadOnly="true"></telerik:TreeListBoundColumn>
        <telerik:TreeListCheckBoxColumn DataField="IsIncluded" UniqueName="IsIncluded" HeaderText="Included" ForceExtractValue="Always"></telerik:TreeListCheckBoxColumn>
        <telerik:TreeListCheckBoxColumn DataField="IsExcluded" UniqueName="IsExcluded" HeaderText="Excluded" ForceExtractValue="Always"></telerik:TreeListCheckBoxColumn>
    </Columns>
</telerik:RadTreeList>

JavaScript

function treeListCreated(sender, args) {
    var treelist = sender;
    var items = treelist.get_dataItems();
    for (var i = 0; i < items.length; i++) {
        items[i].set_clientExpanded(false);
        items[i].toggleExpandCollapse();
    }
}

C#

protected void RadTreeMarkers_NeedDataSource(object sender, TreeListNeedDataSourceEventArgs e)
{
    RadTreeMarkers.DataSource = GetData();
}

private List<MyGridItem> GetData()
{
    List<MyGridItem> treeDataGridItems = Enumerable.Range(1, 10).Select(m => new MyGridItem
    {
        ID = m.ToString(),
        Name = "Name " + m,
        ParentID = (m % 4 == 0 ? null : (m % 4 + 1).ToString()),
        IsIncluded = m % 2 == 0,
        IsExcluded = m % 2 != 0,
    }).ToList();

    return treeDataGridItems;
}

protected void RadTreeMarkers_PreRender(object sender, EventArgs e)
{
    RadTreeMarkers.ExpandAllItems();
    foreach (TreeListDataItem item in RadTreeMarkers.Items)
    {
        OpenChildForEdit(item);
    }
    RadTreeMarkers.Rebind();
}

protected void OpenChildForEdit(TreeListDataItem item)
{
    foreach (TreeListDataItem childItem in item.ChildItems)
    {
        OpenChildForEdit(childItem);
    }
    item.Edit = true;
}
public class MyGridItem
{
    public string ID { get; set; }
    public string Name { get; set; }
    public string ParentID { get; set; }
    public bool IsIncluded { get; set; }
    public bool IsExcluded { get; set; }
}

I hope this will help you achieve the desired behavior.

Please let me know if any questions come up.

Kind regards,
Doncho
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Stephen
Top achievements
Rank 1
commented on 05 Apr 2023, 10:31 PM

That did the trick. Thank you.
Tags
TreeList
Asked by
Stephen
Top achievements
Rank 1
Answers by
Doncho
Telerik team
Share this question
or