General Category > ParamQuery Pro Evaluation Support

POPUP EDITING

(1/1)

supportrequest:
Hello,
I'm trying add popup editing but its not working.Someone can redirect me ?

--- Code: ---<!DOCTYPE HTML>
<meta charset="utf-8">
<html>
<head>

    <script src="https://unpkg.com/[email protected]/dist/jquery.js"></script>   
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/sunny/jquery-ui.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
     <link rel="stylesheet" href="d.css" />   
    <link rel="stylesheet" href="pqgrid.min.css" />   
  <link rel="stylesheet" href="pqgrid.ui.min.css" />
 <link rel="stylesheet" href="themes/bootstrap/pqgrid.rtl.css"/>
     <script type="text/javascript" src="pqgrid.min.js" ></script>   
     <script src="localize/pq-localize-en.js"></script>
     <script type="text/javascript" src="pqTouch/pqtouch.min.js" ></script>   
     <script type="text/javascript" src="jsZip-2.5.0/jszip.min.js" ></script>   
 <script>
 $(function () {
function filterhandler() {

            var $toolbar = this.toolbar(),
                $value = $toolbar.find(".filterValue"),
                value = $value.val(),
                condition = $toolbar.find(".filterCondition").val(),
                dataIndx = $toolbar.find(".filterColumn").val(),
                filterRules;

            if (dataIndx == "") {
                filterRules = this.getColModel().map(function(column){                                   
                    return { dataIndx: column.dataIndx, condition: condition, value: value };
                })
            }
            else {
                filterRules = [{ dataIndx: dataIndx, condition: condition, value: value}];
            }

           
            this.filter({
                oper: 'replace',
                rules: filterRules
            });
        }
       
        function filterRender(ui) {
            var val = ui.cellData,
                filter = ui.column.filter,
                crules = (filter || {}).crules;

            if (filter && filter.on && crules && crules[0].value) {
                var condition = crules[0].condition,
                    valUpper = val.toUpperCase(),
                    txt = crules[0].value,
                    txt = (txt == null) ? "" : txt.toString(),
                    txtUpper = txt.toUpperCase(),
                    indx = -1;
                if (condition == "end") {
                    indx = valUpper.lastIndexOf(txtUpper);
                   
                    if (indx + txtUpper.length != valUpper.length) {
                        indx = -1;
                    }
                }
                else if (condition == "contain") {
                    indx = valUpper.indexOf(txtUpper);
                }
                else if (condition == "begin") {
                    indx = valUpper.indexOf(txtUpper);
                   
                    if (indx > 0) {
                        indx = -1;
                    }
                }
                if (indx >= 0) {
                    var txt1 = val.substring(0, indx);
                    var txt2 = val.substring(indx, indx + txt.length);
                    var txt3 = val.substring(indx + txt.length);
                    return txt1 + "<span style='background:yellow;color:#333;'>" + txt2 + "</span>" + txt3;
                }
                else {
                    return val;
                }
            }
            else {
                return val;
            }
        }
        var colM = [
    { title: "<b>Ön Resim</b>", id: 'EmployeeID', validations: [ { type: 'minLen', value: '1', msg: 'Bu Alan Gerekli' } ], width: 150, dataIndx: "Featured_Image",
render: function(ui){ if(ui.cellData==null){return "<img height='100' style='border-radius:50%;' src='resimYok.jpg'/>";}else{               
return "<img height='150' style='border-radius:50%;' src='"
+ ui.cellData + "'/> ";}
            }                   
        },
         
   
{ title: "<b>3. Ek Görsel</b>", width: 300, dataIndx: "Product_Gallery.3",render: function(ui){ if(ui.cellData==null){return "<img height='100' style='border-radius:50%;' src='resimYok.jpg'/>";}else{               
return "<img height='150' style='border-radius:50%;' src='"
+ ui.cellData + "'/> ";}
            }                   
        },
    { title: "<b>Kategori</b>", width: 200, dataIndx: "Category",style: {'font-size': '12px'},validations: [ { type: 'minLen', value: '1', msg: 'Bu Alan Gerekli' } ] },
// { title: "<b>Adet</b>", width: 75, dataIndx: "Quantity",style: {'font-size': '12px'},validations: [ { type: 'minLen', value: '1', msg: 'Bu Alan Gerekli' } ] },
{ title: "<b>Beden</b>", width: 150, dataIndx: "Attribute_Bedenler",style: {'font-size': '12px'},validations: [ { type: 'minLen', value: '1', msg: 'Bu Alan Gerekli' } ] },
{ title: "<b>Renk</b>", width: 150, dataIndx: "Attribute_Renk",style: {'font-size': '12px'},validations: [ { type: 'minLen', value: '1', msg: 'Bu Alan Gerekli' } ] },

];
        var dataModel = {
            location: "remote",
            dataType: "JSON",
            method: "GET",
   url : "../urunduz/router.php?baslat=<?php echo $marka.'&py='.$py;?>",

getData: function (dataJSON) {
             var data = dataJSON;
       return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: data };
            }

        };
        var groupModel = {
            on: false,
          dataIndx: ['Product_Name'],
            showSummary: [false],
            grandSummary: false,
            collapsed: [false],
            title: [
                "{0} ({1})",
                "{0} - {1}"
            ]
        }
var pageModel = {
type: "local",
            rPP: 50, strRpp: "{0}",

            //customize localization strings.
            strDisplay: "{0} to {1} of {2}",
            strPage: "Sayfa {0} / {1}",
                 
            layout: ['first','prev', 'next','last', "|", "strPage"]           
        }   
        var obj = {
            height: "100%",
width: "100%",
editable: false,
freezeCols: 2,
collapsible: {
      toggle: false,
  on: false
    },
  pageModel: pageModel,
complete:function(evt, ui) {this.toggle()},  
  contextMenu: {
            on: true,
            imgItems: [
       
            ]
        },
            toolbar: {
cls: 'pq-toolbar',
                items: [
{ type: 'button', label: 'Add', listeners: [{ click: addRow}], icon: 'ui-icon-plus' },
                { type: 'button', label: 'Edit', listeners: [{ click: editRow}], icon: 'ui-icon-pencil' },
                { type: 'button', label: 'Delete', listeners: [{ click: deleteRow}], icon: 'ui-icon-minus' },
{
                    type: 'select',
                    label: 'Number of frozen columns: ',
                    options: [0, 1, 2, 3],
                    listener: function (evt) {
                        this.option("freezeCols", evt.target.value);
                        this.refresh();
                    }                                           
                },


{
                    type: 'button',
                    label: "Kaydet",
                    icon: 'ui-icon-arrowthickstop-1-s',
                    listener:function () {
grid.reset( { group: true, filter: true } );
grid.showLoading( );


this.exportData({

                            url: "post.php?baslat=<?php echo $marka; ?>&py=<?php echo $py; ?>",
                            format:  "json",
                            zip: $("#export_zip").prop("checked"),
                            nopqdata: true, //applicable for JSON export.
                            render: true,
noheader: true,

                        })
window.setTimeout(function () {
grid.hideLoading( );
}, 5000 );}
                },


              ],cls: "pq-toolbar-search",
                items: [
{ type: 'button', label: 'Add', listeners: [{ click: addRow}], icon: 'ui-icon-plus' },
                { type: 'button', label: 'Edit', listeners: [{ click: editRow}], icon: 'ui-icon-pencil' },
                { type: 'button', label: 'Delete', listeners: [{ click: deleteRow}], icon: 'ui-icon-minus' },
{

                    type: 'button',
                    label: "Kaydet",
                    icon: 'ui-icon-arrowthickstop-1-s',
                    listener:function () {
this.reset({filter: true});
grid.showLoading( );


this.exportData({

                            url: "post.php?baslat=<?php echo $marka; ?>&py=<?php echo $py; ?>",
                            format:  "json",
                            zip: $("#export_zip").prop("checked"),
                            nopqdata: true, //applicable for JSON export.
                            render: true,
noheader: true,

                        })
window.setTimeout(function () {
grid.hideLoading( );
}, 5000 );
}
                },                   
                    {
                        type: 'textbox',
                        label: 'Filtrele: ',
                        attr: 'placeholder="Filtrelenecek Kelime"',
                        cls: "filterValue",
                        listener: { timeout: filterhandler }
                    },
                    {
                        type: 'select', cls: "filterColumn",
                        listener: filterhandler,
                        options: function (ui) {                           
                            var opts = [{ '': '[ Aranacak Alanı Seç ]'}];
                            this.getColModel().forEach(function(column){                               
                                var obj = {};
                                obj[column.dataIndx] = column.title;
                                opts.push(obj);
                            })
                            return opts;
                        }
                    },
                    {
                        type: 'select',                         
                        cls: "filterCondition",
                        listener: filterhandler,
                        options: [
{ "contain": "İçerir" },
                            { "begin": "İle Başlar" },
                            { "end": "İle Biter" },
                            { "notcontain": "İçermez" },
                            { "equal": "Eşit" },
                            { "notequal": "Eşit Değil" },
                            { "empty": "Boş" },
                            { "notempty": "Boş Değil" },
                            { "less": "Daha Az" },
                            { "great": "Daha Fazla" },
                            { "regexp": "Regex" }
                        ]
                    }, { type: 'separator'},
{
                        type: 'select',
                        cls:'rpp',
                        label: "Sayfa Başı Gösterim: ",
                        value: pageModel.rPP,
                        options: [50, 100, 1000, 10000],
                        listener: function(evt) {
                            this.option('pageModel.rPP', $(evt.target).val())
                            this.refreshDataAndView();

                        }
                    },
{
                        type: 'button',
                        label: "Önceki Sayfa",
                       cls:'prev',
                        listener: function() {
                            var page = this.option('pageModel.curPage');
                            this.goToPage({page: page-1})
                        }
                   },
{
                        type: 'button',
                        label: "Sonraki Sayfa",
                        cls:'next',
                        listener: function() {
                           var page = this.option('pageModel.curPage');
                           this.goToPage({page: page+1})
                        }
                    },

                ]
            },
            dataModel: dataModel,
            scrollModel: { autoFit: false },
            colModel: colM,
            numberCell: { show: true },
            menuIcon: false,

 width: 900,
            height: 460,
            editable: false,
            pageModel: { type: "local", rPP: 15, rPPOptions: [10, 15, 20, 50, 100] },
            flexHeight: true,
            title: "Companies listed on the <b>NASDAQ</b>",
            freezeCols: 1,
            resizable: true,           
            editModel: { clicksToEdit: 2 },
            selectionModel: { mode: 'single', type: 'row' }
        };
      var grid = pq.grid("#grid_export", obj);
 
 
// var $grid = $("#grid_export").pqGrid(obj);
        //create popup dialog.
        $("#popup-dialog-crud").dialog({ width: 400, modal: true,
            open: function () { $(".ui-dialog").position({ of: "#grid_export" }); },
            autoOpen: false
        });
        //edit Row
        function editRow() {
            var rowIndx = getRowIndx();
            if (rowIndx != null) {

                var row = $grid.pqGrid('getRowData', {rowIndx: rowIndx});

                var $frm = $("form#crud-form");
                $frm.find("input[name='company']").val(row[0]);
                $frm.find("input[name='symbol']").val(row[1]);
                $frm.find("input[name='price']").val(row[3]);
                $frm.find("input[name='change']").val(row[4]);
                $frm.find("input[name='pchange']").val(row[5]);
                $frm.find("input[name='volume']").val(row[6]);

                $("#popup-dialog-crud").dialog({ title: "Edit Record (" + (rowIndx + 1) + ")", buttons: {
                    Update: function () {
                        //update row.
                        var row = [];
                        row[0] = $frm.find("input[name='company']").val();
                        row[1] = $frm.find("input[name='symbol']").val();
                        row[3] = $frm.find("input[name='price']").val();
                        row[4] = $frm.find("input[name='change']").val();
                        row[5] = $frm.find("input[name='pchange']").val();
                        row[6] = $frm.find("input[name='volume']").val();

                        $grid.pqGrid('updateRow', { rowIndx: rowIndx, row: row, checkEditable: false });

                        $(this).dialog("close");
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                }
                }).dialog("open");
            }
        }
        //append Row
        function addRow() {

            var $frm = $("form#crud-form");
            $frm.find("input").val("");

            $("#popup-dialog-crud").dialog({ title: "Add Record", buttons: {
                Add: function () {
                    var row = [];
                    //save the record in DM.data.
                    row[0] = $frm.find("input[name='company']").val();
                    row[1] = $frm.find("input[name='symbol']").val();
                    row[3] = $frm.find("input[name='price']").val();
                    row[4] = $frm.find("input[name='change']").val();
                    row[5] = $frm.find("input[name='pchange']").val();
                    row[6] = $frm.find("input[name='volume']").val();

                    $grid.pqGrid('addRow', { rowData: row });
                    $(this).dialog("close");
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
            });
            $("#popup-dialog-crud").dialog("open");
        }
        //delete Row.
        function deleteRow() {
            var rowIndx = getRowIndx();
            if (rowIndx != null) {
                $grid.pqGrid("deleteRow", { rowIndx: rowIndx });
                $grid.pqGrid("setSelection", { rowIndx: rowIndx });
            }
        }
        function getRowIndx() {
            var arr = $grid.pqGrid("selection", { type: 'row', method: 'getSelection' });
            if (arr && arr.length > 0) {
                return arr[0].rowIndx;                               
            }
            else {
                alert("Select a row.");
                return null;
            }
        }
   

    });


</script>
   <div id="grid_export" >

    </div>

<div id="popup-dialog-crud">
<form id="crud-form">
    <table align="center">
    <tbody><tr>
    <td>Company Name:</td>
    <td><input type="text" name="company"></td>
    </tr>
    <tr>
    <td>Symbol:</td>
    <td><input type="text" name="symbol"></td>
    </tr>
    <tr>
    <td>Price:</td>
    <td><input type="text" name="price"></td>
    </tr>
    <tr>
    <td>Change:</td>
    <td><input type="text" name="change"></td>
    </tr>
    <tr>
    <td>%Change:</td>
    <td><input type="text" name="pchange"></td>
    </tr>
    <tr>
    <td>Volume:</td>
    <td><input type="text" name="volume"></td>
    </tr>
    </tbody></table>
</form>
</div>


--- End code ---

paramvir:
Could you please mention the issue faced by you and share a jsfiddle.

Navigation

[0] Message Index

Go to full version