JSFiddle - React, Tailwind, and code Playground

by charmis

HTML

@{
	Layout = null;
}
<style>
	body
	{
		padding-top: 60px;
	}
</style>
<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width" />
	<title>Index</title>
	<link [email protected]("~/Content/Infragistics/css/themes/infragistics/infragistics.theme.css")
		rel="stylesheet" type="text/css" />
	<link [email protected]("~/Content/Infragistics/css/structure/infragistics.css") rel="stylesheet"
		type="text/css" />
	<link [email protected]("~/Content/bootstrap.css") rel="stylesheet" type="text/css" />
</head>
<body class="container">
	<div class="form-horizontal">
		<div class="form-group" ng-app="" ng-controller="searchController">
			<div class="col-sm-5">
				<input id="textEditor" type="text" class="form-control" placeholder="Enter Search Text">
				<div class="alert alert-danger" ng-show="showSearchTextError">
					Search text must be entered!</div>
			</div>
			<div class="col-sm-3">
				<div id="checkboxSelectCombo" class="form-control">
				</div>
				<div class="alert alert-danger" ng-show="showEntityError">
					At least one entity should be selected!</div>
			</div>
			<div class="col-sm-2">
				<button ng-click="search()" class="btn btn-default">
					<span class="glyphicon glyphicon-search"></span>&nbsp;Search</button>
			</div>
		</div>
	</div>
	<div id="gridContainer">
		<table id="hierarchicalGrid" style="width:100%">
		</table>
	</div>
	<script [email protected]("~/Scripts/modernizr-2.6.2.js") type="text/javascript"></script>
	<script [email protected]("~/Scripts/jquery-2.1.1.min.js") type="text/javascript"></script>
	<script [email protected]("~/Scripts/bootstrap.min.js") type="text/javascript"></script>
	<script [email protected]("~/Scripts/jquery-ui-1.10.3.min.js") type="text/javascript"></script>
	<script [email protected]("~/Scripts/Infragistics/js/infragistics.core.js") type="text/javascript"></script>
	<script [email protected]("~/Scripts/Infragistics/js/infragistics.lob.js") type="text/javascript"></script>
	<script...

JavaScript

<script type="text/javascript">

	var myApp;
	myApp = myApp || (function () {
		var pleaseWaitDiv = $('<div class="modal" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false"><div class="modal-dialog" style="top:300px;"><div class="modal-content"><div class="modal-header"><h1>Processing...</h1></div><div class="modal-body"><div class="progress progress-striped active"><div class="progress-bar progress-bar-success" style="width: 100%;"></div></div></div></div></div></div>');
		return {
			showPleaseWait: function () {
				pleaseWaitDiv.modal('show');
			},
			hidePleaseWait: function () {
				pleaseWaitDiv.modal('hide');
			}
		};
	})();


	function searchController($scope, $http) {
		debugger;
		var entities = [
            { Name: "Account" },
            { Name: "Opportunity" },
            { Name: "Contact" }
        ];

		$("#textEditor").igTextEditor();

		$("#checkboxSelectCombo").igCombo({
			height: "35px",
			dataSource: entities,
			textKey: "Name",
			valueKey: "Name",
			multiSelection: "onWithCheckboxes",
			dropDownOnFocus: false,
			mode: "dropdown",
			width: "250px"
		});

		$scope.search = function () {

			if (!validateForm()) {
				return;
			}
			myApp.showPleaseWait();

			var endPointUrl = "http://localhost:2014/CrmSearchPlus/api/Search?searchText=" + $('#textEditor').val() + "&entityTypes=" + getSelectedEntityTypes();

			var responsePromise = $http.get(endPointUrl);

			responsePromise.success(function (data, status, headers, config) {
				//debugger;
				if ($("#hierarchicalGrid").data('igGrid') !== undefined) {
					clearGrid();
					$("<table id='hierarchicalGrid'></table>").insertAfter("#gridContainer");
				}

				$("#hierarchicalGrid").igHierarchicalGrid({
					initialDataBindDepth: 1,
					width: "100%",
					dataSource: data,
					autoGenerateLayouts: true,
					dataSourceType: 'json',
					showHeader: false
				});
				myApp.hidePleaseWait();
			});

			responsePromise.error(function (data, status, headers, config)...