You are here:   Blog
Register   |  Login

 

Apr 9

Written by: Michael Washington
4/9/2015 7:25 PM  RssIcon

clip_image001

GrapeCity has made a major release, incorporating their popular Wijmo 5 FlexGrid into a plug-in for LightSwitch and Cloud Business Apps. GrapeCity ComponentOne Studio allows you to easily create LightSwitch applications that would normally be very difficult.

You can get full details about GrapeCity’s ComponentOne Studio product from this link . Plus, you can see the FlexGrid control in action in the demo and find the out-of-the-box features here.

clip_image003

The grid works in mobile applications, but it is optimized for desktop scenarios.

clip_image004

The grid provides for faster data entry when inline editing is enabled.

clip_image005

Other features include grouping, sorting and paging.

clip_image006

Most scenarios require no coding, just click a check box or select an item from a dropdown to set a property.

clip_image007

However, you still have access to all the features of the underlying Wijmo 5 FlexGrid to implement advanced solutions.

For example, this is the code used to display inline images:

 

    grid.wjControl.itemFormatter = function (panel, r, c, cell) {
        // validate CellType and if correct column
        if (wijmo.grid.CellType.Cell == panel.cellType &&
          panel.columns[c].binding == 'country') {
            // get the cell's data
            var cellData = panel.getCellData(r, c);
            var img = $("<img style='height:26px; width:48px'/>")
                .attr("src", "Countries/" + cellData + ".jpg");
            // set cell's foreground color
            $(cell).empty().append(img);
        }

A Sample Application

clip_image008

To demonstrate the unique capabilities the Wijmo 5 FlexGrid provides, we will start with a standard Order -> Order Detail -> Product application.

clip_image009

We simply place the collections on a screen.

clip_image010

We ensure that we select the FlexGrid control.

clip_image011

To add grouping to the Order Details table we simply turn on grouping…

clip_image012

… then select the column[s] we want to group on.

clip_image013

We have a master-detail screen with editable data grids.

While you can add new records using the inline grids, we can also add a new Order and Order Details using the standard LightSwitch screens.

The following code is used to open the screen to add a new Order and then refresh the FlexGrid after the screen is closed:

 

myapp.BrowseOrders.AddOrder_Tap_execute = function (screen) {
    myapp.showAddEditOrder(null, {
        beforeShown: function (addEditScreen) {
            _screen = screen;
            // Create new Order here so that
            // discard will work.
            var newOrder = new myapp.Order();
            addEditScreen.Order = newOrder;
        },
        afterClosed: function (addEditScreen, navigationAction) {
            if (navigationAction === msls.NavigateBackAction.commit) {
                // Refresh OrderDetails
                _screen.OrderDetails.load();
            }
        }
    });
};

 

To delete the selected Order Detail record we can use the following code:

 

myapp.BrowseOrders.DeleteSelectedOrderDetail_execute = function (screen) {
    screen.OrderDetails.selectedItem.deleteEntity();
    // Refresh OrderDetails
    screen.OrderDetails.load();
};

 

Links

Using D3 Controls in ComponentOne Studio for LightSwitch HTML Client

LightSwitch Employee Vacation Tracker Using The ComponentOne HTML Scheduler Control

Sneak Peek: Wijmo Creates Custom JavaScript In LightSwitch HTML Client

Creating LightSwitch HTML Reports using ComponentOne Active Reports

Creating a LightSwitch HTML Report Using ActiveReports (using Parameters and Intrinsic Data)

Creating Multiple Reports in a Single Project Using ActiveReports

 

Download Code

The LightSwitch project is available at http://lightswitchhelpwebsite.com/Downloads.aspx

(you must have Visual Studio 2013 (or higher) installed and a SharePoint Developer site to run the code)

(You must have an active ComponentOne Studio trial or the full product installed to run the code)

7 comment(s) so far...


Gravatar

Re: Exploring The GrapeCity Wijmo 5 FlexGrid

Looks very nice, thanks as always for the informative articles.

I am a bit confused about their LS pricing however? Do I need to buy ComponentOne studio, LS edition ($895 MSRP) to get this feature or will Wijmo 5 ($495) work as well? Or is there a lightswitch-only version of Wijmo 5 that I can purchase?

I ask because the C1 studio edition for lightswitch costs the same as the WinForms/Silverlight/WPF and other editions but has less than half the features, as seen here: http://www.componentone.com/Pricing/

By Jim Bancroft on   4/10/2015 8:57 AM
Gravatar

Re: Exploring The GrapeCity Wijmo 5 FlexGrid

@Jim Bancroft - The ComponentOne Studio LightSwitch Edition contains the Cloud business apps edition, LightSwitch HTML and LightSwitch desktop(Silverlight).

The Wijmo5 product does not have a LightSwitch specific package\screens which make LightSwitch development a lot easier.

By Michael Washington on   4/10/2015 8:57 AM
Gravatar

Re: Exploring The GrapeCity Wijmo 5 FlexGrid

Impressive features. I could certainly use this grid & look forward to testing it out in the real world, especially against mobile, given that it's optimised for desktop. I wish there was a cut back HTML only for about half the price though. Purchasing that would be a no-brainer but @ $895 I'll need to be sure that I can find a customer that will cover that cost :-(

I wonder what the most requested feature was when the LightSwitch team did their survey. Mine was for a fast grid with features similar to Wijmo 5 FlexGrid so maybe they feel that they don't have to provide a decent grid out-of-the-box now. The virtual scrolling seems very good but I need to test the, say, 30K records experience to see if it can perform the way I hope it will and users expect it will.

By Lloyd Derbyshire on   4/10/2015 7:53 PM
Gravatar

Re: Exploring The GrapeCity Wijmo 5 FlexGrid

The grid looks very nice and I am so happy to see some LS development. It definitely seems like it would be best for the desktop because it does not seem responsive like the built in LS grid control.

By jeff on   4/11/2015 5:39 AM
Gravatar

Re: Exploring The GrapeCity Wijmo 5 FlexGrid

Many thanks for updating us all.

By Mark on   4/15/2015 6:35 PM
Gravatar

Re: Exploring The GrapeCity Wijmo 5 FlexGrid

Hi Michael,

I have a few questions regarding the grid.

1) Does the grid support looking up the foreign key table when editing inline? In your example would you be able to select the product from a drop down list in the grid when editing inline?

2) Do the OOTB add edit screens work in the same way with the flexi grid as they do with the Lightswitch table?

3) Do you have any experience of the support offered by Componentone?

Regards,

Andrew

By AndrewFleet on   6/23/2016 8:06 AM
Gravatar

Re: Exploring The GrapeCity Wijmo 5 FlexGrid

@AndrewFleet - You will want to post the question in the forums at:http://www.componentone.com/ Keep in mind this is an old article and many things may have changed.

By Michael Washington on   6/23/2016 8:07 AM
Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation