0

I found the following link that helps me grey out the readonly fields. jqGrid: How to grey out read only fields on add/edit form dialog?

But im looking for something that helps me grey out fields that are disabled.

Any thoughts on how i can get this to work?

Editing to add code to explain my situation better. All my examples below are using the gray out code found in the link above.

This first piece of code was working perfectly with the solution on the link above to gray out the readonly parts. But we had to change it to a selection list.

            //
            // This grays out the field name and the input field.  (But this had to be changed to a selection list for business reasons)
            //
            //{ name: 'tCode', index: 'tCode', width: 63, align: "left", editable: true, editoptions: { maxlength: "25", readonly: istCodeReadOnly } },

This next piece of code grays out the selection but not the field name next to it.

// This grays out the selection but not the field name { name: 'tCode', index: 'tCode', width: 63, align: "left", editable: true, editrules: { required: true }, edittype: "select", editoptions: { disabled: istCodeReadOnly, async: false, dataUrl: '@Url.Action("GettCodes", "Home")', buildSelect: function (result) { var response = $.parseJSON(result); var s = '<select>'; $.each(response, function () { s += "<option value='" + this.code + "' > " + this.description + "</option>"; }); return s + "</select>"; } } },

This was the first attempt when nothing was grayed out. Its like the readonly field was never recognized. Basically nothing happens.

            // This does not gray out the field name or the field itself
            {
                name: 'tCode', index: 'tCode', width: 63, align: "left", editable: true, editrules: { required: true }, edittype: "select", editoptions: {
                    readonly: istCodeReadOnly,
                    async: false, dataUrl: '@Url.Action("GettCodes", "Home")',
                    buildSelect: function (result) {
                        var response = $.parseJSON(result);
                        var s = '<select>';
                        $.each(response, function () {
                            s += "<option value='" + this.code + "' > " + this.description + "</option>";
                        });
                        return s + "</select>";
                    }
                }
            },
Community
  • 1
  • 1
user2025696
  • 159
  • 1
  • 11
  • Sorry, but I don't understand your question. What is your problem? By setting `disabled` property (`prop("disabled", true)`) on the input box/select or other input element one don't permit to the the changes. By adding `"ui-state-disabled"` class to the same fields or to the corresponding description on the left size the fields will be gray out. I marked using `editoptions: {readonly: "readonly"}` some columns as readonly and `readonly` attribute was set too. Later I set `disabled` property additionally and adding `"ui-state-disabled"` class. – Oleg Aug 20 '14 at 20:25
  • I'm not sure that I understand what you want, but probably you can solve your problem by replacing `$form.find(".FormElement[readonly]")` in my demo to `$form.find(".FormElement:disabled")`. – Oleg Aug 20 '14 at 20:28
  • @Oleg The label stays regular color but the selection list does gray out. I want to know how i can gray out the label as well. – user2025696 Aug 20 '14 at 20:41
  • Just add "ui-state-disabled" class to the label. If you have implementation problems you should append the code which you use to your question. It's unclear for me for example how you makes some fields disabled. In any way the code or the demo could makes all clear and I could help you. – Oleg Aug 20 '14 at 20:49
  • @Oleg added sample code to explain my question better. Hope that helps expalin it. The `istCodeReadOnly` is a boolean that tells me if the field should be readonly or not (true or false) based on logic in the backend. – user2025696 Aug 21 '14 at 12:41
  • Which `beforeShowForm` you use (with `$form.find(".FormElement[readonly]")` like in my demo or with `$form.find(".FormElement:disabled")` or some other)? You code contains `readonly: istCodeReadOnly` or `disabled: istCodeReadOnly`. Which value have `istCodeReadOnly`? Correct value of `disabled` property should be the string value `"disabled"`. Correct value of `readonly` property should be the string `"readonly"`. Boolean value could work in some web browsers, but it's still incorrect. You should choose **one way** (`readonly="readonly"` or `disabled="disabled"`) and make it working. – Oleg Aug 21 '14 at 12:54
  • By the way `async: false` as property of `editoptions` is unknown and will have no effect. – Oleg Aug 21 '14 at 12:56
  • @Oleg that variable is set on top like this `var isTCodeReadOnly = '@Model.IsTCodeEditable'.toLowerCase() == 'false';` so why does the first line work when its a plain text field and when i change it to a selection it does not? – user2025696 Aug 21 '14 at 13:00
  • Sorry, but I don't understand what you mean in your last comment. You wrote about "the first line" which "work". What you mean? You wrote "when i change it to a selection". I don't understand which selection you mean. Now about `isTCodeReadOnly`. `editoptions` allows to set any additional attributes on input/select field creating for editing. Correct value for `readonly` attribute is string "readonly". Correct value for `disabled` attribute is the string "disabled". So the usage of **boolean** `isTCodeReadOnly` like you do is incorrect (`readonly: false` and `readonly: false` are incorrect). – Oleg Aug 21 '14 at 13:27
  • @Oleg byt first line i meant my first example of `{ name: 'tCode', index: 'tCode', width: 63, align: "left", editable: true, editoptions: { maxlength: "25", readonly: istCodeReadOnly } },` this example is working perfectly. But because business wanted to see a dropdown list i had to change it. But since that change the graying out no longer works. This is why i don't understand how it was working when you're telling me `readonly: false` is incorrect. – user2025696 Aug 21 '14 at 14:04
  • [The demo](http://www.ok-soft-gmbh.com/jqGrid/GrayOutReadableFields.htm) from [the answer](http://stackoverflow.com/a/20498576/315935) do have dropdown having `editoptions: { readonly: "readonly" }` property and everything works correctly, isn't so? Why you not do the same? Do you have some issue with usage of `dataUrl` inside of `editoptions` instead of `value`? Do you tried to change temporary `dataUrl` and `buildSelect` to `value` and repeat the test? – Oleg Aug 21 '14 at 15:25

0 Answers0