Resolve context for the SfListView Template inside the EditForm Blazor SyncFusion

[Yaroslav Kulish]

I have a SfListView inside the EditForm. And in the Template section, at the line 'var fileItem = (context as AttachmentFile);' I receive the next error:

Cannot convert type 'Forms.EditContext' to 'Models.AttachmentFile' via a reference conversion, boxing conversion, unboxing conversion, wrapping conversion, or null type conversion. A conversion with the as operator is allowed by inheritance, reference conversions, and boxing conversions.

Here is my code:

<EditForm EditContext="@myContext" OnSubmit="OnSendClick">

    <SfListView EnableVirtualization="true" DataSource="@attachments">

        <ListViewFieldSettings TValue="AttachmentFile" Id="@nameof(AttachmentFile.Id)" Text="@nameof(AttachmentFile.Name)">

</ListViewFieldSettings>

        <ListViewTemplates TValue="AttachmentFile">

            <Template>

                @{

                    var fileItem = (context as AttachmentFile);

                    <div class="rezmessage-attachment-file">

                        <i class="@fileItem.Icon"></i>

                        <a rel='nofollow' href="@fileItem.WebPath" target="_blank">fileItem.Name</a>

                    </div>

                }

            </Template>

        </ListViewTemplates>

    </SfListView>

</EditForm>

How to identify that context relates to the SfListView, not to EditForm?

[Prasanth Madhaiyan]

Hi Yaroslav,

Greetings from Syncfusion support.

We have validated your reported query in the ListView component by preparing the sample using your shared code snippets. We understand that you are looking to access the context within the ListView template. To achieve this, you simply need to name the context using the Context property of the ListView component.

Refer to the below code snippets.

[Index.razor]

 

@using Syncfusion.Blazor.Lists

<EditForm EditContext="@myContext" OnSubmit="OnSendClick">

    <SfListView EnableVirtualization="true" DataSource="@attachments">

        <ListViewFieldSettings TValue="AttachmentFile" Id="@nameof(AttachmentFile.Id)" Text="@nameof(AttachmentFile.Name)">

        </ListViewFieldSettings>

        <ListViewTemplates TValue="AttachmentFile">

            <Template Context="templateContext">

                @{

                    var fileItem = templateContext;

                    <div class="rezmessage-attachment-file">

                        <i class="@fileItem.Icon"></i>

                        <a rel='nofollow' href="@fileItem.WebPath" target="_blank">@fileItem.Name</a>

                    </div>

                }

            </Template>

        </ListViewTemplates>

    </SfListView>

</EditForm>

 

@code {

    private EditContext myContext = new EditContext(new object()); // Initialize with a suitable model

    private List<AttachmentFile> attachments = new List<AttachmentFile>

    {

        new AttachmentFile { Id = 1, Name = "File 1", Icon = "file", WebPath = https://example.com/file1.pdf },

        new AttachmentFile { Id = 2, Name = "File 2", Icon = "file", WebPath = https://example.com/file2.pdf }

        // Add more AttachmentFile objects as needed

    };

 

    private void OnSendClick()

    {

        // Handle form submission logic here

        // This method will be called when the form is submitted

    }

 

    public class AttachmentFile

    {

        public int Id { get; set; }

        public string Name { get; set; }

        public string Icon { get; set; }

        public string WebPath { get; set; }

    }

}

For your reference, we have attached the sample.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorListViewSample-874389651

Check out the attached sample and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

[Yaroslav Kulish]

did sense. thank you a lot!