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. Image for the cookie policy date

Custom ViewCell

Hello everyone,I'm trying to implement a custom viewcell (with renderers on each platform) for the syncfusion listview. I'm using datatemplate selectors for getting the cells. Unfortunately I'm not getting it to work. I tried to provide an empty ViewCell and it gives me errors on the android level. Can you provide a small example, in how to implement custom viewcells for the syncfusion listview? Is it supported?Kind regardsDaniel

11 Replies

DC Daniel Cleemann August 1, 2017 10:36 AM UTC

Ok, a small update: I downloaded the Xamarin example project from here. https://developer.xamarin.com/samples/xamarin-forms/customrenderers/viewcell/. Works really fine, but when I exchange the ListView with the SyncfusionListView, it crashes!

The stracktrace is in the attachment. Really disappointing right now, because we're nearly in the finished state of our app and I need to implement a custom recycable ViewCell for Ads so that they are not constantly reloaded everytime I scroll through the list...


Attachment: Stacktrace_7ce65324.zip


DB Dinesh Babu Yadav Syncfusion Team August 1, 2017 10:38 AM UTC

Hi Daniel, 
 
Thank you for using Syncfusion Products. 
 
SfListView provides support for customize the appearance of each item with different templates(Example: CustomViewCell) based on specific constraints using DataTemplateSelector and the following UG documentation illustrates you to achieve the same. 
 
 
For your reference, we have attached the sample and you can download it from the below link. 
 
 
Please let us know if you require further assistance. 
 
Regards, 
Dinesh Babu Yadav 
 



DC Daniel Cleemann August 1, 2017 10:53 AM UTC

Hello Dinesh,thank you for your reply. 

Unfortunately that's not what I was looking for. My goal is to implement a CustomCell with a custom cellrenderer. In the provided example from you the view is already defined in the IncomingViewCell.xaml or OutgoingViewCell.xaml.

What I need to do is this: The cell is filled with a platform specific view (a NativeExpressAdView from Admob to be specific). I create this view on the platform level and this has to be shown in the listview. 

With the Xamarin ListView a custom cell with a custom rendering works fine. With SyncFusion it crashes (see stacktrace in my former post). I need to use SyncFusion because of the SwipingFeatures.

Update: It seems that a SyncFusionListView can't handle an empty ViewCell and never goes down to the platform specific cellrenderer... is this true?

I'd appreciate any help with this!




DB Dinesh Babu Yadav Syncfusion Team August 3, 2017 02:26 AM UTC

Hi Daniel, 
 
Sorry for the inconvenience caused. 
 
We would like to let you know that the SfListView layout each element in the underlying collection in PCL itself and while loading the ViewCell’s View from respective renderers instead of PCL project, we did not get the element(i.e., View is null) to layout the item. So, SfListView does not layout any items in view and the reported exception throws due to view is null.  
 
Also, you have stated that you have used the each platform ViewCell renderer for better recycling of item while scrolling in XF ListView. In XF ListView, for better scrolling performance you can load the View in respective platform renderer project as you like your requirement. Thus, SfListView is completely developed with UI Virtualization(Item recycling)concept, while scrolling we have reused or recycled the element and updated the binding context of the element only for better scrolling performance equal to native renderers. So, we recommend you to load the View in PCL project itself instead of loading in renderer projects. 
 
Please let us know if you require further assistance. 
 
Regards, 
Dinesh Babu Yadav 



DC Daniel Cleemann August 4, 2017 03:45 PM UTC

Hi Dinesh,

thank you for your reply. Sadly I cannot load the View in the PCL project itself.

Also I don't use a viewcellrenderer, because it's not working with Syncfusion. I use a viewrenderer, because the Native Ads are giving me no other choice. I have to provide a NativeExpressAdView on each platform (android & iOS). That's why the renderer kicks in. The problem is: Each time the view is created (it's not reused, I did some breakpoints while scrolling) I'll create a new AdRequest which loads an ad. If the cell would be reused, I won't need to load an ad. But because the viewrenderer is always new created, when I scroll up or down the list, the ads are constantly loading new. That means kind of hickups in the app (blank list elements, which are filled, when the ad is loaded).

I know it's maybe hard to follow. But with in order to use native ads from Google, I have to implement a Viewrenderer which is always recreated (the typical Control == null check is always true). A better way for me would have been to create a CustomViewCellRender which is being reused. But I cannot implement one with Syncfusion Listview (with Xamarin Listview it works, try the example: https://github.com/xamarin/xamarin-forms-samples/tree/master/UserInterface/ListView/CustomCells). 

So I come to the conclusion that Syncfusion ListView does not support viewcells with custom renderers on each platform right now, because it's not calling the platform specific cellrenderer or crashes (see stacktrace in second post), if you provide an empty ViewCell tag in xaml.



DB Dinesh Babu Yadav Syncfusion Team August 8, 2017 03:59 AM UTC

Hi Daniel, 
 
As we stated in our previous update, the SfListView completely developed based on UI Virtualization concept(i.e., item reusing technique) to load the items in the View. So we have created the element and respective renderer based on the View only and then we have updated the BindingContext of the each item while scrolling. So, loading the native renderer view in SfListView’s ItemTemplate cannot be achieved as we have mentioned in previous update.  
 
Please let us know if you require further assistance. 
 
Regards, 
Dinesh Babu Yadav 
 



