Multiple horizontal lines displayed between set of dynamically created tables

I am facing one issue while inserting horizontal line on the fly (i.e. at the time of creating dynamic tables).

As you can see from the code snippet below:

1) If you click on any row of the first table/grid, a horizontal line is shown below it and a new table is shown

2) If I click on any row of second grid/table ,everything looks good and a horizontal line is shown and a 3rd grid/table is shown

3) Click on 3rd grid , 4th grid is shown and a horizontal line. But when you click on 4th grid, you will notice an additional horizontal line getting added just above the grid as shown in the screenshot (highlighted) below:

enter image description here

Could anyone tell me why this is happening?

I am trying to accomplish this using an additional variable hll in the code. Not sure if it's redundant to use hll or I could use hl for the same purpose?

var hll = document.createElement('div');
  hll.id = 'newhorizLine';
  hll.style.margin = "25px 0";
  hll.style.height = "1px";
  hll.style.background = "black";
  hll.style.background = "-webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, black))";

Please consider the code snippet below :

var source = {
  localdata: [
    ["Test1", "2018-08-29 14:19:07", "2020-08-29 14:19:07", "Path1"],
    ["Test2", "2018-09-05 11:26:39", "2020-09-05 11:26:39", "Path2"],
    ["Test3", "2018-08-30 07:32:23", "2020-08-30 07:32:23", "Path3"],
    ["Test4", "2018-09-11 09:01:42", "2020-09-11 09:01:42", "Path4"],
    ["Test5", "2018-08-01 15:28:22", "2020-08-01 15:28:22", "Path5"],
    ["Test6", "2018-08-01 15:28:22", "2020-08-01 15:28:22", "Path6"],
    ["Test7", "2018-09-13 07:34:57", "2020-09-13 07:34:57", "Path7"]
  ],
  datafields: [{
      name: 'dataSetName',
      type: 'string',
      map: '0'
    },
    {
      name: 'accessStartDate',
      type: 'date',
      map: '1'
    },
    {
      name: 'accessEndDate',
      type: 'date',
      map: '2'
    },
    {
      name: 'conceptPath',
      type: 'string',
      map: '3'
    }
  ],
  datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source, {
  loadComplete: function(data) {},
  loadError: function(xhr, status, error) {}
});

$("#main_downloader_grid").jqxGrid({

  source: dataAdapter,
  width: 381,
  height: '200',
  pageable: true,
  sortable: true,
  autoheight: true,
  columnsResize: true,
  theme: 'classic',
  columns: [{
      text: 'Data Set',
      datafield: 'dataSetName',
      width: 140

    },
    {
      text: 'Start Date',
      datafield: 'accessStartDate',
      width: 120,
      cellsformat:'MM/dd/yyyy'
    },
    {
      text: 'End Date',
      datafield: 'accessEndDate',
      width: 120,
      cellsformat:'MM/dd/yyyy'
    },
    {
      text: 'Concept Path',
      datafield: 'conceptPath',
      width: 50,
      hidden: true
    }
  ]

});

// Row Select Logic Starts Here
$("#main_downloader_grid").on("rowselect", function(e) {
  let data_set_name = $("#main_downloader_grid").jqxGrid('getcell', e.args.rowindex, 'dataSetName');

  console.log("Cell Value Test");
  console.log(data_set_name.value);


  let conceptPath = $("#main_downloader_grid").jqxGrid('getcell', e.args.rowindex, 'conceptPath');
  console.log("Concept Path Test");
  console.log(conceptPath.value);


  $('#commonWindow').remove();
  //$('.clickable').remove();
  $('.clickable').next('#testbutton').remove();
    $('.clickable').slice(1).remove();


  var elem = document.createElement('div');
  elem.id = 'commonWindow';
  //elem.setAttribute('style', 'margin:500px 10px 20px 20px;');


  console.log(elem);



  let data = [{
      letter: '<b>People</b>'
    },
    {
      letter: '1) Detailed demographics data of all people'
    },
    {
      letter: '2) Attributes associated with all people'
    },
    {
      letter: '<b>Technology</b>'
    },
    {
      letter: '1) Computer details'
    },
    {
      letter: '2) Hardware Details'
    },
    {
      letter: '3) Software Details'
    },
    {
      letter: '<b>Company Details</b>'
    }
    /* {conceptpath: conceptPath.value } */
  ];
  let source = {
    localdata: data,
    datatype: "array",
    datafields: [{
      name: 'letter',
      type: 'string'
    } /* ,{ name: 'conceptpath', type: 'string' } */ ]
  };
  let newDataAdapter = new $.jqx.dataAdapter(source);

  $(elem).jqxGrid({
    source: newDataAdapter,
    width: 395,
    height:310,
    columns: [{
        text: 'Data set <b>' + data_set_name.value + '</b> selected, what data do you want to see?',
        datafield: 'letter'
        //width: 450
      }

    ]
  });
 
 $(elem).insertAfter('#main_downloader_grid');
  elem.style.margin = "50px 10px 20px 50px";
  
  var hl = document.createElement('div');
  hl.id = 'horizLine';
  hl.style.margin = "25px 0";
  hl.style.height = "1px";
  hl.style.background = "black";
  hl.style.background = "-webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, black))";
  $(hl).insertAfter('#main_downloader_grid');
  
  
  var hll = document.createElement('div');
  hll.id = 'newhorizLine';
  hll.style.margin = "25px 0";
  hll.style.height = "1px";
  hll.style.background = "black";
  hll.style.background = "-webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, black))";
  
  

$("#commonWindow").on("rowselect", handleClick);



function handleClick(e) {
  var $el = $("<div />", {
    class: "clickable",
    style: "margin:100px 10px 20px 20px ",
  })
  .on('click', handleClick)

  $el.jqxGrid({
    height: 270,width:520, pageable: true,source: dataAdapter, columns: [
      { text: 'Data Set Name', datafield: 'dataSetName', width: 200 },
      { text: 'Access Start Date', datafield: 'accessStartDate', width: 150,cellsformat:'MM/dd/yyyy' },
      { text: 'Access End Date', datafield: 'accessEndDate', width: 150,cellsformat:'MM/dd/yyyy' },
      { text: 'Concept Path', datafield: 'conceptPath', width: 100,hidden:true }
     
    ]
  });
  
 $(hll).insertAfter(".clickable");

  var $this = $(this), $parent = $(this).parent();

  if (e.type == 'rowselect') {
     $('.clickable').next('#testbutton').remove();
     $('.clickable').next('#newhorizline').remove();
     $('.clickable').slice(1).remove();
  }

  var $button = $("<div id = 'testbutton'></div>").on('click', function (e) {
       $(".clickable").jqxGrid('exportdata', 'csv', 'jqxGrid');
  });
  
 
  console.log($button);

  
  $button.jqxButton({ width: 100, height: 20});
    $button.html('Download Data');

  $el.after($button);

    $parent.append($el);
  $(this).off('click');
}


});
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div class="wrapper">
  <div id="main_downloader_grid" style="margin:50px 10px 20px 50px"></div>
  <div class="clickable" style="margin:50px 10px 20px 20px;"></div>
</div>

1 answer

  • answered 2018-10-11 18:59 MtnBros

    While, I am not exactly sure what you are try to accomplish, you can get horizontal lines without css using the


    tag in html!

    <h2>Hello!</h2>
    <hr>
    <h3>Hi, Tim!</h3>