locked
Is it possible to change the datagrid's data template? RRS feed

  • Question

  • Hello,

    In normal Silverlight, and in WPF, you can create a DataTemplate for most controls, including a datagrid, and thereby modify the way the data is displayed. Anyone know if this is possible in Lightswitch without creating your own datagrid custom control?

    The motivation for this is that I have a situation in which the number of rows in a table will be quite large, so the users are very unlikely to scroll through the grid looking for the entry they want. They will enter something in the filters I have added above the grid, and then look at the filtered data in the grid. I want to be able to show them a reasonable amount of information about each entry, more than will comfortably fit in the width of the grid.

    Ideally, I would like to modify the grid so that instead of showing the entry's data in one long row, it can be displayed on multiple rows (eg, someone's full postal address in one cell, with each line of the address on a separate line). As I said, in SL or WPF this is pretty easy, but I can't see a way of doing it in LS, and wondered if anyone else had managed it.

    Thanks for any suggestions.


    FREE custom controls for Lightswitch! A collection of useful controls for Lightswitch developers. Download from the Visual Studio Gallery.

    If you're really bored, you could read about my experiments with .NET and some of Microsoft's newer technologies at http://dotnetwhatnot.pixata.co.uk/

    Thursday, March 7, 2013 11:25 PM

Answers

  • Depending on your requirements, you can possible list data, such as addresses, vertically inside one cell of the data grid.

    Option 1: Computed Property

    If you just want to show the address and not have it editable in the data grid, you can use a computed property to format it and then just use the property as a cell in the data grid. For example:

    partial void FormattedAddress_Compute(ref string result)
    {
        StringBuilder addressBuilder = new StringBuilder();
        if (!String.IsNullOrWhiteSpace(this.AddressLine1))
            addressBuilder.AppendLine(this.AddressLine1);
        if (!String.IsNullOrWhiteSpace(this.AddressLine2))
            addressBuilder.AppendLine(this.AddressLine2);
        // Should null/empty check and flush out all possible combinations
        addressBuilder.AppendFormat("{0}, {1} {2}", this.City, this.State, this.Zipcode);
        result = addressBuilder.ToString();
    }

    When you go to use the computed property in the data grid, change the Label control's height to be Auto.

    Option 2: Use Group Layouts

    You can add a Rows Layout control to the data grid and then add the individual fields to the Rows Layout. This allows for each of the fields to be editable individually. You'll have to adjust the sizing of the controls to make it look right. The downfall to this approach is that tabbing between the fields in the one cell will not work. You'd have to do extra work to subscribe event handlers to the key events that manually move the focus from one field to the next.

    Even if you went the route of making your own custom control or retemplating the data grid, you'd still have to do this event handling.


    Justin Anderson, LightSwitch Development Team

    • Marked as answer by Mr Yossu Sunday, March 10, 2013 2:44 PM
    Friday, March 8, 2013 4:16 AM
    Moderator

All replies

  • No the only way to change the formatting and template is to use a custom control or create your own template using the extenstions.
    Friday, March 8, 2013 2:50 AM
  • Even if not a direct answer to your question, the following blog posts might give you some hints on injecting XAML into the LighSwitch grid:

    Inject dynamically a column with data-aware icons in a lightswitch datagrid

    and

    Vertical Column Header Text in LightSwitch Grid

    Regards


    Xander

    Friday, March 8, 2013 3:06 AM
  • Depending on your requirements, you can possible list data, such as addresses, vertically inside one cell of the data grid.

    Option 1: Computed Property

    If you just want to show the address and not have it editable in the data grid, you can use a computed property to format it and then just use the property as a cell in the data grid. For example:

    partial void FormattedAddress_Compute(ref string result)
    {
        StringBuilder addressBuilder = new StringBuilder();
        if (!String.IsNullOrWhiteSpace(this.AddressLine1))
            addressBuilder.AppendLine(this.AddressLine1);
        if (!String.IsNullOrWhiteSpace(this.AddressLine2))
            addressBuilder.AppendLine(this.AddressLine2);
        // Should null/empty check and flush out all possible combinations
        addressBuilder.AppendFormat("{0}, {1} {2}", this.City, this.State, this.Zipcode);
        result = addressBuilder.ToString();
    }

    When you go to use the computed property in the data grid, change the Label control's height to be Auto.

    Option 2: Use Group Layouts

    You can add a Rows Layout control to the data grid and then add the individual fields to the Rows Layout. This allows for each of the fields to be editable individually. You'll have to adjust the sizing of the controls to make it look right. The downfall to this approach is that tabbing between the fields in the one cell will not work. You'd have to do extra work to subscribe event handlers to the key events that manually move the focus from one field to the next.

    Even if you went the route of making your own custom control or retemplating the data grid, you'd still have to do this event handling.


    Justin Anderson, LightSwitch Development Team

    • Marked as answer by Mr Yossu Sunday, March 10, 2013 2:44 PM
    Friday, March 8, 2013 4:16 AM
    Moderator
  • Hi Glenn,

    Thanks for the reply. I suspect that you are correct when it comes to full customisation, but as the other replies here show, I can probably do what I want with the built-in grid.

    Thanks again


    FREE custom controls for Lightswitch! A collection of useful controls for Lightswitch developers. Download from the Visual Studio Gallery.

    If you're really bored, you could read about my experiments with .NET and some of Microsoft's newer technologies at http://dotnetwhatnot.pixata.co.uk/

    Friday, March 8, 2013 3:11 PM
  • Hi Xander,

    Yeah, I've been studying those two quite a bit to see if they would help. I was actually going to have a go at hacking the grid, but then I saw Justin's post which gives me all I need for this application.

    However, I'd still like to have a bash at those techniques, as they seem to open up the door to almost anything, albeit at the risk of it not working if a future version of LS changes things.

    Thanks for the reply.


    FREE custom controls for Lightswitch! A collection of useful controls for Lightswitch developers. Download from the Visual Studio Gallery.

    If you're really bored, you could read about my experiments with .NET and some of Microsoft's newer technologies at http://dotnetwhatnot.pixata.co.uk/

    Friday, March 8, 2013 3:13 PM
  • Thanks for that reply Justin. I had spent some time recently heavily customising some Silverlight controls for use in Lightswitch, and I had my mind so stuck in the process of creating data templates that I missed the simple, yet effective approach you showed first. For 99% of my requirements, that is all I need, as most of my grids are read-only.

    For the few that are editable, or where I need more control over the display, a simple Silverlight user control would give me all I need. I was thinking of mucking around with the whole control, and forgot about the possibility of inserting controls in the existing grid.

    I haven't tried an editable control yet, so the tab issue may prove to be a sticker, but at least you've shown me the way. Thanks again.


    FREE custom controls for Lightswitch! A collection of useful controls for Lightswitch developers. Download from the Visual Studio Gallery.

    If you're really bored, you could read about my experiments with .NET and some of Microsoft's newer technologies at http://dotnetwhatnot.pixata.co.uk/

    Sunday, March 10, 2013 2:47 PM