[RESOLVED] JQuery handontable working example

hi,

From last couple of days i am looking a plugin like excel and then i find Jquery Handsontable plugin which is basically full fill my requirement.

1. user can copy and past from excel to Handsontable table.

I dont have any work experience with JQuery. 

Can anyone give me simple example how i can use JQuery Handsontable in my aspx page. 

1. On page load i want to get data from database and show in JQuery Handsontable 

2. User modify the data

3. When user save the data then i have to read the data form JQuery Handsontable and save into database.

Thanks in advance.

anyone knows how to handsontable.

Hi,

From my understand you are having difficulty with using Jquery handontable to store your data, if so, please try the following solution:

1. Add a Save.ashx file, it will receive data and then to store it.
2. Refer Save.ashx file at your jquery code, and then the data will be send to Save.ashx by json format.
   

Please try to refer to the following sample code:

In the javascript code in aspx file:

$parent.find('button[name=save]').click(function () {
                  var data = handsontable.getData();
                  $.ajax({
                      url: "Save.ashx",
                      data: { data: "'" + data+"'" }, //returns all cells' data
                      dataType: 'json',
                      type: 'POST',
                      success: function (res) {
                          if (res.result === 'ok') {
                              $console.text('Data saved');
                          }
                          else {
                              $console.text('Save error');
                          }
                      },
                      error: function () {
                          $console.text('Save error.');
                      }
                  });
              });
In the Save.ashx file:

<%@ WebHandler Language="C#" Class="Save" %>

using System;
using System.Web;

public class Save : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        string data = context.Request.Form["data"];
        //now, you can serialize the data, and then store it.
        
    }

    public bool IsReusable {
        get {
            return false;
        }
    }

}

Fore more information about handsontable please refer to:

#Excel-like Data Grid Editor For jQeury-handsontable

http://www.jqueryscript.net/table/Excel-like-Data-Grid-Editor-For-jQuery-handsontable.html

Hope it can help you, if you have any question please let me know.

Best Regards,

Terry Guo

Hello Terry Guo - MSFT,

I have the same issue as Shahid Majeed. Can you be more specific with your example?

1. ) Let's assume that I have a datatable; How do I bind the data table to the handsontable table editor?

2. ) From what I've understood I need to use the Save.ashx page to get my data from the handsontable. From your code I see you get the data as a string, so I must make somehow that string into an array or a data table; is that correct ?

A working example wouldbe great :). If you can provide us a link to a working example that would be awesome, because I didn't find any working example.

Thanks !