Columns header text is not shown

[shahid.majeed]

Hi,
I am using handsontable in my application and i have following configuration of handsontable.

• Handsontable 0.10.0-beta3
  Problem:

1. Table redener but columns header shows default text A,B,C instead what i set in configuration.

2. When i type in the text field i cant enter white space

   Data Look like this
   [
   {“Event”:“Först på på plats”,“EventTime”:“00:00”,“EventFreeText”:"",“Enable”:false},
   {“Event”:“Gäst anländer”,“EventTime”:“00:00”,“EventFreeText”:"",“Enable”:false},
   {“Event”:“Förmiddags kaffe”,“EventTime”:“00:00”,“EventFreeText”:"",“Enable”:false},
   {“Event”:“Mötet börjar”,“EventTime”:“00:00”,“EventFreeText”:"",“Enable”:false},
   {“Event”:“Lunch”,“EventTime”:“00:00”,“EventFreeText”:"",“Enable”:false},
   {“Event”:“Efter middags kaffe”,“EventTime”:“00:00”,“EventFreeText”:"",“Enable”:false},
   {“Event”:“Slut på mötet”,“EventTime”:“00:00”,“EventFreeText”:"",“Enable”:false},
   {“Event”:“Middag”,“EventTime”:“00:00”,“EventFreeText”:"",“Enable”:false}}]

    function example(dt) {
        var data = dt;
        var $container = $("#example");
        var $parent = $container.parent();
   
        $container.handsontable({
            data: data,
            width: 410,
            colHeaders: ['', 'Tid', 'Fritext', 'Show'],
            columns: [
                { data: 'Event', type: 'text' },
                { data: 'EventTime', type: 'text' },
                { data: 'EventFreeText', type: 'text' },
                { data: 'Enable', type: 'checkbox' }
                ],
            colWidths: [120, 40, 200, 30],
            rowHeaders: false,
            contextMenu: true,
            autoWrapRow: true
        });
    }
   

   

[aleksandra_budnik]

Hey, nice to meet you @shahid.majeed

You might be experiencing issues while using a beta version that is 5 years old on newer versions of browsers.
I highly recommend updating the code.
If you do not want to purchase a license or need to test the newer version before the purchase you can update to v 6.2.3.

[shahid.majeed]

Hi thanks can you send me download link for v6.2.3.

Thanks

[aleksandra_budnik]

Sure

https://cdn.jsdelivr.net/npm/handsontable-pro@6.2.3/dist/handsontable.full.min.css
https://cdn.jsdelivr.net/npm/handsontable-pro@6.2.3/dist/handsontable.full.min.js

[shahid.majeed]

Thanks

[aleksandra_budnik]

You’re welcome. Have a great weekend.

[shahid.majeed]

Hi,

With new version of handsontable table render as it should be. I mean headertext is shown and also white space problem is solved.

However i encounter another problem. I get table data whenever page is postback and rebind the table again.

Table configuration

function example(dt) {
var data = dt;
var $container = $("#example");
var $parent = $container.parent();

		$container.handsontable({
			data: data,
			width: 400,
			colHeaders: ["Visa", "", "Tid", "Fritext"],
			columns: [
				{ data: "Enable", type: "checkbox" },
				{ data: "Event", type: "text" },
				{ data: "EventTime", type: "text" },
				{ data: "EventFreeText", type: "text" }
			],
			colWidths: [30,120, 40, 200],
			rowHeaders: false,
			contextMenu: true,
			autoWrapRow: true
		});

		var handsontable = $container.data('handsontable');
		$(".button").click(function () {
			console.log(JSON.stringify(handsontable.getData()));
			$('#<%=tableData.ClientID%>').val(JSON.stringify(handsontable.getData()));
		});
	}
</script>

Handsontable bind with this JSON

