Reusable CellStyleSelector

9 posts, 0 answers
  1. Vitor
    Vitor avatar
    53 posts
    Member since:
    Mar 2016

    Posted 01 Apr Link to this post

    Hello Telerik,

     

    So far I could get my Grid cells styles to be dynamically changed based on my own roles, using this tutorial

    http://docs.telerik.com/devtools/wpf/controls/radgridview/style-selectors/cell-style-selector.html

     

    but there are two things left to be done regarding this issue.

    still following the given approach, I want to:

     

    - set an image to a checkbox, whether it is true or false.

    - and also set that style in a separate file, so that it may be reused. inside a resourcedictionary file.

     

    My point is, I will have several grids through my application using the same set of styles in their cells. based on each own role.

     

    Please help me to achieve that!

     

  2. Stefan Nenchev
    Admin
    Stefan Nenchev avatar
    280 posts

    Posted 06 Apr Link to this post

    Hi Vitor,

    You can apply a Style that targets the "telerik:GridViewCheckBox" or "CheckBox"(depends on your exact scenario) and apply different images in the content based on the value through Style Triggers. Please check the attached project and consider such implementation at your end.

    Please update me if such approach would be useful.

    Regards,
    Stefan Nenchev
    Telerik
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Vitor
    Vitor avatar
    53 posts
    Member since:
    Mar 2016

    Posted 06 Apr in reply to Stefan Nenchev Link to this post

    Hi Stefan,

    That sample you provided is indeed helpful. There is just a small detail missing:

    I need the "box" of the checkbox hidden, so that only the image will be displayed.

    I tried

    <Setter Property="Visibility" Value="Hidden" /> but then the whole thing will be hidden, obviously...

    how can I proceed?

  5. Stefan Nenchev
    Admin
    Stefan Nenchev avatar
    280 posts

    Posted 08 Apr Link to this post

    Hi Vitor,

    In such case, you can use a GridViewDataColumn and in its CellTemplate to add a Converter that returns a certain image based on the boolean value. The following thread should be helpful - Template Column show image.

    Regards,
    Stefan Nenchev
    Telerik
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  6. Vitor
    Vitor avatar
    53 posts
    Member since:
    Mar 2016

    Posted 11 Apr in reply to Stefan Nenchev Link to this post

    Hi Stefan.

    When I tried to use the approach (the one that has a sample attached) from that topic,

    Only the "unchecked" image shows. Because when the Convert class is hit, the "value" will always have this

    {System.Windows.Controls.ContentControl}

    instead of a Boolean. thus returning the unchecked image.

    And there is no way to find the data value inside. the value I find shows null

    here is my converter (which is pretty much the one of his sample)

    using System;
    using System.Windows.Data;
    using System.Windows.Media;
    using System.Windows.Media.Imaging;
     
    namespace TelerikVirtualization.Utils
    {
        public class BoolToImageConverter : IValueConverter
        {
     
            #region IValueConverter Members
     
            public object Convert(object value, System.Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                if (value is bool) <---- this line here. it is always ContentControl
                {
                    if ((bool) value)
                    {
                        return new BitmapImage(new Uri(@"Images/TrueImage.png", UriKind.Relative));
                    }
                }
                return new BitmapImage(new Uri(@"Images/FalseImage.png", UriKind.Relative));
            }
     
            public object ConvertBack(object value, System.Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                return value;
            }
     
            #endregion
        }
    }

    My xaml is:

    <telerik:GridViewDataColumn DataType="{x:Null}" UniqueName="Discontinued">
                        <telerik:GridViewColumn.CellStyle>
                            <Style TargetType="{x:Type telerik:GridViewCell}">
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="{x:Type telerik:GridViewCell}">
                                            <Image Stretch="UniformToFill" Width="50" Height="50" Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content, Converter = {StaticResource boolToImageConverter}}" />
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </telerik:GridViewColumn.CellStyle>
                    </telerik:GridViewDataColumn>

    I dont understand why that sample works and mine doesn't.

    Please clarify why am I getting that object instead of a boolean

    thank you !

     

     

  7. Stefan Nenchev
    Admin
    Stefan Nenchev avatar
    280 posts

    Posted 12 Apr Link to this post

    Hi Vitor,

    You can use a DataTemplate within the Column`s CellTemplate:

      <telerik:GridViewDataColumn DataMemberBinding="{Binding Champion}">
                        <telerik:GridViewDataColumn.CellTemplate>
                            <DataTemplate>
                                <Image Height="16" Width="16" Source="{Binding Path=Champion, Converter={StaticResource ImageConverter}}"></Image>
                            </DataTemplate>
                        </telerik:GridViewDataColumn.CellTemplate>
    </telerik:GridViewDataColumn>

    And in the ImageConverter:

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
          {
              if ((bool)value == false )
              {
                  return "Images/FalseImage.png";
              }
              else
              {
                  return "Images/TrueImage.png";
              }
          }

    I have updated the project for your convenience.

    Regards,
    Stefan Nenchev
    Telerik
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  8. Vitor
    Vitor avatar
    53 posts
    Member since:
    Mar 2016

    Posted 12 Apr in reply to Stefan Nenchev Link to this post

    Hi Stefan.

     

    Then I get null pointer exception.

    but I found what is causing the issue

    Virtualization.

    That is how I load my list. I reverted it to manual binding (observable collection) and it worked. however that is not my case.

    Could you please use virtualization to your sample?

     

    ViewModel.cs

    public VirtualQueryableCollectionView View { get; set; }
            Controller controller;
     
            public ViewModel()
            {
                controller = new Controller();
            }
            public void Load(bool complete)
            {
                View = new VirtualQueryableCollectionView(controller.GetList(complete)) { LoadSize = 10 };
            }

    Controller.cs

    public class Controller
        {
            public IQueryable GetList(bool complete)
            {
                DataClasses1DataContext context = new DataClasses1DataContext();
                var result = from x in context.MyTables
                         select new MyTableEntity() {
                             Date = x.Date.GetValueOrDefault(DateTime.Now),
                             Name = x.Name,
                             UnitPrice = x.UnitPrice.GetValueOrDefault(0),
                             id = x.ID,
                             Discontinued = x.Discontinued
                             ,Image = "/click_me.bmp"
                             ,Name3 = "anything goes"
                             ,Name4 = "anything goes"
                             ,Name5 = "anything goes"
                             ,Name6 = "anything goes"
                             ,Name7 = "anything goes"
                             ,Name8 = "anything goes"
                             ,Name9 = "anything goes"
                             ,Children = complete ? (from y in context.MyChildTables
                                         where y.ParentID == x.ID
                                         select new MyChildTableEntity { ID = y.ID, Name = y.Name, ParentID = y.ParentID }) : null
                         };
                return result;
            }

    XAML.cs

    public partial class MainWindow : Window
    {
        bool complete = false;
        public MainWindow(bool complete)
        {
            InitializeComponent();
            DataContext = new ViewModel();
            this.complete = complete;
        }
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            ((ViewModel)DataContext).Load(complete);
        }

    }

    XAML

    <telerik:RadGridView Name="RadGridView"  ItemsSource="{Binding View}" IsReadOnly="True" Style="{StaticResource VitorStyle}"  AutoGenerateColumns="False">

     

    Thank you

     

     

  9. Stefan Nenchev
    Admin
    Stefan Nenchev avatar
    280 posts

    Posted 14 Apr Link to this post

    Hello Vitor,

    Adding a null check in your converter should be enough:

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
          {
              if (value != null)
              {
                  if ((bool)value == false)
                  {
                      return "Images/FalseImage.png";
                  }
                  else
                  {
                      return "Images/TrueImage.png";
                  }
              }
              return value;
          }


    Regards,
    Stefan Nenchev
    Telerik
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  10. Vitor
    Vitor avatar
    53 posts
    Member since:
    Mar 2016

    Posted 14 Apr in reply to Stefan Nenchev Link to this post

    it WORKS!

    Thank you!

Back to Top
UI for WPF is Visual Studio 2017 Ready