Columns header text is not shown

Tags: #<Tag:0x00007f8b28cc5f50>
#3

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

Thanks

#4

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

#5

Thanks

#6

You’re welcome. Have a great weekend.

#7

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.

handsontable

#8

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.

#9

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);
}
#10

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

#11

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”:""}]

#13

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

default_aspx
default_aspx.JPG1067×835 114 KB

#14

handsontable
handsontable.gif3840×2160 209 KB

#15

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.

#16

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

#17

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.

#18

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.

#19

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.

#20

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.

#21

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

Load of Array of Object from Data File Not Working
#22

Hey @shahid.majeed

here’s a demo https://handsontable.com/docs/7.1.1/tutorial-load-and-save.html that uses afterChange (saving data instantly) but the same logic can be used for a button.

#23