JSFiddle - React, Tailwind, and code Playground

by anoop chandran

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<div ng-app="sampleApp">
    <div ng-controller="TestCntrl">
          {{Test.Test2}}
      <div ng-grid="ngGridOptions" class="gridStyle"></div>
    </div>
  </div>

CSS

.gridStyle {
    border: 1px solid rgb(212, 212, 212);
    width:500px;
    height: 300px;
    float:left;
}
.select-items {
    border:solid #ddd 1px;
    display:inline-block;
    float:left;
    cursor:pointer;
    margin;
    10px;
}
.row-color {
    background-color: #be4c39 !important;
}
.row-selected-blue-green {
    color:#fff;
    background: -webkit-linear-gradient(left, #4472b9 50%, #4ca454 50%) !important;
    background: linear-gradient(left, #4472b9 50%, #4ca454 50%) !important;
    background: -moz-linear-gradient(left, #4472b9 50%, #4ca454 50%) !important;
    background: -o-linear-gradient(left, #4472b9 50%, #4ca454 50%) !important;
}
/*transparent*/
 .row-selected-blue {
    color:#fff;
    background: -webkit-linear-gradient(left, #4472b9 100%, #000000 0%) !important;
    background: linear-gradient(left, #4472b9 100%, #000000 0%) !important;
    background: -moz-linear-gradient(left, #4472b9 100%, #000000 0%) !important;
    background: -o-linear-gradient(left, #4472b9 100%, #000000 0%) !important;
}
.row-selected-green {
    color:#000;
    background: -webkit-linear-gradient(left, #4ca454 100%, #000000 0%) !important;
    background: linear-gradient(left, #4ca454 100%, #000000 0%) !important;
    background: -moz-linear-gradient(left, #4ca454 100%, #000000 0%) !important;
    background: -o-linear-gradient(left, #4ca454 100%, #000000 0%) !important;
}
.row-selected {
    color:#fff;
    background: -webkit-linear-gradient(left, transparent 100%, #000000 0%) !important;
    background: linear-gradient(left, transparent 100%, #000000 0%) !important;
    background: -moz-linear-gradient(left, transparent 100%, #000000 0%) !important;
    background: -o-linear-gradient(left, transparent 100%, #000000 0%) !important;
}

JavaScript

(function () {
    angular.module("sampleApp", ['ngGrid'])
        .controller("TestCntrl", function ($scope) {
       
        $scope.namespace = "Test";
        $scope[$scope.namespace] = {};
        var namespace = $scope[$scope.namespace];

        namespace.Test2 = "Abc";
        
       //var n1=$filter('orderBy')(gridDetails,'roomType');
       //var test= function(){
       // return companyService.list().then(function(response){
            //return namespace.companycodes=response;
        //});
        //};
       
        //$SCOPE.SELECTITEM=FUNCTION(ITEMID){ //$SCOPE.$PARENT[$SCOPE.$PARENT.NAMESPACE].COMPANYINFO.SOURCEID=ITEMID
       //}
        
       // namespace.listing={};
        //namespace.companyInfo=[];
        
        //var setup=function(){
        //};
        //$q.all($scope.app.isloaded).then(function(){
        //return setup();
        //});
        
       // $scope.$watch(function(){
       // });
        
        $scope.selectDropdown= function(code){            
        var result= _.find($scope.dropdown,function(item){
                          return item.id==code;
        });
          return (angular.isDefined(result) && result != null) ? result.branch : "" ; 
        }
        
        $scope.dropdown=[{ 
        "id":1,
         "branch":"Cse"
        },{
        "id":2,
        "branch":"Civil"    
        },
                         {
        "id":3,
        "branch":"IT"    
        },
                         {
        "id":4,
        "branch":"Mech"    
        },
                         {
        "id":5,
        "branch":"Ece"    
        }
            
        ]
        
        $scope.test = [{
            "id": 1,
            "name": "Jason",
             "branch":1,
            "details": "test1",
             "check": false,
            "check1": false
        }, {
            "id": 2,
            "name": "John",
            "branch":2,
            "details": "test2",
            "check": false,
           ...