Grid groups with row details issue

[gregormParticipant]

Hi,

I have a question regarding residual details that stay open after grid change.

Scenario is as follows:
1. I create grid 1 from some JSON data

2. I select row(s) in grid 1 and move their data to JSON2 and then I build grid 2 from that data with gouping, sorting, pop-up editing and row details (all works perfectly)

3. I either select and add row(s) in grid1 or I edit and save the data on popup form which in terms repopulates JSON2 and I rebuild the grid
Now the magic happens… no matter what, if data in grid2 is grouped together, the details are present and if I collapse the details, the spacing occupied by details remain.

I tried every single jqw combination of functions to try to collapse the details rows, even tried to save the state of the grid when it’s fine and then overwrite it when it’s not but can’t manage to achieve the goal of making residual details collapse. Any ideas?

[gregormParticipant]

I made a crude simulation of the situation so you can try it out: http://jsfiddle.net/sDC74/121/ <- same behaviour.

Try adding one row to the second grid, then try to add another row or same row or any number of rows, result is the same. Whenever you remove the groups it will appear “ok” but when you pull any column back up to the groupping, it will mess everything up.

I have a ton more code (like removing from JSON1 when adding to JSON2 etc) but I think it is besides the point. Here is just the proof of concept.

JS Code:

function makeSubGrid() {
	var sourceData = $('#jsonSubString').html();
  var source = {
        datatype: "json",
        datafields: [
          { name: 'firstName', type: 'string' },
          { name: 'lastName', type: 'string' },
          { name: 'detail1', type: 'string'},
          { name: 'detail2', type: 'string'}
        ],
        localdata: sourceData
      };

	var initrowdetails = function (index, parentElement, gridElement, datarecord) {
    var tabsdiv = null;
    var information = null;
    var notes = null;
    tabsdiv = $($(parentElement).children()[0]);
    if (tabsdiv != null) {
      information = tabsdiv.find('.information');
      notes = tabsdiv.find('.notes');
      var title = tabsdiv.find('.title');
      title.text(datarecord.firstname);
      var container = $('<div style="margin: 5px;"></div>')
      container.appendTo($(information));
      var leftcolumn = $('<div style="float: left; width: 45%;"></div>');
      var rightcolumn = $('<div style="float: left; width: 40%;"></div>');
      container.append(leftcolumn);
      container.append(rightcolumn);
      var detail1 = "<div style='margin: 10px;'><b>Detail 1:</b> " + datarecord.detail1 + "</div>";
      var detail2 = "<div style='margin: 10px;'><b>Detail 2:</b> " + datarecord.detail2 + "</div>";
      $(leftcolumn).append(detail1);
      $(leftcolumn).append(detail2);
      var notescontainer = $('<div style="white-space: normal; margin: 5px;"><span>notes placeholder</span></div>');
      $(notes).append(notescontainer);
      $(tabsdiv).jqxTabs({ width: 250, height: 100});
    }
  }

  var dataSubAdapter = new $.jqx.dataAdapter(source, {});
  $("#jqxSubGrid").jqxGrid(
    {
      width: 350,
      height: 350,
      source: dataSubAdapter,                
      pageable: false,
      autoheight: false,
      sortable: true,
      altrows: true,
      enabletooltips: false,
      editable: false,
      selectionmode: 'checkbox',
      groupable: true,
      groups: ['firstName'],
      rowdetails: true,
      rowdetailstemplate: { rowdetails: "<div style='margin: 10px;'><ul style='margin-left: 30px;'><li class='title'></li><li>Notes</li></ul><div class='information'></div><div class='notes'></div></div>", rowdetailsheight: 120 },
      ready: function () {
        /*$("#jqxgrid").jqxGrid('showrowdetails', 0);
        $("#jqxgrid").jqxGrid('showrowdetails', 1);*/
      },
      initrowdetails: initrowdetails,
      columns: [
        { text: 'First name', columngroup: 'firstName', datafield: 'firstName', width: 100 },
        { text: 'Last name', columngroup: 'lastName', datafield: 'lastName', width: 100 }
      ]
    });
}

$(document).ready(function () {
            var sourceData = $('#jsonString').html();
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'firstName', type: 'string' },
                    { name: 'lastName', type: 'string' },
                ],
                localdata: sourceData
            };
            
            var dataAdapter = new $.jqx.dataAdapter(source, {});
            $("#jqxgrid").jqxGrid(
            {
                width: 350,
                height: 150,
                source: dataAdapter,                
                pageable: false,
                autoheight: false,
                sortable: true,
                altrows: true,
                enabletooltips: false,
                editable: false,
                selectionmode: 'checkbox',
                columns: [
                  { text: 'First name', columngroup: 'firstName', datafield: 'firstName', width: 100 },
                  { text: 'Last name', columngroup: 'lastName', datafield: 'lastName', width: 100 }
                ]
    });
 
  $("#move2second").jqxButton({ width: 252, height: 22 });
  $("#move2second").on('click', function () {
    var selectedRows = $('#jqxgrid').jqxGrid('getselectedrowindexes');
    if (selectedRows.length > 0) {
      var jsonData = JSON.parse($('#jsonString').html());
      var tmpArray = [];
      for (var rowCounter=0; rowCounter<selectedRows.length; rowCounter++) {
        tmpArray.push(jsonData.employees[selectedRows[rowCounter]]);
      }
      $('#jsonSubString').html(JSON.stringify(tmpArray));
      makeSubGrid();
    } else {
      alert("You must select at least one row in the first grid!");
    }
  });
});

HTML code:

<div style="position: fixed; right: 5px; top: 20px; border: 1px dashed red; width: 150px; height: 150px; overflow: auto; background-color: #FFFFFF;" id="jsonString">
  {"employees":[
    {"firstName":"John", "lastName":"Doe","detail1":"male", "detail2":"45"},
    {"firstName":"Anna", "lastName":"Smith","detail1":"female", "detail2":"29"},
    {"firstName":"Peter", "lastName":"Jones","detail1":"male", "detail2":"31"}
  ]}
</div>

<div style="position: fixed; right: 5px; top: 250px; border: 1px dashed red; width: 150px; height: 150px; overflow: auto; background-color: #FFFFFF;" id="jsonSubString">[]</div>

<div id="jqxgrid"></div><button id="move2second" style="margin-top: 10px; margin-bottom: 40px;">Move selected to second grid</button><br /><br />
<div id="jqxSubGrid"></div>

[ChristopherParticipant]

Hi gregorm,

The way you initialize the second grid is incorrect. You shoudn’t re-create the “jqxSubGrid” every time you click on the “move2second” button. That’s the root of your issue. Instead you should just reload the data and refresh the jqxGrid. This is done trough the “updatebounddata” method of the jqxGrid. If you want to hide the 2nd jqxGrid, just set it’s visibility to hidden using CSS.
Here’s how it should look:
http://jsfiddle.net/dRbAE/404/

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[gregormParticipant]

Hi Cristopher,

Thank you ever so much for fast response and good answer with working fiddle.

After seeing what you did there I managed to fix the issue in a heartbeat.

Thanks again
Greg

[Author]

Posts