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?

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

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

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

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

Article ID: Published Date: Last Revised Date: Platform: Control:
4939 05/20/2015 05/20/2015 JavaScript ejTreeView
Did you find this information helpful?
Add Comment
You must log in to leave a comment

Please sign in to access our KB

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

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