We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: JavaScript |
Control: ejAccordion |
Published Date: May 20, 2015 |
Last Revised Date: May 7, 2019

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="http://cdn.syncfusion.com/js/web/flat-azure/ej.web.all-latest.min.css" rel="stylesheet" />
    <!--dependency script files-->
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-   easing/1.3/jquery.easing.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.js"></script>
    <!--Contains the necessary scripts to render all the web components-->
    <script src="http://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.

http://help.syncfusion.com/ug/js/documents/dependencies.htm

Add Custom Control to the Screen

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

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

    // Write code here.

};

  1. 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();
    };
    
  1. Run the Application and you can see the following output.

Accordion

Figure 1: Output

You can download the complete sample from the following location.

http://www.syncfusion.com/downloads/support/directtrac/133166/index-397695855.zip

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.

http://help.syncfusion.com/lightswitch

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

http://help.syncfusion.com/cr/js

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

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

http://msdn.microsoft.com/en-us/library/jj733569.aspx

http://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

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon