Adding a Grid Component with Studio for LightSwitch HTML

I’ve been doing a lot of work in LightSwitch lately, and one of the things that I’ve found frustrating is that there is no native grid component. Just last month, Component One released Studio for LightSwitch HTML which is based on Wijmo widgets for JQuery UI and JQuery Mobile.

Very excited about this release, I downloaded the trial version, and off I went. After installing the component itself, here’s what I had to do to get it to work in a new LightSwitch HTML project:

  1. Add the Extension according the instructions here: http://helpcentral.componentone.com/nethelp/c1htmlclientlightswitch/#!Documents/creatingacomponentonestudioforlightswitchhtmlproject.htm
  2. Rename the default.htm to default_orig.htm file found under the HTML Client node of Solution Explorer
    image
  3. Install the NuGet Client Package according to these instructions:
    http://helpcentral.componentone.com/nethelp/c1htmlclientlightswitch/#!Documents/installingthenugetclientpackagerequired.htm

I’m not sure why the default.htm didn’t overwrite during the install process, but my file rename workaround seemed sufficient.

In my test project, I first added a browse screen for SalesOrderHeader. Then I made a screen for SalesOrderDetail with a required parameter. I set up the initial browse screen to pass the SalesOrderID from the selected item when opening the ViewSalesOrderDetail screen. Lastly I added a quick AddEditSalesOrderDetail screen that would open when a particular SalesOrderDetail is selected from the grid.

It seems to work pretty well. Now it’s time to add the test code to my real project and play around with the formatting, etc.

Happy coding!

One Response to Adding a Grid Component with Studio for LightSwitch HTML

  1. Times are a changin’ ,so, so, fast. VS2013 RC has in-built grid but new Wijmo editable grid seems more functional with less code.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Notify me of followup comments via e-mail. You can also subscribe without commenting.