Rectangle 27 0

recreateform : true,
beforeInitData: function () {
  $("#editmod" + this.id).remove();
}

jquery - Jqgrid Add and Edit form property is not working - Stack Over...

jquery jqgrid
Rectangle 27 0

$("#ButtonId").click(function () {
            jQuery("#gridId").jqGrid('editGridRow', "new", { height: 330, width: 350, addCaption: "Add form", recreateForm: true, closeAfterAdd: true });
});

In the above, you can give the height & width as you need. The same thing for edit form too.

It's working. But the form closed suddenly.I can't get the success or error message my main thing is to get the success and error message while add or edit form,

@user3085540: you can use success function in ajax to show success alerts, probably the form will close after add.

@user3085540: This option will helpful for u. afterSubmit fires after the data is posted to the server. Typical this event is used to recieve status form server if the data is posted with success. Parameters to this event are the returned data from the request and array of the posted values of type name:value. For ex: have a look here trirand.com/blog/?page_id=393/help/

jquery - Jqgrid add and edit dialog width - Stack Overflow

jquery jqgrid jqgrid-asp.net
Rectangle 27 0

The trick is the usage of rowpos and colpos properties of formoptions. In the answer you can find the demo which demonstrate the technique.

If you have really many columns it could be not enough place on the screen even after the usage of multiple columns. In the case you can restrict the height of the Add/Edit form by usage of dataheight option. The disadvantage of the approach is the setting of explicit value of height CSS style on the data part of the editing form. The better way is setting of max-height which value you can calculate based on the screen resolution. For example you can make the changes inside of beforeShowForm callback

beforeShowForm: function ($form) {
    $form.css({"max-height": 0.70*screen.height + "px"});
}

The demo demonstrate the approach. In the same way you can set max-width too.

To show the results I used both dataheight and beforeShowForm. In the final solution you should remove the dataheight part of the settings.

@user762641: You are welcome! If the problem is solved you should "accept" the answer.

jquery - how to split no of fields in add/edit form into leftside and ...

jquery jqgrid
Rectangle 27 0

Inside of beforeInitData you can make any modification of colModel. You can either use setColProp method or just get the reference to internal colModel parameter with getGridParam and do any modifications which you need directly. For example you can delete dataUrl from editoptions of some column or just change edittype to from select to default value text. You can do different actions for Edit and Add forms. I recommend you use recreateForm: true to be sure that you always work with new form.

This works perfectly. Thanks as always oleg!

@Joseph: You are welcome!

jquery - JQGrid Form Edit disable dropdown on Edit but not Add - Stack...

jquery jqgrid
Rectangle 27 0

