Displaying TreeGrid on Dialog and Changing Column Width Programmatically Issues

[Yunus]

Hi,

I'm having below issues with TreeGrid component. There is also an attached project displaying the issues.

1. I need to change column width programmatically. ("Set Width" buttton in attached project)
It is described for DataGrid in the post below but I could not get it working for TreeGrid.
https://www.syncfusion.com/forums/154298/set-the-width-of-a-specific-column-from-code-behind

2. When the TreeGrid has a column that uses "ShowCheckBox" and TreeGrid is displayed inside a dialog,
then the header check box does not appear. At this state, if I check a checkbox then page breaks.
("Display Dialogue" button in attached project)

    2.a. I can mock the header check box by using HeaderTemplate for the associated column,
           but it is not fully functional as expected. It only prevents the exception when I click a checkbox.
           (Dialogue Template button in attached project)

     2.b. When I mock the header checkbox and try to check records on DataBound event, then the page breaks.
           I think fixing "2" should fix this one too.
          (Dialog.T & Check Ver.1 button in attached project. First check some records from main page then click the button)

           I can bypass this exception by putting a delay before checking the records.
          (Dialog.T & Check Ver.2 button in attached project.)

3. If I try to check a parent record programmatically then the outcome is different then what I expect.
For example, in the attached project, check the boxes for 3 and 4.
Checking 4 will select its children too, this is expected.
Now I want to check the same records on a new TreeGrid.
Click Dialog.T & Check Ver.2 button, 3 and its parent are checked correctly but 4 and its children are not.

Can you please review?

Thanks & Kind regards

Attachment: SfTreeGridTest_20230117_9509c5e2.rar

[Pon Selva Jeganathan]

Yunus,

Query: I need to change column width programmatically. 

We are able to replicate the issue at our end. To avoid this issue, we suggest you binding value to the width property for changing the width value dynamically.

Please refer to the below code snippet,

<SfTreeGrid @ref="treeGrid" DataSource="@TreeData" IdMapping="Id" ParentIdMapping="ParentId" TreeColumnIndex="0" Toolbar="toolbarItems"

            AllowSelection="true" HasChildMapping="HasChildren" AutoCheckHierarchy="true" LoadChildOnDemand="true" AllowResizing=true>

    <TreeGridEvents TValue="BusinessObject" ….

        <TreeGridColumn Field="Description" HeaderText="Description" Width="@width" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>

…

    </TreeGridColumns>

</SfTreeGrid>

 

public async Task OnToolbarClick(Syncfusion.Blazor.Navigations.ClickEventArgs args)

    {

        if (args.Item.Id == "SetDescriptionWidth")

        {

            width = "800";

           

        }

     

    }

 

Query: When the TreeGrid has a column that uses "ShowCheckBox" and TreeGrid is displayed inside a dialog, then the header check box does not appear. At this state, if I check a checkbox then page breaks.

We are able to replicate the issue at our end.

On further validation, we have considered the reported issue (“Script error thrown when using checkbox column in Treegrid within a dialog”) as a bug. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle) and will include the fix in our upcoming Nuget release.

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link. 

https://www.syncfusion.com/feedback/40527/script-error-thrown-when-using-checkbox-column-in-treegrid-within-a-dialog

Note: To view the above feedback, kindly login into your account. 

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.

Query: If I try to check a parent record programmatically then the outcome is different then what I expect.

We are able to replicate the issue at our end. To avoid this issue, we suggest you pass only the parent record index. When we pass the parent record index in the selectCheckboxes method, all children record checkboxes for the corresponding parent record will be selected. So, there is no need to pass the child record index along with the parent record index.

Regards,

Pon selva

[Pon Selva Jeganathan]

Yunus,

We are glad to announce  that fix for the issue “Script error thrown when using checkbox column in Treegrid within a dialog” in our release (20.4.0.50). So please upgrade to our latest version of Syncfusion NuGet package to resolve the reported issue. Please find the Nuget package for latest fixes and features from below.

Nuget : https://www.nuget.org/packages/Syncfusion.Blazor.TreeGrid

Please refer to the below fb link:

https://www.syncfusion.com/feedback/40527/script-error-thrown-when-using-checkbox-column-in-treegrid-within-a-dialog