How to render the Treeview and Accordion type controls in LightSwitch HTML?

Platform: jQuery |

Control: ejAccordion

Tags: general, treeview, accordion

Extension support is provided to certain controls but you can render all the Essential JavaScript components in LightSwitch HTML Application through the Custom Control option. This section explains how to use Essential JavaScript components in LightSwitch HTML Application with the Custom Control option.

Refer to the necessary scripts and theme files by the Syncfusion EJ components in the <head> section as follows in the default.html page.

HTML

<head>
    <!--Contains the necessary theme for the components-->
    <link href="default-theme/ej.widgets.all.min.css" rel="stylesheet" />
    <!--dependency script files-->
    <script src="scripts/jquery-1.10.2.min.js"></script>
    <script src="scripts/jquery.easing.1.3.js"></script>
    <script src="scripts/jquery.globalize.js"></script>
    <!--Contains the necessary scripts to render all the web components-->
    <script src="scripts/ej.web.all.min.js"></script>
</head>

In the above code example, scripts refers to the folder that contains the script files. Make sure that the above mentioned script files are loaded properly.

You can also use the CDN links, instead of referring the scripts and theme files locally. Refer to the following code example.

HTML

<head>
    <!--Contains the necessary theme for the components-->
    <link href="https://cdn.syncfusion.com/js/web/flat-azure/ej.web.all-latest.min.css" rel="stylesheet" />
    <!--dependency script files-->
    <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-   easing/1.3/jquery.easing.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.js"></script>
    <!--Contains the necessary scripts to render all the web components-->
    <script src="https://cdn.syncfusion.com/js/web/ej.web.all-latest.min.js"></script>
</head>

You can refer the following link to know more about the necessary scripts files and dependencies script files.

https://help.syncfusion.com/js/dependencies

Add Custom Control to the Screen

Create the Screen and then click the Add Data Item option.
Choose the Local property with the required Data Type.
Drag and drop the created Data Item to the Screen Designer.
Right-click on the Data item and change the type as Custom Control.
Otherwise, right-click on the Layout item and then choose the “Custom Control” option from the list.
Select the Custom Control option and Click the “Edit Render Code” in the Properties panel.
The Empty function is created as follows.

myapp.Browse.ScreenContent_render = function (element, contentItem) {

// Write code here.

};

In the above function you have to write a code to render Essential JavaScript Components in the LightSwitch HTML Application. The following code example is for Accordion.

myapp.Browse.ScreenContent_render = function (element, contentItem) {
    // Creating DOM element to render Accordion control.
    var div = $('<div />');
    div.attr('id', 'Accordion');
    div.attr('data-role', 'none');
    // Creating Heeader element.
    var heading1 = $("<h3><a href='#'>About Syncfusion</a></h3>");
    var heading2 = $("<h3><a href='#'>Technology</a></h3>");
    var heading3 = $("<h3><a href='#'>Contact Us</a></h3>");
    // Creating the Accordion Content.
    var content1 = $(" <div> Syncfusion, a world leader in software components have thousands of satisfied customer world-wide who have used our products to ship award winning software.</div>")
    var content2 = $("<div> Syncfusion products are smartly designed to cope with the fast-changing technology environment.</div>")
    var content3 = $(" <div>Company Headquarters<br /><br />2501 Aerial Center Parkway<br />Suite 200<br />Morrisville, NC 27560<br /> USA </div>");
    // Append the Header and Content inside the div element 
    div.append(heading1);
    div.append(content1);
    div.append(heading2);
    div.append(content2);
    div.append(heading3);
    div.append(content3);
    // Append the Accordion Div element.
    div.appendTo($(element));
    // Render the Accordion Control.
    div.ejAccordion();
};

Run the Application and you can see the following output.

Accordion

Figure 1: Output

You can download the complete sample from the following location.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Index1595393160

You can refer the following Common User Guide for LightSwitch to know more about getting started with the components. Under each component, the Concepts and Features section is provided, that explains about the features of the particular component.

https://help.syncfusion.com/lightswitch/html-client/lightswitch-for-html-client

You can also refer the following class reference link for JavaScript that provides all the properties, methods and events supported by each component.

https://help.syncfusion.com/api/js/global

To know more about the Custom Control option then refer the following link.

https://blogs.msdn.com/b/lightswitch/archive/2012/12/06/custom-controls-and-data-binding-in-the-lightswitch-html-client-joe-binder.aspx

https://docs.microsoft.com/en-us/previous-versions/jj733569(v=vs.140)?redirectedfrom=MSDN

https://blogs.msdn.com/b/bethmassi/archive/2014/01/29/beginning-lightswitch-in-vs-2013-part-6-more-control-customizing-the-app-with-javascript-amp-css.aspx

Did you find this information helpful?

How to render the Treeview and Accordion type controls in LightSwitch HTML?

HTML

HTML

Add Custom Control to the Screen

Please sign in to access our KB

CONTACT US