Apr 9

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

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.

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

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

Other features include grouping, sorting and paging.

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

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

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

We simply place the collections on a screen.

We ensure that we select the FlexGrid control.

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

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

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)