barra de herramientas de filtro de palanca jqGrid con la columna congelada no está funcionando

Question

he visto el siguiente demo con la columna congelado y barra de herramientas de filtro aquí: http://www.ok-soft-gmbh.com/jqGrid/FrozenColumns.htm

Ahora, para el mismo ejemplo que quiero implementar la característica de palanca que era availbale de demostración: http://www.ok-soft-gmbh.com/jqGrid/SimpleLocalGridWithSearchingToolbar1.htm

Lo probé pero no funciona ... ¿alguien puede crear una demostración que tenga ambas columnas congeladas y la barra de herramientas del filtro de alternar?

---

traté de descargar el último código jqGrid de GitHub y trataron de replicar la demostración de la siguiente manera (como u dijo que el tema se fijó pensé que no tiene necesidad de frozendiv, funciones fixGBoxHeight en la demo u me han mostrado es decir, con anterioridad http://www.ok-soft-gmbh.com/jqGrid/FrozenColumnsAndFilterToggle.htm)

$grid.jqGrid({ 
     datatype: 'local', 
     data: mydata, 
     colNames: [/*'Id', */'Client', 'Date', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'], 
     colModel: [ 
      //{name: 'id', index: 'id', width: 45, align: 'center', sorttype: 'int', frozen: true}, 
      {name: 'name', index: 'name', width: 70, editable: true, frozen: true}, 
      {name: 'invdate', index: 'invdate', width: 80, align: 'center', sorttype: 'date', 
       formatter: 'date', formatoptions: {newformat: 'm/d/Y'}, datefmt: 'm/d/Y'}, 
      {name: 'amount', index: 'amount', width: 75, formatter: 'number', align: 'right', editable: true}, 
      {name: 'tax', index: 'tax', width: 50, formatter: 'number', 
       formatoptions: {decimalSeparator: ".", thousandsSeparator: " ", decimalPlaces: 4, defaultValue: '0.0000'}, 
       align: 'right', editable: true, editoptions: {readonly: true}}, 
      {name: 'total', index: 'total', width: 60, formatter: 'number', align: 'right', editable: true}, 
      {name: 'closed', index: 'closed', width: 70, align: 'center', editable: true, 
       formatter: 'checkbox', edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'}}, 
      {name: 'ship_via', index: 'ship_via', width: 100, align: 'center', formatter: 'select', editable: true, 
       edittype: 'select', editoptions: {value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime'}}, 
      {name: 'note', index: 'note', width: 70, sortable: false, editable: true} 
     ], 
     rowNum: 10, 
     rowList: [5, 10, 20], 
     pager: '#pager', 
     gridview: true, 
     rownumbers: true, 
     sortname: 'invdate', 
     viewrecords: true, 
     sortorder: 'desc', 
     caption: 'Frozen columns with dynamic shown filter toolbar', 
     height: '100%', 
     shrinkToFit: false, 
     width: 550, 
     resizeStop: function() { 
      /*resizeColumnHeader.call(this); 
      fixPositionsOfFrozenDivs.call(this); 
      fixGboxHeight.call(this);*/ 
     }, 
     loadComplete: function() { 
      //fixPositionsOfFrozenDivs.call(this); 
     } 
    }); 
    $grid.jqGrid('navGrid', '#pager', {add: false, edit: false, del: false}, {}, {}, {}, 
     {multipleSearch: true, overlay: 0}); 
    $grid.jqGrid('filterToolbar', {stringResult: true, searchOnEnter: true, defaultSearch: 'cn'}); 
    $grid.jqGrid('navButtonAdd', '#pager', { 
     caption: "Filter", 
     title: "Toggle Searching Toolbar", 
     buttonicon: 'ui-icon-pin-s', 
     onClickButton: function() { 
      this.toggleToolbar(); 
      /*if ($.isFunction(this.p._complete)) { 
       if ($('.ui-search-toolbar', this.grid.hDiv).is(':visible')) { 
        $('.ui-search-toolbar', this.grid.fhDiv).show(); 
       } else { 
        $('.ui-search-toolbar', this.grid.fhDiv).hide(); 
       } 
       this.p._complete.call(this); 
       fixPositionsOfFrozenDivs.call(this); 
      }*/ 
     } 
    }); 
    $grid[0].toggleToolbar(); 
    /*$grid.jqGrid('gridResize', { 
     minWidth: 450, 
     stop: function() { 
      fixPositionsOfFrozenDivs.call($grid[0]); 
      fixGboxHeight.call($grid[0]); 
     } 
    }); 
    resizeColumnHeader.call($grid);*/ 
    $grid.jqGrid('setFrozenColumns'); 
    /*$grid.p._complete.call($grid); 
    fixPositionsOfFrozenDivs.call($grid);*/ 
}); 

Pero aún así el código no va a funcionar y el filtertoolbar no funciona, ya que es en su anterior demo (http://www.ok-soft-gmbh.com/jqGrid/FrozenColumnsAndFilterToggle .htm)

Answer 1

Antes que nada I le recomendamos que use the demo de the answer como base en lugar de the demo de the previous answer.

Tienes razón. La implementación actual de columnas congeladas tiene un problema con la visualización u ocultamiento dinámico de la barra de herramientas de búsqueda. Lo interpreto como un error en el toggleToolbar.

Hasta que el error no se solucione, le sugiero que muestre u oculte la barra de herramientas en la parte congelada de la cuadrícula manualmente. The demo muestra cómo implementar esto. La parte más importante del código de la demostración que se encuentra a continuación:

$grid.jqGrid('filterToolbar', {stringResult: true, searchOnEnter: true, defaultSearch: 'cn'}); 
$grid.jqGrid('navButtonAdd', '#pager', { 
    caption: "Filter", 
    title: "Toggle Searching Toolbar", 
    buttonicon: 'ui-icon-pin-s', 
    onClickButton: function() { 
     this.toggleToolbar(); 
     if ($.isFunction(this.p._complete)) { 
      if ($('.ui-search-toolbar', this.grid.hDiv).is(':visible')) { 
       $('.ui-search-toolbar', this.grid.fhDiv).show(); 
      } else { 
       $('.ui-search-toolbar', this.grid.fhDiv).hide(); 
      } 
      this.p._complete.call(this); 
      fixPositionsOfFrozenDivs.call(this); 
     } 
    } 
}); 
$grid[0].toggleToolbar();