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

[Stephen]

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]

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]

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]

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.

[Doncho]

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

[Stephen]

That did the trick. Thank you.