We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

listView Template

Thread ID:

Created:

Updated:

Platform:

Replies:

146910 Aug 25,2019 04:29 PM UTC Aug 27,2019 10:40 AM UTC Blazor 3
loading
Tags: ListView
ebi torabi
Asked On August 25, 2019 04:29 PM UTC

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


Attachment: listView_db87c100.rar

Mohan Ravi [Syncfusion]
Replied On 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 


ebi torabi
Replied On 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

Mohan Ravi [Syncfusion]
Replied On 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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon