0

**Fixed. The issue was with the columns. I am doing ajax calls to get the columns to show on the grid and then all possible columns for the column picker. I forgot that jQuery does not work like the code behind, so I had a function LoadColumns(); and then LoadAllColumns();. I was loading the grid after I did the ajax call in LoadAllColumns. Sometimes LoadColumns would go run first and everything would be fine and sometimes not. I moved the LoadAllColumns function after the successful ajax call in LoadColumns and now everything works great. Thanks for the help!

I am implementing Slick Grid into my web application and have run into an issue. I was developing the grid in a separate application and everything worked fine. I then moved the grid and all of the code into my web application and the grid will not load every time. Sometimes I will come to the grid and everything will load fine and sometimes, I will go to the grid and it won't show anything. I am using the data view and getting my data through ajax. I am pulling all of my data first and then instantiating the grid and data view. I have been going through my code all day and am stumped as to what could be causing this.

  1. Doing my ajax call (All data comes back as it should)

  2. Below is how I am loading the grid

    function LoadGrid() {
  dataView = new Slick.Data.DataView({ inlineFilters: true });
  grid = new Slick.Grid("#grid", dataView, columns, options);
  grid.setSelectionModel(new Slick.RowSelectionModel());
  var pager = new Slick.Controls.Pager(dataView, grid, $("#pager"));
  var columnpicker = new Slick.Controls.ColumnPicker(allColumns, grid, options);

  //for sorting of the columns
  grid.onSort.subscribe(function (e, args) {
    sortdir = args.sortAsc ? 1 : -1;
    sortcol = args.sortCol.field;
    dataView.sort(comparer, args.sortAsc);
  });


  // if using the paging option, this is used to page through the rows
  dataView.onPagingInfoChanged.subscribe(function (e, pagingInfo) {
    var isLastPage = pagingInfo.pageNum == pagingInfo.totalPages - 1;
    var options = grid.getOptions();
    var enableAddRow = false;
    grid.setOptions({ enableAddRow: enableAddRow });

  });


  InitializeDataView();
  loadingIndicator.hide();
}


function InitializeDataView() {
  UpdateGrid();

  // if you don't want the items that are not visible (due to being filtered out
  // or being on a different page) to stay selected, pass 'false' to the second arg
  dataView.syncGridSelection(grid, true);

  // wire up model events to drive the grid
  dataView.onRowCountChanged.subscribe(function (e, args) {
    grid.updateRowCount();
    grid.render();
  });

  dataView.onRowsChanged.subscribe(function (e, args) {
    grid.invalidateRows(args.rows);
    grid.render();
  });


  //                if using the paging option, this is used to page through the rows
  dataView.onPagingInfoChanged.subscribe(function (e, pagingInfo) {
    var isLastPage = pagingInfo.pageNum == pagingInfo.totalPages - 1;
    var enableAddRow = isLastPage || pagingInfo.pageSize == 0;
    var options = grid.getOptions();

    if (options.enableAddRow != enableAddRow) {
        grid.setOptions({ enableAddRow: enableAddRow });
    }
  });
}


function UpdateGrid() {
  // initialize the model after all the events have been hooked up
  dataView.beginUpdate();
  dataView.setItems(data);
  dataView.setFilterArgs({
    searchString: searchString
  });
  dataView.setFilter(myFilter);
  dataView.endUpdate();
  loadingIndicator.hide();
}

