JSFiddle - React, Tailwind, and code Playground

by betbest

HTML

<script src="https://cdn.grapecity.com/wijmo/5.20193.637/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.20193.637/styles/wijmo.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.20202.699/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20193.637/controls/wijmo.input.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<div id="AvisoDespachoModal" class="modal-dialog modal-xl" role="dialog"  opacity: 0;">
    <div class="modal-header">
        <h4 class="modal-title">DATOS ORDEN DE COMPRA <span data-recepcion-id="" id="item-id"></span></h4>
    </div>
    <div class="modal-body" id="datosOrdenDeCompra">

        <form method="post" accept-charset="utf-8" autocomplete="off" role="form" name="formSaveEditOrdenCompra" class=" formSaveEditOrdenCompra"  id="formAvisoDespacho">
            

            <div class="form-row">
                <div id="gridAvisoDespachoModal"></div>
            </div>
            
        </form>
    </div>

    <div class="modal-footer">
        <button type="button" class="btn btn-blue wj-hide-cancel">Salir</button>
       
    </div>
    

</div>


<h1>FlexGrid with Custom Cell Editors - Pure JS</h1>

    <button id="open">
      Open PopUp
    </button>

JavaScript

$(document).on('click', '#open', function () {

    formControlsModal.popup.show(true);
});

var formControlsModal = {
    popup: new wijmo.input.Popup('#AvisoDespachoModal')
}

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

var dataGrid = [{Item : 1, Observations : [{Id : 1 , Description : "Observation I", checked : true},{Id : 2 , Description : "Observation II"}]}];

var viewGridListarAvisoDespachoModal = new wijmo.collections.CollectionView(dataGrid);
viewGridListarAvisoDespachoModal.trackChanges = true;

var elementoActual = null;
var multi;
var gridAvisoDespachoModal = new wijmo.grid.FlexGrid('#gridAvisoDespachoModal', {
    autoSizeMode: 'Cells',
    selectionMode: 'ListBox',
    columns: [
        { binding: 'Item', header: 'Item', isReadOnly: true, width: 60 },

        {
            binding: 'Observations', header: 'Observations', width: 300,
            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 wijmo.input.MultiSelect(document.createElement('div'), {
                itemsSource: ObservationMultiSelectSource,
                selectedValuePath: "Id",
                displayMemberPath: "Description",
                checkedMemberPath: "checked"
            })
               
        },
    ],
    alternatingRowStep: 0,
    autoGenerateColumns: false,
    itemsSource: viewGridListarAvisoDespachoModal

});