igGrid code snippet

by georgianastasov

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://igniteui.com/js-data/nw-employees"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<script id="dialogTemplate" type="text/html">
        <div class="row-edit-dialog-container-head"><strong>${Name}</strong></div>
        <div class="row-edit-dialog-container-cols">
            <div style="float: left;">
                <table>
                    <colgroup>
                        <col style="width: 30%;" />
                        <col style="width: 70%;" />
                    </colgroup>
                    <tbody data-render-tmpl="true"></tbody>
                </table>
            </div>
        </div>
</script>
<script id="editorsTemplate" type="text/html">
        <tr>
            <td style="text-align:right;color:#777;"><strong>${headerText}</strong></td>
            <td><input data-editor-for-${key}="true" /></td>
        </tr>
</script>

  <button id="loadGrid">Load Grid</button>
  <button id="btnValidate">Validate Rows</button>
  <table id="tblValidate"></table>

CSS

.row-edit-dialog-container-cols
		{
			width:100%;
			overflow:hidden;
			border-bottom:1px solid #ccc;
			padding-bottom:15px;
		}
        .row-edit-dialog-container-cols table
        {
            width: 100%;
            border-collapse: collapse;
        }
        .row-edit-dialog-container-cols table tbody td
        {
            border:none !important;
			padding: 0 4px 10px;
        }
		.row-edit-dialog-container-head
		{
			border-bottom:1px solid #ccc;padding-bottom:10px;margin-top:10px;margin-bottom:25px;font-size:16px;
		}
		.ui-dialog .ui-dialog-buttonpane
		{
			margin-top:0;
			padding-top:0;
		}
		.ui-dialog .ui-dialog-buttonpane button
		{
			margin:0.5em 0 0.5em 0.4em;
		}
		.ui-iggrid .ui-widget-content.ui-dialog
		{
			border-color:#888;
		}
		.ui-dialog-title
		{
			text-transform:uppercase;
			margin:0;
			font-size:90%;
		}
		.ui-dialog .ui-dialog-titlebar
		{
			padding: 0.7em 1em;
		}

JavaScript

// Dummy form data
    var fdata = {};

    // Dummy $scrubberSettings with variables required for combo editors
    var $scrubberSettings = {
      variables: {
        referenceTypes: {
          val: function() {
            return JSON.stringify([
              { id: 1, description: "Type A" },
              { id: 2, description: "Type B" }
            ]);
          }
        },
        serviceLevels: {
          val: function() {
            return JSON.stringify([
              { orderTypeId: 1, orderTypeName: "Standard" },
              { orderTypeId: 2, orderTypeName: "Express" }
            ]);
          }
        },
        specialHandlings: {
          val: function() {
            return JSON.stringify([
              { key: "Fragile", description: "Fragile" }
            ]);
          }
        },
        tblValidate: null
      }
    };

    // Dummy DataScrubber object with functions referenced in the snippet
    var DataScrubber = {
      markValidRows: function() { console.log("markValidRows called"); },
      markEditDialogColumnsValid: function() { console.log("markEditDialogColumnsValid called"); },
      onEditDialogClosed: function(evt, ui) { console.log("edit dialog closed", ui); },
      validateRows: function() { console.log("validateRows called"); },
      addColumnFormatters: function() { console.log("addColumnFormatters called"); }
    };

    // Override $.ajax to simulate a sample data response for testing
    (function(){
      var originalAjax = $.ajax;
      $.ajax = function(options) {
        console.log("Simulated $.ajax call", options);
        var sampleResult = {
          data: [{
            columnHeaders: [
              { headerText: "AID ID", key: "aid_id", dataType: "number" },
              { headerText: "WSI ID", key: "wsi_id", dataType: "number" },
              { headerText: "Valid", key: "Valid", dataType: "boolean" },
              { headerText: "Company Name", key: "pick_up_company_name", dataType: "string" },
 ...