Twitter Bootstrap Question posted in

How to specify value for read only field in advanced search dialog – Twitter bootstrap

I’m looking for a way to allow user to specify vlaue in advanced search dialog in latest free jqgrid.

I tried code below and selected advanced search dialog. Tax field is read-only and cannot changed.
How to fix this ?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demonstrats loadFilterDefaults:true option</title>
    <meta name="author" content="Oleg Kiriljuk">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/css/bootstrap-datepicker.min.css">
    <link rel="stylesheet" href="https://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css">
    <style>
        .ui-datepicker {
            font-size: 76.39%;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/js/bootstrap-datepicker.min.js"></script>
    <script>
        $.jgrid = $.jgrid || {};
        $.jgrid.no_legacy_api = true;
    </script>
    <script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
    <!--<script src="jqGrid/js/jquery.jqGrid.src.js"></script>-->
    <script>
    //<![CDATA[
    /*global $ */
    /*jslint browser: true */
    $(function () {
        "use strict";
        var mydata = [
                { id: "10",  invdate: "2015-10-01", name: "test",   note: "note",   ship_via: "TN", total: "" },
                { id: "20",  invdate: "2015-09-01", name: "test2",  note: "note2",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                { id: "30",  invdate: "2015-09-01", name: "test3",  note: "note3",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                { id: "40",  invdate: "2015-10-04", name: "test4 test4 test4",  note: "note4",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                { id: "50",  invdate: "2015-10-31", name: "test5",  note: "note5",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                { id: "60",  invdate: "2015-09-06", name: "test6",  note: "note6",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                { id: "70",  invdate: "2015-10-04", name: "test7",  note: "note7",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                { id: "80",  invdate: "2015-10-03", name: "test8",  note: "note8",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                { id: "90",  invdate: "2015-09-01", name: "test9 test9 test9 test9 test9",  note: "note9",  amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
                { id: "100", invdate: "2015-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true,  ship_via: "TN", total: "530.00" },
                { id: "110", invdate: "2015-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
                { id: "120", invdate: "2015-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
            ],
            $grid = $("#list"),
            initDatepicker = function (elem, options) {
                var self = this, $elem = $(elem),
                    $gBox = $(this).closest(".ui-jqgrid"),
                    filterOnSelect = function () {
                        setTimeout(function () {
                            self.triggerToolbar();
                        }, 50);
                    },
                    triggerInputChangeOnSelect = function () {
                        $elem.change();
                    };

                if ($gBox.hasClass("ui-jqgrid-bootstrap")) {
                    // uses bootstrap-datepicker.js
                    $elem.datepicker({
                        format: "dd-M-yyyy",
                        calendarWeeks: true,
                        clearBtn: true,
                        todayBtn: true,
                        todayHighlight: true,
                    });
                    // fix position of the datepicker
                    $elem.bind("show", function () {
                        var $datepicker = $("body>.datepicker-dropdown");
                        if ($gBox.length > 0 && $datepicker.length > 0) {
                            $datepicker.css("top",
                                this.getBoundingClientRect().top +
                                window.pageYOffset +
                                $(this).outerHeight());
                        }
                    });
                } else {
                    // use jQuery UI datepicker
                    $elem.datepicker({
                        dateFormat: "dd-M-yy",
                        autoSize: true,
                        changeYear: true,
                        changeMonth: true,
                        showButtonPanel: true,
                        showWeek: true,
                        onSelect: (options.mode === "filter" ? filterOnSelect : triggerInputChangeOnSelect)
                    });
                }
            };

        $grid.jqGrid({
            data: mydata,
            colNames: ["", "Client", "Date", "Amount", "Tax", "Total", "Closed", "Shipped via", "Notes"],
            colModel: [
                { name: "act", template: "actions" },
                { name: "name", align: "center", width: 92, editrules: { required: true },
                    searchoptions: { sopt: ["cn", "bw", "ew", "eq", "bn", "nc", "en"] } },
                { name: "invdate", width: 130, align: "center", sorttype: "date",
                    formatter: "date", formatoptions: { newformat: "d-M-Y" },
                    editoptions: { "readonly":"readonly","disabled":"disabled", dataInit: initDatepicker }, autoResizing: { minColWidth: 122 },
                    searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDatepicker } },
                { name: "amount", width: 79, template: "number", autoResizing: { minColWidth: 61 } },
                { name: "tax", editoptions: { readonly:"readonly", disabled:"disabled"}, width: 70, template: "number", autoResizing: { minColWidth: 55 } },
                { name: "total", width: 76, template: "number" },
                { name: "closed", width: 80, template: "booleanCheckbox", firstsortorder: "desc" },
                { name: "ship_via", width: 85, align: "center", formatter: "select", autoResizing: { minColWidth: 85 },
                    edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN" },
                    stype: "select", searchoptions: { sopt: ["eq", "ne"], noFilterText: "Any" } },
                { name: "note", width: 43, edittype: "textarea",
                    editoptions: { cols: 18 }, sortable: false }
            ],
            cmTemplate: { autoResizable: true, editable: true },
            autoResizing: { compact: true },
            //autoresizeOnLoad: true,
            iconSet: "fontAwesome",
            guiStyle: "bootstrap",
            rowNum: 10,
            rowList: [5, 10, 20, "10000:All"],
            viewrecords: true,
            autoencode: true,
            sortable: true,
            toppager: true,
            pager: true,
            rownumbers: true,
            sortname: "invdate",
            sortorder: "desc",
            pagerRightWidth: 150,
            search: true,
            postData: {
                filters: {
                    groupOp: "AND",
                    rules: [
                        { op: "le", field: "tax", data: "20" },
                        { op: "gt", field: "amount", data: "250" }
                    ]
                }
            },
            inlineEditing: {
                keys: true
            },
            formEditing: {
                width: 310,
                closeOnEscape: true,
                closeAfterEdit: true,
                savekey: [true, 13]
            },
            formViewing: {
                labelswidth: ""
            },
            searching: {
                //showQuery: true,
                multipleSearch: true,
                multipleGroup: true,
                closeOnEscape: true,
                searchOnEnter: true,
                searchOperators: true,
                width: 550
            },
            singleSelectClickMode: "selectonly", // optional setting
            ondblClickRow: function (rowid) {
                $(this).jqGrid("editGridRow", rowid);
            },
            caption: "Demonstrats loadFilterDefaults:true option"
        }).jqGrid("navGrid", { view: true })
        .jqGrid("inlineNav")
        .jqGrid("filterToolbar")
        .jqGrid("gridResize");
    });
    //]]>
    </script>
</head>
<body>
    <div id="outerDiv" style="margin:5px;">
        <table id="list"></table>
    </div>
</body>
</html>
Tags:

3

Answers


  1. 0

    It appears that the tax field is declared as read only/disabled.

    In the $grid.jqGrid element, remove the ‘editoptions: { readonly:”readonly”, disabled:”disabled”},’ text from this line:

    { name: "tax", editoptions: { readonly:"readonly", disabled:"disabled"}, width: 70, template: "number", autoResizing: { minColWidth: 55 } },
    Login or Signup to reply.
  2. 0

    Typically you would just set the cell to not editable like this:

    editable:false

    So your tax column would be configured like this:

     { name: "tax", editable:false, width: 70, template: "number", autoResizing: { minColWidth: 55 } },

    Please see fiddle: https://jsfiddle.net/kx07h5uh/

    Another option would be to hook into the click of the search button, when its clicked set the search input so it is no longer disabled, then when the search is closed set it back, 

    $(".fa-search").on("click", function(){
    $("fieldtochange").prop("disabled", false);
});

    this method would be a lot more complicated than just setting the column so it is no longer editable.

    You will probably notice that in using inline edit the tax field no longer turns into an input field and when using the edit modal the tax field and label is just not there, to solve that I would create your own modal and hook it to a custom button, if you need help with that I can post that on jsFiddle.

    UPDATE #1:

    With the new information regarding none of the above working in your situation I have come up with the following solution:

    searching: {
            //showQuery: true,
            multipleSearch: true,
            multipleGroup: true,
            closeOnEscape: true,
            searchOnEnter: true,
            searchOperators: true,
            width: 550,
            onClose:function(){
                 //do work
                 return true; // return true to close the search grid
            },
            onInitializeSearch:function(ele){
                var inputs = ele.find("input[id^=jqg]");
              $.each(inputs, function(index, element){
                if($(element).attr("disabled", true)){
                    $(element).attr("disabled", false);
                  $(element).attr("readonly", false)
                }
              });
             //$("input[name='tax']").attr("disabled", false);
             //$("input[name='tax']").attr("readonly", false);
            }
        }

    Please see new DEMO

    UPDATE #2

    Here is how you would do it with out hard-coding the col values:

    var inputs = ele.find("input[id^=jqg]");
$(inputs).attr({
    disabled: false,
    readonly: false
});

    If you dont even want to use the ^=jqg you can just change that pice to "input" it will still work, it just will look for all inputs under that element.

    UPDATE #3

    Using just onInitializeSearch only made the field work on form load, replacing it with afterRedraw will make it set the field every time a new filter is added or removed.

    searching: {
    //showQuery: true,
    multipleSearch: true,
    multipleGroup: true,
    closeOnEscape: true,
    searchOnEnter: true,
    searchOperators: true,
    width: 550,
    onClose:function(){
         //do work
         return true; // return true to close the search grid
    },
    afterRedraw:function(ele){
        var inputs = $(this).find("input[id^=jqg]");
      $(inputs).attr({
        disabled: false,
        readonly: false
      });
    }
},

    SEE DEMO

    Also see search option documentation for any other options you could use.

    Login or Signup to reply.
  3. 0

    Thank you for reporting the bug!

    One can use workaround in the way, described by Noctane, but the best way would be to use the latest sources from GitHub. I posted the corresponding fix now, which should solves eliminate the bug.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search