Home/ Questions/Q 6895243
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T06:53:02+00:00

Code below from other stackoverflow answer is used in jqGrid to implement checkbox using

  • 0

Code below from other stackoverflow answer is used in jqGrid to implement checkbox using jquery UI in jqGrid top toolbar. This is used to toggle autoedit variable true – false states.

Checkbox caption is too wide for toolbar. How to change checkbox to toolbar button with two states which reflect autoedit true/false values (checked and unchecked states). Instead of check mark similar button should appear in pressed or checked state and in regular/unchecked state if clicked again.
Pure checkmark without caption cannot used since there should be some visual glue instead of checkbox rectangle if tolbar contains more than one such checkbox to distinguish them visually.

var autoedit=false;       
$("#grid_toppager_left table.navtable tbody tr").append(
    '<td><div><label><input class="ui-pg-div" tabindex="-1" type="checkbox" ' +
        (autoedit ? 'checked ' : '') +
        'id="AutoEdit" />Checbox caption which should appear as top toolbar button tooltip' +
        '</label></div></td>');
$("#AutoEdit").change(function () {
    if ($(this).is(':checked')) {
        autoedit = true;
        $("#AutoEdit").attr("checked", "checked");
    } else {
        autoedit = false;
        $("#AutoEdit").removeAttr("checked");
    }
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I find your question very interesting. So I made some demos which shows how to implement “toggle” buttons in the navigator bar of jqGrid. In all demos I used top toolbar.

    I decide to use jQuery UI Button widget. It allows different kind of buttons one from there, the “toggle” button we need. The buttons can be just a text, just an icon or be combination of the text and up to two icons (one icon before the text and another after the text). As the result one can create toolbars like the following:

    enter image description here and enter image description here in the “checked” state,

    enter image description here and enter image description here in the “checked” state,

    enter image description here and enter image description here in the “checked” state,

    or just icons only like enter image description here and enter image description here for the “checked” state.

    Because I used the top toolbar I For the implementation I applied the path of some jqGrid CSS which I described here:

    .ui-jqgrid .ui-jqgrid-toppager .ui-pg-div {
    padding: 1px 0;
    float: left;
    position: relative;
}
.ui-jqgrid .ui-jqgrid-toppager .ui-pg-button {
    height: 18px !important;
    cursor: pointer;
}
.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div span.ui-icon {
    float: left;
    margin: 0 2px;
}

    The code which add the custom button which you posted I would modified to

    var autoedit=false;
...
$("#grid_toppager_left table.navtable tbody tr").append(
    '<td class="ui-pg-button ui-corner-all">' +
        '<div class="ui-pg-div my-nav-checkbox">' +
        '<input tabindex="-1" type="checkbox" id="AutoEdit" />' +
        '<label title="Checkx caption which should appear as button tooltip"' +
        ' for="AutoEdit">Autoedit</label></div></td>'
);
$("#AutoEdit").button().click(function () {
    if ($(this).is(':checked')) {
        autoedit = true;
        alert("Autoedit mode is ON");
    } else {
        autoedit = false;
        alert("Autoedit mode is OFF");
    }
});

    in case of pure text button with the text “Autoedit”. The corresponding additional CSS settings can be

    /* some settings to place Button in jqGrid */
.ui-jqgrid .ui-pg-table .my-nav-checkbox {
    margin: 0px;
    padding: 0px;
    float: left;
    height: 18px
}
/* fixing CSS of jQuery UI Buttons */
.ui-jqgrid .ui-pg-table .my-nav-checkbox > .ui-button > span.ui-button-text {
    margin: 0px;
    padding: 1px 2px 1px 2px;
}

    In case of usage the icon with the text the code will be

    $("#AutoEdit").button({
    icons: {primary: "ui-icon-mail-closed"}
}).click(function () {
    var iconClass;
    if ($(this).is(':checked')) {
        autoedit = true;
        iconClass = "ui-icon-mail-open";
    } else {
        autoedit = false;
        iconClass = "ui-icon-mail-closed";
    }
    $(this).button("option", {icons: {primary: iconClass}});
});

    To make the button with icon only without the text one need just add text: false option in the list of .button({...}) parameters

    $("#AutoEdit").button({
    text: false,
    icons: {primary: "ui-icon-mail-closed"}
}).click(function () {
...

    In both cases the following CSS can be used

    /* some settings to place Button in jqGrid */
.ui-jqgrid .ui-pg-table .my-nav-checkbox {
    margin: 0px;
    padding: 0px;
    float: left;
    height: 18px
}
.ui-jqgrid .ui-pg-table .my-nav-checkbox > input {
    padding: 1px;
}
.ui-jqgrid .ui-pg-table .my-nav-checkbox > label {
    margin: 0px;
}
/* fixing CSS of jQuery UI Buttons */
.ui-jqgrid .ui-pg-table .my-nav-checkbox > .ui-button > span.ui-button-text {
    margin: 0px;
    padding: 1px 2px 1px 16px;
}
.ui-button-icon-only {
    width: 16px;
}
.ui-jqgrid .ui-pg-table .my-nav-checkbox > .ui-button > span.ui-button-icon-primary {
    margin: -8px 0px 0px -8px;
}

    For different demos you can find here:

    To have the border over the button only on hovering you can change the CSS for the .my-nav-checkbox > label to

    .ui-jqgrid .ui-pg-table .my-nav-checkbox > label {
    margin: 0px;
    border-width: 0px;
}
.ui-jqgrid .ui-pg-table .my-nav-checkbox:hover > label {
    margin: 0px;
    border-width: 1px;
}

    As the result you will have (see the following demo):

    • standard state button enter image description here
    • hover state of the button enter image description here
    • standard state “checked” button enter image description here
    • hover state of the “checked” button enter image description here
    • 0