Demo - Custom Editors

by Manish Gupta

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.gauge.min.js"></script>
<div class="container">

  <h1>
    Custom Editors
  </h1>
  <p>
    Although the FlexGrid provides efficient, Excel-style
    editing by default, you may want to customize the 
    editing behavior.</p>
  <p>
    This example defines a <b>CustomGridEditor</b> class
    that allows any Wijmo control to be used as a grid
    editor:</p>
  <div id="theGrid">
  </div>

</div>

CSS

body {
  margin-bottom: 24px;
}

.wj-flexgrid {
  max-height: 200px;
  margin-bottom: 12px;
}

.modal-content {
  width: 400px;
}
/* style our custom 'edit buttons' */
.wj-rowheaders .wj-cell .wj-glyph-pencil {
  opacity: .3;
  transform: scale(.5);
}
.wj-rowheaders .wj-cell:hover .wj-glyph-pencil {
  opacity: 1;
  color: #000080;
  transform: scale(1);
  transition: all linear 300ms;
}

/* wj-labeled-input: adapted from MDL styles */

/* label input container */
.wj-labeled-input {
    position: relative;
    font-size: 16px;
    display: inline-block;
    box-sizing: border-box;
    width: 300px;
    max-width: 100%;
    margin: 0 20px;
    padding: 20px 0;
}

    /* Wijmo control in the container */
    .wj-labeled-input .wj-control.wj-content {
        margin: 0;
        width: 100%;
        background-color: transparent;
        border: none;
        border-bottom: 1px solid rgba(0,0,0,.1);
    }
    .wj-labeled-input .wj-control.wj-content button {
        opacity: 0.75;
        border-color: rgba(0,0,0,.1);
    }
    .wj-labeled-input .wj-input-group .wj-form-control {
        float: none;
    }

    /* label in the container (must come after the control) */
    .wj-labeled-input label {
        font-size: 16px;
        top: 24px;
        bottom: 0;
        margin: 0;
        pointer-events: none;
        position: absolute;
        display: block;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-align: left;
        color: rgba(0, 0, 0, 0.258824);
        transition-duration: .2s;
        transition-timing-function: cubic-bezier(.4,0,.2,1);
    }
    
    /* move label out of the way when control is focused or not empty */
    .wj-static-labels .wj-labeled-input :not(.wj-state-focused) + label,
    .wj-labeled-input .wj-state-focused + label,
    .wj-labeled-input :not(.wj-state-empty) + label {
        font-size: 12px;
        top: 4px;
        color: rgb(63,81,181);
        visibility: visible;
    }
   ...

JavaScript

onload = function() {

    // create some random data
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
    var products = [
        { id: 0, name: 'Widget', unitPrice: 23.43 },
        { id: 1, name: 'Gadget', unitPrice: 12.33 },
        { id: 2, name: 'Doohickey', unitPrice: 53.07 },
    ];
		var data = [];
		var dt = new Date();
    for (var i = 0; i < 100; i++) {
    	data.push({
      	id: i,
        date: new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60),
        time: new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60),
        country: countries[Math.floor(Math.random() * countries.length)],
        product: products[Math.floor(Math.random() * products.length)].name,
        amount: Math.random() * 10000 - 5000,
        discount: Math.random() / 4
      });
    }

    // grid with custom editors
    var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
        autoGenerateColumns: false,
        itemsSource: data,
        columns: [
            { header: 'ID', binding: 'id', width: 40, isReadOnly: true },
            { header: 'Date', binding: 'date', format: 'd',isRequired:false },
            { header: 'Time', binding: 'time', format: 't' },
            { header: 'Country', binding: 'country' },
            { header: 'Product', binding: 'product' },
            { header: 'Amount', binding: 'amount', format: 'n2' }
        ], 
		beginningEdit:function(sdr,arg){
			setTimeout(function(){
				var date=document.querySelector(".wj-inputdate");
				var inptDate= wijmo.input.InputDate.getControl(date);
				if(inptDate){
					inptDate.calendar.formatItem.addHandler(function(s,e){
				    var weekday = e.data.getDay();
    wijmo.toggleClass(e.item, 'date-weekend', weekday == 0 || weekday == 6);			});
	inptDate.valueChanged.addHandler(function(s,e){
		console.log("Value Changed");
		console.log(sdr.getCellData(arg.row,arg.col,true),s.text);
	});
	}
			})
		},
		
    });

    // add custom editors to the grid
    new...