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

*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

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

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

new Slick.Grid('#trade-reg-trade-info-table"

You opened with a single quote and tried closing with a double quote.

{
  'company':    'JP Morgan & Chase & Co',
  'price':      45.73,
  'change':     0.07,
  'pctChange':  0.15,
  'lastChange': '9/1 12:00am'
}

I've got it "working" or kind of. The options array elements must not be surrounded by quotes and the columns have to be something like this: {id:"cpny", name:"Company", field:"cpny", width: 18,}. I still can't display my data array though, the columns headers appear completely over width.

Your data variable should be an Array of Objects, not an Array of Arrays. I've edited my answer to show you how a single item in your data array should look.

And you're correct about the columns array, it should also be an Array of Objects, not an Array of Strings. The strings you currently have in the columns array would be the field property inside the column object.

@ idbhold Thanks for that. I've managed to get the whole thing working now.

javascript - Loading data into slickgrid - Stack Overflow

javascript jquery slickgrid
Rectangle 27 0

var data = [];
var options = {};
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 });
    dataView.beginUpdate();
    dataView.setItems(data);
    dataView.endUpdate();

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

Add data to DataView SlickGrid - Stack Overflow

slickgrid
Rectangle 27 0

You can try setting your items using the setItems(data, objectIdProperty) method defined on DataView in file slick.model.js.

function setItems(data, objectIdProperty) {
     if (objectIdProperty !== undefined) idProperty = objectIdProperty;
     items = data;
     refreshIdxById();
     refresh();
}

slickgrid - Use another property in data element as id - Stack Overflo...

slickgrid
Rectangle 27 0

The cause was that we called the SlickGrid function EditActiveCell before the data of the new page was loaded. When this was changed in order that EditActiveCell was called after the loading of the data, the grid behaved like expected.

Page transition with Slickgrid causes custom editor to disappear - Sta...

slickgrid
Rectangle 27 0

you can use goToCell after setting data as follows,

grid.gotoCell(row, cell, forceEdit); grid.gotoCell(0, 0, true); // it will take you the 1st row and 1st cell and will make it editable.

Slickgrid text selection while refreshing data - Stack Overflow

slickgrid
Rectangle 27 0

Below code did the job for me to reset the slickgrid from javascript

dataView.beginUpdate();
dataView.getItems().length = 0;
dataView.endUpdate();

Resetting SlickGrid for new data - Stack Overflow

slickgrid
Rectangle 27 0

