Forum Xamarin Xamarin.Forms

Which of Telerik and Syncfusion have the best Xamarin Forms components?

RobertCarlssonRobertCarlsson USMember ✭✭
edited September 2018 in Xamarin.Forms

Im looking to buy either Telerik or Syncsusions Xamarin forms component suit, mostly for the slider drawer menu and forms controls (like checkbox, radiobutton, segmented control), because I dont want to waste time on basic things

Does anyone have any opinion on how they are to work with? anyone better than the other? Could you recommend or recommend not to pick any of them?

(Only answer if you have tested both or any of them)

/Robert

Answers

  • NicolasKrierNicolasKrier FRMember ✭✭✭
    edited October 2018

    Well it depends on which kind of component you need.

    I'm trying to switch from SyncFusion to Telerik.
    There might be more constrols in SyncFusion but for sure the number of bugs you'll face is huge.

    Few exemples :

    • SfCalendar : you have to provide a custom renderer and do this kind of things otherwise it crashes every single time.
    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
            {
                try
                {
                    base.OnElementPropertyChanged(sender, e);
                }
                catch (Exception ex)
                {
                    Debug.WriteLine(ex.ToString());
                }
            }
    
            protected override void Dispose(bool disposing)
            {
                try
                {
                    base.Dispose(disposing);
                }
                catch (Exception ex)
                {
                    Debug.WriteLine(ex.ToString());
                }
            }
    
    • SfTreeView : no Renderer exposed. Thus, if you navigate to a page with the SfTreeView, navigating back will make a crash (it tries to unwire some events and booom) but without accessible renderer, the previous trick can't be done. TLDR : you can't use this control until they provide some hotfixes.
    • SfSegmentedView : if you have 2 SfSegmentedView in the same row or in a horizontal StackLayout, it will use twice the required height. You have to set the height of the item if you want to use it. They have a Padding property which isn't of type Thickness etc.

    The only control I've found awesome was the SfListView but the bug on iOS with HasUnevenRow is still there (if you add a panel which is visible when item is selected, the row height isn't updated) but the problem exist in XF too so it might not be their fault.

    As you can see I've face crashes and issues on 4 of 5 controls I've tried to use.
    At that point I'm trying to migrate to Telerik and see if it's easier or the same mess :)

    I would like to say that there is very little documentation / forum thread on SyncFusion issues that means you feel alone. If you download the demo app, there is 50% you face a crash in less than 2 minutes of use.
    Just take a look at the TreeView documentation they just say "hey you can use DataBinding and customize templates !"
    And don't be fooled by the images of the control themself if you look at the code when there is a checkbox in the listview sample screenshot, the checkbox is actually an image. Those kind of things makes me very sad to stay polite :disappointed:

    Edit : actually, the documentation remains quite good. The SfTreeView is still in Preview state. Maybe I was expecting too much.

    I'll keep you up to date on what I discover.

  • NicolasKrierNicolasKrier FRMember ✭✭✭

    OMG ! You should download the demo of Telerik Xamarin Forms on either iOS or Android and you'll be amaze by how far they pushed the controls. Most are built with SkiaSharp, use smooth animation and look awesome (compared to SyncFusion which has more basic native look control)

    My team tried Telerik for Forms 2 years ago and moved to SyncFusion. We all tried the demo app today and we are all impressed by the good work they did.

    I got a go from my manager to remove SyncFusion (except SfListView, it will be the last control to migrate since it's working well) from our dependencies and give a real shot to Telerik.

  • NMackayNMackay GBInsider, University admin

    @NicolasKrier said:
    OMG ! You should download the demo of Telerik Xamarin Forms on either iOS or Android and you'll be amaze by how far they pushed the controls. Most are built with SkiaSharp, use smooth animation and look awesome (compared to SyncFusion which has more basic native look control)

    My team tried Telerik for Forms 2 years ago and moved to SyncFusion. We all tried the demo app today and we are all impressed by the good work they did.

    I got a go from my manager to remove SyncFusion (except SfListView, it will be the last control to migrate since it's working well) from our dependencies and give a real shot to Telerik.

    We're using Telerik, don't expect any better documentation as it's poor but the controls are generally very good (Radcheckbox and Maskinput aside which are horrible to style and use), not all the controls use Skia, 4 or 5 do. SF has more controls but as has been said, I did find them buggy when evaluating but SF and Telerik are the market leaders for XF controls, if I was an Indy dev I'd go with SF due to the free community licence., why wouldn't you...bugs aside :smile:

    Here's what's in the pipeline.
    https://www.telerik.com/support/whats-new/xamarin-ui/roadmap

  • RobertCarlssonRobertCarlsson USMember ✭✭

    Sounds like Telerik will be an obvious choice for me then. I prefer less bugs to pretty every day of the week...

    Thanks guys!

  • NicolasKrierNicolasKrier FRMember ✭✭✭

    Update : I got the segmentControl and the Treeview working at first try without any issue or custom renderer to add.

  • NMackayNMackay GBInsider, University admin

    There is a bug in RadEntry in iOS, the focus events don't fire, I have raised and a fix should be out in a month or so. Just one to watch out for.

  • NicolasKrierNicolasKrier FRMember ✭✭✭

    Hey thanks for your feedback.

    After using the SegmentControl, except the problem of height (the height isn't well calculated and need a value to work as expected otherwise there is a white space below the control). I must admit that the syncfusion's SegmentControl is faaaaaaar more customizable (radius for elements, color, segmentBar on top or bottom, more color to set, setting the number of visible items, horizontal scrolling).
    But at least, the Telerik one work well and get its height well calculated without having to set it.

    For the TreeView I couldn't went far with SyncFusion so it's hard to compare but I found out fast how to get selectable items very fast (except I can't find how to make CheckBoxMode="Propagate" to work without crashing).

    @NMackay said:
    We're using Telerik, don't expect any better documentation as it's poor but the controls are generally very good (Radcheckbox and Maskinput aside which are horrible to style and use), not all the controls use Skia, 4 or 5 do. SF has more controls but as has been said, I did find them buggy when evaluating but SF and Telerik are the market leaders for XF controls, if I was an Indy dev I'd go with SF due to the free community licence., why wouldn't you...bugs aside :smile:

    At least they have a good github repo which contains a lot of sample with several complex scenario.

  • NMackayNMackay GBInsider, University admin

    Yeah, the have to add more styling ability to some of the controls, been complaining about that. RadBorder is really useful too, used it a lot. RadBusy is so easy to use, you can also use visual state manager to build in styling rules to change the RadEntry border when it has focus etc (Hence why I found the RadEntry bug).

    https://www.telerik.com/blogs/custom-visual-state-management-for-xamarin-forms

  • NicolasKrierNicolasKrier FRMember ✭✭✭
    edited October 2018

    Hello, it's me again.

    I wanted to shared what I've discovered so far.

    There is less bug with Telerik but IMHO it's less performant too. I might end up mixing control of both world... What a nightmare... My app is going to be so heavy :)

    My 2 cents about the controls I've compared :

    RadTreeView vs SfTreeView

    Not MVVM friendly at all. I had to expose several bindable property to allow my VM to trigger the CollapseAll / ExpendAll method. For the CheckedItems ? Same problem : I had to create a bindable property (ObservableCollection) and listen to the CollectionChanged event to call CheckItem/Unchek item when needed otherwise there is no way to bind a source of selected item (unless I missed something).
    I finally came up with something working but after spending too much time in my opinion. That's something that should be inside the box.
    From a company like Telerik it's really anoying : it's like they never heared about MVVM or they might think "I don't give a f**** you'll do that with code behind and that's all otherwise go create your own control hahahahahaha" / "you can still extend our control and do the job you paid us for loooool").
    But whatever I say, it still works great !

    The SfTreeView doesn't work : it crashes each time you navigate back so I didn't investigate much in selecting TreeViewItem and binding to a list of SelectedTreeViewItems.

    Too bad they don't expose an interface like ICheckableItem with a bool IsChecked that they trigger. Thus, it would have been far easier to deal with.

    Conclusion : RadTreeView wins

    RadGridView vs SfListView

    That's the control which make me think and truely believe I'll keep the SyncFusion ListView control. Why ?
    If you don't use the ItemTemplateSelector and bind the visibility of control (inside the CellView) it will be sooooo sloooow.
    If you use ItemTemplateSelector, it will be better but each time you change something like IsSelected (which determines which template to use in the TemplateSelector class) the whole ListView will be rendered again and everything will flicker.
    I also faced some random issue that I can't fix : when changing IsSelected, sometimes the ListView doesn't render well and I have some row with a wrong height. Once I start scrolling, they get the right size but the whole screen start to scroll more or less than I am actually scrolling. You end up thinking "where was the item I wanted to tap on ?".
    They took a wrong decision in making a BorderWidth and a BorderLocation. Why didn't they use a BorderThickness ?!!! If i set a BorderThicknes to 0,2,0,4 they could have removed enums and bindable property and make life easier for developpers.

    The SfListView render faster and scroll faster. It doesn't flicker at all. The only drawback I see is that their ItemTemplateSelector isn't updated at runtime : if your ItemTemplateSelector use a IsSelected property to chose which template to display and you set IsSelected = !IsSelected, the item template's height won't be updated.
    That's why they have a SelectedItemTemplate.

    Conclusion : SfListView wins

    RadSegmentControl vs SfSegmentControl

    The telerik control has 0 customization available compared to the SfSegmentControl.
    But the telerik control calculate its height better than the SfSegmentControl.

    Conclusion : if you want a simple segment control and customisation isn't a requirement, telerik wins otherwise SyncFusion wins.

    Finally, I remember why I avoid as much as possible all those kind of control in the past and chose the hard way to do everything myself. It was more time consuming but I was always satisfied with the result I had. Plus, the time you spend trying to make those Telerik / SyncFusion control working, could have been spend on your own custom control.

    IMHO, if you want to get productivity, you'll have to experiment both Telerik and SyncFusion 's control and pick the one which works the best in your scenario. Kind of a shame but what else could we do ?

    Edit : what if SyncFusion and Telerik are owned by the same holding and that's the best way they found to sell you the components twice ? :D

  • RHudsonRHudson CAMember ✭✭✭

    I'll chime in. I'm using a different set of SF controls. The SfNumericTextBox, SfCheckbox and SfPicker. My current project is a survey/data collection app.

    I chose SF because of the price :-)

    These controls work very well for the most part except for a serious SfPicker bug. I'm using it as a date picker, so 3 columns (Year, Month, Date)

    A want to hide/show the picker based on a checkbox.

    There is no IsVisible property, even though Intellisense suggests there is. As a workaround I wrap it in a Stacklayout, which I can hide/show with a bindable bool.

    The bug is, if the picker is initially invisible... when it goes visible the 3 columns bleed together in the center in a big mess.

    But otherwise the controls seem really good.

  • LanceMcCarthyLanceMcCarthy USMember ✭✭

    @NicolasKrier

    I'd love to help get your feedback to the Telerik development team (I'm a Senior Technical Support Engineer for Telerik DevTools).

    Regarding the TreeView
    I think the dev team is working on making the TreeView items more MVVM friendly (i.e. expansion state based on model property) where property changed on that model property would change the expanded state. I can follow up

    Regarding GridView
    Did you mean the RadListView or the DataGrid?

    Regarding SegmentedControl
    Having an ItemTemplate and a model-based ItemsSource is highly requested. I'm not sure the progress on this, but I can find out as well.

    If you'd like to get direct response from the dev team, open a support ticket here and let me know what the ticket number is. I will escalate it directly to the developers responsible for that control(s).

  • NicolasKrierNicolasKrier FRMember ✭✭✭
    edited November 2018

    @LanceMcCarthy hello. Nice you came here. Thanks for your time.

    Expansion state based on model property would be awesome. But please, if Telerik add a IsExpendedPropertyPath="MyIsSelectedProperty" or ItemIsExpended="{Binding MyIsSelectedProperty}", ask the developpers to do the same for IsChecked so we won't have to handle 2 collections or to hack the control to deal with that in a MVVM way.

    Show them this code : that's how I bind it so far (I show you how I handled collapseAll and ExpendAll with MVVM : severals bindable property with OneWayToSource so my VM can get a ref to the executed methods) :

    public TreeView()
    {
        private bool _isCollectionChangedFromUi;
    
        ExpendAllAction = (shouldExpend) =>
        {
            if (ItemsSource == null) return;
    
            if (shouldExpend)
                ExpandAll();
            else
                CollapseAll();
        };
    
        CheckedItems.CollectionChanged += CheckedItems_CollectionChanged;
    }
    
    public static BindableProperty ExpendAllActionProperty = BindableProperty.Create(nameof(ExpendAllAction), typeof(Action<bool>), typeof(TreeView), null, BindingMode.OneWayToSource);
    public Action<bool> ExpendAllAction
    {
        get { return (Action<bool>)GetValue(ExpendAllActionProperty); }
        set { SetValue(ExpendAllActionProperty, value); }
    }
    
    public static BindableProperty ItemsSourceCheckedProperty = BindableProperty.Create(nameof(ItemsSourceChecked), typeof(ObservableCollection<object>), typeof(TreeView), null, BindingMode.OneWay, propertyChanged: ItemsSourceCheckedProperty_Changed);
    public ObservableCollection<object> ItemsSourceChecked
    {
        get { return (ObservableCollection<object>)GetValue(ItemsSourceCheckedProperty); }
        set { SetValue(ItemsSourceCheckedProperty, value); }
    }
    private static void ItemsSourceCheckedProperty_Changed(BindableObject bindable, object oldValue, object newValue)
    {
        if (bindable is TreeView treeView)
        {
            if (oldValue != null && oldValue is ObservableCollection<object> oldCollection)
                oldCollection.CollectionChanged -= ItemsSourceChecked_CollectionChanged;
    
            if (newValue != null && newValue is ObservableCollection<object> newCollection)
                newCollection.CollectionChanged += ItemsSourceChecked_CollectionChanged;
    
            void ItemsSourceChecked_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
            {
                // Execute only if source changed from view model.
                if (treeView._isCollectionChangedFromUi) { return; }
    
                // The callback CheckedItems_CollectionChanged shouldn't be called while we add/remove items manually.
                treeView.CheckedItems.CollectionChanged -= treeView.CheckedItems_CollectionChanged;
    
                if (e.OldItems != null)
                {
                    foreach (var item in e.OldItems)
                    {
                        treeView.UncheckItem(item);
                    }
                }
    
                // Check if the VM does a ItemsSourceChecked.Clear();
                if (e.Action == NotifyCollectionChangedAction.Reset)
                {
                    var newItems = new List<object>();
                    IEnumerator<object> enumerator = ((TreeViewItemsCollection)treeView.CheckedItems).GetEnumerator();
                    while (enumerator.MoveNext()) newItems.Add(enumerator.Current);
                    foreach (var item in newItems)
                    {
                        treeView.UncheckItem(item);
                    }
                }
                else
                {
                    // Unchecking previous items.
                    if (e.OldItems != null)
                    {
                        foreach (var item in e.OldItems)
                        {
                            treeView.UncheckItem(item);
                        }
                    }
    
                    // Checking new items.
                    if (e.NewItems != null)
                    {
                        foreach (var item in e.NewItems)
                        {
                            treeView.CheckItem(item);
                        }
                    }
                }
                treeView.CheckedItems.CollectionChanged += treeView.CheckedItems_CollectionChanged;
            }
        }
    }
    
    private void CheckedItems_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
    {
        if (ItemsSourceChecked == null || !(CheckedItems is TreeViewItemsCollection collection)) return;
    
        _isCollectionChangedFromUi = true;
    
        var previousItems = ItemsSourceChecked.ToList();
        var newItems = new List<object>();
        IEnumerator<object> enumerator = collection.GetEnumerator();
        while (enumerator.MoveNext()) newItems.Add(enumerator.Current);
    
        foreach (var item in previousItems)
        {
            if (!newItems.Contains(item))
                ItemsSourceChecked.Remove(item);
        }
    
        foreach (var item in newItems)
        {
            if (!ItemsSourceChecked.Contains(item))
                ItemsSourceChecked.Add(item);
        }
    
         _isCollectionChangedFromUi = false;
    }
    }       
    

    Thus I can have a collection of SelectedItems in my viewModel.

    I do this trick again for the RadListView to be able to call from my VM (once I've refreshed the data or once the user filter the collection by an entry input).

        public class ListView : RadListView
        {
            public ListView()
            {
                ScrollToFirstItemAction = () =>
                {
                    if (ItemsSource == null) return;
                    ScrollItemIntoView(ItemsSource.Cast<object>().FirstOrDefault());
                };
            }
    
            public static BindableProperty ScrollToFirstItemActionProperty = BindableProperty.Create(nameof(ScrollToFirstItemAction), typeof(Action), typeof(ListView), null, BindingMode.OneWayToSource);
            public Action ScrollToFirstItemAction
            {
                get { return (Action)GetValue(ScrollToFirstItemActionProperty); }
                set { SetValue(ScrollToFirstItemActionProperty, value); }
            }
        }
    

    Notice that I should have did ScrollToItemAction instead of the First one. Scrolling to a given item give is more possibility : either you give the MyItemsSourcePropertyBinded.First() to go top or you can give another item and scroll to this). But I just need go to top when I wrote this code.

    Yes sorry I was talking about the RadListView not the RadGridView. Sorry.

    For the Segment control, that would be nice to have an item template.
    Maybe those codes would help :D

    Did you ever compared the SfListView to the RadListView ?

    Have a good day

  • LanceMcCarthyLanceMcCarthy USMember ✭✭

    @NicolasKrier Thanks for the code example and supporting info for RadTreeView, I've shared it with the appropriate team (I do notice a recently opened support ticket that has very similar code to your above example. I'll be sure to leave a note in the ticket thread that they can come here for more context if needed).

    Regarding the ItemTemplate for SegmentedControl's items, I looked at some of the items I've opened and indeed I've created a Feature Request for this and the development team has approved it. You can add your voice by upvoting/commenting here: SegmentedControl: Enable users to display custom content in order to visualize complex objects

  • NicolasKrierNicolasKrier FRMember ✭✭✭
    edited November 2018

    Hello @LanceMcCarthy

    I've opened an issue on the RadTreeView : when I call CollapseAll, if the first element is out of the screen (after a scroll) it crashes.

    I've upvoted the feature request for the segment control. Thanks ! That would be awesome.

  • LanceMcCarthyLanceMcCarthy USMember ✭✭

    @NicolasKrier Just in case you haven't seen it yet, we release a service pack today with several improvements/fixes. One of those fixes is for the issue you experienced.

    Here are the release notes: https://www.telerik.com/support/whats-new/xamarin-ui/release-history/ui-for-xamarin-r3-2018-(version-2018-3-1109-310)

  • NicolasKrierNicolasKrier FRMember ✭✭✭
    edited November 2018

    @LanceMcCarthy hello
    It's funny : I've seen the Telerik popup 10 mins ago :D

    A good point for Telerik over SyncFusion : I've send several email to SyncFusion about some bugs I faced. They told me they will get in touch with their developpers but I don't have any news since 2 weeks or much.

    Telerik release a fix less than 5days after I opened an issue.

    You guys rock ! And so do you for your awesome feedback and coming back here to let me know this.

    Edit : I've tested the last release and yes it's fixed ! Awesome :)

  • NMackayNMackay GBInsider, University admin

    Here's a great example of why I choose Telerik for my last two companies, the entry bug has been resolved.

    https://feedback.telerik.com/Project/168/Feedback/Details/250449-entry-ios-focused-and-unfocused-events-are-not-fired

  • NicolasKrierNicolasKrier FRMember ✭✭✭

    Hi @raju , thanks for your words.

    I really appreciate that you spend time on this thread to give more information. That's nice to know that so I will fill some support ticket on monday. I will update my app's package on monday too and will forward you any problem faced or resolved.

    I will keep you up to date about something I noticed after updating the SfListView : I use to display an additional stackLayout with several buttons inside in the SelectedItemTemplate.
    It seems that it has been broken : everything was running perfect with the behavior I expect but now when I try to click on the button, it's not executing the binded command and the item get unselected (like a dismiss behavior). It works if I long press the button (the item get deselected with a simple touch, not a long/holded touch).
    Will try to deploy again monday to see if it's not a corrupt deployment (sometimes, you unplug the device while debugging and the app gets corrupted : it doesn't work as it would).

    Thanks again, it seems that SyncFusion is back in the best component race :)

    I wish you a good weekend, see you next week ;)

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    Some of useful packages can be free, opensource

    for example

  • NicolasKrierNicolasKrier FRMember ✭✭✭

    Hello @AndreiMisiukevich_
    Thanks for those links.
    Did you try the HotReload ? Does it works well ?

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    @NicolasKrier currently it work on iOS
    But on this week i'm going to fix Android support :)

Sign In or Register to comment.