[{\"Enable\":false,\"Event\":\"Först på på plats\",\"EventTime\":\"00:00\",\"EventFreeText\":\"\"},{\"Enable\":false,\"Event\":\"Gäst anländer\",\"EventTime\":\"00:00\",\"EventFreeText\":\"\"},{\"Enable\":false,\"Event\":\"Förmiddags kaffe\",\"EventTime\":\"00:00\",\"EventFreeText\":\"\"},{\"Enable\":false,\"Event\":\"Mötet börjar\",\"EventTime\":\"00:00\",\"EventFreeText\":\"\"},{\"Enable\":false,\"Event\":\"Lunch\",\"EventTime\":\"00:00\",\"EventFreeText\":\"\"},{\"Enable\":false,\"Event\":\"Efter middags kaffe\",\"EventTime\":\"00:00\",\"EventFreeText\":\"\"},{\"Enable\":false,\"Event\":\"Slut på mötet\",\"EventTime\":\"00:00\",\"EventFreeText\":\"\"},{\"Enable\":false,\"Event\":\"Middag\",\"EventTime\":\"00:00\",\"EventFreeText\":\"\"}]

getData return this JSON
[[false,“Först på på plats”,“00:00”,""],[false,“Gäst anländer”,“00:00”,""],[false,“Förmiddags kaffe”,“00:00”,""],[false,“Mötet börjar”,“00:00”,""],[false,“Lunch”,“00:00”,""],[false,“Efter middags kaffe”,“00:00”,""],[false,“Slut på mötet”,“00:00”,""],[false,“Middag”,“00:00”,""]]

As we see getData return JSON without field name.

So my table render empty on page reload.

[aleksandra_budnik]

Hey @shahid.majeed

do you use columns or dataSchema?
Data has the correct structure so I guess that the settings are the blocers. Or, you are not rerendering the table (call render()) to show new data.

[shahid.majeed]

Hi,
I use columns. Here is how i populate the data to bind with table.

public DataTable getScheduleStartUp()
{
DataTable dt = new DataTable();
DataRow dr = null;
dt.Columns.Add(new DataColumn("Enable", typeof(Boolean)));
dt.Columns.Add(new DataColumn("Event", typeof(string)));
dt.Columns.Add(new DataColumn("EventTime", typeof(string)));
dt.Columns.Add(new DataColumn("EventFreeText", typeof(string)));

dr = dt.NewRow();
dr["Enable"] = false;
dr["Event"] = "Först på på plats";
dr["EventTime"] = "00:00";
dr["EventFreeText"] = string.Empty;
dt.Rows.Add(dr);

dr = dt.NewRow();
dr["Enable"] = false;
dr["Event"] = "Gäst anländer";
dr["EventTime"] = "00:00";
dr["EventFreeText"] = string.Empty;
dt.Rows.Add(dr);

dr = dt.NewRow();
dr["Enable"] = false;
dr["Event"] = "Förmiddags kaffe";
dr["EventTime"] = "00:00";
dr["EventFreeText"] = string.Empty;
dt.Rows.Add(dr);

dr = dt.NewRow();
dr["Enable"] = false;
dr["Event"] = "Mötet börjar";
dr["EventTime"] = "00:00";
dr["EventFreeText"] = string.Empty;
dt.Rows.Add(dr);

dr = dt.NewRow();
dr["Enable"] = false;
dr["Event"] = "Lunch";
dr["EventTime"] = "00:00";
dr["EventFreeText"] = string.Empty;
dt.Rows.Add(dr);

dr = dt.NewRow();
dr["Enable"] = false;
dr["Event"] = "Efter middags kaffe";
dr["EventTime"] = "00:00";
dr["EventFreeText"] = string.Empty;
dt.Rows.Add(dr);

dr = dt.NewRow();
dr["Enable"] = false;
dr["Event"] = "Slut på mötet";
dr["EventTime"] = "00:00";
dr["EventFreeText"] = string.Empty;
dt.Rows.Add(dr);

dr = dt.NewRow();
dr["Enable"] = false;
dr["Event"] = "Middag";
dr["EventTime"] = "00:00";
dr["EventFreeText"] = string.Empty;
dt.Rows.Add(dr);

dt.AcceptChanges();
return dt;
}
// Convert DataTable into Json format
public string GetJson(DataTable dt)
{
    System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
    Dictionary<string, object> row = null;

    foreach (DataRow dr in dt.Rows)
    {
        row = new Dictionary<string, object>();
        foreach (DataColumn col in dt.Columns)
        {
            row.Add(col.ColumnName.Trim(), dr[col]);
        }
        rows.Add(row);
    }
    return serializer.Serialize(rows);
}

[aleksandra_budnik]

Please tell me what is the result of dt (result of getScheduleStartUp) and by serializer.Serialize(rows)?

[shahid.majeed]

Hi,

getScheduleStartUp create dataTable with default rows as you in the code and then i call helper function to serialize the datatable to json format.

This is how string look like after serilaize:

Result of getScheduleTemplate()
[{“Enable”:false,“Event”:“Först på på plats”,“EventTime”:“00:00”,“EventFreeText”:""},{“Enable”:false,“Event”:“Gäst anländer”,“EventTime”:“00:00”,“EventFreeText”:""},{“Enable”:false,“Event”:“Förmiddags kaffe”,“EventTime”:“00:00”,“EventFreeText”:""},{“Enable”:false,“Event”:“Mötet börjar”,“EventTime”:“00:00”,“EventFreeText”:""},{“Enable”:false,“Event”:“Lunch”,“EventTime”:“00:00”,“EventFreeText”:""},{“Enable”:false,“Event”:“Efter middags kaffe”,“EventTime”:“00:00”,“EventFreeText”:""},{“Enable”:false,“Event”:“Slut på mötet”,“EventTime”:“00:00”,“EventFreeText”:""},{“Enable”:false,“Event”:“Middag”,“EventTime”:“00:00”,“EventFreeText”:""}]

[shahid.majeed]

harder to post code here so i create image file. how my page look like and code behind.
this is code:

using System;
using System.Collections.Generic;
using System.Data;
using System.Web.UI;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        setSchedule();
    }
    else
    {
        reloadData();
    }
}
protected void setSchedule()
{
    try
    {

        tableData.Value = getScheduleTemplate();
        Page.ClientScript.RegisterStartupScript(this.GetType(), "example", "example(" + tableData.Value.ToString() + ");", true);

    }
    catch (Exception exc)
    {

    }
}
public void reloadData()
{
    string data = tableData.Value;
    Page.ClientScript.RegisterStartupScript(this.GetType(), "example", "example(" + data + ");", true);
}
// Convert DataTable into Json format
public string GetJson(DataTable dt)
{
    System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
    Dictionary<string, object> row = null;

    foreach (DataRow dr in dt.Rows)
    {
        row = new Dictionary<string, object>();
        foreach (DataColumn col in dt.Columns)
        {
            row.Add(col.ColumnName.Trim(), dr[col]);
        }
        rows.Add(row);
    }
    return serializer.Serialize(rows);
}
public DataTable getScheduleStartUp()
{
    DataTable dt = new DataTable();
    DataRow dr = null;
    dt.Columns.Add(new DataColumn("Enable", typeof(Boolean)));
    dt.Columns.Add(new DataColumn("Event", typeof(string)));
    dt.Columns.Add(new DataColumn("EventTime", typeof(string)));
    dt.Columns.Add(new DataColumn("EventFreeText", typeof(string)));

    dr = dt.NewRow();
    dr["Enable"] = false;
    dr["Event"] = "Först på på plats";
    dr["EventTime"] = "00:00";
    dr["EventFreeText"] = string.Empty;
    dt.Rows.Add(dr);

    dr = dt.NewRow();
    dr["Enable"] = false;
    dr["Event"] = "Gäst anländer";
    dr["EventTime"] = "00:00";
    dr["EventFreeText"] = string.Empty;
    dt.Rows.Add(dr);

    dr = dt.NewRow();
    dr["Enable"] = false;
    dr["Event"] = "Förmiddags kaffe";
    dr["EventTime"] = "00:00";
    dr["EventFreeText"] = string.Empty;
    dt.Rows.Add(dr);

    dr = dt.NewRow();
    dr["Enable"] = false;
    dr["Event"] = "Mötet börjar";
    dr["EventTime"] = "00:00";
    dr["EventFreeText"] = string.Empty;
    dt.Rows.Add(dr);

    dt.AcceptChanges();
    return dt;
}
public string getScheduleTemplate()
{
    return GetJson(getScheduleStartUp());
}
}

