jQWidgets Forums

Tagged: javascript grid, jquery grid, jquery grid popup edit, popup edit

This topic contains 14 replies, has 3 voices, and was last updated by wwhalen 12 years, 8 months ago.

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

Author

Popup editing option in row click Posts

April 24, 2012 at 4:49 pm Popup editing option in row click #3617

Member

Hi Everyone,
In jqxGrid , I had worked simple example grid in my project work. And, I have applied more than grid option into single grid. For example paging , sorting, filtering, resizing column, row selection is all works very fine. But , I have tried to integrate popup edit option open through row selection or Cells selection. It’s wasn’t work.

Can you help me to close the issue.

Thanks & Regards,
Naga

April 25, 2012 at 5:01 am Popup editing option in row click #3627

Peter Stoev

Keymaster

Hi Naga,

The following sample opens a Popup Edit Window when the user selects a cell. The sample is a modification of our Popup Edit demo.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            // prepare the data
            var data = generatedata(200);
            var source =
            {
                localdata: data,
                datatype: "array",
                updaterow: function (rowid, rowdata) {
                    // synchronize with the server - send update command   
                }
            };
            // initialize the input fields.
            $("#firstName").addClass('jqx-input');
            $("#lastName").addClass('jqx-input');
            $("#product").addClass('jqx-input');
            $("#firstName").width(150);
            $("#firstName").height(23);
            $("#lastName").width(150);
            $("#lastName").height(23);
            $("#product").width(150);
            $("#product").height(23);
            if (theme.length > 0) {
                $("#firstName").addClass('jqx-input-' + theme);
                $("#lastName").addClass('jqx-input-' + theme);
                $("#product").addClass('jqx-input-' + theme);
            }
            $("#quantity").jqxNumberInput({ width: 150, height: 23, theme: theme, decimalDigits: 0, spinButtons: true });
            $("#price").jqxNumberInput({ width: 150, height: 23, theme: theme, spinButtons: true });
            var dataAdapter = new $.jqx.dataAdapter(source);
            var editrow = -1;
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                theme: theme,
                pageable: true,
                autoheight: true,
                selectionmode: 'singlecell',
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 },
                  { text: 'Product', datafield: 'productname', width: 190 },
                  { text: 'Quantity', datafield: 'quantity', width: 90, cellsalign: 'right' },
                  { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
            $("#jqxgrid").bind('cellselect', function (event) {
                // open the popup window when the user clicks a button.
                editrow = event.args.rowindex;
                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);
                $("#firstName").val(dataRecord.firstname);
                $("#lastName").val(dataRecord.lastname);
                $("#product").val(dataRecord.productname);
                $("#quantity").jqxNumberInput({ decimal: dataRecord.quantity });
                $("#price").jqxNumberInput({ decimal: dataRecord.price });
                // show the popup window.
                $("#popupWindow").jqxWindow('show');
            });
            // initialize the popup window and buttons.
            $("#popupWindow").jqxWindow({ width: 250, resizable: false, theme: theme, 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 () {
                if (editrow >= 0) {
                    var row = { firstname: $("#firstName").val(), lastname: $("#lastName").val(), productname: $("#product").val(),
                        quantity: parseInt($("#quantity").jqxNumberInput('decimal')), price: parseFloat($("#price").jqxNumberInput('decimal'))
                    };
                    $('#jqxgrid').jqxGrid('updaterow', editrow, row);
                    $("#popupWindow").jqxWindow('hide');
                }
            });
        });
    </script>
</head>
<body class='default'>
    <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">First Name:</td>
                        <td align="left"><input id="firstName" /></td>
                    </tr>
                    <tr>
                        <td align="right">Last Name:</td>
                        <td align="left"><input id="lastName" /></td>
                    </tr>
                    <tr>
                        <td align="right">Product:</td>
                        <td align="left"><input id="product" /></td>
                    </tr>
                    <tr>
                        <td align="right">Quantity:</td>
                        <td align="left"><div id="quantity"></div></td>
                    </tr>
                    <tr>
                        <td align="right">Price:</td>
                        <td align="left"><div id="price"></div></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>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

April 25, 2012 at 9:39 am Popup editing option in row click #3648

technonaga

Member

Hi Peter,

Thanks for quick and valuable response. The Sample Code was works very fine. And i have one small doubt. I have developed iOS web application project. The Grid developed code was integrated in phonegap frame work. I need jqxgrid width change as per device orientation. But, you gave width value statically (width : 50) .

