Menu

KENDO ListBox control

Introduction

The KENDO JavaScript library is bundled with Sharperlight and provides a variety of web UI controls that can be combined with Sharperlight published reports to create various web interfaces. In this post, I will focus on using the kendoListBox control.

Additionally, the jQuery library is also bundled with Sharperlight.

There are three things to prepare:

  1. The HTML code (including JavaScript) in which the kendoListBox control is defined.
  2. A published report that acts as a container for the HTML code.
  3. A published report that provides a dataset to the kendoListBox control.

Practices

HTML code (including JavaScript code)

Header

The reference to the Kendo JavaScript library and CSS styles are defined in the header section of the HTML code.

The specific Sharperlight tag “{*Url.Root}” is used and is replaced with the actual Sharperlight service URL at runtime.

Body

  1. This is where KENDO ListBox controls are created.
  2. This represents the URL for the Sharperlight logo. The actual URL is defined as an output item in the published query, which is the container of this HTML code. “{*Row.imgURLSharperlight.text}” is the reference code for the output item.
  3. These are Sharperlight-specific tags. “{Dictionary.Code.Version}” retrieves the translation of the word “Version,” and “{Application.Version}” retrieves the version of Sharperlight that is installed.

JavaScript

Here, we define two KENDO ListBox controls: one for selection and the other for displaying the selected items.

A KENDO datasource object is created at the beginning and it is applied to the KENDO ListBox control for selection.

This is the query in the published report which is the container of the HTML code.

  1. The variable holds the URL to a published report. This published report can be used as an endpoint to feed the dataset to the ListBox control. As you can see, the URL for the published report, serving as the endpoint, is defined with an expression in the query of the published report, which is the container of this HTML (+ Script) code.
  2. This is where the function that defines the KENDO datasource object is called.
  3. This is the code to configure the KENDO ListBox Control for selection.
  4. Data is fetched using the KENDO datasource object’s read function.
  5. This is the code to configure the KENDO ListBox Control for selected items.

This is the body of the _Datasource_Create function.

A published report is used as the endpoint, and its URL is specified for the KENDO datasource object.

This is the query of the published report used as the endpoint.

  1. Here, the URL of the endpoint is passed in. The endpoint returns the dataset as a JSON array, and it is specified to use the names of the output fields.
  2. The field name must be the same as the name of the output item in the query defined as the endpoint.

Here is the complete code.

<!DOCTYPE html>
<html>
	<head>
		<title>Sharperlight</title>
		<meta charset="utf-8"/>
		<base href="{*Url.Root}"/>
		<link rel="shortcut icon" type="image/x-ico" href="favicon.ico"/>
		<link rel="icon" type="image/x-ico" href="favicon.ico"/>
	
		<link rel="stylesheet" type="text/css" href="{*Url.Root}Resources/kendo/styles/kendo.default.min.css" />
		<link rel="stylesheet" type="text/css" href="{*Url.Root}Resources/kendo/styles/kendo.common.min.css" />
		<link rel="stylesheet" type="text/css" href="{*Url.Root}Resources/kendo/styles/kendo.silver.min.css"/>

		<script type="text/javascript" src="{*Url.Root}Resources/jquery/jquery.min.js"></script>
		<script type="text/javascript" src="{*Url.Root}Resources/kendo/js/kendo.all.min.js"></script>
	</head>
	<body>
	    <style type="text/css">
	    .demo-section label {  
                margin-bottom: 5px;  
                font-weight: bold;  
                display: inline-block;          
            }
            .demo-section {  
                max-width: none;  
                width: 515px;  
            }  
            .k-listbox {  
                width: 236px;  
                height: 310px;  
            }  
            .k-listbox:first-of-type {  
                width: 270px;  
                margin-right: 1px;  
            }
        </style>

        <!-- KENDO ListBox control is created here -->
        <div class="demo-section k-content">  
            <div>
                <label for="KLB_BusinessPartners" id="BPLabel">Business Partners</label>  
                <label for="KLB_selectedBPs" id="SelectedBPList" style="margin-left:184px">Selected Business Partners</label>  
                <br />  
                <select id="KLB_BusinessPartners" title="Business Partners"></select>             
                <select id="KLB_selectedBPs" title="Selected Business Partners"></select>  
            </div>
        </div>

        <div id="poweredBySharperlight" style="position: absolute; top: 1px; left: 522px;">
            <a href="https://www.sharperlight.com" target="_blank">
                <img src="{*Row.imgURLSharperlight.text}" title="{*Dictionary.Code.Version} {*Application.Version}" style="width: 48px; height: 48px;"/>
            </a>
            <div style="font-size:9px; font-weight: bold; position: relative; top: -32px; left: 48px;">Powered By Sharperlight</div>
        </div>


		<!-- The script description -->
        <script>
            /* Global Variables */
            var gURL_Read_SAPB1_BusinessPartners = "{*Row.ReadBusinessPartners.text}";
            var gKlb_BusinessPartners;
            var gKlb_SelectedBPs;
            
	    /* Script start point */
	    $(document).ready(function() {
		
                // Create the KENDO datasource for the KENDO listbox
                var ds = _Datasource_Create();

                // KENDO ListBox Creating KENDO ListBox Control
		$("#KLB_BusinessPartners").kendoListBox({
                    dataSource: ds,
                    connectWith: "KLB_selectedBPs", 
                    dataTextField: "BPName",
		    dataValueField: "BPCode",
                    autoBind:false,
                    toolbar: {  
                        tools: ["moveUp", "moveDown", "transferTo", "transferFrom", "transferAllTo", "transferAllFrom"]  
                    }
            	});
                gKlb_BusinessPartners = $("#KLB_BusinessPartners").data("kendoListBox");

                // Get a dataset and set it in a ListBox control
                ds.read();

                // Creating KENDO ListBox Control for selected items
		$("#KLB_selectedBPs").kendoListBox({
                    dataTextField: "BPName",
		    dataValueField: "BPCode"
                });  
                gKlb_SelectedBPs = $("#KLB_selectedBPs").data("kendoListBox");

            });

			
          /* Function for creating data sources */
	  function _Datasource_Create(){
	      try {
		var ds = new kendo.data.DataSource({
		    transport: {
			read: {
			    datatype: "jsonp",
			    url: gURL_Read_SAPB1_BusinessPartners
			}
		    },
		    schema: {
			model: {
			    fields: {
				BPCode: { type: "string" },
				BPName: { type: "string" }
			    }
			}
		    }
		});
		return ds;
	    }catch(err){
		console.log("Error in _Datasource_Create(): " + err.message);
		return null;
	    }
	  };
	</script>
    </body>
</html>

Published Report (Container)

This published report contains the HTML code mentioned earlier. Some constants, such as the URL for the data source used in the HTML code, are defined in the query of this report.

The HTML code, actually a file is held as a resource of the published report and its reference code is embedded as a custom HTML.

The HTML file is provided here as a resource.

Then the reference code is specified in here.

Published Report (Endpoint)

This published report returns a dataset that is used by the KENDO ListBox control. It is called from the HTML code.

It returns this dataset.

Afterword

The extensibility of Sharperlight allows for the creation of comprehensive web applications. The data access layer can be designed using the query builder, eliminating the need to write SQL statements and making maintenance easier. This also enables developers to focus on UI design. In any case, try combining Sharperlight published reports (queries) with KENDO UI controls to create a variety of interactive reports.

Related Posts