GV Ganesan V Syncfusion Team August 10, 2017 09:00 PM UTC

Hi Daniel, 
 
Sorry for the inconvenience caused. 
 
Based on your requirement “Load native view in renderer by create the empty view in PCL”, we have achieved in the sample by loading the empty View in PCL and load the NativeView in ListViewItem Renderer in Android. We have make some source level changes to meet your requirement and you could follow the below steps, 
 
  • Create the empty ViewCell in PCL.
  • Create extension class for ItemGenerator.
  • Initialize and assign ItemGeneratorExt to ListView
  • Create extension class for ListViewItem.
  • Create renderer class for ListViewItem extension and load NativeView.
 
Note: We have create the custom assembly particularly to meet your requirement and its temporarily. If the below workaround is meet your requirement, then we could make this source changes in our side and we will provide the stable assemblies. 
 
Create empty ViewCell in PCL: 
 
You could create the empty ViewCell in PCL project. Please refer the below code snippet, 
 
 
this.listView.ItemTemplate = new DataTemplate(typeof(ViewCellExt)); 
 
public class ViewCellExt : ViewCell 
{ 
 
} 
 
Extension for ItemGenerator: 
 
Create the extension class for ItemGenerator for create the own ListViewItem by override method “OnCreateListViewItem” like below code snippet. And based on the item type you can create the ListViewItem. 
 
public class ItemGeneratorExt : ItemGenerator 
{ 
   public ItemGeneratorExt(SfListView listview) : base(listview) 
   { 
 
   } 
 
   protected override ListViewItem OnCreateListViewItem(int rowIndex, ItemType type, object data = null) 
   { 
     if(type == ItemType.Record) 
     { 
       return new ListViewItemExt(); 
     } 
     return base.OnCreateListViewItem(rowIndex, type, data); 
   } 
} 
 
Initialize and assign ItemGeneratorExt to ListView 
  
You need to intialize the ItemGeneratorExt and assign it into ListView, in order to create own ListViewItem. Please refer the below code snippet, 
 
 
this.listView.ItemGenerator = new ItemGeneratorExt(this.listView); 
 
 
Extension for ListViewItem: 
  
To load the NativeView in renderer, you could create the extension of ListViewItem and create respective renderer for this. By notify the item data (Underlying model data), you could find actual listview item in renderer and based on that you can load the NativeView. In the example, we are maintain the item data on BindingContextChanged method by ItemData property and based on this property changed, you can load the NativeView in renderer. Please refer the below code snippet to create the extension of ListViewItem, 
 
public class ListViewItemExt : ListViewItem 
{ 
   private object itemData; 
 
   public object ItemData 
   { 
     get { return itemData; } 
     set 
     { 
       itemData = value; 
       OnPropertyChanged("ItemData"); 
     } 
   } 
 
   protected override void OnBindingContextChanged() 
   { 
     this.ItemData = this.BindingContext; 
     base.OnBindingContextChanged(); 
   } 
} 
 
Renderer for ListViewItemExt and Load a NativeView: 
  
You can refer the below code example for create the renderer class for ListViewItemExt and load the NativeView based on item data. 
 
[assembly:ExportRenderer(typeof(ListViewItemExt),typeof(ItemRendererExt))] 
namespace ListView_CustomRenderer.Droid 
{ 
    public class ItemRendererExt : ItemRenderer 
    { 
        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e) 
        { 
            base.OnElementPropertyChanged(sender, e); 
 
            if(e.PropertyName == "ItemData") 
            { 
               var textView = new TextView(this.Context); 
               textView.Text = "Runtime View"; 
               this.SetNativeControl(textView); 
            } 
        } 
    } 
} 
 
We have prepared the sample based on your requirement and attached with assemblies in the below link, 
 
 
Regards, 
Ganesan V 



DC Daniel Cleemann August 15, 2017 01:11 PM UTC

Hey Ganesan,

thank you for your work and effort! That's what I was looking for :-) The ads are now loaded only once or twice (depending on the list elements on screen) and are then recycled. Great! If you like to see an example to check if my implementation was the from you intended way, then you can have a look here: https://goo.gl/SRW6yS.

Kind regards,

Daniel



DB Dinesh Babu Yadav Syncfusion Team August 16, 2017 11:31 AM UTC

Hi Daniel, 
 
Thanks for the update. 
 
Regards, 
Dinesh Babu Yadav 
 



DC Daniel Cleemann September 25, 2017 08:48 AM UTC

Hello Dinesh,

sadly I have to reopen this issue. Your solution seems not to work with DataTemplateSelectors. Please have a look at this example: SyncFusion_ItemRecycle_TemplateSelector

As you can see, when you scroll down and up through the list, the colored text cells (Hi from Android xyz) are always recreated. The background colors and the xyz numbers changes everytime.

Can you please adapt your solution so that it works with DataTemplateSelectors too?

Kind regards

Daniel



MK Muthu Kumaran Gnanavinayagam Syncfusion Team September 26, 2017 03:22 PM UTC

Hi Daniel, 
 
We have analyzed your reported issue and able to reproduce the issue in our side also. But we regret to let you know that currently SfListView do not have support to recycle the ListViewItem when DataTemplateSelector is used. However we have considered it as an enhancement and will include this support for our upcoming main release 2017 Vol 4 which will be available on first week of November. 
 
Regards, 
G.Muthu Kumaran. 


Loader.
Live Chat Icon For mobile
Up arrow icon