SlickGrid_All_in_one

by Anil D

HTML

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/lib/jquery.event.drag-2.2.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/slick.core.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/slick.grid.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/Celebio/SlickGrid/master/slick.grid.css">
<link rel="stylesheet" href="https://rawgithub.com/Celebio/SlickGrid/master/slick-default-theme.css">
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/slick.formatters.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/slick.editors.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/plugins/slick.cellselectionmodel.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/plugins/slick.cellrangedecorator.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/plugins/slick.cellrangeselector.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://rawgithub.com/Celebio/SlickGrid/master/slick.dataview.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/plugins/slick.checkboxselectcolumn.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/plugins/slick.rowselectionmodel.js"></script>
			<div style="position:relative ">
                <div style="width:600px;">
                    <div id="myGrid" style="width:100%;height:350px;"></div>
                    
                </div>
				
				<div class="options-panel">
			<b>Actions:</b>
			<hr/>
			<div style="padding:6px;">
				<label style="width:200px;float:left">Multiple rows selection: </label>
				<div style="padding:2px;">
					<input type=checkbox id="chkMultiSelect">
				</div>
				<br/>
				<label...

CSS

.editor-text{
    width : 100px;    
    text-overflow: ellipsis;
}
.dropdown{
    width: 75px;
    height: 22px;
    padding: 0px;
    z-index: 20;
    width: 100px;
    padding: 2px;
    font-size:11px;
    line-height: 1;
    height: 26px;
    margin-top: -10px;
    margin-right: 319px;
    margin-left: -6px;
    margin-bottom: -9px;

}
.ui-autocomplete {
		max-height: 100px;
		overflow-y: auto;
		/* prevent horizontal scrollbar */
		overflow-x: hidden;
        font-size : 14px;
        width : 110px;
        height : 50px;        
}

input.editor-text{
    background: transparent !important;
    border: transparent !important;
}

.customSelected {
    z-index: 10;
    background: #DFE8F6 !important;
}
.ng-invalid {
	border: 1px solid red;
}

body {
	font-family: Arial, Helvetica, sans-serif;
}

body,td,th {
	font-size: 14px;
	margin: 0;
}

table {
	border-collapse: separate;
	border-spacing: 2px;
	display: table;
	margin-bottom: 0;
	margin-top: 0;
	-moz-box-sizing: border-box;
	text-indent: 0;
}

.error {
	color: red;
}

.ui-helper-hidden {
	display: none;
}

JavaScript

//This is the way to extend the slickgrid
(function ($) {
    
    /** Create the Slick.Editors object if it does not exist */
    if (!window.Slick.Editors) 
        window.Slick.Editors = {};
 
    /** Extend the Slick.Editors with autoComplete editor */
    $.extend(true, window.Slick.Editors, {
        "Auto": AutoCompleteEditor
    });
    
    //custom autofill editor
function AutoCompleteEditor(args) {
     var $input;
     var defaultValue;
     var scope = this;
     var calendarOpen = false;

     this.init = function () {
       $input = $("<INPUT id='tags' class='editor-text' />");
       $input.appendTo(args.container);
       $input.focus().select();
       $input.autocomplete({
            source: availableTags
        ,
            open: function( event, ui ) {
        debugger;
       var firstElement = $('#tags').data('ui-autocomplete').menu.element[0].children[0]
           , inpt = $('#tags')
           , original = inpt.val()
           , firstElementText = $(firstElement).text();
       
        /*
           here we want to make sure that we're not matching something that doesn't start
           with what was typed in 
        */
        if(firstElementText.toLowerCase().indexOf(original.toLowerCase()) === 0){
            inpt.val(firstElementText);//change the input to the first match
    
            inpt[0].selectionStart = original.length; //highlight from end of input
            inpt[0].selectionEnd = firstElementText.length;//highlight to the end
        }
    }
       });
     };

     this.destroy = function () {
       $input.autocomplete("destroy");
     };

     this.focus = function () {
       //$input.focus();
         return false;
     };

     this.loadValue = function (item) {
       defaultValue = item[args.column.field];
       $input.val(defaultValue);
       $input[0].defaultValue = defaultValue;
       $input.select();
     };

     this.serializeValue = function () {
       return $input.val();
     };

    ...