GUI ideas needed ...

[scott]

So I have these grids that are populated by Telerik DataTables. The DataTables get populated from random queries that the user builds.  This works great.  Then along comes this user who queries in a huge column of VarChar(max) and the grid gets ugly because the field is so wide and probably contains carriage control - picture an email message as the column value...

I need an idea to handle this situaton.  If a column gets wide, I'd like to truncate the data that the user sees to say 40-50 characters, then add a button beside the text.  User clicks the button and reads the wide column in a separate window...

Ideas ?

[Vlad]

Hi,

 You can use TextTrimming column property to achieve this. 

Best wishes,
Vlad
the Telerik team

[scott]

Hi Vlad.  Two things.

Thing 1.
That elips is half the job.  Do you have any thoughts on making an elips column interactive ?   Right now all I can think of is a double click event in the cell, but thats not as visual as the stuff you guys do.  Maybe some kind of on-enter on-exit evens in the cells that shows / hides a button.  I don't know - but I want it to look good :)

Thing 2.
I don't know who to send this comment to, but I wanted to tell you guys that your controls are awesome and a blast to work with.  I've been writing code for thirty years in xwindows, decwindows, xmotif and ms windows as well as "before windows".  My code behind stuff does amazing things but my GUIs were always awful :)   Your stuff makes my stuff look better.

Scott

[Yavor Georgiev]

Hello scott,

 Please check out the project attached. It shows how to add a button in the cell that, when clicked, will display the full contents of the data field in a separate window.

Kind regards,
Yavor Georgiev
the Telerik team

[scott]

Hi Yavor - thank you so much !!!  There is a problem though.

If "Manchester Utd." becomes "Manchester\r\nUtd." then the cell height and the height of the button each double.  Is there a way to control that so this carriage-control gets ignored ?   I don't want the cell to show the carriage control, but I want the click handler to see the carriage control ... Is there a way to format the strings dislpayed by the cell ?

Thanks

[Yavor Georgiev]

Hi scott,

 You can achieve that by using a Converter in the TextBlock's binding. Please see the attached updated project.

All the best,
Yavor Georgiev
the Telerik team

[scott]

Hi Yavor... I wanted to say thanks and I'll look at this soon - I looked at the first sample though after I coded something with a popup button that chased the mouse across the screen when over the right grid cells, but I'm not real happy with it.  

When looking at your sample, I see stuff like this in the XAML:

<telerik:GridViewDataColumn DataMemberBinding="{Binding Name}">
    <telerik:GridViewDataColumn.CellTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Name}"/>
                <Button Command="{Binding ShowLongTextCommand, Source={StaticResource MyViewModel}}" CommandParameter="{Binding}">...</Button>
            </StackPanel>
        </DataTemplate>
    </telerik:GridViewDataColumn.CellTemplate>
</telerik:GridViewDataColumn>

All of my columns are dynamic so I have to figure out how to do something like this in code - probably id grid.DataLoaded() ?

I wish I read your reply sooner :)
Scott

[Yavor Georgiev]

Hi scott,

 You can define the DataTemplate in your UserControl's Resources and reference it from code-behind where you create your columns.

Regards,
Yavor Georgiev
the Telerik team

[scott]

Thank you for walking me through this Yavor, I'm still not gettng it.  The data template has Text="{Binding name}".  How do I reference that binding for my RadGrid column named "ColumnA" so that the text of "ColumnA" displays beside the button ?

[Yavor Georgiev]

Hello scott,

 Unfortunately there is no way right now in Silverlight to create or edit a DataTemplate from code-behind. Your only option is to define it in XAML. This makes including column-specific information in the CellTemplate of a column created from code-behind pretty much impossible.

Kind regards,
Yavor Georgiev
the Telerik team

[scott]

Hi Yavor.  Actually there is a way to create data templates on the fly and use them.  Here is a complete working example of that.  Right now I'm stuck on the converter and I haven't wired up the button, but the data template itself seems to work.  Check it out.

Standard mainpage XAML:

<UserControl x:Class="DynamicDataTemplates.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:my='clr-namespace:DynamicDataTemplates'
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
    </Grid>
</UserControl>

Code Behind:

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Net;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Markup;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

using Telerik.Data;
using Telerik.Windows.Controls;
using Telerik.Windows.Data;
using Telerik.Windows.Controls.GridView;

