1. Home
  2. Forum
  3. Blazor
  4. listView Template

listView Template

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


Attachment: listView_db87c100.rar

3 Replies
MR Mohan Ravi Syncfusion Team August 26, 2019 10:15 AM UTC

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. 




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 


ET ebi torabi August 26, 2019 07:26 PM UTC

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

MR Mohan Ravi Syncfusion Team August 27, 2019 10:40 AM UTC

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. 

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. 


Regards, 
 Mohan

Loader.
Up arrow icon