Custom Cell

7 posts, 0 answers
  1. Martin
    Martin avatar
    7 posts
    Member since:
    Jan 2015

    Posted 28 Aug 2015 Link to this post

    Hi

    Can you please provide a sample of how to implement a custom cell in RadListView? Along the lines of https://developer.xamarin.com/guides/cross-platform/xamarin-forms/user-interface/listview/customizing-cell-appearance/#Custom_Cells

    Thanks

    Martin

  2. Martin
    Martin avatar
    7 posts
    Member since:
    Jan 2015

    Posted 28 Aug 2015 Link to this post

    OK I think I have found the solution in ItemSpacing.xaml of the SDKBrowser solution: telerikDataControls:RadListView.ItemTemplate

    I have tried to implement this in my own project, but I get the following error:

    Argument cannot be null.
    Parameter name: obj

    Can I send you the code?

  3. DevCraft banner
  4. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 01 Sep 2015 Link to this post

    Hi Martin,

    Please, do send us the code. You can simply paste the relevant portion of XAML here, or if you think it's more complicated and we would need the entire project, you can open a formal support ticket, where you can attach it. In addition, the support ticket is private, so nobody else will be able to see your code.

    Best regards,
    Ves
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Martin
    Martin avatar
    7 posts
    Member since:
    Jan 2015

    Posted 01 Sep 2015 in reply to Ves Link to this post

    Hi

    This is the code that uses a DataTemplate:

     ```
    <?xml version="1.0" encoding="UTF-8"?>
    <toolkit:BaseView xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    xmlns:local="clr-namespace:Proto;assembly=Proto"
    xmlns:toolkit="clr-namespace:XLabs.Forms.Mvvm;assembly=XLabs.Forms"
    xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
    xmlns:telerikListView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.XamarinForms.DataControls"
    x:Class="Proto.RadFeedPage">
    <toolkit:BaseView.Content>
    <telerikDataControls:RadListView x:Name="feedListView" ItemsSource="{Binding Feed}" BackgroundColor="#55FFFFFF">
         <telerikDataControls:RadListView.ItemTemplate>
           <DataTemplate>
             <local:RadPostViewCell></local:RadPostViewCell>
           </DataTemplate>
         </telerikDataControls:RadListView.ItemTemplate>
         <telerikDataControls:RadListView.LayoutDefinition>
           <telerikListView:ListViewGridLayout HorizontalItemSpacing="10" VerticalItemSpacing="10">
             <telerikListView:ListViewGridLayout.ItemLength>
               <OnPlatform x:TypeArguments="x:Double" iOS="70" Android="90" WinPhone="-1" />
             </telerikListView:ListViewGridLayout.ItemLength>
           </telerikListView:ListViewGridLayout>
         </telerikDataControls:RadListView.LayoutDefinition>
       </telerikDataControls:RadListView>
    </toolkit:BaseView.Content>
    </toolkit:BaseView>
    ```

    And this is the cell:

    ```
    <?xml version="1.0" encoding="UTF-8"?>
    <telerikListView:ListViewTemplateCell xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    xmlns:local="clr-namespace:Proto;assembly=Proto"
    xmlns:telerikListView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.XamarinForms.DataControls"
    x:Class="Proto.RadPostViewCell">
    <telerikListView:ListViewTemplateCell.BindingContext>
        <local:PostViewModel/>
      </telerikListView:ListViewTemplateCell.BindingContext>
    <telerikListView:ListViewTemplateCell.View>
    <StackLayout Orientation="Horizontal" BackgroundColor="White" Padding="10" Spacing="20">
            <Image Source="{Binding ImageSource}" />
                <StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
                    <Label Text="{Binding Title}" FontSize="Medium" TextColor="#34495e"/>
                    <Label Text="{Binding Detail}" FontSize="Small" TextColor="#000000"/>
                </StackLayout>
            </StackLayout>
    </telerikListView:ListViewTemplateCell.View>
    </telerikListView:ListViewTemplateCell>
    ```

     

  6. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 04 Sep 2015 Link to this post

    Hi Martin,

    I can confirm that I also experienced issues when trying to use xaml from another file. This does not seem to be directly caused  by RadListView, as the same issue appears when trying to customize regular xamarin forms ListView cell in the same manner. Luckily, the workaround is simple -- put the custom cell xaml inline and it will work as expected.

    Note, that the issue of not recognizing a type in xaml would still appear for the BindingContext. However, you should actually remove the BindingContext from the template. It is not needed, as the binding context of each cell would be the corresponding object from the ItemsSource:


    <telerikDataControls:RadListView x:Name="feedListView" ItemsSource="{Binding}" BackgroundColor="#55FFFFFF">
        <telerikDataControls:RadListView.ItemTemplate>
            <DataTemplate>
                <telerikListView:ListViewTemplateCell >
                    <telerikListView:ListViewTemplateCell.View>
                        <StackLayout Orientation="Horizontal" BackgroundColor="White" Padding="10" Spacing="20">
                            <Image Source="{Binding ImageSource}" />
                            <StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
                                <Label Text="{Binding Title}" FontSize="Medium" TextColor="#34495e"/>
                                <Label Text="{Binding Detail}" FontSize="Small" TextColor="#000000"/>
                            </StackLayout>
                        </StackLayout>
                    </telerikListView:ListViewTemplateCell.View>
                </telerikListView:ListViewTemplateCell>
            </DataTemplate>
        </telerikDataControls:RadListView.ItemTemplate>


    Best regards,
    Ves
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Martin
    Martin avatar
    7 posts
    Member since:
    Jan 2015

    Posted 30 Oct 2015 Link to this post

    Hi

     

    Am still getting this error, using the following code:

       

    var commentsListView = new RadListView {
        ItemTemplate = new DataTemplate (() => {
            var commentLabel = new Label ();
            titleLabel.SetBinding<PostItemCommentViewModel> (Label.TextProperty, vm => vm.OwnerFullName);
     
            return new ViewCell {
                View = new StackLayout {
                    Padding = new Thickness (0, 5),
                    Orientation = StackOrientation.Horizontal,
                    Children = {
                        commentLabel
                    }
                }
            };
        })
    };
     
    commentsListView.SetBinding<T> (RadListView.ItemsSourceProperty, vm => vm.PostItemViewModel.Comments, BindingMode.OneWay);

     

    Please note: I am using Telerik.UI for Xamarin Q2 2015; is this perhaps fixed in Q3?

  8. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 04 Nov 2015 Link to this post

    Hi Martin,

    When using Telerik RadListView, the DataTemplate should contain Telerik.XamarinForms.DataControls.ListView.ListViewTemplateCell. Your code uses Xamarin.Forms.ViewCell. Please use it like this:

    var commentsListView = new RadListView {
        ItemTemplate = new DataTemplate (() => {
            var commentLabel = new Label ();
            titleLabel.SetBinding<PostItemCommentViewModel> (Label.TextProperty, vm => vm.OwnerFullName);
      
            return new Telerik.XamarinForms.DataControls.ListView.ListViewTemplateCell {
                View = new StackLayout {
                    Padding = new Thickness (0, 5),
                    Orientation = StackOrientation.Horizontal,
                    Children = {
                        commentLabel
                    }
                }
            };
        })
    };

    You can find an example in SDKBrowser solution, distributed with the suite. You can find it in this folder:

    %PROGRAMFILES(x86)%\Telerik\UI for Xamarin Q3 2015\Examples\XamarinForms

    Best regards,
    Ves
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
DevCraft banner