SlickGrid examples - hightlighting and flashing

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>SlickGrid examples</title>
        <!-- Load css  -->
        <link rel="stylesheet" href="css/slick.grid.css" type="text/css"/>
        <link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
        <link rel="stylesheet" href="css/examples.css" type="text/css"/>
        <!-- custom css formating  -->
        <style>
            .load-medium {
                color: orange;
                font-weight: bold;
            }

            .load-hi {
                color: red;
                font-weight: bold;
            }

            .changed {
                background: pink;
            }

            .current-server {
                border: 1px solid black;
                background: orange;
            }
        </style>
    </head>
    <body>
        <div style="overflow: hidden;width:850px;margin:0 auto" >
            <div style="width:500px;margin:0 auto;float:left">
                <!-- this is the container where the grid will be injected  -->
                <div id="myGrid" style="width:100%;height:500px;"></div>
            </div>

            <div class="options-panel" style="position:relative;float:left;left:0px;">
                <h2>About</h2>
                This example simulates a real-time display of CPU utilization in a web farm.
                Data is updated in real-time, and cells with changed data are highlighted.
                You can also click "Find current server" to scroll the row displaying data for the current
                server into view and flash it.

                <h2>Controls</h2>
                <button onclick="simulateRealTimeUpdates()">Start simulation</button>
                <button onclick="findCurrentServer()">Find current server</button>
            </div>
        </div>

        <!-- Load js libraries  -->
        <script src="lib/firebugx.js"></script>
        <script src="lib/jquery-1.7.min.js"></script>
        <script src="lib/jquery-ui-1.8.16.custom.min.js"></script>
        <script src="lib/jquery.event.drag-2.2.js"></script>
        <script src="lib/slick.core.js"></script>
        <script src="lib/plugins/slick.cellselectionmodel.js"></script>
        <script src="lib/plugins/slick.rowmovemanager.js"></script>
        <script src="lib/slick.grid.js"></script>

        <script>
            var grid;
            var data = [];
            var columns = [
                {id: "server", name: "Server", field: "server", width: 180}
            ];
            var currentServer;

            function cpuUtilizationFormatter(row, cell, value, columnDef, dataContext) {
                if (value > 90) {
                    return "<span class='load-hi'>" + value + "%</span>";
                }
                else if (value > 70) {
                    return "<span class='load-medium'>" + value + "%</span>";
                }
                else {
                    return value + "%";
                }
            }

            for (var i = 0; i < 4; i++) {
                columns.push({
                    id: "cpu" + i,
                    name: "CPU" + i,
                    field: i,
                    width: 80,
                    formatter: cpuUtilizationFormatter
                });
            }

            var options = {
                editable: false,
                enableAddRow: false,
                enableCellNavigation: true,
                cellHighlightCssClass: "changed",
                cellFlashingCssClass: "current-server"
            };


            $(function () {
                for (var i = 0; i < 500; i++) {
                    var d = (data[i] = {});
                    d.server = "Server " + i;
                    for (var j = 0; j < columns.length; j++) {
                        d[j] = Math.round(Math.random() * 100);
                    }
                }

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

                currentServer = Math.round(Math.random() * (data.length - 1));
            });


            function simulateRealTimeUpdates() {
                var changes = {};
                var numberOfUpdates = Math.round(Math.random() * (data.length / 10));
                for (var i = 0; i < numberOfUpdates; i++) {
                    var server = Math.round(Math.random() * (data.length - 1));
                    var cpu = Math.round(Math.random() * (columns.length - 1));
                    var delta = Math.round(Math.random() * 50) - 25;
                    var col = grid.getColumnIndex("cpu" + cpu);
                    var val = data[server][col] + delta;
                    val = Math.max(0, val);
                    val = Math.min(100, val);

                    data[server][col] = val;

                    if (!changes[server]) {
                        changes[server] = {};
                    }

                    changes[server]["cpu" + cpu] = "changed";

                    grid.invalidateRow(server);
                }

                grid.setCellCssStyles("highlight", changes);
                grid.render();

                setTimeout(simulateRealTimeUpdates, 500);
            }

            function findCurrentServer() {
                grid.scrollRowIntoView(currentServer);
                grid.flashCell(currentServer, grid.getColumnIndex("server"), 100);
            }
        </script>
    </body>
</html>
slickgrid
Rectangle 27 0

grid.setSelectionModel(new Slick.RowSelectionModel());

It is slick.rowselectionmodel.js and is typically under the Plugins folder.

c# - How to load JSON data into SlickGrid with Razor MVC-4 - Stack Ove...

c# json razor asp.net-mvc-4 slickgrid
Rectangle 27 0

Use Data view and "OnChange()" call following lines,

grid.invalidateAllRows();
dataView.setItems(newData, "Id");
grid.render();

If your not using dataview try this,

var data = []; \\or new array
        grid.setData(data);
        grid.render();

Resetting SlickGrid for new data - Stack Overflow

slickgrid
Rectangle 27 0

As a work-around (until this feature is implemented in SlickGrid, as per Tin's post), you can add an extra value to new rows, flagging them as newly-added. (Don't add a column for this value.) Then change your filters to return true if the flag is set before checking the filter requirements. When the user changes the filter, update the data to remove the flag from any row that has it. Not ideal but I think it's the best you can do right now.

slickgrid - DataView Filtering ONLY when Changing the Filter - Stack O...

slickgrid
Rectangle 27 0

I'm looking at this too. From what I can see it is not a way to manage two different people on two different computers both attempting to edit the same database record at the same time. Instead it is a way for a single person who has opened a page which multiple grids on it, which are different views on the same table, from attempting to edit the data in one grid and then edit the same data in aother grid before the first one has been saved.

jquery - SlickGrid: How to implement editorLock for concurrent data ed...

jquery jquery-plugins 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

I'm not aware of any extensions/libraries, but it's really easy to do that using the onCellChange event or, if you need more control, the editCommandHandler. See https://github.com/mleibman/SlickGrid/wiki/Writing-custom-cell-editors (Intercepting cell edits) for more info.

javascript - Creating a changeset for SlickGrid to save data - Stack O...

javascript jquery jquery-plugins slickgrid