== Install the demo ==
In order to run the demo, register the project "SyncFusion Demo.sws" in the DataFlex 23.0 Studio, then use menu -> "Project" -> "Project Properties" and click "Register WebApp".
After that you should be able to compile and run.
As it is, the code is also compatible with DataFlex 24.0 (SyncFusion Demo240.sws), but the default workspace is now DataFlex 23.0

== Using the SyncFusion Library in your own project ==
In order to use the library we recommend that you copy the "SyncFusion Library" folder under the Libraries folder in the demo workspace.
Copy the library to live with your own project!

Either copy it under the workspace you intend to use it or copy it in a general location. Personally I prefer to keep it with each workspace as that gives me more control.

From the Library AppHtml folder, copy the "SyncFusion" subfolder and its contents and copy all of it to the AppHtml folder in your own workspace (keep the same folder structure).

You also need the content in the CssStyle folder. The application.css file has some tweaks needed for the library to behave with the DataFlex Framework. Either merge it with your own edits in the application.css file of your workspace, or copy the file.

Finally the index.html in your AppHtml folder needs these lines added (just under the "DataFlex Custom Control.." line)

    <!-- DataFlex Custom Controls (do not remove this line, used for automatic insertion) -->
    <script type="text/javascript">
        var themeName = 'material';
        window.ripple = (themeName === "material");
        document.write('<link href="SyncFusion/dist/' + themeName + '.css" rel="stylesheet">');
    </script>
    <script type="text/javascript">
        if (/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {
            document.write("<script src=\'https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.5/bluebird.min.js\'>");
        }</script>
    <script src="SyncFusion/dist/ej2.min.js" type="text/javascript"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="SyncFusion/index.css" />
    <script src="SyncFusion/sfWebListLocales.js"></script>
    <script src="SyncFusion/sfWebList.js"></script>
    <script src="SyncFusion/sfWebColumn.js"></script>
    <script src="SyncFusion/sfWebColumnImage.js"></script>
    <script src="SyncFusion/sfWebColumnLink.js"></script>
    <script src="SyncFusion/sfWebColumnButton.js"></script>
    <script src="SyncFusion/sfWebRichTextEditor.js"></script>
    <script src="SyncFusion/sfWebPdfViewer.js"></script>
    <script src="SyncFusion/sfWebChart.js"></script>
    <script src="SyncFusion/sfWebChartChild.js"></script>
    <script src="SyncFusion/sfWebChartAxis.js"></script>
    <script src="SyncFusion/sfWebChartArea.js"></script>
    <script src="SyncFusion/sfWebChartDataLabel.js"></script>
    <script src="SyncFusion/sfWebChartMarker.js"></script>
    <script src="SyncFusion/sfWebChartSeries.js"></script>
    <script src="SyncFusion/sfWebChartTooltip.js"></script>
    <script src="SyncFusion/sfWebAccumulationChart.js"></script>
    <script src="SyncFusion/sfWebChartAccumulationSeries.js"></script>
    <script src="SyncFusion/sfWebCarousel.js"></script>
    <script src="SyncFusion/sfWebToast.js"></script>
    <!-- headerTemplate icon example via the id method (see SyncFusionGridSalesPersonList.wo) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script id="imagetemplate" type="text/x-template">
        <i class="fa fa-file-picture-o"></i>&nbsp;
        Images
    </script>