Issue with Data Form when using Form Group

I am experiencing a weird issue with the data form when using a form group.


Here is the code where I'm setting the column count to 2 and column spacing to 20px. There are two fields currently, one a text box and the other a custom component which is just a combo box.

FormGroupCodeIssue.png


And this is how that renders. Note that not only does the form layout not render properly but the combo box control actually renders as a numeric box with the up down arrows. I'm not allowed to type text characters into it but I can type numbers.

FormGroupAppIssue.png

And when I click one of those arrows in the numeric box, the control re-renders as the correct combo box control.

FormGroupAppIssue2.png


I have another example of the form without the form group and everything loads and runs just fine without any of these issues. When will this be fixed?


4 Replies

PK Priyanka Karthikeyan Syncfusion Team February 29, 2024 09:45 AM UTC

Hi Joe Sperlak,

We have included the fix for the issue Components not rendered properly inside the FormGroup" with our package version “24.2.8”. Therefore, we recommend upgrading to our latest version to resolve the current issue. Kindly check out the updated sample below,


Root cause:

The component does not get re-rendered when using a template within the FormGroup render fragment. Consequently, changes made to the template are only reflected after the component is re-rendered, typically triggered by clicking the submit button. To address this issue we have calling stateHasChanged at the appropriate point after updating the template, you ensure that the component re-renders to reflect the changes immediately rather than waiting for a subsequent event such as clicking the submit button.

Release notes:  https://blazor.syncfusion.com/documentation/release-notes/24.2.8?type=all#data-form


Sample:
https://blazorplayground.syncfusion.com/BDVTXVLEUSjmCgJA

Regards,

Priyanka K



JS Joe Sperlak February 29, 2024 04:24 PM UTC

This portion now works properly but I am experiencing a different issue with groups.

I have the ColumnCount set to 2 and it applies it to the form groups instead of the fields.

FormGroupAppIssue3.png

I have a third form group and I get this error when trying to run the code. Even if I update the ColumnCount to 3 it throws the same error.

formGroupAppIssue4.png



JS Joe Sperlak replied to Joe Sperlak February 29, 2024 07:37 PM UTC

So I did some testing and was able to get the group column stuff to work after reading through the documentation again but I still get that same error while trying to set up a drop down list of enums.


<FormItem Field="@nameof(CreateAssetDto.WarrantyPeriodInterval)">
    <Template>
        <label class="e-form-label">Warranty Interval</label>
        <SfDropDownList DataSource="@_warrantyPeriodIntervals" TItem="string" TValue="WarrantyInterval?" @bind-Value="@_asset.WarrantyPeriodInterval"></SfDropDownList>
    </Template>
</FormItem>


private string[] _warrantyPeriodIntervals = [];
protected override void OnInitialized()
{
    _warrantyPeriodIntervals = Enum.GetNames(typeof(WarrantyInterval));
}




PK Priyanka Karthikeyan Syncfusion Team March 1, 2024 03:59 PM UTC

Hi Joe Sperlak,

We have diligently worked on creating a sample based on the provided code snippet. However, regrettably, we were unable to reproduce any issues in the latest version.

To expedite the resolution process and provide you with the most accurate assistance, could you please consider modifying the shared sample to align it more closely with your specific scenario? Additionally, it would greatly assist us if you could provide detailed steps to replicate the issue on our end. If feasible, including a video illustration sample would further enhance our understanding of the problem.

Your cooperation in this matter is highly valued, and we are committed to ensuring a swift and effective resolution to any challenges you may be facing. Thank you for your time and collaboration.

Sample: https://blazorplayground.syncfusion.com/BZhzXUNWSwUyqTWu

Regards,

Priyanka K


Loader.
Up arrow icon