jQWidgets Forums

This topic contains 6 replies, has 3 voices, and was last updated by Peter Stoev 12 years, 1 month ago.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Grid – Issue using popupedit Posts

April 9, 2013 at 9:41 am Grid – Issue using popupedit #18863

Participant

Hi,

I have implemented popup edit in grid, while all is Ok, modified values don’t appear in main grid. Is it issue with ‘Cellendedit’,
i followed the sample, but i have said issue. Please help.

I have pasted code below,

Thanks,

Keshavan

In order to enter in edit mode, click any of the ‘Edit’ buttons.
To save the changes, click the ‘Save’ button in the popup dialog. To cancel the
changes click the ‘Cancel’ button in the popup dialog.

$(document).ready(function () {
var theme = getDemoTheme();
// prepare sample data.
var data = {};
var generaterow = function (id) {
var row = {};
row[“GroupCompanyId”] = id;
row[“GroupName”] = ” “;
row[“Miscellaneous1″] = ” “;
row[“Culture”] = ” “;
return row;
}
var source =
{
datatype: “json”,
datafields: [
{ name: ‘GroupCompanyId’ },
{ name: ‘GroupName’ },
{ name: ‘Miscellaneous1’ },
{ name: ‘Culture’ },
],
id: ‘GroupCompanyId’,
url: ‘GroupCompany/GetGroupCompanies’,
addrow: function (rowid, rowdata, position, commit) {
// synchronize with the server – send insert command
$.ajax({
cache: false,
dataType: ‘json’,
url: ‘GroupCompany/Add’,
data: rowdata,
type: “POST”,
success: function (data, status, xhr) {
// insert command is executed.
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
commit(false);
}
});
},
deleterow: function (rowid, commit) {
// synchronize with the server – send delete command
$.ajax({
dataType: ‘json’,
cache: false,
url: ‘/GroupCompany/Delete/5’,
type: “POST”,
success: function (data, status, xhr) {
// delete command is executed.
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.statusText);
commit(false);
}
});
},
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
{
$.ajax(
{
cache: false,
dataType: ‘json’,
url: ‘GroupCompany/Update’,
data: rowdata,
type: “POST”,
success: function (data, status, xhr) {
// update command is executed.
alert(success);
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
commit(false);
}
}
);
}
}
};

