Grid column size

[vancourseMember]

Hi,

I am evaluating JQXGrid. I downloaded your samples (MVC4/Paging/…) and got the end to end working.

My question is: Some of the data in certain columns seems to be getting cut, even though there is plenty of empty space in other columns. Can you please let me know why this is the case?

@model IEnumerable
@{
    ViewBag.Title = "Index";
}
@section scripts {
    
       
        
}
$(document).ready(function () {
    // prepare the data
    var source =
    {
        datatype: "json",
        datafields: [
            { name: 'ActionLinks', type: 'ActionLinks' },
            { name: 'BirthDate', type: 'date' },
            { name: 'Gender', type: 'string' },
            { name: 'JobTitle', type: 'string' },
            { name: 'SickLeaveHours', type: 'string' },
            { name: 'VacationHours', type: 'string' }
        ],
        url: 'Employee/GetEmployees',
        sort: function () {
            $("#jqxgrid").jqxGrid('updatebounddata', 'sort');
        },
        root: 'Rows',
        beforeprocessing: function (data) {
            source.totalrecords = data.TotalRows;
        }
    };
    var linkrenderer = function (row, column, value) {
        var html = "";
        for (var i = 0; i < value.length; i++) {
            var actionLink = value[i];
            html += &quot;<a href='" + actionLink.ActionUrl + "'>" + actionLink.Text + "";
            if (i &lt; value.length - 1) {
                html += &quot;,&quot;;
            }
        }
        return html;
    };
    var dataAdapter = new $.jqx.dataAdapter(source, {
        loadError: function (xhr, status, error) {
            alert(error);
        }
    });
    // initialize jqxGrid
    $(&quot;#jqxgrid&quot;).jqxGrid({
        source: dataAdapter,
        filterable: false,
        sortable: true,
        columnsresize: true,
        altrows: true,
        autoheight: true,
        pageable: true,
        virtualmode: true,
        rendergridrows: function (obj) {
            return obj.data;
        },
        columns: [
             { text: 'Action', datafield: 'ActionLinks', cellsrenderer: linkrenderer,width:'20%' },
            { text: &quot;Birth Date&quot;, datafield: &quot;BirthDate&quot;, cellsformat: 'd' },
            { text: &quot;Job Title&quot;, datafield: &quot;JobTitle&quot; },
            { text: &quot;Sick Leave Hours&quot;, datafield: &quot;SickLeaveHours&quot; },
            { text: &quot;Vacation Hours&quot;, datafield: &quot;VacationHours&quot; }
        ]
    });
});
Index
@*<div></div>*@
   <div style="font-size: 13px;font-family: Verdana;float: left">
        <div>
        </div>
    </div>
</a>

[Peter StoevKeymaster]

Hi,

To set a “width” of a column, use its “width” property. If you wish, you can also use the “autoresizecolumns” method of jqxGrid to make the columns fit to their content – http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/autoresizecolumns.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts