jQuery UI Widgets Forums Grid Size button in grid

This topic contains 5 replies, has 2 voices, and was last updated by  Gopre400 10 years, 3 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Size button in grid #49702

    Gopre400
    Participant

    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 },
                            ]
                        });
                        }
    
    Size button in grid #49726

    Dimitar
    Participant

    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/

    Size button in grid #49787

    Gopre400
    Participant

    Thanks Dimitar,

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

    Size button in grid #49788

    Gopre400
    Participant

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

    Size button in grid #49852

    Dimitar
    Participant

    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/

    Size button in grid #50124

    Gopre400
    Participant

    Thank you Dimitar, it works great!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.