[shahid.majeed]

[aleksandra_budnik]

Hey @shahid.majeed

maybe it’ll be better to post the code via JSFiddle/CodePen or StackBlitz?
If you could pass the settings here https://jsfiddle.net/handsoncode/upg6hykw/ and fork it to me I’ll be easier to share progress.

[shahid.majeed]

updated with default data set in table. However having problem when button click event happend save the table data and load again.

https://jsfiddle.net/shahidmajeed/rmxpzLh7/5

[aleksandra_budnik]

Thank you for sharing the demo

I also got the error

Uncaught Error: loadData only accepts array of objects or array of arrays (string given)

As the (JSON.stringify(handsontable.getData()) returns a string
handsontable.getData() is an array of arrays and proper data format.

[shahid.majeed]

Hi,

what i observe yesterday if table datasource first set object array and then later when i do getData method on the table its return only array of values.

So it seems like we need the same datasource if we want to bind the table again and again with different data.

In my example first time on page load i bind the table with object array. So i change this to bind with array data. Then getData method also return array data so table work fine.

I dont know is it bug or maybe this is the way to do to keep the source type same.

[aleksandra_budnik]

what i observe yesterday if table datasource first set object array and then later when i do getData method on the table its return only array of values.

That is correct.

However, there’s a way (not perfect though) to get the data as an object

var arr = [];
for (var i = 0; i < instance.countRows(); i++) {
	arr.push(hot.getSourceDataAtRow(hot.toPhysicalRow(i)))
}

your arr will be the whole dataset return as an array of objects.

[shahid.majeed]

thanks for the help. I make my table working to keep the datasource type same. However this might help to others those new to handsontable like me.

[shahid.majeed]

Hi aleksandra,

could you share with me the example code with data binding. I am binding my table as code below.
User hidden field to store the table data whenever a button click. To able to access table data at server.

    <script type="text/javascript">
    function example(dt) {
        var data = dt;
        var $container = $("#example");
        $container.handsontable({
            data: data,
            width: 400,
            colHeaders: ["Visa", "", "Tid", "Fritext"],
            columns: [
                { type: "checkbox" },
                { type: "text" },
                { type: "text" },
                { type: "text" }
            ],
            colWidths: [30, 120, 40, 200],
            rowHeaders: false,
            contextMenu: true,
            autoWrapRow: true
        });

        var hotInstance = $container.data('handsontable');
        $(".button").click(function () {
            console.log("hotinstance " + hotInstance);
            $('#<%=tableData.ClientID%>').val(JSON.stringify(hotInstance.getData()));
        });
    }
</script>

Thanks