But I need to pass value dynamically. so, please help me for close this issues.

Thanks in advance,
Naga

April 26, 2012 at 5:31 am Popup editing option in row click #3671

Peter Stoev

Keymaster

Hi Naga,

As a solution, you will need to detect the device’s orientation and then set new values to the Grid’s ‘width’ and ‘height’ properties.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

April 26, 2012 at 9:54 am Popup editing option in row click #3683

technonaga

Member

Hi Peter,

I had developed the code for get device width and use some of simple calculation method to pass the various values to grid columns width. But it was not works . If you have possible to test the code. pls check it the below mentioned code. And give your valuable feedback.

var parstWidthValue;
var setgridWidth;

function loadGrid()
{
/****** ******/

getWidthVal();

setInterval(“getWidthVal()”, 10);

var getparstWidthValue = sessionStorage.getItem(‘sessWidthVal’);
var getGridWidthVal= sessionStorage.getItem(‘sessGridWidthVal’);

getparstWidthValue = parseInt(getparstWidthValue);
getGridWidthVal = parseInt(getGridWidthVal);

var theme = ”;
//var getWidth = $(“#jqxgrid”).width();

// prepare the data
var data = generatedata(20);

var source =
{
localdata: data,
datatype: “array”,
updaterow: function (rowid, rowdata) {
// synchronize with the server – send update command
}
};

// initialize the input fields.
$(“#firstName”).addClass(‘jqx-input’);
$(“#lastName”).addClass(‘jqx-input’);
$(“#contactType”).addClass(‘jqx-input’);
$(“#contactStatus”).addClass(‘jqx-input’);
$(“#Address”).addClass(‘jqx-input’);
$(“#Email”).addClass(‘jqx-input’);
$(“#firstName”).width(150);
$(“#firstName”).height(23);
$(“#lastName”).width(150);
$(“#lastName”).height(23);
$(“#contactType”).width(150);
$(“#contactType”).height(23);
$(“#contactStatus”).width(150);
$(“#contactStatus”).height(23);
$(“#Address”).width(150);
$(“#Address”).height(23);
$(“#Email”).width(150);
$(“#Email”).height(23);

if (theme.length > 0) {
$(“#firstName”).addClass(‘jqx-input-‘ + theme);
$(“#lastName”).addClass(‘jqx-input-‘ + theme);
$(“#contactType”).addClass(‘jqx-input-‘ + theme);
$(“#contactStatus”).addClass(‘jqx-input-‘+theme);
$(“#Address”).addClass(‘jqx-input-‘+theme);
$(“#Email”).addClass(‘jqx-input-‘+theme);
}

var dataAdapter = new $.jqx.dataAdapter(source);
var editrow = -1;

alert(“Device Width=”+getGridWidthVal+”, GridColumn Width”+getparstWidthValue);
//alert(“width:”+width);

// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width:getGridWidthVal,
//width:480,
autoheight: true,
source: dataAdapter,
theme: theme,
pageable: true,
sortable: true,
columnsresize: true,
touchmode: true,
columns: [
{ text: ‘First Name’, datafield: ‘firstname’, width: getparstWidthValue }, //100 getparstWidthValue
{ text: ‘Last Name’, datafield: ‘lastname’, width: getparstWidthValue }, //100
{ text: ‘Contact Type’, datafield: ‘contactype’, width: getparstWidthValue }, //150
{ text: ‘Contact Status’,datafield:’contactstatus’, width: getparstWidthValue}, //100
{ text: ‘Address’, datafield:’address’, width: getparstWidthValue}, //100
{ text: ‘Email’, datafield:’email’, width: getparstWidthValue}, //100
{ text: ‘Edit’, datafield: ‘Edit’, columntype: ‘button’, width: getparstWidthValue, 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);
$(“#firstName”).val(dataRecord.firstname);
$(“#lastName”).val(dataRecord.lastname);
$(“#contactType”).val(dataRecord.contactype);
$(“#contactStatus”).val(dataRecord.contactstatus);
$(“#Address”).val(dataRecord.address);
$(“#Email”).val(dataRecord.email);

// show the popup window.
$(“#popupWindow”).jqxWindow(‘show’);
}
},
]
});

// initialize the popup window and buttons.
$(“#popupWindow”).jqxWindow({ width: 250, resizable: true, theme: theme, 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 () {
if (editrow >= 0) {
var row = { firstname: $(“#firstName”).val(), lastname: $(“#lastName”).val(), contactype: $(“#contactType”).val(),contactstatus:$(“#contactStatus”).val(),address:$(“#Address”).val(),email:$(“#Email”).val()

};
$(‘#jqxgrid’).jqxGrid(‘updaterow’, editrow, row);
$(“#popupWindow”).jqxWindow(‘hide’);
}
});

/**** *****/
}

$(document).ready(function () {
setInterval(“loadGrid()”, 100);
});

Edit

First Name:

Last Name:

Contact Type:

Contact Status:

Address:

Email:

While, load a this page we got one column value (column :45) and rorate in Landscape mode we got column value (column:68). But the grid column not change in device. And , I have Changed the code for testing purpose we get a alert with grid column in every second. If possible to check this code through any device. Becoz, i commonly to take device width. I think is support all devices.

Thanks in Advance,

Regards,
Naga

April 26, 2012 at 11:09 am Popup editing option in row click #3686

technonaga

Member

Hi Peter,

I need another one help. Your ‘cellselect’ method sample code was working very fine. If any possible to send the popup edit option will appear while double click. Now, the sample code for ‘cellselect’ works single tap the grid data, Pop up appear in the screen. But, we need double click option. If you send the code , It will very useful to my project development.

Thanks in Advance,

Regards,
Naga

April 27, 2012 at 3:32 am Popup editing option in row click #3700

Peter Stoev

Keymaster

To handle double clicks, you can do the following:

Bind to the ‘rowclick’ event and check the time when the event is raised. If the user clicks the same row in a period of 300 milliseconds, then handle the ‘double click’.

var click = new Date();
var lastClick = new Date();
var lastRow = -1;
$("#jqxgrid").bind('rowclick', function (event) {
    click = new Date();
    if (click - lastClick < 300) {
        if (lastRow == event.args.rowindex) {
            // your code here.
        }
    }
    lastClick = new Date();
    lastRow = event.args.rowindex;
});

It is not necessary to set the ‘touchmode’ property to true in your code. This is only used by the PC touch simulator. The Grid automatically detects whether it runs on a touch device or not and sets this property.

To dynamically set the Grid’s Size, use a code like this:

$("#jqxgrid").jqxGrid({width: 300, height: 200});

Hope this helps.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

April 27, 2012 at 12:21 pm Popup editing option in row click #3712

technonaga

Member

Hi Peter ,

Thanks for quick response for the post.

Yesterday (Thursday) i sent the post for double click related query ,After some time I searched our forum , you already mentioned the code (double click) . I was use that code in my project development. That code is working very fine in PC & iPhone Simulator (with Mouse help) . But , it was not works in iphone Device (iOS touch).

I need one clear clarification, In Jqxgrid is possible to work iOS Devices. All controls are possible to work through touch (tap) . For Example , Grid Scrolling , rowlock (double Click) , Etc .,

Can you please clear my doubt.

Thanks in Advance,

Best Regards,
Naga

April 27, 2012 at 1:27 pm Popup editing option in row click #3716

Peter Stoev

Keymaster

Hi Naga,

All widgets handle touch events like ‘touchstart’, ‘touchmove’ and ‘touchend’. It is possible to scroll, change pages, sort, resize or drag. I just did a test with IPad3 and used the code below. The alert box was displayed correctly when I double-tapped on a grid row.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = '';
            // prepare the data
            var data = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            for (var i = 0; i < 200; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                columnsresize: true,
                columns: [
                  { text: 'First Name', dataField: 'firstname', width: 100 },
                  { text: 'Last Name', dataField: 'lastname', width: 100 },
                  { text: 'Product', dataField: 'productname', width: 180 },
                  { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
                ]
            });
            var click = new Date();
            var lastClick = new Date();
            var lastRow = -1;
            $("#jqxgrid").bind('rowclick', function (event) {
                click = new Date();
                if (click - lastClick < 300) {
                    if (lastRow == event.args.rowindex) {
                        alert('double click');
                        // your code here.
                    }
                }
                lastClick = new Date();
                lastRow = event.args.rowindex;
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

April 27, 2012 at 6:12 pm Popup editing option in row click #3736

technonaga

Member

Hi Peter,

Once again very thanks for the valuable reply. Just now, I checked your sample code in iphone device . It was work very fine. Actually i integrated the grid code into phonegap(framework) and the grid load with in iframe tag at html page. So , I couldn’t get proper output. Now , the sample code was work very good. I will change my entire code with help of your sample code.

Once again very thanks for your help.

Thanks & Regards,
Naga

July 17, 2012 at 3:03 pm Popup editing option in row click #6044

wwhalen

Member

Any chance we can get the sample code for the original question. I am facing the same issue. Thank you.

July 17, 2012 at 3:26 pm Popup editing option in row click #6045

Peter Stoev

Keymaster

Hi wwhalen,

Did you try the code snippets that I posted here?

Here’s an additional code snippet which opens edit popup when a row is clicked.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            // prepare the data
            var data = generatedata(200);
            var source =
            {
                localdata: data,
                datatype: "array",
                updaterow: function (rowid, rowdata) {
                    // synchronize with the server - send update command   
                }
            };
            // initialize the input fields.
            $("#firstName").addClass('jqx-input');
            $("#lastName").addClass('jqx-input');
            $("#product").addClass('jqx-input');
            $("#firstName").width(150);
            $("#firstName").height(23);
            $("#lastName").width(150);
            $("#lastName").height(23);
            $("#product").width(150);
            $("#product").height(23);
            if (theme.length > 0) {
                $("#firstName").addClass('jqx-input-' + theme);
                $("#lastName").addClass('jqx-input-' + theme);
                $("#product").addClass('jqx-input-' + theme);
            }
            $("#quantity").jqxNumberInput({ width: 150, height: 23, theme: theme, decimalDigits: 0, spinButtons: true });
            $("#price").jqxNumberInput({ width: 150, height: 23, theme: theme, spinButtons: true });
            var dataAdapter = new $.jqx.dataAdapter(source);
            var editrow = -1;
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                pageable: true,
                autoheight: true,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 },
                  { text: 'Product', datafield: 'productname', width: 190 },
                  { text: 'Quantity', datafield: 'quantity', width: 90, cellsalign: 'right' },
                  { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
            $("#jqxgrid").bind('rowclick', function (event) {
                editrow = event.args.rowindex;
                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);
                $("#firstName").val(dataRecord.firstname);
                $("#lastName").val(dataRecord.lastname);
                $("#product").val(dataRecord.productname);
                $("#quantity").jqxNumberInput({ decimal: dataRecord.quantity });
                $("#price").jqxNumberInput({ decimal: dataRecord.price });
                // show the popup window.
                $("#popupWindow").jqxWindow('show');
            });
            // initialize the popup window and buttons.
            $("#popupWindow").jqxWindow({ width: 250, resizable: false, theme: theme, 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 () {
                if (editrow >= 0) {
                    var row = { firstname: $("#firstName").val(), lastname: $("#lastName").val(), productname: $("#product").val(),
                        quantity: parseInt($("#quantity").jqxNumberInput('decimal')), price: parseFloat($("#price").jqxNumberInput('decimal'))
                    };
                    $('#jqxgrid').jqxGrid('updaterow', editrow, row);
                    $("#popupWindow").jqxWindow('hide');
                }
            });
        });
    </script>
</head>
<body class='default'>
    <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">First Name:</td>
                        <td align="left"><input id="firstName" /></td>
                    </tr>
                    <tr>
                        <td align="right">Last Name:</td>
                        <td align="left"><input id="lastName" /></td>
                    </tr>
                    <tr>
                        <td align="right">Product:</td>
                        <td align="left"><input id="product" /></td>
                    </tr>
                    <tr>
                        <td align="right">Quantity:</td>
                        <td align="left"><div id="quantity"></div></td>
                    </tr>
                    <tr>
                        <td align="right">Price:</td>
                        <td align="left"><div id="price"></div></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>

Hope it helps you.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 17, 2012 at 4:37 pm Popup editing option in row click #6053

wwhalen

Member

Hi..

Appreciate the quick reply. I am currently working with ASP.NET MVC so I modified the code accordingly and when I ran it, it only showed the edit controls and and buttons in the upper left corner of the page. So, just in case I might of missed something, I created a traditional ASP.NET project and pasted your code verbatium directly into a .aspx page. Still showing the same thing. The grid does not show up.

Did I miss something?

July 17, 2012 at 4:49 pm Popup editing option in row click #6054

Peter Stoev

Keymaster

According to me the references to the javascript and css files are not correct.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 17, 2012 at 4:54 pm Popup editing option in row click #6055

wwhalen

Member

Well yes. Thank you. Sorry, it should be assumed I fixed the links to the .js and .css.

Author

Posts

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

You must be logged in to reply to this topic.