ParamQuery grid support forum

General Category => Help for ParamQuery Grid (free version) => Topic started by: Mohammed Nayeem on December 04, 2018, 06:57:02 pm

Title: When option is selected in editor - value is displayed, id not binding to id col
Post by: Mohammed Nayeem on December 04, 2018, 06:57:02 pm

Below is the code have used to bind select for editor, when option is selected in editor, the values is binded in SGROUPNAME, instead of text and SGROUPCODE code is not updated as in demo page inline editing - editors validators example, am i missing anything

Code: [Select]

var obj = {
                    width: 965,
                    maxWidth: 965,
                    height: 300,
                    columnBorders: true,
                    wrap: false, hwrap: false,
                    showTitle: false,
                    collapsible: false,
                    selectionModel: { type: 'cell', mode: 'single' },
                    trackModel: { on: true }, //to turn on the track changes.     
                    virtualX: true,
                    editModel: {
                        saveKey: $.ui.keyCode.ENTER,
                        //filterKeys: false,
                        keyUpDown: true,
                        cellBorderWidth: 0
                    },
                    editor: { select: true },                   
                    toolbar: {
                        items: [
                            { type: '<span style="margin-right:630px">Asset Details</span>' },
                            {
                                type: 'button',
                                style: 'padding:5px;',
                                label: "Add New",
                                attr: 'id="btnNewCapex"',
                                icon: 'ui-icon-circle-plus',
                                listeners: [{
                                    "click": function (evt) {
                                        if ($('#ddlGroup').prop('selectedIndex') <= 0) { Notify('Please select group first', 4); $('#ddlGroup').focus(); return false; }
                                        var rowdata = { UNITPRICE: 0, NOOFUNITS: 1, FC: 0, EXRATE: 0, TOTAL: 0 };
                                        var rowIndx = $grid.pqGrid("addRow", { rowData: rowdata });
                                    }
                                }],
                            },
                            { type: 'separator' },
                            {
                                type: 'button', icon: 'ui-icon-arrowreturn-1-s', label: 'Undo', style: 'padding:5px;', cls: 'changes', listener:
                                  {
                                      "click": function (evt, ui) {
                                          $grid.pqGrid("history", { method: 'undo' });
                                      }
                                  },
                                options: { disabled: true }
                            },
                            { type: 'separator' },
                            {
                                type: 'button', icon: 'ui-icon-arrowrefresh-1-s', label: 'Redo', style: 'padding:5px;', listener:
                                  {
                                      "click": function (evt, ui) {
                                          $grid.pqGrid("history", { method: 'redo' });
                                      }
                                  },
                                options: { disabled: true }
                            },
                        ]
                    }
                };
                obj.colModel = [
                    { title: "PKID", dataIndx: "PKID", hidden: false },
                    { title: "GroupCode", dataIndx: "SGROUPCODE", hidden: false },
                    {
                       title: "Sub Group", dataIndx: "SGROUPNAME", width: 200,
                        editor: {
                            type: 'select',                           
                            valueIndx: "code",
                            labelIndx: "name",
                            mapIndices: { name: "SGROUPNAME", code: "SGROUPCODE" },
                            options: [
                                { code: "120", name: "TRUCK MIXER" },
                                { code: "121", name: "CONCRETE PUMP" }
                            ]
                        },
                        validations: [{ type: 'minLen', value: 1, msg: "Required" }]
                    },
                    { title: "Unit Price", dataIndx: "UNITPRICE", width: 70, align: 'center', dataType: 'float' },
                    { title: "No Of Units", dataIndx: "NOOFUNITS", width: 80, align: 'center', dataType: 'integer' },
                    { title: "Freight / Customs", dataIndx: "FC", width: 110, align: 'center', dataType: 'float' },
                    { title: "Exchange Rate", dataIndx: "EXRATE", width: 100, align: 'center', dataType: 'float' },
                    { title: "Total", dataIndx: "TOTAL", width: 150, align: 'center', editable: false, dataType: 'float' },
                    { title: '', minWidth: 40, maxWidth: 40, align: 'center', editable: false, render: function (ui) { return "<button type='button' class='delete_btn'>Delete</button>" } }
                ];
                obj.dataModel = {
                    location: "remote",
                    dataType: "JSON",
                    method: "GET",
                    url: requestpath + "Master/MasterHandler.ashx?q=GET_CAPEX_DETAILS&id=" + pkid,
                    getData: function (dataJSON) { return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: dataJSON.data }; }
                }
                var $grid = $("#gdvCapexDetails").pqGrid(obj);

                $grid.on('pqgridrefresh pqgridrefreshrow', function () {
                    var $grid = $(this);
                    //delete button
                    $grid.find("button.delete_btn").button({ icons: { primary: 'ui-icon-trash' }, text: false }).css('width', '20px').css('padding', '1px').css('height', '20px')
                    .unbind("click")
                    .bind("click", function (evt) {
                        var $tr = $(this).closest("tr");
                        var rowIndx = $grid.pqGrid("getRowIndx", { $tr: $tr }).rowIndxPage;
                        $grid.pqGrid("deleteRow", { rowIndx: rowIndx });
                        return false;
                    });
                });

Title: Re: When option is selected in editor - value is displayed, id not binding to id col
Post by: paramvir on December 14, 2018, 07:17:25 am

Apparently your code looks fine.

Could you share a jsfiddle.