Jqgrid, How to Make a Column Editable in the Add Dialog But Not During (Inline) Edits

jQGrid, how to make a column editable in the add dialog but not during (inline) edits

Because you use the example from my old answers (this and this) I feel that I should answer also on your question.

In the old example all fields, which can be modified during Add or Edit dialogs, has property editable:true. The fields which should be shown only in the Add dialog will be made hidden inside of beforeShowForm event handle. In the same way we can temporary switch some fields to editable:false before call of the editRow method and reset back to the editable:true immediately after the call:

onSelectRow: function(id) {
    if (id && id !== lastSel) {
        grid.jqGrid('restoreRow',lastSel);
        var cm = grid.jqGrid('getColProp','Name');
        cm.editable = false;
        grid.jqGrid('editRow', id, true, null, null, 'clientArray');
        cm.editable = true;
        lastSel = id;
    }
}

You can see this live here.

UPDATE: Free jqGrid allows to define editable as callback function. See the wiki article. It allows to make the column editable in some rows and holding non-editable for other rows.

jqGrid need a field editable on Add dialog but not Edit dialog

I ended up buying the paid for version of jqGrid - the time I save by being able to use a clean .Net object model compared to javascript will pay for itself in no time.

The answer to this question direct from Trirand support is.

You can use the client-side events AfterEditDialogShown and AfterAddDialogShown to disable/enable edit fields for both dialogs. The field for editing/adding will have the same ID is the DataField (case-sensitive). Example:

Model:

JQGrid1.ClientSideEvents.AfterEditDialogShown="disableFields";
JQGrid1.ClientSideEvents.AfterEditDialogShown="enableFields";

View:

<script type="text/javascript">

    function disableFields() {
        //jQuery("#fieldname").attr("disabled", "disabled");
        $("#Source").attr("disabled", "true");
        $("#ProgramName").attr("disabled", "true");
        $("#Division").attr("disabled", "true");
        $("#Medium").attr("disabled", "true");
        $("#content").attr("disabled", "true");
    }

    function enableFields() {
        $("#Source").attr("disabled", "false");
        $("#ProgramName").attr("disabled", "false");
        $("#Division").attr("disabled", "false");
        $("#Medium").attr("disabled", "false");
        $("#content").attr("disabled", "false");
    }

</script>

jqGrid: How can I add columns to the edit modal that are read only?

Form editing mode don't allows to insert non-editable fields in the editing dialog. It's one from the reason why usage of inline editing could provide more advantages. I like to use double-click to start inline editing. In the case the editable columns will be "converted" to controls like text <input>, dropdowns, checkboxes etc. If the user press Enter or "Save" button (depend on the form of inline editing which one use) the edited row will be saved.

If you still prefer usage of form editing then you can add required information about non-editable columns in at least two different ways. The first way would be adding properties

editable: true, editoptions: {disabled: "disabled"}

to non-editable columns. In the way the controls will be display, but disabled. To make look of the form better you can use additionally the approach which I described in the answer. You should just modify beforeShowForm callback from the answer to the following

beforeShowForm: function ($form) {
    $form.find(".FormElement[disabled]")
        .addClass("ui-state-disabled")
        .closest(".DataTD")
        .prev(".CaptionTD")
        .prop("disabled", true)
        .addClass("ui-state-disabled")
}

Another alternative to customize Add/Edit form: adding any required information manually. See the answer and this one for corresponding code examples and demos.

Lib.Web.Mvc.JQuery.JqGrid - Enable editing of column ONLY while being added, but not while being edited

Here is how I am doing it for now. This feels "wrong" and ugly to me, but it does work.

    function fnSetAccessGroupCodeReadOnly() {
        $("#AccessGroupCode").attr("readonly", "readonly");
    }

    function fnUnSetAccessGroupCodeReadOnly() {
        $("#AccessGroupCode").removeAttr("readonly");
    }

and in the helper, in the action navigator for edit:

    new JqGridNavigatorEditActionOptions()
    {
        // Edit Options

        Url = Url.Action("EditPartnerAccessGroup"),
        MethodType = JqGridMethodTypes.Post,
        AfterShowForm = "fnSetAccessGroupCodeReadOnly",
        CloseAfterEdit = true
    },

Prevent editing of a specific editable row's cell in inline-edit mode

The value of the property editable is common for all rows, but the value will be used only by editRow method which initialize inline editing. So you can change the value of editable property dynamically with respect of setColProp (like in the answer). It's important that you set the correct value of the editable property before every call of editRow. In the answer you can see corresponding code example and the demo.

UPDATED: If you use formatter: "actions" then you can "subclass" the $.fn.fmatter.rowactions called in onclick handler. Below you can see an example of the corresponding code

var orgRowActions = $.fn.fmatter.rowactions;
$.fn.fmatter.rowactions = function (rid, gid, act, pos) {
    var $grid = $("#" + $.jgrid.jqID(gid)),
        rowData = $grid.jqGrid("getLocalRow", rid),
        isNonEditable = false,
        result;
    // we can test any condition and change
    // editable property of any column
    if (act === "edit" && parseFloat(String(rowData.tax)) <= 20) {
        $grid.jqGrid("setColProp", "note", {editable: false});
        isNonEditable = true;
    }
    result = orgRowActions.call(this, rid, gid, act, pos);
    if (isNonEditable) {
        // reset the setting to original state
        $grid.jqGrid("setColProp", "note", {editable: true});
    }
    return result;
}

