This is a migrated thread and some comments may be shown as answers.

Reusable CellStyleSelector

8 Answers 167 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Vitor
Top achievements
Rank 1
Vitor asked on 01 Apr 2016, 09:00 AM

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!

 

8 Answers, 1 is accepted

Sort by
0
Stefan Nenchev
Telerik team
answered on 06 Apr 2016, 08:11 AM
Hi Vitor,

You can apply a Style that targets the ":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.
0
Vitor
Top achievements
Rank 1
answered on 06 Apr 2016, 08:27 AM

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?

0
Stefan Nenchev
Telerik team
answered on 08 Apr 2016, 01:12 PM
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 .

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.
0
Vitor
Top achievements
Rank 1
answered on 11 Apr 2016, 12:51 PM

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 !

 

 

0
Stefan Nenchev
Telerik team
answered on 12 Apr 2016, 11:36 AM
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.
0
Vitor
Top achievements
Rank 1
answered on 12 Apr 2016, 12:11 PM

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

 

 

0
Stefan Nenchev
Telerik team
answered on 14 Apr 2016, 01:18 PM
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.
0
Vitor
Top achievements
Rank 1
answered on 14 Apr 2016, 01:37 PM

it WORKS!

Thank you!

Tags
GridView
Asked by
Vitor
Top achievements
Rank 1
Answers by
Stefan Nenchev
Telerik team
Vitor
Top achievements
Rank 1
Share this question
or