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

Asked 3/4, 2016 at 17:30 Answered 5/4, 2016 at 11:28

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>

Magdalenmagdalena answered 3/4, 2016 at 17:30 Comment(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.

Thirtieth answered 5/4, 2016 at 11:28 Comment(1)

Thank you. Todays code from github causes exception in filterToolbar. This is posted in #36437313 – Magdalenmagdalena 5/4, 2016 at 20:53

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.

Figural answered 4/4, 2016 at 17:34 Comment(6)

As you wrote editable:false removes field form edit form so it cannot used. In application users can mark any field readonly and disabled. So using hard coded field names as in your other solutions is not possible. How to search using readonly fields without hard-coding field names in code ? – Magdalenmagdalena 4/4, 2016 at 20:1

Code still uses hard-coded column name Tax . How to fix this so that hard coded column names are not used ? – Magdalenmagdalena 4/4, 2016 at 20:58

I believe you search the modal for inputs that are disabled/readonly and then set them to false if found. I'll try to fix demo – Figural 4/4, 2016 at 20:59

@Magdalenmagdalena Try this: jsfiddle.net/y3llowjack3t/kx07h5uh/5 I updated the code under the updated section – Figural 4/4, 2016 at 21:10

Clicking + button in this fiddle still adds Read-only Tax search field. onInitializeSearch is called only if form is created. It is not usable for this. – Magdalenmagdalena 4/4, 2016 at 21:25

@Noctane: to be able to fix the problem in the way one should use afterChange additionally to afterRedraw and to use better removeAttr: jsfiddle.net/OlegKi/kx07h5uh/8 – Thirtieth 5/4, 2016 at 10:48

-1

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 } },

Orgel answered 3/4, 2016 at 18:46 Comment(2)

Removing those makes Tax field editable. Tax field must be read-only. Questions asks how to search by read-only field. – Magdalenmagdalena 3/4, 2016 at 19:28

Ah, I misunderstood. Sorry about that! – Orgel 3/4, 2016 at 19:42

Recommended topics

Hot tags