SlickGrid - Display data from a SQL database

If using Visual Studio (ASP.NET):

Create a SQL connection:

  1. From Toolbox, drag SQL Datastore into Design View
  2. In Design View, select Configure Data Source
  3. In the Choose Data Source dialog box, select a connection string and select Next
  4. Follow the prompts to select some data from a SQL database table



If using PHP, let's grab some data from a SQL database and display the data in the table.

$data = '';
$i = 0;

$con = new mysqli('sql_domain', 'sql_username', 'sql_password', 'database');
$sql = "select * from tablename";
$sql_query = mysqli_query($con, $sql);

while ($row = mysqli_fetch_array($sql_query)) {
  $data .= '
    data['.$i.'] = {
    title: "'.$row['title'].'",
    newcolumn: "'.$row['newcolumn'].'"

  var grid;
  var columns = [
    {id: "title", name: "Title", field: "title"},
    {id: "newcolumn", name: "New Column", field: "newcolumn"}

  var options = {
    enableCellNavigation: true,
    enableColumnReorder: false

  $(function () {
   var data = [];
     <?php echo $data; ?>

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


Add a Comment

We will never share your name or email with anyone. Enter your email if you would like to be notified when we respond to your comment.

Please enter 4a613 in the box below so that we can be sure you are a human.


Web design by yours truely - me, myself, and I   |   |