SyncFusion expands LightSwitch offerings with HTML client controls RRS feed

  • General discussion

  • SyncFusion Essential Studio 2014 vol 3 LightSwitch HTML client is released:

    Essential Studio for LightSwitch HTML Client is a collection of control extensions for the LightSwitch framework. The Syncfusion control extensions greatly enhance the generated application's appearance and functionality.


    EssentialStudio for LightSwitch Chart is a visually stunning charting component that is easy to use. It includes common chart types ranging from line charts to specialized financial charts. The chart controls rich feature set includes features such as data binding, multiple axes, trackball support,drill-down operations, and zooming.

    Gantt control is designed to visualize and edit the project schedule, and track the project progress. It helps to organize and schedule the projects and also you can update the project schedule through interactions like editing, dragging and resizing.

    TreeGrid control is used to represent the hierarchical data in a tabular format, combining the visual representation of Grid and TreeView controls.

    The editor control extensions like Numeric Textbox and Date picker provides a richer data editing interface for working with primitive data types.


    A map is a graphical representation of geographical data. It is used to represent the statistical data of a particular geographical area on Earth. Using pan and zoom, the maps can be navigated. Maps supports enhanced data visualization with bubbles and labels. Bubbles visualize the data that is bound to the map.

    TreeMap is ideal for visualizing large amounts of data. The space in the visualization is split up into rectangles that are sized and coloured based on the quantitative variables. The levels in the hierarchy of the tree map are visualized as rectangles containing other rectangles.

    Digital Gauge:
    The Digital Gauge control is used to display alphanumeric characters in digital (LED Display) mode. Digital gauge is used to display a range of values that uses character in combination with numbers.

    Linear Gauge:
    Linear Gauge displays a range of values graphically along the linear scale. It can be very well designated as the linear form of the circular gauge. It measures the values of the scales and can be presented in the horizontal or vertical sliding or meter.

    Circular Gauge :
    Circular Gauge enables you to see a single numerical value mapped against a range of colours that may have a particular business meaning or business logic. As the value changes over time, the gauge pointer changes position within this range.

    Bullet Graph is a variation of the bar graph, which is developed as a replacement for the dashboard gauges and meters. The bullet graph features a single, primary measure (for example, current year-to-date revenue), and compares that measure to one or more other measures to enrich its meaning (for example, compared to a target). It displays the measures in the context of the qualitative range of performance, such as poor, satisfactory, and good.

    RangeNavigator is a data visualization control that allow scrolling and navigation through large amount of data.

    Thursday, October 30, 2014 7:51 AM