// Set up the jquery grid
    $("#jqTable").jqGrid({
        // Ajax related configurations
        url: '@Url.Action("_CustomBinding")',
        datatype: "json",
        mtype: "POST",
        postData: {
            programID: function () { return $("#ProgramID option:selected").val(); },
            buildID: function () { return $('#Builds option:selected').val(); }
        },
        // Specify the column names
        colNames: ["Assembly ID", "Assembly Type", "Assembly Name", "Cost", "Order", "Budget Report", "Partner Request", "Display"],

        // Configure the columns
        colModel: [
        {name: "AssemblyID", key: true, index: "AssemblyID", width: 40, align: "left", editable: false },
        { name: "AssemblyTypeName", index: "AssemblyTypeName", width: 100, align: "left", editable: true, edittype: 'select',
            editoptions: {
                dataUrl: '@Url.Action("_AssemblyTypes")',
                buildSelect: function (data) {
                    jqGridAssemblyTypes = jQuery.parseJSON(data);
                    var s = '<select>';
                    if (jqGridAssemblyTypes && jqGridAssemblyTypes.length) {
                        for (var i = 0, l = jqGridAssemblyTypes.length; i < l; i++) {
                            var ri = jqGridAssemblyTypes[i];
                            s += '<option value="' + ri + '">' + ri + '</option>';
                        }
                    }
                    return s + "</select>";
                },
                dataInit: function (elem) {
                    var AssemblyTypes = $(elem).val();
                    $("#jqTable").setColProp('AssemblyName', { editOptions: { dataUrl: '@Url.Action("Assemblies", "Build")' + '/' + AssemblyTypes} });
                },
                dataEvents: [
                {
                    type: 'change',
                    fn: function (e) {
                        var AssemblyType = $(e.target).val();

                        $.ajax({
                            url: '_JQGridAssemblies',
                            data: { AssemblyTypes: AssemblyType },
                            dataType: 'json',
                            async: false,
                            success: function (assemblies) {
                                jqGridAssemblies = assemblies;
                            }
                        });

                        resetAssemblyValues();

                        // build 'AssemblyName' options based on the selected 'AssemblyType' value
                        var sc = jqGridAssemblies;
                        var newOptions = '';
                        for (var assemblyName in sc) {
                            if (sc.hasOwnProperty(assemblyName)) {
                                newOptions += '<option role="option" value="' +
                                              jqGridAssemblies[assemblyName] + '">' +
                                              jqGridAssemblies[assemblyName] + '</option>';
                            }
                        }

                        // populate the new
                        if ($(e.target).is('.FormElement')) {
                            // form editing
                            var form = $(e.target).closest('form.FormGrid');
                            $("select#AssemblyName.FormElement", form[0]).html(newOptions);
                        }

                    }
                }
            ]

            }
        },
        { name: "AssemblyName", index: "AssemblyName", width: 100, align: "left", editable: true, edittype: 'select',
            editoptions: {
                dataUrl: '@Url.Action("_Assemblies")',
                buildSelect: function (data) {
                    var response = jQuery.parseJSON(data);
                    var s = '<select>';
                    if (response && response.length) {
                        for (var i = 0, l = response.length; i < l; i++) {
                            var ri = response[i];
                            s += '<option value="' + ri + '">' + ri + '</option>';
                        }
                    }
                    return s + "</select>";
                }
            }
        },
        { name: "AssemblyCost", index: "AssemblyCost", width: 50, align: "left", formatter: "currency", editable: true },
        { name: "AssemblyOrder", index: "AssemblyOrder", width: 50, align: "left", editable: true },
        { name: "AddToBudgetReport", index: "AddToBudgetReport", width: 100, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox' },
        { name: "AddToPartnerRequest", index: "AddToPartnerRequest", width: 100, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox' },
        { name: "Show", index: "Show", width: 50, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox'}],

        // Grid total width and height and formatting
        //width: 650,
        //height: 220,
        altrows: true,

        // Paging
        //toppager: true,
        pager: $("#jqTablePager"),
        rowNum: 10,
        rowList: [10, 20, 50, 100],
        viewrecords: true, // Specify if "total number of records" is displayed
        emptyrecords: 'No records to display',

        // Default sorting
        sortname: "AssemblyID",
        sortorder: "asc",

        // Grid caption
        caption: "Build Template",

        // grid command functionality
        editurl: '@Url.Action("_AjaxUpdate")'
    }).navGrid("#jqTablePager",
        { refresh: false, add: true, edit: true, del: true },
            {
                url: '@Url.Action("_AjaxUpdate")',
                editData: {
                    extraParam: function (params, postdata) {
                        programID = $("#ProgramID option:selected").val();
                        buildID = $('#Builds option:selected').val();
                        startDate = $('#DateBegin').val();
                        endDate = $('#DateEnd').val();
                        return programID + '|' + buildID + '|' + startDate + '|' + endDate;
                    },
                    reloadAfterSubmit: true,
                    closeAfterEdit: true
                }
            }, // settings for edit
            {
                url: '@Url.Action("_AjaxUpdate")',
                addData: {
                    extraParam: function (params, postdata) {
                        programID = $("#ProgramID option:selected").val();
                        buildID = $('#Builds option:selected').val();
                        startDate = $('#DateBegin').val();
                        endDate = $('#DateEnd').val();
                        return programID + '|' + buildID + '|' + startDate + '|' + endDate;
                    },
                    reloadAfterSubmit: true,
                    closeAfterAdd: true
                }
            }, // settings for add
            {
                url: '@Url.Action("_AjaxUpdate")',
                delData: {
                    extraParam: function (params, postdata) {
                        programID = $("#ProgramID option:selected").val();
                        buildID = $('#Builds option:selected').val();
                        startDate = $('#DateBegin').val();
                        endDate = $('#DateEnd').val();
                        return programID + '|' + buildID + '|' + startDate + '|' + endDate;
                    },
                    reloadAfterSubmit: true,
                    closeAfterDelete: true
                }
            }, // settings for delete
            {sopt: ["cn"]} // Search options. Some options can be set on column level
     );

I managed to figure out to get this to work. I used the examples from Oleg and modified it to work for me.. Thanks again Oleg

asp.net mvc 3 - JQGrid Edit mode: how to populate a select list based ...

asp.net-mvc-3 jquery-ui jquery jqgrid
Rectangle 27 0

In case it is useful to anybody else, I wasn't able to do this exactly but found a way to accomplish the end result.

So instead of using editoptions to set the form field to readonly I used the beforeShowForm event of the add & edit options to add and or remove the readonly attribute.

So the colmodel without the readonly:

and the navGrid edit & add options to turn the readonly on (for add) or off (for edit). Note, the INPUT tag's ID will be the value of the name field in the colModel:

On a side note, while I know (according to jquery dump) the 'frm' function arg is a jQuery object containing the form, I could not get a selector to successfully select the child I wanted so I just used the id which matches the colModel name.

Just wanted to say thanks - I have exactly the same requirements and I couldn't figure out how to call the beforeShowForm function. This does exactly what I was needing - thanks again.

jquery - How to have different edit options for add & edit forms in jq...

jquery forms jqgrid
Rectangle 27 0

This is possible with built in jqgrid options.

So you can make the field_name editable:false, and the field_id as above

jquery - How to have different edit options for add & edit forms in jq...

jquery forms jqgrid
Rectangle 27 0

Inside of beforeInitData you can make any modification of colModel. You can either use setColProp method or just get the reference to internal colModel parameter with getGridParam and do any modifications which you need directly. For example you can delete dataUrl from editoptions of some column or just change edittype to from select to default value text. You can do different actions for Edit and Add forms. I recommend you use recreateForm: true to be sure that you always work with new form.

This works perfectly. Thanks as always oleg!

@Joseph: You are welcome!

jquery - JQGrid Form Edit disable dropdown on Edit but not Add - Stack...

jquery jqgrid
Rectangle 27 0

You misunderstand the meaning of recreateForm. I try to explain why it is needed.

The method navGrid has up to 7 parameters. You use only prmEdit but not set the prmAdd parameter. That is your main problem. The default implementation of "Add" and "Edit" dialog is so that one created dialog will be not closed, and only hide instead. Moreover, one dialog will be shared (!!!) as "Add" and "Edit" dialog. If recreateForm is used that the previously created (and now hidden) dialog will be destroyed and the the new one will be created.

In your case you defined only "Edit" dialog parameters as {closeOnEscape:true, recreateForm: true, width:600}. So if the user opens the "Add" dialog after the "Edit" dialog the previously hidden "Edit" dialog will be used as "Add" dialog. The title of the dialog will be changed of course.

jQuery("#rowed2").jqGrid('navGrid',"#prowed2",
    {edit:true,add:true,del:true,search:true,refresh:true},// navGrid options
    {closeOnEscape:true, recreateForm: true, width:600},   // Edit options
    {closeOnEscape:true, recreateForm: true, width:500}    // Add options
);

or redefine the grid defaults which are common for both Edit and Add dialog. For example

jQuery.extend(jQuery.jgrid.edit, {
    closeAfterAdd: true,
    closeAfterEdit: true,
    jqModal: false,
    recreateForm: true,
    savekey: [true,13]
});

thanks very much that clears it up perfectly, i take it by adding the width:600 under the extend setting this will make all forms 600 wide?

@Dizzy Bryan High: You are welcome! The setting in jQuery.jgrid.edit are common and it will be used by all form of the form editing (all "Add" and "Edit" gialogs).

jquery - jqgrid recreateform width setting, only working for edit, not...

jquery forms jqgrid
Rectangle 27 0

Just needed to add formatter:"select" option to the column in which i want to display combobox with selected value in edit form.

jquery - jqGrid combobox in add/edit window - Stack Overflow

jquery jqgrid
Rectangle 27 0

It seems me a bug in jqGrid 4.6. As a workaround I suggest to use the following onInitializeForm:

onInitializeForm: function ($form) {
    $form.css({height: "auto"});
    $form.closest(".ui-jqdialog").css({height: "auto"});
}

In the same way you can set both height and width to "auto":

$.extend(true, $.jgrid.edit, {
    beforeInitData: function () {
        $("#editmod" + this.id).remove();
    },
    onInitializeForm: function ($form) {
        $form.css({height: "auto", width: "auto"});
        $form.closest(".ui-jqdialog").css({height: "auto", width: "auto"});
    },
    width: "auto"
});

UPDATED: The bug seems be fixed in jqGrid 4.7. See the demo which uses 4.6 and to reproduce the problem one need just open edit form, close it and to open it one more time. The next demo uses the fix with I suggested in my answer. One more demo use no fix and it uses jqGrid 4.7. One can see that the described above problem not exist here.

@: You are welcome!

jquery - jqgrid | Automatically reduce the height of edit/add grid for...

jquery jqgrid
Rectangle 27 0

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")
}

jquery - jqGrid: How can I add columns to the edit modal that are read...

jquery jqgrid
Rectangle 27 0

jQuery("#gridId").jqGrid('navGrid', '#gridpager',
    { edit: true, add: true, del: true, search: true, excel: true, exceltext: 'Excel', cloneToTop: true },
    //Edit options
    {
        url: "Uploading.ashx",
        closeAfterEdit: true,
        afterSubmitCell: function () { $('#gridId').trigger('reloadGrid'); },
        beforeShowForm: function (form) { $('#tr_UserName', form).hide(); $('#tr_WWID', form).hide(); }
    },
    //Add options
    {
        url: "Uploading.ashx",
        closeAfterAdd: true,
        beforeShowForm: function(form) { $('#tr_UserName', form).show(); $('#tr_WWID', form).show(); }
    },
    ...
);

Though this might have solved the issue, Kindly add a bit more info as to why the above didn't work and how this would be fixing the issue.

asp.net - how to make two columns editable in the add dialog but not d...

asp.net jqgrid
Rectangle 27 0

OK. After long debugging and trying few things out, I finally got this working. I am not exactly sure if this is the most elegant way of making it to work. Here's the fix.

afterSubmit : function(response, postdata) {
                     postdata["id"] = null;
                     return [true, "", response.responseJSON.rows[0].id];
                },

When row is added jqgrid calls afterSubmits and assigns newId only if postdata[id] is null. And in submit action of edit form, if the id is "_empty" form adds new record, otherwise it updates it.

Now I think when afterSubmit returns an id,grid should its new id regardless whethere postdata[id] is null or not, it should just overwrite it.

Please let me know if there is any other way of fixing this.

jquery - JQGrid: When editing a newly added record, a new row is being...

jquery jqgrid
Rectangle 27 0

The thing is you gotta make sure the output of your php is json, and I used json_encode() in php.

jquery - JqGrid - Adding Select DropDown to edit form and filling from...

jquery jqgrid