namespace DynamicDataTemplates
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            RadGridView gv = new RadGridView();
            gv.DataLoaded += new EventHandler<EventArgs>(gv_DataLoaded);
            gv.ItemsSource = GetData();
            LayoutRoot.Children.Add(gv);
        }

        // apply a dynamic data template to a dynamic column
        void gv_DataLoaded(object sender, EventArgs e)
        {
            RadGridView gv = sender as RadGridView;
            foreach (GridViewColumn col in gv.Columns)
            {
                StringBuilder sb = new StringBuilder();
                sb.Append("<DataTemplate ");
                sb.Append("xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' ");
                sb.Append("xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' ");
                sb.Append("xmlns:telerik='http://schemas.telerik.com/2008/xaml/presentation' ");
                sb.Append("xmlns:my='clr-namespace:DynamicDataTemplates");
                sb.Append(";assembly=DynamicDataTemplates'>");
                sb.Append("<Grid> ");
                //sb.Append("<Grid.Resources> <my:StringConverter x:Key='StringConverter'/> </Grid.Resources> ");
                sb.Append("<StackPanel Orientation='Horizontal'>");
                sb.Append("<Button Content='More...' />");
                sb.Append("<TextBlock Text = '{Binding " + col.Header.ToString() + "}' />");
                //sb.Append("<TextBlock Text = '{Binding " + col.Header.ToString() + "}, Converter={StaticResource stringConverter}' />");
                sb.Append("</StackPanel>");
                sb.Append("</Grid>");
                sb.Append("</DataTemplate>");

                string xaml = sb.ToString();
                DataTemplate template = XamlReader.Load(xaml) as DataTemplate;
                col.CellTemplate = template;
                col.Width = 200;
            }
        }

        public class StringConverter : IValueConverter
        {
            public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
            {
                return ((string)value).ToUpper();
            }

            public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
            {
                return ((string)value).ToLower();
            }
        }

        // returns a data table - one column - column name is random and contains a really long string
        public DataTable GetData()
        {
            Random r = new Random((int)DateTime.Now.Second);
            List<string> colNames = new List<string>()
                { "ColumnA", "ColumnB", "ColumnC", "ColumnD" };
            List<string> words = new List<string>()
                { "apples ", "pears ", "oranges ", "bananas ", "grapefruit ", "grapes ", "mangos ", "tangerines " };
            DataTable dt = new DataTable();

            string colName = colNames[r.Next() % colNames.Count];
            dt.Columns.Add(new DataColumn() { ColumnName = colName, DataType = typeof(string) });
            for (int i = 0; i < 10; i++)
            {
                string s = "";
                for (int j = 0; j < 100; j++)
                    s += words[r.Next() % words.Count];
                DataRow dr = dt.NewRow();
                dr[colName] = s;
                dt.Rows.Add(dr);
            }

            return dt;
        }
    }
}

[scott]

This does dynamic datatemplate binding and conversion on dynamic radgrid columns.  Just have to figure out how to get the button clck...

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Net;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Markup;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

using Telerik.Data;
using Telerik.Windows.Controls;
using Telerik.Windows.Data;
using Telerik.Windows.Controls.GridView;

namespace DynamicDataTemplates
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            RadGridView gv = new RadGridView();
            gv.DataLoaded += new EventHandler<EventArgs>(gv_DataLoaded);
            gv.ItemsSource = GetData();
            LayoutRoot.Children.Add(gv);
        }

        // apply a dynamic data template to a dynamic column
        void gv_DataLoaded(object sender, EventArgs e)
        {
            RadGridView gv = sender as RadGridView;
            foreach (GridViewColumn col in gv.Columns)
            {
                StringBuilder sb = new StringBuilder();
                sb.Append("<DataTemplate ");
                sb.Append("xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' ");
                sb.Append("xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' ");
                sb.Append("xmlns:telerik='http://schemas.telerik.com/2008/xaml/presentation' ");
                sb.Append("xmlns:my='clr-namespace:DynamicDataTemplates;assembly=DynamicDataTemplates'>");
                sb.Append("<Grid> ");
                sb.Append("<Grid.Resources> <my:StringConverter x:Key='aStringConverter'/> </Grid.Resources> ");
                sb.Append("<StackPanel Orientation='Horizontal'> ");
                sb.Append("<Button Content='More...' Tag = '{Binding " + col.Header.ToString() + "}'/> ");
                sb.Append("<TextBlock Text = '{Binding " + col.Header.ToString() + ", Converter={StaticResource aStringConverter}}' /> ");
                sb.Append("</StackPanel> ");
                sb.Append("</Grid> ");
                sb.Append("</DataTemplate> ");

                string xaml = sb.ToString();
                DataTemplate template = XamlReader.Load(xaml) as DataTemplate;
                col.CellTemplate = template;
                col.Width = 200;
            }
        }



        // returns a data table - one column - column name is random and contains a really long string
        public DataTable GetData()
        {
            Random r = new Random((int)DateTime.Now.Second);
            List<string> colNames = new List<string>()
                { "ColumnA", "ColumnB", "ColumnC", "ColumnD" };
            List<string> words = new List<string>()
                { "apples ", "pears ", "oranges ", "bananas ", "grapefruit ", "grapes ", "mangos ", "tangerines " };
            DataTable dt = new DataTable();

            string colName = colNames[r.Next() % colNames.Count];
            dt.Columns.Add(new DataColumn() { ColumnName = colName, DataType = typeof(string) });
            for (int i = 0; i < 10; i++)
            {
                string s = "";
                for (int j = 0; j < 100; j++)
                    s += words[r.Next() % words.Count];
                DataRow dr = dt.NewRow();
                dr[colName] = s;
                dt.Rows.Add(dr);
            }

            return dt;
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Button was clicked.");
        }
    }

    public class StringConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return ((string)value).ToUpper();
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return ((string)value).ToLower();
        }
    }
}