All replies

  • Nice,

    Report Viewer sounds great.

    Anyon tried it yet?

    Replacement to Xtrareport?


    Sven Elm

    Thursday, October 30, 2014 9:41 AM
  • Excellent news, thanks for sharing. I've been keeping an eye out for this over the last few days but missed the actual release in the end.

    ps. Interesting that the column sorting does not appear to work in the online grid demo here (wil have to download and test it ourselves):

    EDIT: I see the HTML controls are still in Preview so that probably explains the grid sorting issue and it should hopefully be resolved soon.

    Regards, Xander. My Blog

    • Edited by novascape Thursday, October 30, 2014 9:48 AM
    Thursday, October 30, 2014 9:46 AM
  • Report Viewer does look promising. Quite a collection of controls and all for a mere $399 - not bad at all. 

    Regards, Xander. My Blog

    Thursday, October 30, 2014 9:56 AM
  • This looks great. We've also been very eager for them to release this as we're impressed with their standard JavaScript and Silverlight LS controls. 

    Already have it downloaded and starting to play.


    Thursday, October 30, 2014 10:42 AM
  • Great news!


    Thursday, October 30, 2014 2:41 PM
  • Saturday, November 1, 2014 4:38 AM
  • Hi Novascape,

    column Sorting is enabled for online grid demo. you can check Grid with sorting option.


    Yogesh R

    Tuesday, November 4, 2014 1:06 PM
  • FYI - doesn't work for me in IE11.  It just spins on the loading screen.  It works fine in Chrome.

    These controls look good.  Great to see 3rd party development coming back.  I hope others will follow suit. 

    • Edited by Hessc Tuesday, November 4, 2014 3:31 PM
    Tuesday, November 4, 2014 3:31 PM
  • The controls are fine and the demo is an actual LS HTML app, that's great.

    The Essential Studio for JS is far more richer, and can be used with LS; check it out:

    It would be great, though, if Syncfusion offered the LightSwitch controls as Hobbyst Edition :)

    Nicolás Lope de Barrios
    If you found this post helpful, please "Vote as Helpful". If it actually answered your question, please remember to "Mark as Answer". This will help other people find answers to their problems more quickly.

    Tuesday, November 4, 2014 5:12 PM
  • I don't have the same issue with the website at IE11.
    Tuesday, November 4, 2014 5:25 PM
  • How to create report in SyncFusion ReportViewer ?

    any body share the tutorial ?

    Tuesday, November 4, 2014 6:02 PM
  • Hi Olipiskandar,

    Please refer the below knowledge base  article for creating Syncfusion ReportViewer in LightSwitch HTML application.


    Pandi Murugan A

    Thursday, November 6, 2014 1:00 PM
  • I am impressed with the Syncfusion grid control have built a test project which allow exporting to excel or pdf.  I also like the ability to directly edit by double click in the grid, allow sorting with  one line of code , overall it seems a much better user experience.

    A few things I have picked up along the way.

    Syncfusion support says they will provide a nuget package to import the css and scripts,

    Until then just copy them from the sample project or better from the assists folder under essential javascript install location. and use the following as guide to update default.html.

    [installed location] => JavaScript/assets/scripts/web   to scripts/ej
    [installed location] => JavaScript/assets /css/web  to css/ej

    <!--Dependent CSS for Essential JavaScript Components-->

        <link href="Content/ej/default-theme/ej.web.all.min.css" rel="stylesheet" />

     <!--Dependent Scripts for Essential JavaScript Components-->

         <script src="Scripts/jquery-1.10.2.min.js"></script>

         <script src="Scripts/jquery.easing.1.3.js"></script>

         <script src="Scripts/jquery.globalize.min.js"></script>

         <script src="Scripts/jquery.globalize.cultures.min.js"></script>

         <script src="Scripts/ej/ej.web.all.min.js"></script>

    I have used the desktop report Viewer control and am working on the HTML version.

    What is not shown in the above sample but is in the samplebrowser app that get installed with the Lightswitch controls is the viewer does not require you to have a sql report server.

    I have also noticed an improved response from  Syncfusion SupportSo overall I am planning on updating some existing projects thatrequired the enduser to login to a desktop client to do exporting or reporting.

    Bill Washburn

    W. T. Washburn

    Friday, November 7, 2014 8:17 PM
  • Thanks for the feedback Bill and their controls do indeed look very promising.

    I am looking to enable a "virtual scrolling" grid scenario (i.e. no explicit [prev] and [next] page buttons, but cannot get that working with the current version, I've posted a question on their forum here: Virtual Scroll mode and server side paging

    Regards, Xander. My Blog

    Friday, November 7, 2014 11:08 PM
  • Xander,

    Give this a try it seemed to remedy the "only shows  limited rows in Virtual scrolling of grid " issue;

    In the screen template select the DataItem then in the Prperties Window "Un-Select" the checkbox

    for Support Paging.

    I did this with a source with 6500 rows and it worked  for me.

    Hope This Helps.

    Bill Washburn

    W. T. Washburn

    Saturday, November 8, 2014 2:36 PM
  • Bill, disabling paging appears to work since it loads all the records in the scrolling grid window, but looking under the covers one will notice that it loads *all* the records in the first load. That only works for small data sets and everything grinds to a halt from a performance point of view for larger data sets.

    What we want is for "virtual scrolling mode" to automatically load pages as they are required in the background as you scroll down (or up). Kind of like the built in LS Table control does it.

    Hopefully the SyncFusion support team can help us out on how to configure this scenario.

    Regards, Xander. My Blog

    • Edited by novascape Saturday, November 8, 2014 9:57 PM
    Saturday, November 8, 2014 9:42 PM
  • Xander,

    I  now understand what you want and I do not know the answer.  On a positive note I have worked

    through my issues with the HTML Report viewer and learned a few more lessons the hard way.

    For anyone getting started here is a document from Syncfusion on the Report Viewer.Here are a couple of things not documented because I favor the Local Reporting mode (NO SSRS Required)

    Here is the screencode  for local mode reportViewer:

    myapp.SplitsReport.ScreenContent_render = function(element, contentItem) {
        var itemTempleate = $("<div></div>").attr('id', 'reportContainer')
        itemTempleate.css({ 'width': '100%', 'height': '450px' });
            reportServiceUrl: '../api/Split',
            processingMode: ej.ReportViewer.ProcessingMode.Local,
            reportPath: 'Stocks.rdlc',
            toolbarSettings: {
                items: ej.ReportViewer.ToolbarItems.All & ~ej.ReportViewer.ToolbarItems.Zoom & ~ej.ReportViewer.ToolbarItems.Parameters

    The API is used to set the path to the rdlc File in the OnInt function

    and then load the data in the onLoaded function  Here is How I got it to work since I was calling a query which does noy seem o be documented.

          public void OnInitReportOptions(ReportViewerOptions reportOption)
                var hostedPath = System.Web.HttpContext.Current.Server.MapPath("~/");
                var rdlPath = hostedPath + "bin\\RviewHtml.Server\\ReportTemplate\\" + reportOption.ReportModel.ReportPath;
                reportOption.ReportModel.ReportPath = rdlPath;
            public void OnReportLoaded(ReportViewerOptions reportOption)
                using (ServerApplicationContext context = ServerApplicationContext.CreateContext())
                    var data = context.DataWorkspace.STSMainProd1111Data.StockSplits().Execute().ToList();
                    reportOption.ReportModel.DataSources.Add(new ReportDataSource {Name = "ALL_Stocks", Value = data});

    Everything else is in the document and samples.

    If you are doing Local rthe RDLC files property needs to be set to "Content" and Copy Always

    Hope this same some of you some time

    Bill Washburn

    W. T. Washburn

    Sunday, November 9, 2014 9:00 PM
  • Thanks for sharing the code Bill - I'll bookmark this for when I get to reporting.

    Unfortunately it seems that the SyncFusion grid does not support server side paging at all when bound to a Visual Collection. To get server side paging you need to bind the grid directly to the backend OData service. Whilst this is OK in some scenarios, binding to a visual collection is really a must-have, so hopefully the SyncFusion team will add that support in the near future.

    Regards, Xander. My Blog

    Tuesday, November 11, 2014 12:37 AM
  • Hi Bill,

    Thanks for the feedback.

    We published the knowledge base article “How to Load RDLC Report in ReportViewer LightSwitch HTML” with a demo sample based on your feedback. Please refer it from below link.

    Hope this will help others.


    Pandi Murugan A

    Tuesday, November 11, 2014 8:45 AM
  • Just updated to the new release yesterday - 2014 vol 4. Some key issues resolved for me. I hope to base all new development on the HTML components from Syncfusion.

    Great work and keep it up, Syncfusion.

    • Edited by Johan Boot Thursday, December 25, 2014 9:02 AM
    Thursday, December 25, 2014 9:02 AM
  • And now the entire Syncfusion Studio is free for individuals and small teams:

    • Edited by joshbooker Wednesday, January 7, 2015 1:07 PM
    Wednesday, January 7, 2015 1:05 PM
  • Syncfusion:  You folks rock!  Thank you.
    Friday, January 9, 2015 4:49 AM