Rectangle 27 0

The grid is modifying your data source directly, so the changes will be applied to "data". The "onCurrentCellChanged" event is fired when the user changes the active/selected cell, and gets {row:currentRow, cell:currentCell} as a parameter. To get to the cell data, you can use data[args.row][grid.getColumns()[args.cell].field], assuming you are using the column.field to access the data and not a custom formatter that gets the data in some other way.

No, I'm not using a custom formatter, so this is exactly what I'm looking for. Thank Tin!

javascript - Getting data from cells in SlickGrid - Stack Overflow

javascript jquery jquery-plugins slickgrid
Rectangle 27 0

$(function () {
var data = [];
for (var i = 1; i < 12; i++) {
  data[i] = {
    title: "Task " + i,
    duration: "5 days",
    percentComplete: Math.round(Math.random() * 100),
    start: "01/01/2009",
    finish: "01/05/2009",
    effortDriven: (i % 5 == 0)
  };
}

grid = new Slick.Grid("#myGrid", data, columns, options);

the data array is were you stick the data.

You are using the grid backed by a data array. The OP is looking at using a dataView object to replace the data array. Check out the example linked in the Q.

javascript - How to add data to a SlickGrid DataView? - Stack Overflow

javascript jquery jquery-plugins slickgrid
Rectangle 27 0

var columns = [
               {id: "title", name: "Title", field: "title"},
               {id: "duration", name: "Duration", field: "duration"},
               {id: "%", name: "% Complete", field: "percentComplete"},
               {id: "start", name: "Start", field: "start"},
               {id: "finish", name: "Finish", field: "finish"},
               {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
             ];    

$(document).ready(function() {
        for (var i = 0; i < 200; i++) {
              data[i] = {
                id: "id_" + i,
                title: "Task " + i,
                duration: "5 days",
                percentComplete: Math.round(Math.random() * 100),
                start: "01/01/2009",
                finish: "01/05/2009",
                effortDriven: (i % 5 == 0)
              };
            }

        dataView = new Slick.Data.DataView({ inlineFilters: true });
        grid = new Slick.Grid("#myGrid", dataView, columns, options);
        dataView.beginUpdate();
        dataView.setItems(data);
        dataView.setFilter(filter);
        dataView.endUpdate();
        dataView.render(); //You missed this rendering part. this should work now.
    });

Add data to DataView SlickGrid - Stack Overflow

slickgrid
Rectangle 27 0

grid.onDblClick.subscribe(function(e, args) {
  alert("Selected asset is " + args.item);
  alert("Or " + grid.getData().getItem(args.row));
  alert("Or " + grid.getDataItem(args.row));
});

Getting row data from SlickGrid when using the pager plugin - Stack Ov...

slickgrid
Rectangle 27 0

The key pieces are to initialise the grid with a dataview as data source, wire up events so that the grid responds to changes in the dataview and finally feed the data to the dataview. It should look something like this:

dataView = new Slick.Data.DataView();
grid = new Slick.Grid("#myGrid", dataView, columns, options);

// 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();
});

// When user clicks button, fetch data via Ajax, and bind it to the dataview. 
$('#mybutton').click(function() {
  $.getJSON(my_url, function(data) {
    dataView.beginUpdate();
    dataView.setItems(data);
    dataView.endUpdate();
  });
});

Note that you don't need to create a new grid every time, just bind the data to the dataview.

If you want to implement sorting you'll also need to tell the dataview to sort when the grid receives a sort event:

grid.onSort.subscribe(function (e, args) {
  sortcol = args.sortCol.field;  // Maybe args.sortcol.field ???
  dataView.sort(comparer, args.sortAsc);
});

function comparer(a, b) {
  var x = a[sortcol], y = b[sortcol];
  return (x == y ? 0 : (x > y ? 1 : -1));
}

(This basic sorting is taken from the SlickGrid examples but you may want to implement something home-grown; without using the global variable for example)

Thanks! This actually works well, with one exception: on sorting the grid, I get a javascript error: Uncaught TypeError: Cannot read property 'field' of undefined. Any idea where args.sortCol.field should get defined?

Sounds like a typo in the args.sortCol.field property reference. The args parameter is passed in to the onSort callback. Just put a console.log(args); at the top of the callback and check the correct property name for the sortfield (see latest edit). Make sure you check capitilsation carefully. These parameters have been changed in some recent SlickGrid versions so it may not be exactly correct. But the basics are right and this will indeed sort on any column.

You were right, it was a typo. This answer couldn't have been any better - THANK YOU.

javascript - SlickGrid: Simple example of using DataView rather than r...

javascript jquery datagrid slickgrid
Rectangle 27 0

Use deleteItem method of dataview as follows,

dataView.deleteItem(id);\\where id is your unique id
    dataView.refresh();`

SlickGrid deleting a column does not delete its data - Stack Overflow

slickgrid
Rectangle 27 0

*Note: in my case I didn't want to use the bandwidth to return all those property names repeated for every record in the JSON response, so instead I return an array of the record values. I then set the field property in the column description (step 4 above) to be an integer offset into this array. So in the column descriptions, instead of field:'someFieldName", I use field:3, then in my remote model, onSuccess() function I'm setting data[from+i] = resp.record[i].data (where .data is an array in the JSON response of the field values in the record). So far this seems to be working well for me (but might be harder to debug if something goes wrong).

+1 for your detailed answer. Can I ask which function did you use on Step 7 to update total # of records? I tried onRowCountChanged.notify({previous: resp.hits, current: resp.hits}, null); where resp.hits is my total # of rows but it didn't work.

javascript - SlickGrid AJAX data - Stack Overflow

javascript jquery slickgrid
Rectangle 27 0

dataView.syncGridSelection(grid, true); function will preserve the row selection even after adding new row to the grid. Later U can check for the active cell and make it active Try it.

Ok, but add this to your answer. Comments are not eternal. They may be deleted.

Slickgrid text selection while refreshing data - Stack Overflow

slickgrid
Rectangle 27 0

If you want to use Dataview as you mentioned in a comment. You need couple of lines of code, and also need to add data to the dataview object. See the following:

// create DataView & Grid object
var dataView = new Slick.Data.DataView();
var grid = new Slick.Grid("#myGrid", dataView, columns, options);

// then bind data to the DataView object
dataView.beginUpdate();
dataView.setItems(data);
dataView.endUpdate();

You can see a more complete example of DataView here: Example4-model

EDIT Your question does not seem to have a unique id property inside your data, though SlickGrid specifically requires it and would throw an error in the console if you don't have that id. I usually prefer to fix this problem on the server side (PHP or whichever language you use). You could also add the id property via javascript something like this:

for (var i = 0; i < data.length; i++) {
  data.id = data[i].ProjectID; // clone your ProjectID into a new 'id' property
}

// then bind data to the DataView object
dataView.beginUpdate();
dataView.setItems(data);
dataView.endUpdate();

iam updating my question as you suggested but data was not binding

in your question I see 2 possible problems... 1- SlickGrid rely on the data array having a property of id (also all lower case) and has to be a unique id and inside your example you seem to have instead 'ProjectID' which is not named id, I suggest you change it at the source (server side)... 2- Why are you doing a for loop? No need, just pass the data directly as this dataView.setItems(data);

instead of changing ProjectId as id i wrote like this dataView.setItems(slickdata, "ProjectID"); i am trying in both the ways directly pass 'data' and convert data into array and data is added to the dataview. last time struggled with same problem in that the format of json data is different but now i cant understand the problem here any way i will change and try my server code to change id

Sorry but I don't understand your comment... but as a suggestion, you should install Firebug (Firefox extension) to troubleshoot. That should help you, if you don't already have it.

json - SlickGrid is displayed but data is not populated in the grid - ...

json slickgrid
Rectangle 27 0

You can also use this line in the .each loop to pull the data from the dataView instead of using getData() from the grid object, since that seems to be inconsistent depending on the fork:

var selectedData = [],
    selectedIndexes;

selectedIndexes = _grid.getSelectedRows();
jQuery.each(selectedIndexes, function (index, value) {
    selectedData.push(_dataView.getItemById(value));
});

Actually, I believe you'd want to use getItemByIdx, not getItemById. getItemByIdx will get the data by index, while getItemById gets the data by the unique id you gave it when creating your data. They would do the same thing if the id you specified for each item is equal to its index in the grid. However, in my case, they didn't match. Thanks for the code though.

javascript - get data of selected rows in slickgrid - Stack Overflow

javascript slickgrid
Rectangle 27 0

I've used SlickGrid quite a bit and I'm petty sure this is not possible. This would be a fundamental change to the way SlickGrid works and prohibitively complex I suspect.

SlickGrid works by virtualising the rows to be displayed and only rendering those rows which are visible in the current viewport, rendering each row as a DIV. It can do this because a DIV renders across the page as a row and it knows exactly how high a single row is. Using DIV elements to render columns left-to-right would require a very different approach using DIV floats, if possible at all.

So sorry, but I think the answer is no. Unless someone here has other experience and can correct me.

That was my suspicion to be honest but I was hoping I was wrong. I'll have to use something else.

Orientation of repeating data in slickgrid - Stack Overflow

slickgrid
Rectangle 27 0

grid.setData(<new data>)

What I tried last night was : grid.setData({}); grid.SetColumns({}); grid.setColumns(newColumns); grid.setData(newRows); That did not appear to work. I'll give it another shot tonight.

Resetting SlickGrid for new data - Stack Overflow

slickgrid
Rectangle 27 0

Not sure why yet, as i'm still feeling my way around SlickGrid, but i had to add the following two subscriptions. the first allowed the grid to display rows immediately when new data is loaded and the second solved a similar issue, but when sorting:

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

javascript - SlickGrid w/ DataView not immediately reflecting changes ...

javascript knockout.js slickgrid
Rectangle 27 0

You can use grid.setCellCssStyles() to set css styles for any cell. You could leverage this to color the entire row.

jquery - slickgrid: color rows depending on data - Stack Overflow

jquery slickgrid
Rectangle 27 0

It seems that when sending the data, I need to give the array of data the same name as the property name in SelfBillDetailList, so...

var details = JSON.stringify({IncomingDetails : defectrows});

model view controller - AJAX Posting Slickgrid data to MVC - Stack Ove...

ajax model-view-controller slickgrid
Rectangle 27 0

Make sure that when you inspect the top-level <div> (the one you initialize new Slick.Grid() with) it has a set width and height. Also make sure you're calling myGrid.resizeCanvas() only after the modal has been shown and all the CSS transitions have completed:

$('#TestModal').on('shown', myGrid.resizeCanvas)

I had this problem and I did not have a set height, after setting that value it worked, thank you.

jquery - slickgrid data not visible - Stack Overflow

jquery angularjs slickgrid directive
Rectangle 27 0

In very simple terms, just think of three layers:

Grid
  ----
DataView
  ----
  Data

At the bottom you have the raw data. This is just a plain old array. Each item in the array represents one row of data (to be displayed as one row in the grid).

The DataView reads the data array and makes it available to the grid by exposing a couple of standard methods. This way, when the grid wants to get data for display purposes, it just talks to the dataview via one of the standard methods.

The Grid is the display component. Its only responsibility is to render the HTML code necessary to display the desired output on the screen.

The grid never accesses the data directly. It only ever talks to the dataview. This allows the dataview to perform tricks when returning the data to the grid, such as delivering "phantom" rows used to represent group headings.

If you're interested, the example below is just about the simplest example you can come up with that uses a dataview with SlickGrid.

var data = [
  { title: "Primer",       rating: "A" },
  { title: "Matrix",       rating: "B" },
  { title: "Transformers", rating: "C" },
];
var columns = [
  { id: "title",  name: "Title",  field: "title" },
  { id: "rating", name: "Rating", field: "rating" }
];
var options = {
  enableColumnReorder: false  // ... whatever grid options you need
};

var dataView = new Slick.Data.DataView();
var grid = new Slick.Grid("#myGrid", dataView, columns, options);

// 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();
});

// Feed the data into the dataview
dataView.setItems(data);

I'm trying to decide whether to write a custom DataView implementation or a separate model that provides I/O to the default DataView. Has anyone built or seen a custom DataView? I've never seen one, and would like to do a read-through.

SlickGrid what is a Data View? - Stack Overflow

slickgrid
Rectangle 27 0

I implemented something like this myself and here is how I have done it. I do use the dataview which will be wiped out every times and also the grid object which will be overwritten. I am not using your code, but instead I will show you the template which I use, I actually call the same function for loading & reloading but just make sure to empty() out the grid before you reload, see 1st line of code:

<div id="myGrid" style="width:100%;height:680px;"></div>

Then I made myself a button with an onclick event that looks something like this onclick=populateMyGrid() as a refresh button (it's actually a reload icon to make it nicer) and that event will call my function to reload the data through the $.getJSON() jQuery function, see the following code:

// Display some Market Indexes on a bar on top of the Grid 
function populateMyGrid() {
    // empty out the Grid before refreshing the data
    $('#myGrid').empty();

    // columns & options definition....
    columns = [ 
        { id: "village", ............
    ];
    options = {
       enableCellNavigation: true,              
        editable: true,
        ............
    };

    ajaxURL = 'myPhpAjaxFileToPullData.php?action=getdata';

    $.getJSON(ajaxURL, function (ServerResponse) {
        dataView = new Slick.Data.DataView();
        grid = new Slick.Grid('#myGrid', dataView, columns, options);
        ............

        // initialize the model after all the events have been hooked up
        dataView.beginUpdate();
        dataView.setItems(ServerResponse.data);
        dataView.endUpdate();

        // Refresh the data render, if user only clicked on the refresh button instead of refreshing the whole page from browser 
        grid.updateRowCount();
        grid.render();
    }); // end of getJSON        
} // end of populateMyGrid

From this code, the important part of it is to empty out the grid at first and then the last 2 rows of code for refreshing your grid with new data and make sure to re-render at last. That is the way I have it working, works like a charm...oh and I also display a text showing last refresh date+time, so it's more obvious to the user of how old the data is!

Even though it's not your code sample, you should get the idea...hope it helps :)

Also if you want to repopulate the grid with some kind of filtering you send the filtering via the ajaxURL of the $.getJSON or you could also replace it with a $.post and send it via the data property as your started, if you do it that way then move all your code into the success function (or a function call). Here is a possible solution for replacing the $.getJSON call... but please note that I did not try it but it should work:

//init the grid
$.ajax({
    type: "POST",
    url: '<cfoutput>#APPLICATION.site_prefix#</cfoutput>/_global/ajax/ajax_handlers.cfm',
    data: {'action': 'get_qol_report_data', 'villageID': villageID, 'settingID': settingID, 'hoodID': hoodID, 'itemID': 0, 'categoryID': 0},
    dataType: 'json',
    success : getData
});

function getData() {
    dataView = new Slick.Data.DataView();
    grid = new Slick.Grid('#myGrid', dataView, columns, options);
    ............

    // initialize the model after all the events have been hooked up
    dataView.beginUpdate();
    dataView.setItems(ServerResponse.data);
    dataView.endUpdate();

    // Refresh the data render, if user only clicked on the refresh button instead of refreshing the whole page from browser 
    grid.updateRowCount();
    grid.render();
}

Thanks for this. Although it does display new data, it removes the whole grid (not just data) and creates a new one. This means that the sorting and column reordering aren't retained when the new data (grid) is displayed (as described in original post). I do appreciate the help regardless though!

javascript - Slickgrid - Replacing all grid data from AJAX source - St...

javascript jquery ajax slickgrid
Rectangle 27 0

If you access grid from other control like . click button

var selectRow = gridInstance.getSelectedRows();
alert(gridInstance.getDataItem(selectRow).columnName)

javascript - get data of selected rows in slickgrid - Stack Overflow

javascript slickgrid
Rectangle 27 0

I needed to call grid.invalidateRow() on all of the added rows.

javascript - Slickgrid not displaying JSON data from PHP unless I edit...

php javascript jquery json slickgrid