The grid comes back, the data just does not get loaded. Also, the correct number of rows should be 312. Below is the html after the grid is instantiated. 

     <div class="slick-viewport" style="width: 100%; overflow: auto; outline: 0px; position: relative;
        height: 797px;">
        <div class="grid-canvas" style="width: 0px; height: 7800px;">
            <div class="ui-widget-content slick-row  odd" row="5" style="top: 125px">
            </div>
            <div class="ui-widget-content slick-row  even" row="6" style="top: 150px">
            </div>
            <div class="ui-widget-content slick-row  odd" row="7" style="top: 175px">
            </div>
            <div class="ui-widget-content slick-row  even" row="8" style="top: 200px">
            </div>
            <div class="ui-widget-content slick-row  odd" row="9" style="top: 225px">
            </div>
            <div class="ui-widget-content slick-row  even" row="10" style="top: 250px">
            </div>
            <div class="ui-widget-content slick-row  odd" row="11" style="top: 275px">
            </div>
            <div class="ui-widget-content slick-row  even" row="12" style="top: 300px">
            </div>
            <div class="ui-widget-content slick-row  odd" row="13" style="top: 325px">
            </div>
            <div class="ui-widget-content slick-row  even" row="14" style="top: 350px">
            </div>
            <div class="ui-widget-content slick-row  odd" row="15" style="top: 375px">
            </div>
            <div class="ui-widget-content slick-row  even" row="16" style="top: 400px">
            </div>
            <div class="ui-widget-content slick-row  odd" row="17" style="top: 425px">
            </div>
            <div class="ui-widget-content slick-row  even" row="18" style="top: 450px">
            </div>
            <div class="ui-widget-content slick-row  odd" row="19" style="top: 475px">
            </div>
            <div class="ui-widget-content slick-row  even" row="20" style="top: 500px">
            </div>
            <div class="ui-widget-content slick-row  odd" row="21" style="top: 525px">
            </div>
            <div class="ui-widget-content slick-row  even" row="22" style="top: 550px">
            </div>
            <div class="ui-widget-content slick-row  odd" row="23" style="top: 575px">
            </div>
            <div class="ui-widget-content slick-row  even" row="24" style="top: 600px">
            </div>
            <div class="ui-widget-content slick-row  odd" row="25" style="top: 625px">
            </div>
            <div class="ui-widget-content slick-row  even" row="26" style="top: 650px">
            </div>
            <div class="ui-widget-content slick-row  odd" row="27" style="top: 675px">
            </div>
            <div class="ui-widget-content slick-row  even" row="28" style="top: 700px">
            </div>
            <div class="ui-widget-content slick-row  odd" row="29" style="top: 725px">
            </div>
            <div class="ui-widget-content slick-row  even" row="30" style="top: 750px">
            </div>
            <div class="ui-widget-content slick-row  odd" row="31" style="top: 775px">
            </div>
            <div class="ui-widget-content slick-row  even" row="32" style="top: 800px">
            </div>
            <div class="ui-widget-content slick-row  odd" row="33" style="top: 825px">
            </div>
            <div class="ui-widget-content slick-row  even" row="34" style="top: 850px">
            </div>
            <div class="ui-widget-content slick-row  odd" row="35" style="top: 875px">
            </div>
            <div class="ui-widget-content slick-row  even" row="36" style="top: 900px">
            </div>
            <div class="ui-widget-content slick-row  odd" row="37" style="top: 925px">
            </div>
            <div class="ui-widget-content slick-row  even" row="38" style="top: 950px">
            </div>
            <div class="ui-widget-content slick-row  odd" row="39" style="top: 975px">
            </div>
            <div class="ui-widget-content slick-row  even" row="40" style="top: 1000px">
            </div>
            <div class="ui-widget-content slick-row  odd" row="41" style="top: 1025px">
            </div>
            <div class="ui-widget-content slick-row  even" row="42" style="top: 1050px">
            </div>
            <div class="ui-widget-content slick-row  odd" row="43" style="top: 1075px">
            </div>
            <div class="ui-widget-content slick-row  even" row="44" style="top: 1100px">
            </div>
            <div class="ui-widget-content slick-row  odd" row="45" style="top: 1125px">
            </div>
            <div class="ui-widget-content slick-row  even" row="46" style="top: 1150px">
            </div>
            <div class="ui-widget-content slick-row  odd" row="47" style="top: 1175px">
            </div>
            <div class="ui-widget-content slick-row  even" row="48" style="top: 1200px">
            </div>
            <div class="ui-widget-content slick-row  odd" row="49" style="top: 1225px">
            </div>
            <div class="ui-widget-content slick-row  even" row="50" style="top: 1250px">
            </div>
            <div class="ui-widget-content slick-row  odd" row="51" style="top: 1275px">
            </div>
            <div class="ui-widget-content slick-row  even" row="52" style="top: 1300px">
            </div>
            <div class="ui-widget-content slick-row  odd" row="53" style="top: 1325px">
            </div>
            <div class="ui-widget-content slick-row  even" row="54" style="top: 1350px">
            </div>
            <div class="ui-widget-content slick-row  odd" row="55" style="top: 1375px">
            </div>
            <div class="ui-widget-content slick-row  even" row="56" style="top: 1400px">
            </div>
            <div class="ui-widget-content slick-row  odd" row="57" style="top: 1425px">
            </div>
            <div class="ui-widget-content slick-row  even" row="58" style="top: 1450px">
            </div>
            <div class="ui-widget-content slick-row  odd" row="59" style="top: 1475px">
            </div>
            <div class="ui-widget-content slick-row  even" row="60" style="top: 1500px">
            </div>
            <div class="ui-widget-content slick-row  odd" row="61" style="top: 1525px">
            </div>
            <div class="ui-widget-content slick-row  even" row="62" style="top: 1550px">
            </div>
            <div class="ui-widget-content slick-row  odd" row="63" style="top: 1575px">
            </div>
            <div class="ui-widget-content slick-row  even" row="64" style="top: 1600px">
            </div>
            <div class="ui-widget-content slick-row  odd" row="65" style="top: 1625px">
            </div>
            <div class="ui-widget-content slick-row  even" row="66" style="top: 1650px">
            </div>
            <div class="ui-widget-content slick-row  odd" row="67" style="top: 1675px">
            </div>
            <div class="ui-widget-content slick-row  even" row="68" style="top: 1700px">
            </div>
            <div class="ui-widget-content slick-row  odd" row="69" style="top: 1725px">
            </div>
            <div class="ui-widget-content slick-row  even" row="70" style="top: 1750px">
            </div>
            <div class="ui-widget-content slick-row  odd" row="71" style="top: 1775px">
            </div>
            <div class="ui-widget-content slick-row  even" row="72" style="top: 1800px">
            </div>
        </div>
    </div>
Cœur
  • 37,241
  • 25
  • 195
  • 267
user1158751
  • 21
  • 3
  • When it does not load, do you see any errors in the JavaScript console? Also, trace HTTP requests (you can do that in IE using the "F12" developer tools, I'm sure it's possible in other browsers too) and make sure you get a valid Ajax reply in cases where the grid does not show. – Eric J. Aug 01 '12 at 18:41
  • Can you post your HTML as well? Also, is the `#grid` element hidden on load - or inside another hidden element? – ganeshk Aug 01 '12 at 18:48
  • There are no errors in the JavaScript console and the grid is not behind any hidden elements. – user1158751 Aug 01 '12 at 20:36

0 Answers0