Size button in grid

[Gopre400Participant]

Hi I have set the rowsheight property of a grid to 100px to make it tall enough to display an image. However the size of button I have in the grid are also that tall. I would set the size of the buttons to 25px. Is there a way to set the size of the button? I think it has to do with cellrenderer but i’m not sure what to return.

$("#jqxgrid").jqxGrid(
                    {
                        width: '100%',
                        source: dataAdapter,
                        theme: 'darkblue',
                        pageable: true,
                        autoheight: true,
                        rowsheight: 100,
                        sortable: true,
                        altrows: true,
                        enabletooltips: true,
                        showstatusbar: true,
                        editable: true,
                        editmode: 'click',
                        selectionmode: 'singlecell',
                        columns: [
                            { text: 'Delete', datafield: 'Delete', columntype: 'button', width: 75, cellsrenderer: function (row, datafield, value, defaulthtml, columnproperties, rowdata) {
                                return "Delete";
                            }, buttonclick: function (row) {
                                id = $("#jqxgrid").jqxGrid('getrowdata', row);
                                var rec = $.param(id).split("&");
                                var estimateitemid = rec[0].split("=");
                                var commit = $("#jqxgrid").jqxGrid('deleterow', estimateitemid[1]);
                            }
                            },
                            { text: 'Fabrication', datafield: 'Fabrication', columntype: 'button', width: 75, cellsrenderer: function () {
                                return "Fabrication";
                            }, buttonclick: function (row) {
                                id = $("#jqxgrid").jqxGrid('getrowdata', row);
                                var rec = $.param(id).split("&");
                                var signid = rec[0].split("=");
                                $('#popFabrication').popup('open');
                            }
                            },
                            { text: 'Sheeting', datafield: 'Sheeting', columntype: 'button', width: 75, cellsrenderer: function () {
                                return "Sheeting";
                            }, buttonclick: function (row) {
                                id = $("#jqxgrid").jqxGrid('getrowdata', row);
                                var rec = $.param(id).split("&");
                                var signid = rec[0].split("=");
                                $('#popSheeting').popup('open');
                            }
                            },
                            { text: 'Size', datafield: 'SignSize', width: 100 },
                            { text: 'Background', datafield: 'SignBackColor', width: 100 },
                            { text: 'Text Color', datafield: 'SignTextColor', width: 100 },
                            { text: 'Shape', datafield: 'SignShape', width: 100 },
                            { text: 'Text', datafield: 'SignText', width: 100 },
                            { text: 'Material', datafield: 'PlateMaterial', width: 100 },
                            { text: 'Border', datafield: 'Border', width: 100 },
                            { text: 'Image', datafield: 'RequestedImage', width: 100, cellsrenderer: imagerenderer },
                            { text: 'Quantity', datafield: 'SignQuantity', align: 'right', cellsalign: 'right', width: 100 },
                        ]
                    });
                    }

[DimitarParticipant]

Hello Gopre400,

You cannot change the height of grid buttons via cellsrenderer. However, you can modify it through jQuery’s .css() method in the ready callback function, i.e.:

ready: function () {
    $("#jqxgrid .jqx-button").css({ "height": "30px", "margin-top": "35px" });
}

Best Regards,
Dimitar

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

[Gopre400Participant]

Thanks Dimitar,

The ready callback function of what? The grid? the document?

[Gopre400Participant]

I tried this, but it didn’t change anything…
$(“#jqxgrid”).ready(function () {
$(“#jqxgrid .jqx-button”).css({ “height”: “10px”});
});

this too…
$(document).ready(function () {
$(“#jqxgrid .jqx-button”).css({ “height”: “10px” });
});

[DimitarParticipant]

Hi Gopre400,

This is a jqxGrid callback function. Here is how to apply it:

$("#jqxgrid").jqxGrid({
    width: '100%',
    source: dataAdapter,
    theme: 'darkblue',
    pageable: true,
    autoheight: true,
    rowsheight: 100,
    sortable: true,
    altrows: true,
    enabletooltips: true,
    showstatusbar: true,
    editable: true,
    editmode: 'click',
    selectionmode: 'singlecell',
    ready: function () {
        $("#jqxgrid .jqx-button").css({ "height": "30px", "margin-top": "35px" });
    },
    columns: [
        { text: 'Delete', datafield: 'Delete', columntype: 'button', width: 75, cellsrenderer: function (row, datafield, value, defaulthtml, columnproperties, rowdata) {
            return "Delete";
        }, buttonclick: function (row) {
            id = $("#jqxgrid").jqxGrid('getrowdata', row);
            var rec = $.param(id).split("&");
            var estimateitemid = rec[0].split("=");
            var commit = $("#jqxgrid").jqxGrid('deleterow', estimateitemid[1]);
        }
        },
        { text: 'Fabrication', datafield: 'Fabrication', columntype: 'button', width: 75, cellsrenderer: function () {
            return "Fabrication";
        }, buttonclick: function (row) {
            id = $("#jqxgrid").jqxGrid('getrowdata', row);
            var rec = $.param(id).split("&");
            var signid = rec[0].split("=");
            $('#popFabrication').popup('open');
        }
        },
        { text: 'Sheeting', datafield: 'Sheeting', columntype: 'button', width: 75, cellsrenderer: function () {
            return "Sheeting";
        }, buttonclick: function (row) {
            id = $("#jqxgrid").jqxGrid('getrowdata', row);
            var rec = $.param(id).split("&");
            var signid = rec[0].split("=");
            $('#popSheeting').popup('open');
        }
        },
        { text: 'Size', datafield: 'SignSize', width: 100 },
        { text: 'Background', datafield: 'SignBackColor', width: 100 },
        { text: 'Text Color', datafield: 'SignTextColor', width: 100 },
        { text: 'Shape', datafield: 'SignShape', width: 100 },
        { text: 'Text', datafield: 'SignText', width: 100 },
        { text: 'Material', datafield: 'PlateMaterial', width: 100 },
        { text: 'Border', datafield: 'Border', width: 100 },
        { text: 'Image', datafield: 'RequestedImage', width: 100, cellsrenderer: imagerenderer },
        { text: 'Quantity', datafield: 'SignQuantity', align: 'right', cellsalign: 'right', width: 100 },
    ]
});

Best Regards,
Dimitar

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

[Gopre400Participant]

Thank you Dimitar, it works great!

[Author]

Posts