On this 30 minutes demo, we show you how to build a Web Application using the recently launched Kendo UI Builder product.  

We also show a couple of options you have when extending the product functionality available out of the box.

The source code and images used to extend the functionality in this video are available below.  Please try it and post any questions you might have in the Kendo UI Builder Community area.

 

Kendo UI Builder Launch Demo video:

 

 

 Sample template to replace CustNum with an image:

<img src="images/#=CustNum#.jpg" onerror="this.onerror=null;this.src='images/unknown.jpg';" height="60" width="60">

 

 Images I've placed at \src\assets\images:

Images.zip

 

 HTML used on src\html\Customers-CustomerList\topSection.html to add a drop-down selection list:

<form ng-controller="cssControler">
	<select kendo-drop-down-list style='width: 100%; text-align: center;' ng-model='cssHref'  ng-change='cssChange()'>
	  <option value='http://cdn.kendostatic.com/2016.3.914/styles/kendo.black.min.css'>Black</option>
	  <option value='http://cdn.kendostatic.com/2016.3.914/styles/kendo.blueopal.min.css'>Blue Opal</option>
	  <option value='http://cdn.kendostatic.com/2016.3.914/styles/kendo.metro.min.css' selected>Metro</option>
	  <option value='http://cdn.kendostatic.com/2016.3.914/styles/kendo.silver.min.css'>Silver</option>
	</select>
</form><br>

 

JavaScript/Angular code on \src\scripts\Customers-CustomerList\view-factory.js to change the CSS file:

	angular
        .module('viewFactories')
		.controller('cssControler',function($scope){
			$scope.cssChange = function () {
				var oldCSS = document.getElementsByTagName("link").item(6);
				var newCSS = document.createElement("link");
				newCSS.setAttribute("rel", "stylesheet");
				newCSS.setAttribute("type", "text/css");
				newCSS.setAttribute("href", $scope.cssHref);
				document.getElementsByTagName("head").item(0).replaceChild(newCSS, oldCSS);
				document.getElementsByTagName("head")[0].appendChild(newcssref)
			}
		});

 

 JavaScript code on  \src\scripts\Customers-CustomerList\view-factory.js  to extend grid capabilities:

                onShow: function($scope, customData) {
					$scope.customerList.options.columnMenu = true;
					$scope.customerList.options.filterable = { mode: "row"};
					disableFilter = ["CustNum","Address"];
                    for (var i = 0; i < $scope.customerList.options.columns.length; i++) {
						if (disableFilter.indexOf($scope.customerList.options.columns[i].field) > -1) {
							$scope.customerList.options.columns[i].filterable = false;
						}
                    }
                },

 

ABL Code used to expose Customer as REST supporting server side processing:

Customer.cls 

customer.i

 

I've created this code for demo purpose only! I would have invested more time to write a more robust code if I was planning to use it on production.  If you write a nicer version, please share by posting it on communities or send it to me at rperdiga@progress.com.  I am not a seasoned Angular/JavaScript developer, so I am always interested in learning from others!