// initialize the input fields.
$(“#GroupName”).jqxInput({ theme: theme });
$(“#Miscellaneous1”).jqxInput({ theme: theme });
$(“#culture”).jqxInput({ theme: theme });
$(“#GroupName”).width(375);
$(“#GroupName”).height(23);
$(“#Miscellaneous1”).width(375);
$(“#Miscellaneous1”).height(23);
$(“#culture”).width(20);
$(“#culture”).height(23);
var dataAdapter = new $.jqx.dataAdapter(source);
var editrow = -1;

// initialize jqxGrid../../JqWidgets/index.htm
$(“#jqxgrid”).jqxGrid(
{
width: 950,
height: 350,
source: source,
sortable: true,
theme: ‘ui-smoothness’,
pageable: true,
editable: true,
editmode: ‘selectedcell’,
rowdetails: true,
filterable: true,
columnsresize: true,
columnsreorder: true,
groupable: true,
rowsheight: 20,
altrows: true,
columns: [
{ text: ‘Group’, datafield: ‘GroupName’, width: 375 },
{ text: ‘Other Info ‘, datafield: ‘Miscellaneous1’, width: 350 },
{ text: ‘Culture’, datafield: ‘Culture’, width: 120 },
{ text: ‘Edit’, datafield: ‘Edit’, columntype: ‘button’, wdth: 70, cellsrenderer: function () {
return “Edit”;
}, buttonclick: function (row) {
// open the popup window when the user clicks a button.
editrow = row;
var offset = $(“#jqxgrid”).offset();
$(“#popupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} });
// get the clicked row’s data and initialize the input fields.
var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);
$(“#GroupName”).val(dataRecord.GroupName);
$(“#Miscellaneous1”).val(dataRecord.Miscellaneous1);
$(“#Culture”).val(dataRecord.Culture);
// show the popup window.
$(“#popupWindow”).jqxWindow(‘open’);
}
},
]
});
// initialize the popup window and buttons.
$(“#popupWindow”).jqxWindow({
width: 480, resizable: false, theme: ‘ui-lightness’, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.01
});
$(“#popupWindow”).on(‘open’, function () {
$(“#firstName”).jqxInput(‘selectAll’);
});

$(“#Cancel”).jqxButton({ theme: theme });
$(“#Save”).jqxButton({ theme: theme });
// update the edited row when the user clicks the ‘Save’ button.
// update the edited row when the user clicks the ‘Save’ button.
$(“#Save”).click(function () {
if (editrow >= 0) {
var rowdata = { GroupName: $(“#GroupName”).val(), Miscellaneous1: $(“#Miscellaneous1”).val(), Culture: $(“#Culture”).val()
};
alert($(“#GroupName”).val());
alert($(“#Miscellaneous1”).val());
alert($(“#Culture”).val());
var rowid = $(‘#jqxgrid’).jqxGrid(‘getrowid’, editrow);
$(‘#jqxgrid’).jqxGrid(‘updaterow’, rowid, rowdata);
$(“#popupWindow”).jqxWindow(‘hide’);

}
});

$(“#addrowbutton”).jqxButton();
$(“#deleterowbutton”).jqxButton();
$(“#updaterowbutton”).jqxButton();

// update row.
$(“#updaterowbutton”).bind(‘click’, function () {
/*var datarow s generaterow(); */
var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
if (selectedrowindex >= 0 && selectedrowindex = 0 && selectedrowindex < rowscount) {
var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
$("#jqxgrid").jqxGrid('deleterow', id);
}
});
});

Edit

Group:

Other Info:

Culture:

April 9, 2013 at 9:44 am Grid – Issue using popupedit #18864

Keshavan

Participant

Hi,

here is the full code,

}
});

$(“#addrowbutton”).jqxButton();
$(“#deleterowbutton”).jqxButton();
$(“#updaterowbutton”).jqxButton();

Edit

Group:

Other Info:

Culture:

April 9, 2013 at 9:52 am Grid – Issue using popupedit #18865

Keshavan

Participant

Hi,

I have pasted the display part of popup below, because of file size limit in editor, i could not paste the entire code.

Thanks,

Keshavan

Edit

Group:

Other Info:

Culture:

April 9, 2013 at 9:56 am Grid – Issue using popupedit #18867

Keshavan

Participant

Hi,

Finally, pasted the left out code.

Thanks,

Keshavan

Edit

Group:

Other Info:

Culture:

April 9, 2013 at 11:56 am Grid – Issue using popupedit #18890

Dimitar

Participant

Hello Keshavan,

Please re-post your code and format it as explained in the forum topic Code Formatting.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

April 9, 2013 at 2:42 pm Grid – Issue using popupedit #18906

Keshavan

Participant

Hi Dimitar,

I have pasted the code upon formatting accordingly,

Thanks,

Keshavan

<ht

ml>
<head>
    <title id='Description'>In order to enter in edit mode, click any of the 'Edit' buttons.
        To save the changes, click the 'Save' button in the popup dialog. To cancel the
        changes click the 'Cancel' button in the popup dialog.</title>
    <link rel="stylesheet" href="/JqWidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="/JqWidgets/jqwidgets/styles/jqx.ui-smoothness.css" type="text/css" />
    <link rel="stylesheet" href="/JqWidgets/jqwidgets/styles/jqx.ui-sunny.css" type="text/css" />
    <link rel="stylesheet" href="/Content/Site.css" type="text/css" />
    <script type="text/javascript" src="/JqWidgets/Scripts/gettheme.js"></script>
    <script type="text/javascript" src="/JqWidgets/Scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqx-all.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.grouping.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.columnsreorder.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxinput.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            // prepare sample data.
            var data = {};
            var generaterow = function (id) {
                var row = {};
                row["GroupCompanyId"] = id;
                row["GroupName"] = " ";
                row["Miscellaneous1"] = " ";
                row["Culture"] = " ";
                return row;
            }
            var source =
            {
                datatype: "json",
                datafields: [
                        { name: 'GroupCompanyId' },
                        { name: 'GroupName' },
                        { name: 'Miscellaneous1' },
                        { name: 'Culture' },
                        ],
                id: 'GroupCompanyId',
                url: 'GroupCompany/GetGroupCompanies',
                addrow: function (rowid, rowdata, position, commit) {
                    // synchronize with the server - send insert command
                    $.ajax({
                        cache: false,
                        dataType: 'json',
                        url: 'GroupCompany/Add',
                        data: rowdata,
                        type: "POST",
                        success: function (data, status, xhr) {
                            // insert command is executed.
                            commit(true);
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            alert(errorThrown);
                            commit(false);
                        }
                    });
                },
                deleterow: function (rowid, commit) {
                    // synchronize with the server - send delete command
                    $.ajax({
                        dataType: 'json',
                        cache: false,
                        url: '/GroupCompany/Delete/5',
                        type: "POST",
                        success: function (data, status, xhr) {
                            // delete command is executed.
                            commit(true);
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            alert(jqXHR.statusText);
                            commit(false);
                        }
                    });
                },
                updaterow: function (rowid, rowdata, commit) {
                    // synchronize with the server - send update command
                    {
                        $.ajax(
                                 {
                                     cache: false,
                                     dataType: 'json',
                                     url: 'GroupCompany/Update',
                                     data: rowdata,
                                     type: "POST",
                                     success: function (data, status, xhr) {
                                         // update command is executed.
                                         alert(success);
                                         commit(true);
                                     },
                                     error: function (jqXHR, textStatus, errorThrown) {
                                         alert(errorThrown);
                                         commit(false);
                                     }
                                 }
                             );
                    }
                }
            };
            // initialize the input fields.
            $("#GroupName").addClass('jqx-input');
            $("#Miscellaneous1").addClass('jqx-input');
            $("#Culture").addClass('jqx-input');
            $("#GroupName").width(375);
            $("#GroupName").height(23);
            $("#Miscellaneous1").width(375);
            $("#Miscellaneous1").height(23);
            $("#Culture").width(50);
            $("#Culture").height(23);
            if (theme.length > 0) {
                $("#GroupName").addClass('jqx-input-' + theme);
                $("#Miscellaneous1").addClass('jqx-input-' + theme);
                $("#Culture").addClass('jqx-input-' + theme);
            }
            var dataAdapter = new $.jqx.dataAdapter(source);
            var editrow = -1;
            // initialize jqxGrid<a href="../../JqWidgets/index.htm">../../JqWidgets/index.htm</a>
            $("#jqxgrid").jqxGrid(
            {
                width: 950,
                height: 350,
                source: dataAdapter,
                sortable: true,
                theme: 'ui-smoothness',
                selectionmode: 'singlecell',
                pageable: true,
                editable: true,
                rowdetails: true,
                filterable: true,
                columnsresize: true,
                columnsreorder: true,
                groupable: true,
                rowsheight: 20,
                altrows: true,
                columns: [
                { text: 'Group', datafield: 'GroupName', width: 400 },
                { text: 'Other Info ', datafield: 'Miscellaneous1', width: 400 },
                { text: 'Culture', datafield: 'Culture', width: 120 }
                ]
            });
            $("#jqxgrid").bind('cellselect', function (event) {
                // open the popup window when the user clicks a button.
                editrow = event.args.rowindex;
                alert("editrow  " + editrow);
                var offset = $("#jqxgrid").offset();
                $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} });
                // get the clicked row's data and initialize the input fields.
                var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
                alert(dataRecord.GroupName);
                alert(dataRecord.Miscellaneous1);
                alert(dataRecord.Culture);
                $("#GroupName").val(dataRecord.GroupName);
                $("#Miscellaneous1").val(dataRecord.Miscellaneous1);
                $("#Culture").val(dataRecord.Culture);
                // show the popup window.
                $("#popupWindow").jqxWindow('show');
            });
            // initialize the popup window and buttons.
            $("#popupWindow").jqxWindow({ width: 480, resizable: false, theme: 'ui-sunny', isModal: true, autoOpen: false,
                cancelButton: $("#Cancel"), modalOpacity: 0.01
            });
            $("#Cancel").jqxButton({ theme: theme });
            $("#Save").jqxButton({ theme: theme });
            // update the edited row when the user clicks the 'Save' button.
            $("#Save").click(function () {
                alert("Save  " + editrow);
                if (editrow >= 0) {
                    var row = { GroupName: $("#GroupName").val(), Miscellaneous1: $("#Miscellaneous1").val(), Culture: $("#Culture").val() }
                };
                alert(row.GroupName);
                alert(row.Miscellaneous1);
                alert(row.Culture);
                var id = $("#jqxgrid").jqxGrid('getrowid', editrow);
                $('#jqxgrid').jqxGrid('updaterow', id, row);
                $("#popupWindow").jqxWindow('hide');
            });
            $("#addrowbutton").jqxButton();
            $("#deleterowbutton").jqxButton();
            $("#updaterowbutton").jqxButton();
            // update row.
            $("#updaterowbutton").bind('click', function () {
                /*var datarow s generaterow(); */
                var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                    var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
                    $("#jqxgrid").jqxGrid('updaterow', id, datarow);
                }
            });
            // create new row.
            $("#addrowbutton").bind('click', function () {
                var datainformation = $("#jqxgrid").jqxGrid('getdatainformation');
                var rowscount = datainformation.rowscount;
                editrow = rowscount + 1;
                var datarow = generaterow(rowscount + 1);
                $("#jqxgrid").jqxGrid('addrow', rowscount + 1, generaterow(), 'top');
            });
            //new code ends
            // delete row.
            $("#deleterowbutton").bind('click', function () {
                var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                    var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
                    $("#jqxgrid").jqxGrid('deleterow', id);
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div style="margin-left: 5px;">
        <div>
            <input id="addrowbutton" type="button" value=" (+) record" />
            <input id="deleterowbutton" type="button" style="margin-top: 10px;" value=" (-) record" />
            <input id="updaterowbutton" type="button" style="margin-top: 10px;" value=" Edit/Save" />
        </div>
    </div>
    <br />
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
        <div style="margin-top: 30px;">
            <div id="cellbegineditevent">
            </div>
            <div style="margin-top: 10px;" id="cellendeditevent">
            </div>
        </div>
        <div id="popupWindow">
            <div>
                Edit</div>
            <div style="overflow: hidden;">
                <table>
                    <tr>
                        <td align="right">
                            Group:
                        </td>
                        <td align="left">
                            <input id="GroupName" />
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            Other Info:
                        </td>
                        <td align="left">
                            <input id="Miscellaneous1" />
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            Culture:
                        </td>
                        <td align="left">
                            <input id="Culture" />
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                        </td>
                        <td style="padding-top: 10px;" align="right">
                            <input style="margin-right: 5px;" type="button" id="Save" value="Save" /><input id="Cancel"
                                type="button" value="Cancel" />
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

April 10, 2013 at 11:28 am Grid – Issue using popupedit #18996

Peter Stoev

Keymaster

Duplicate Post: http://www.jqwidgets.com/community/topic/grid-popupedit-update-issue. Please, avoid that in your future posts.

Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.