listView Template

[ebi torabi]

If possible, give an example of the following template implemented in Blazor

Attachment: listView_db87c100.rar

[Mohan Ravi]

Hi Torabi, 

Thanks for using Syncfusion Products. 

I have attached a project containing the sample you have requested. Check them below. 

It is also worth noting that the same sample is available live in our online sample browser with source code and also the entire sample browser is available in GitHub repository. 

Live sample: https://ej2.syncfusion.com/blazor/Listview/ListTemplates 

GitHub: https://github.com/syncfusion/ej2-blazor-samples/ 

Sample: https://www.syncfusion.com/downloads/support/directtrac/146910/ze/ListviewItemTemplate-1769578719 

In Server Side Blazor projects, if we are using large amount of data to render items like in this sample or in general, we need to add the below configuration in startup.cs file to avoid the below exception. 

Exception: 

fail: Microsoft.AspNetCore.SignalR.HubConnectionHandler[2] 

      Error when processing requests. 

System.IO.InvalidDataException: The maximum message size of 32768B was exceeded.  

The message size can be configured in AddHubOptions. 

Configuration: 

services.AddServerSideBlazor(); 

services.AddServerSideBlazor().AddHubOptions(o => 

{ 

                o.MaximumReceiveMessageSize = 102400000; 

}); 

Regards, 

Mohan 

[ebi torabi]

hi Mohan

Thank you very much for your example.

How can I retrieve the selected item information in the button event by clicking Select button?

<div class="col-lg-12 control-section">

    <EjsListView ID="listview_template"

                 DataSource="@DataSource"

                 ModelType="@Model"

                 ShowHeader="true"

                 TValue="NewsDataModel"

                 HeaderTitle="Syncfusion Blog"

                 CssClass="e-list-template">

        <ListViewFieldSettings Id="Id" Text="Text" Child="Child"></ListViewFieldSettings>

        <ListViewTemplates>

            <Template>

                @{

                    NewsDataModel currentData = context as NewsDataModel;

                    <div class="@(currentData.Category != null ? "clearfix desc e-list-wrapper e-list-multi-line e-list-avatar" : "clearfix e-list-wrapper e-list-multi-line e-list-avatar")">

                        @if (currentData.ImgSrc != "")

                            {

                                <img class="e-avatar" src="@UriHelper.ToAbsoluteUri($"css/listview/images/{currentData.ImgSrc}.png")">

                            }

                        <span class="e-list-item-header">@currentData.Title</span>

                        <span class="e-list-content e-text-overflow">@currentData.Description</span>

                        @*@if (currentData.TimeStamp != "")

                        {*@

                            <div id="list-logo" onclick="event.stopPropagation();">

                                <EjsButton Content="select" @ref="@SelectItem" @ref:suppressField OnClick="OnSelectListViewItem">

                                </EjsButton>

                                @*<span class="bookmark" title="We can customize this element to perform our own action"></span>

                                    <span class="comments" title="We can customize this element to perform our own action"></span>

                                    <span class="share" title="We can customize this element to perform our own action"></span>*@

                            </div>

                        @*}*@

                        @if (currentData.TimeStamp != "")

                        {

                            @*<div class="timeStamp">@currentData.TimeStamp</div>*@

                        }

                    </div>

                }

            </Template>

        </ListViewTemplates>

    </EjsListView>

</div>

@code {

    EjsButton SelectItem;

    EjsListView<NewsDataModel> f;

    

    List<NewsDataModel> DataSource = ListviewDataSource.DataSource;

    NewsDataModel Model = new NewsDataModel();

    public void OnSelectListViewItem(UIMouseEventArgs args)

    {

    

    }

}

Attachment: listview1_9b92037c.rar

[Mohan Ravi]

Hi Torabi, 

Thanks for the update. 

Your requirement in Listview can be achieved, but before that there are few things needs to be noted about Listview and its design. 

When we are using Nested Listview (like in this sample), on clicking any of the item it will navigate to its child item(s). If we want to listen to onclick event in a button (like you asked), we need to block the Listview’s child navigation by using “stopPropagation” JS API. 

In Blazor, there is no native way of blocking the event (Please refer the below GitHub thread), so we have used JS as direct string to block child navigation Listview. 

https://github.com/aspnet/AspNetCore/issues/5545#issuecomment-469748054 

So if we have blocked the Click event, then we cannot listen to it anymore, but still your requirement can be achieved by using onmousedown event which does same thing as you asked. Please refer the below code snippet and sample. 

<ListViewTemplates> 

            <Template> 

                @{ 

                    …. 

                    …. 

                        <div id="list-logo" onclick="event.stopPropagation();"> 

                            <EjsButton Content="select" 

                                       @onmousedown="@(e => OnSelectListViewItem(currentData))"></EjsButton> 

                        </div> 

                    </div> 

                } 

            </Template> 

        </ListViewTemplates> 

 

@code { 

         …. 

         …. 

         …. 

    public void OnSelectListViewItem(NewsDataModel currentData) 

    { 

        Console.WriteLine(currentData.Description); 

        Console.WriteLine(currentData.Content); 

    } 

} 

Also, you can just pass the “currentData” to the event handler method that listening in to get the selected item data. 

Please feel free to contact us again if you have further queries. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/146910/ze/ListviewItemTemplate1228795887 

Regards, 

 Mohan