The corresponding demo you will find here. The "note" column is editable in the demo only if the value from the "tax" column is <= 20:

If you would have datatype: "json" or datatype: "xml" without usage of loadonce: true you should replace call of getLocalRow to the call of getRowData or getCell in the above code.

How to disable editing for some cells in row editing of JQGrid?

If you use inline editing mode and want to decide dynamically which cells of the row will be editable for example based on the contain of the cells you can do this in the way which I described here. You can do this with another method also:

$(this).jqGrid('setColProp', 'YouColumnName', {editable:false});

So you should just set editable to false or true before calling of editRow method. In the way you can implement any logic which you want.

UPDATE: Free jqGrid allows to define editable as callback function. See the wiki article. It allows to make the column editable in some rows and holding non-editable for other rows.

jqGrid - disabling inline dropdown on edit but not on add

The usage of inlineNav is a special case of inline editing, because editRow will be called. Starting with jqGrid 4.5.3 inline editing supports beforeEditRow and beforeAddRow callbacks which was introduced mostly to provide additional customization in case of usage inlineNav. The method beforeEditRow is more interesting, because it will be called in any way of calling editRow.

Before providing an example of usage beforeEditRow I would remark that you have to fix the bug in sAddParam, which you use as the option of addRow. You use unneeded and danger parameter rowID: 'new'. As the result the id of every new row will be the same: "new". In the way you will have id duplicates. The same problem exists in early versions of jqGrid. The current version of jqGrid uses $.jgrid.randId() to generate new unique id for new added row if rowID is null or undefined. The default value of rowID is null. So I strictly recommend you to remove rowID: 'new' option.

The next important thing is the meaning of addParams option of inlineNav. The method addRow calls internally the same editRow method. The addRowParams property of addParams allows to specify the option of editRow called by addRow. So I strictly recommend you to use addParams in the following form

var sEditParam = {
        ... // any options or callbacks
    },
    sAddParam = {
        position: 'last',
        addRowParams: sEditParam
    };

In the way you will be sure that all callbacks and options of inline editing will be applied even in case of usage addRow.

Now back to you main question. I suggest that you use beforeEditRow to change editable property of vendor column. To test whether the current row are just add or not I suggest to test existence of jqgrid-new-row class. The corresponding code could be like the following

var sEditParam = {
    beforeEditRow: function (option, rowid) {
        var tr = $(this).jqGrid("getGridRowById", rowid);

        $(this).jqGrid("setColProp", "vendor", {
            editable: !$(tr).hasClass("jqgrid-new-row")
        });
    }
};
surplusGrid.jqGrid("inlineNav", "#surplusFoot", {
    add: true,
    edit: true,
    editParams: sEditParam,
    addParams: {position: "last", addRowParams: sEditParam}
});

jqGrid: Conditional editting of columns when editing row

I answered on the same question multiple times. The main understanding problem is that editing: true property of the column will be read by editRow at the initialization time. So you can set the value of editing property with respect of setColProp method for example directly before calling of editRow. In the way you can implement any dynamic behavior which you need.

See the answer, this one or this one. The last one provide solution for the usage of inline editing per formatter: "actions".

jqGrid: Disable form fields when editing

You can implement your requirements in different ways. For example, inside of beforeShowForm event you can hide or show the

jQuery("#list").jqGrid({
    colModel: [
        { name: 'Name', width: 200, editable: true },
   //...

}).jqGrid('navGrid','#pager', { edit: true, add: true, del: false},
          { // edit option
              beforeShowForm: function(form) { $('#tr_Name', form).hide(); }
          },
          { // add option
              beforeShowForm: function(form) { $('#tr_Name', form).show(); }
          });

where the id "tr_Name" is constructed from "tr_" prefix and "Name" - the name property of the column from the colModel.

UPDATED: In the answer and in another one are shown one more way how the properties can be changed dynamically immediately before the editing will be initialized.

UPDATED 2: Free jqGrid allows to define editable as callback function or as "disabled", "hidden" or "readonly". See the wiki article. It allows to implement the same requirements more easy.

JQGrid readonly and edit option

If I understand your problem currently you can set readonly attribute on $("#product_image") field from the editing form inside of beforeShowForm callback. See the answer or this one for the corresponding code example.

UPDATED: From the code which you posted one can see that you use cell editing (cellEdit: true). The usage of cell editing together with other editing mode (form editing or inline editing) of jqGrid is not supported.

Probably the usage of cellEdit: true was by accident? In the case you should just remove the option to fix the problem.

If you do need to use cell editing you can add 'not-editable-cell' class to the 'product_image' column. You can use classes: "not-editable-cell" in the colModel or you can make it dynamically if required (see the demo from the answer). The class will be used only by cell editing and will be ignored by form editing.

If you really require to use both cell editing and form editing you will have to call restoreCell or saveCell (see the documentation) before starting of form editing (in beforeInitData for example). All parameters of the method you can save inside of the last called beforeEditCell callback.

The last remark to your code: it seems me very strange that you use index:'ProductId' for two columns: ProductId and product_image. Is it typing error probably?

---

Related Topics