TreeList with multiple edited rows

[Jean-Charles]

Hello

I have to display a list of parameters with a hierarchic relation between them. I use a RadTreeList and it works fine.
My tree list has a "Value" column.

I would like to change some values in this column but I don't want to make the changes row by row (by entering in edit mode, making modification and updating). I'd prefer to keep all the rows in edit mode, make the modifications in some of them and validate by clicking on an external button.

I didn't find something like that in the demos.

 I tried to use an ItemTemplate for the edit column.

<telerik:RadTreeList runat="server" ID="RadTreeListParameters"
                                             Skin="Telerik"
                                             AutoGenerateColumns="false"
                                             DataKeyNames="ServiceParameterID" ParentDataKeyNames="ParentParameterID"
                                             AllowSorting="true"
                                             DataSourceID="ObjectDataSource1"
                                             OnDataBound="RadTreeListParameters_DataBound"
                                             ItemStyle-CssClass="RowStyle"
                                             AlternatingItemStyle-CssClass="AlternatingRowStyle"
                                             HeaderStyle-CssClass="HeaderStyle"
                                             SelectedItemStyle-CssClass="SelectedRowStyle"
                                             >
                            <ClientSettings>
                                <Scrolling AllowScroll="false" UseStaticHeaders="false" />
                                <Resizing AllowColumnResize="true" ResizeMode="NoScroll" />
                            </ClientSettings>
                            <Columns>
                                <telerik:TreeListBoundColumn DataField="ServiceParameterID" UniqueName="ServiceParameterID" HeaderText="ServiceParameterID" Display="true"></telerik:TreeListBoundColumn>
                                <telerik:TreeListBoundColumn DataField="Role" UniqueName="Role" HeaderText="Role" ReadOnly="true"></telerik:TreeListBoundColumn>
                                <telerik:TreeListBoundColumn DataField="Type" UniqueName="Type" HeaderText="Type" ReadOnly="true"></telerik:TreeListBoundColumn>
                                <telerik:TreeListBoundColumn DataField="Name" UniqueName="Name" HeaderText="Name" ReadOnly="true"></telerik:TreeListBoundColumn>
                                <telerik:TreeListTemplateColumn DataField="Value" UniqueName="TemplateColumn" HeaderText="Value">
                                    <ItemTemplate>
                                        <asp:TextBox runat="server" ID="tbxValue" Value='<%# Eval("Value") %>' />
                                    </ItemTemplate>
                                </telerik:TreeListTemplateColumn>
                            </Columns>
                        </telerik:RadTreeList>

The display is correct but when there is a postback, the data are reloaded. So I would like to keep the modifications in a dictionary in order to overwrite the bound values.

protected void RadTreeListParameters_DataBound(object sender, EventArgs e)
{
    foreach (TreeListDataItem item in this.RadTreeListParameters.Items)
    {
        string id = item.GetDataKeyValue("ServiceParameterID").ToString();

        if (this.parameters_values_dico != null && this.parameters_values_dico.Keys.Contains(id))
        {
            (item["TemplateColumn"].FindControl("tbxValue") as TextBox).Text = this.parameters_values_dico[id];
        }
    }
}

My problem is that I can't get the event when a textbox is modified (to save the new value in the dictionary. I added:
AutoPostBack="true" OnTextChanged="tbxValue_TextChanged"  in my template textbox description but the method is never called.

Has anyone an idea to solve my problem or to provide another way to implement my feature  (without ItemTemplate and edit mode) ?

Thank you

Jean-Charles

[Daniel]

Hello Jean-Charles,

You can try the approach demonstrated in the attached website. It is fully runnable, you only need to add the DLL files to the bin folder.

Regards,
Daniel
the Telerik team

[Jean-Charles]

Hello Daniel,
Thank you for your help.
Jean-Charles

[Jean-Charles]

Hello Daniel,

I made a test with your TreeListBatchEdit example. It's ok concerning the edition mode of the "value" column, but it remains a problem with the postback. If, after a value modification, I click on a node in order to expand it, it causes a postback. This postback causes a reload of the treelist (NeedDataSource), and my modification is overwritten by the reload.

I tried to bind the tree list on a business object saved in viewstate, but the problem remains. When a postback arrives, I get the object from viewstate and I set it as DataSource of the tree list, before to bind. As the postback always arrives before other events, I have not the possibility to save the modification in the business object and in viewstate before the reload.

Is it possible to implement what I would like ? Or am I obliged to save each modification in database to be taken into account in the display on reload ?

Regards,
Jean-Charles

[Daniel]

Hello Jean-Charles,

You could try something like this:

Dictionary<TreeListHierarchyIndex, object> indices = new Dictionary<TreeListHierarchyIndex, object>();

void RadTreeListParameters_ItemCommand(object sender, TreeListCommandEventArgs e)
{
    PersistEditedItems();
}

void RadTreeListParameters_ItemDataBound(object sender, TreeListItemDataBoundEventArgs e)
{
    TreeListDataItem item = e.Item as TreeListDataItem;
    if (item != null && item.IsInEditMode)
    {
        RestorePersistedItem(item);
    }
}

private void RestorePersistedItem(TreeListDataItem item)
{
    if (indices.ContainsKey(item.HierarchyIndex))
    {
        item.GetColumnEditor("ServiceParameterID").SetValues(new object[] { indices[item.HierarchyIndex] });
    }
}

private void PersistEditedItems()
{
    foreach (TreeListDataItem item in RadTreeListParameters.EditItems)
    {
        Hashtable newValues = new Hashtable();
        item.ExtractValues(newValues);
        indices.Add(item.HierarchyIndex, newValues["ServiceParameterID"]);
    }
}

Of course, it might need some fine tuning in order to match your requirements but I'm sure you will get the idea.

Best regards,
Daniel
the Telerik team

[Jean-Charles]

Hello Daniel,
Thanks for your response.
Regards.

[Manar]

Hi Daniel,
Do you have the source code of "HTML5/JavaScript" for TreeList Batch Editing?

Thanks

[Viktor Tachev]

Hi Manar,

I am not sure I completely understand your query. Would you elaborate in more detail on what is your requirement? Also, elaborate on what is the the expected behavior of the control.

Regards,
Viktor Tachev
Telerik

 

 

[Manar]

Hi Viktor,
- Does Kendo-TreeList support Batch Editing?
- Is there an Demo Code of Kendo-TreeList Batch Editing (HTML5/JavaScript)?

Thank you
Manar

[Nikolay Rusev]

Hello Manar,

No, Kendo UI TreeList supports only inline and popup editing modes. They are demonstrated in the Editing and Popup editing examples.

Regards,
Nikolay Rusev
Telerik