Jsgrid: Texts are unreadable in responsive layout

[am2222]

Hi,
When I resize layout texts of rows become unreadable,Is there any solutions for this?

thanks

[tabalinas]

For now you can easily fix this with the following css:

.jsgrid-cell {
    overflow: hidden;
}

[TylerYoungs]

You could dynamically auto-size the column. This is the solution i was able to come up with. the "subscribe" is for knockout.js functionality and can be ignored. self.tables()[0] is an object like {Rows: [], Headers: []}.

    self.tables.subscribe(function () {
        if (self.tables && self.tables().length > 0) {
            $("#jsGrid").jsGrid({
                width: "100%",
                height: "400px",

                inserting: false,
                editing: false,
                sorting: true,
                paging: true,
                noDataContent: "No Record Found",
                loadMessage: "Please, wait...",

                data: self.tables()[0].Rows,

                fields: self.getColumns(self.tables()[0])
            });


            $("#sort").click(function () {
                var field = $("#sortingField").val();
                $("#jsGrid").jsGrid("sort", field);
            });
        }
    }, this);

    self.getColumns = function (table) {
        columnsAsObjects = [];
        for (var i = 0; i < table.Headers.length; i++){
            columnsAsObjects.push({ name: table.Headers[i].toString(), type: "text", width: self.getColumnWidth(table.Rows, table.Headers[i]) + "px" });
        }

        return columnsAsObjects;
    };

    self.getColumnWidth = function (rows, columnName) {
        var maxLength = columnName.toString().length;
        for (var i = 0; i < rows.length; i++) {
            maxLength = rows[i][columnName].toString().length > maxLength ? rows[i][columnName].toString().length : maxLength;
        }

        return maxLength*10;
    };

[deesismyemail]

@TylerYoungs
New to using jsgrid (i like this grid free and easy). Trying to get this to work in a simple web page and i am not using knockout but I think this logic will work for me except I am not sure what self is (is it part of DOM or do you create and assign this the table)? Also, where do you have this snippet running ? loaddata?

[AcidRaZor]

Here is my solution to auto-fit the column width (assuming you use jQuery):

onDataLoaded: function (args) {
                    $("#jsGrid th").each(function (index) {                        
                        var maxLength = $(this).text().length;

                        $("#jsGrid tr").each(function (idx) {
                            maxLength = $(this).find("td").eq(index).text().length > maxLength ? $(this).find("td").eq(index).text().length : maxLength;                           
                        });
                        maxLength = maxLength * 10;                        
                        $(this).css("width", maxLength.toString() + "px");
                        $("#jsGrid tr").each(function (i) {
                            $(this).find("td").eq(index).css("width", maxLength.toString() + "px");
                        });
                    });                    
                },