jQuery UI Widgets › Forums › Grid › can not open popup windows on grid
Tagged: editting, grid, jqxgrid, popup window
This topic contains 3 replies, has 2 voices, and was last updated by Nadezhda 10 years, 3 months ago.
-
Author
-
Hi ALL.
I have little grid with user list
I need to edit this rows with popup.
but when I click on EDIT button. it is canceling the window.
please help me!this is my code:
function userpage(){ var theme = 'orange'; var fullheight = $('#middle').height() - 20; fullheight += 'px'; var $_users = $(document.createElement('div')); $_users.attr({'id': 'users'}); $_users.css({margin: '0 0 0 100px'}); $('#middle').append($_users); var $_popwindow = $(document.createElement('div')); $_popwindow.attr({id:'popupWindow'}); var $_poptitle = $(document.createElement('div')); $_poptitle.html('Edit user'); var $_popform = $(document.createElement('div')); $_popform.css({overflow: 'hidden'}); var $_poptable = $(document.createElement('table')); var $_popusername = $(document.createElement('tr')); var $_popusernametd = $(document.createElement('td')); $_popusernametd.attr({'align': 'right'}); $_popusernametd.html('username'); $_popusername.append($_popusernametd); var $_popusernametd2 = $(document.createElement('td')); $_popusernametd2.attr({'align': 'left'}); var $_popusernameinput = $(document.createElement('input')); $_popusernameinput.attr({'id': 'username'}); $_popusernametd2.append($_popusernameinput); $_popusername.append($_popusernametd2); $_poptable.append($_popusername); var $_poppsw = $(document.createElement('tr')); var $_poppswtd = $(document.createElement('td')); $_poppswtd.attr({'align': 'right'}); $_poppswtd.html('password'); $_poppsw.append($_poppswtd); var $_poppswtd2 = $(document.createElement('td')); $_poppswtd2.attr({'align': 'left'}); var $_poppswinput = $(document.createElement('input')); $_poppswinput.attr({'id': 'password', type: 'password'}); $_poppswtd2.append($_poppswinput); $_poppsw.append($_poppswtd2); $_poptable.append($_poppsw); var $_popretypepsw = $(document.createElement('tr')); var $_popretypepswtd = $(document.createElement('td')); $_popretypepswtd.attr({'align': 'right'}); $_popretypepswtd.html('retypepsw'); $_popretypepsw.append($_popretypepswtd); var $_popretypepswtd2 = $(document.createElement('td')); $_popretypepswtd2.attr({'align': 'left'}); var $_popretypepswinput = $(document.createElement('input')); $_popretypepswinput.attr({'id': 'retypepsw', type: 'password'}); $_popretypepswtd2.append($_popretypepswinput); $_popretypepsw.append($_popretypepswtd2); $_poptable.append($_popretypepsw); var $_popemail = $(document.createElement('tr')); var $_popemailtd = $(document.createElement('td')); $_popemailtd.attr({'align': 'right'}); $_popemailtd.html('email'); $_popemail.append($_popemailtd); var $_popemailtd2 = $(document.createElement('td')); $_popemailtd2.attr({'align': 'left'}); var $_popemailinput = $(document.createElement('input')); $_popemailinput.attr({'id': 'email'}); $_popemailtd2.append($_popemailinput); $_popemail.append($_popemailtd2); $_poptable.append($_popemail); var $_popsabecancel = $(document.createElement('tr')); var $_popsabecanceltd = $(document.createElement('td')); $_popsabecanceltd.attr({'align': 'right'}); $_popsabecancel.append($_popsabecanceltd); var $_popsabecanceltd2 = $(document.createElement('td')); $_popsabecanceltd2.attr({'align': 'right'}); $_popsabecanceltd2.css({ 'padding-top': '10px' }); var $_popsaveinput = $(document.createElement('input')); $_popsaveinput.attr({'id': 'Save', 'type': 'button', 'value': 'Save'}); $_popsaveinput.css({'margin-right': '5px'}); $_popsabecanceltd2.append($_popsaveinput); var $_popcancelinput = $(document.createElement('input')); $_popcancelinput.attr({'id': 'Cancel', 'type': 'button', 'value': 'button'}); $_popcancelinput.css({'margin-right': '5px'}); $_popsabecanceltd2.append($_popcancelinput); $_poptable.append($_popsabecanceltd2); $_popform.append($_poptable); $_popwindow.append($_poptitle); $_popwindow.append($_popform); $_popwindow.append($_popwindow); $('#middle').append($_popwindow); var usersinfo = []; for(var i=0; i < Users.length;i++){ usersinfo.push({ id: Users[i].id, username: Users[i].username, password: '******', email: Users[i].email }); } var source = { localdata: usersinfo, datatype: "array", datafields: [ { name: 'id', type: 'number' }, { name: 'username', type: 'string'}, { name: 'password', type: 'string'}, { name: 'email', type: 'string'} ], updaterow: function (rowid, rowdata, commit) { for(var i=0;i<users.length;i++) { if (users[i].id == rowdata.id) { users[i].username = rowdata.username; users[i].password = rowdata.password; users[i].email = rowdata.email; break; } } commit(true); } }; // initialize the input fields. $("#username").jqxInput({ theme: theme }); $("#password").jqxInput({ theme: theme }); $("#retypepsw").jqxInput({ theme: theme }); $("#email").jqxInput({ theme: theme }); $("#username").width(150); $("#username").height(23); $("#password").width(150); $("#password").height(23); $("#retypepsw").width(150); $("#retypepsw").height(23); $("#email").width(150); $("#email").height(23); var dataAdapter = new $.jqx.dataAdapter(source); var editrow = -1; // initialize jqxGrid $("#users").jqxGrid({ width: 850, height: fullheight, source: dataAdapter, pageable: true, autoheight: true, columns: [ { text: 'ID', datafield: 'id', editable: false, width: 50 }, { text: 'Username', datafield: 'username', width: 150 }, { text: 'Password', datafield: 'password', width: 150 }, { text: 'Email', datafield: 'email', width: 200 }, { text: 'Edit', datafield: 'Edit', width: 150, columntype: 'button', cellsrenderer: function () { return "Edit"; }, buttonclick: function (row) { // open the popup window when the user clicks a button. editrow = row; var offset = $("#users").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 = $("#users").jqxGrid('getrowdata', editrow); $("#username").val(dataRecord.username); $("#password").val(''); $("#retypepsw").val(''); $("#email").val(dataRecord.email); // show the popup window. $("#popupWindow").jqxWindow('open'); } } ] }); // initialize the popup window and buttons. $("#popupWindow").jqxWindow({ width: 250, resizable: false, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 }); $("#popupWindow").on('open', function () { $("#username").jqxInput('selectAll'); }); $("#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 = { username: $("#username").val(), password: $("#password").val(), retypepsw: $("#retypepsw").val(), email: $("#email").val()}; var rowID = $('#users').jqxGrid('getrowid', editrow); $('#users').jqxGrid('updaterow', rowID, row); $("#popupWindow").jqxWindow('hide'); } }); }
I do not understand what is the problem.
P.S. no errors and no warnings in developer tools.Hello shaliapin777,
Please, provide us with data or sample at JSFiddle.
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/ok
here is the fiddle
http://jsfiddle.net/shaliapin777/g8q27adm/
but I have not host to upload and add the links on the fiddle
so the code is same as I write hereP.S. Ket me know if you need screenshot.
Hello shaliapin777,
Here is your code with uploaded javascript and css links: http://jsfiddle.net/abpnja51/. Please, add html code for jqxGrid in the fiddle. You can find working functionality in Popup Editing demo .
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.