Wijmo Observation

by betbest

HTML

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>

    <div class="container-fluid">
        <div id="theGrid"></div>
    </div>


<div id="modalDespachoProducto" class="modal-dialog modal-xl" role="dialog" style="width: 40%; opacity: 0;">
    <div class="modal-header rounded-0">
        <h4 class="modal-title mx-auto">Detail Product <span data-recepcion-id="" id="item-id"></span></h4>
    </div>
    <div class="modal-body" id="datosDespachoProducto">


                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label>Observaciones</label> :
                        <div id="comboObservaciones"></div>
                    </div>
                </div>   
                
                  <div class="container-fluid">
        <div id="theGrid2"></div>
    </div>
    </div>

    <div class="modal-footer">
        <button type="button" class="btn btn-blue wj-hide-cancel">Back</button>
        <button type="button" class="btn btn-default rbcorange" id="save">Save</button>
    </div>
    

</div>

JavaScript

var sourceObservation = [
{Id:1 , Description : "Observation I"},
{Id:2 , Description : "Observation II"},
{Id:3 , Description : "Observation III"}
];

   var data =[
   {id:1, date:new Date(),amount:200,premium:"Yes",observations:[sourceObservation[0]]},
   {id:2, date:new Date(),amount:100.5,premium:"Yes", observations:[sourceObservation[0],sourceObservation[1],sourceObservation[2]]},
   {id:3, date:new Date(),amount:100.5,premium:"Yes", observations:[sourceObservation[0],sourceObservation[1],sourceObservation[2]]}
   ];
   
   var viewGrid = new wijmo.collections.CollectionView(data);
   // create a grid with custom editors
   var flexGrid = new wijmo.grid.FlexGrid('#theGrid', {
        showMarquee: true,
        selectionMode: 'MultiRange',
        alternatingRowStep: 0,
        autoGenerateColumns: false,
        columns: [
            { header: 'ID', binding: 'id', width: 80, isReadOnly: true },
            {
                header: 'Date', binding: 'date', format: 'd',
                editor: new wijmo.input.InputDate(document.createElement('div'))
            },
           
            {
                header: 'Amount', binding: 'amount', format: 'n2',
                editor: new wijmo.input.InputNumber(document.createElement('div'), {
                    format: 'n2',
                    step: 10,
                    min: 0,
                    max: 10000
                })
            },
            {
                header: 'Premium', binding: 'premium', cssClass: 'switch'
            },
            {
            binding: 'observations', header: 'Observations', width: 200,
            cellTemplate: (ctx) => {
                if (ctx.value.length == 1) {
                    return ctx.value[0].Description;
                } else if (ctx.value.length > 1) {
                    return ctx.value.length + " Observations";
                }
                return "";
                
            },
            editor: new...