jQWidgets Forums
Forum Replies Created
-
Author
-
April 26, 2018 at 2:34 am in reply to: Grid with Custom Editor column Grid with Custom Editor column #99910
I did look at the forum topic you suggested and it was minimally helpful. I incorporated the code from the example but it did not solve my problems. Please read my previous posting. There continues to be TWO problems. One is that when a cell with a jqxInput editor attached is clicked on the value disappears. It reappears when the cell is clicked on a second time or a different cell is selected. The second problem is that when an item is chosen from a dropdown list the associated cell is updated with that value but that new value is replaced by the old value as soon as a different cell in the grid is selected. Please advise as to how to correct these two problems.
April 24, 2018 at 2:25 am in reply to: Grid with Custom Editor column Grid with Custom Editor column #99853Below is an update to the previous code, but it still doesn’t work properly.
The problems are these:
1. Clicking on an “input editor” cell blanks out the cell value. Moving to another
row and clicking restores the value in the original cell.
2. After choosing a different item in a “dropdown editor” cell and moving to another
row the cell rewrites to its former value.Please advise as to how to correct these problems.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css" /> <link rel="stylesheet" href="/css/site.css" /> <link rel="stylesheet" href="/lib/jqwidgets/styles/jqx.base.css" /> <link rel="stylesheet" href="/lib/jqwidgets/styles/jqx.darkblue.css" /> <script src="/lib/jquery/dist/jquery.js"></script> <script src="/lib/bootstrap/dist/js/bootstrap.js"></script> <script src="/lib/jqwidgets/jqxcore.js"></script> <script src="/lib/jqwidgets/jqx-all.js"></script> <script src="/js/jquery.form.js"></script> <script src="/js/site.js?v=ji3-IxbEzYWjzzLCGkF1KDjrT2jLbbrSYXw-AhMPNIA"></script> </head> <body> <div class="row"> <div class="col-sm-offset-3 col-md-offset-3"> <div class="col-sm-7 col-md-7"> <div class="bg-primary panel-body"><center><h4>Sessions</h4></center></div> <input type="hidden" name="mode" id="mode" value="Parent" /> <div id="jqxSchedule"></div> <br /> </div> </div> </div> </div> <script> var groupsrenderer = function (text, group, expanded) { return '<div style="padding-top:5px;">' + group + '</div>'; } $(document).ready(function () { var ddraw = [{"pkey":0,"type":"S","fname":"(Available)","lname":"","personid":"S0","name":"(Available) "},{"pkey":5,"type":"S","fname":"James","lname":"Jones","personid":"S5","name":"James Jones"},{"pkey":4,"type":"S","fname":"Lily","lname":"Jones","personid":"S4","name":"Lily Jones"}]; var ddsource = { datatype: 'json', datafields: [ { name: 'pkey', type: 'int' }, { name: 'type', type: 'string' }, { name: 'fname', type: 'string' }, { name: 'lname', type: 'string' }, { name: 'personid', type: 'string' }, { name: 'name', type: 'string' } ], id: 'personid', localdata: ddraw, async: false }; var dddata = new $.jqx.dataAdapter(ddsource); dddata.dataBind(); var gridraw = [ {"pkey":1,"sessionkey":1,"daypart":"Friday June 15 AM","itemno":1,"type":"S","slot":"Student 1","id":"c9491ad3-9742-4301-8629-cb147f669713","person":2,"name":"Shannon Smith","editable":false,"personid":"S2"}, {"pkey":2,"sessionkey":1,"daypart":"Friday June 15 AM","itemno":2,"type":"S","slot":"Student 2","id":"c9491ad3-9742-4301-8629-cb147f669713","person":1,"name":"Kaylee Smith","editable":false,"personid":"S1"}, {"pkey":3,"sessionkey":1,"daypart":"Friday June 15 AM","itemno":3,"type":"S","slot":"Student 3","id":"6a619cdb-240c-49f5-ab97-1688dc3f4e7f","person":0,"name":"(Available) ","editable":true,"personid":"S0"}, {"pkey":4,"sessionkey":1,"daypart":"Friday June 15 AM","itemno":4,"type":"S","slot":"Student 4","id":"6a619cdb-240c-49f5-ab97-1688dc3f4e7f","person":4,"name":"Lily Jones","editable":true,"personid":"S4"}, {"pkey":5,"sessionkey":1,"daypart":"Friday June 15 AM","itemno":5,"type":"S","slot":"Student 5","id":"6a619cdb-240c-49f5-ab97-1688dc3f4e7f","person":5,"name":"James Jones","editable":true,"personid":"S5"}, {"pkey":6,"sessionkey":1,"daypart":"Friday June 15 AM","itemno":6,"type":"I","slot":"Instructor 1","id":"6a619cdb-240c-49f5-ab97-1688dc3f4e7f","person":1,"name":"Susan Jones","editable":true,"personid":"I1"}, {"pkey":7,"sessionkey":1,"daypart":"Friday June 15 AM","itemno":6,"type":"I","slot":"Instructor 2","id":"","person":0,"name":"(Available)","editable":false,"personid":"I0"}, {"pkey":8,"sessionkey":2,"daypart":"Friday June 15 PM","itemno":1,"type":"S","slot":"Student 1","id":"c9491ad3-9742-4301-8629-cb147f669713","person":2,"name":"Shannon Smith","editable":false,"personid":"S2"}, {"pkey":9,"sessionkey":2,"daypart":"Friday June 15 PM","itemno":2,"type":"S","slot":"Student 2","id":"6a619cdb-240c-49f5-ab97-1688dc3f4e7f","person":5,"name":"James Jones","editable":true,"personid":"S5"}, {"pkey":10,"sessionkey":2,"daypart":"Friday June 15 PM","itemno":3,"type":"S","slot":"Student 3","id":"c9491ad3-9742-4301-8629-cb147f669713","person":1,"name":"Kaylee Smith","editable":false,"personid":"S1"}, {"pkey":11,"sessionkey":2,"daypart":"Friday June 15 PM","itemno":4,"type":"S","slot":"Student 4","id":"6a619cdb-240c-49f5-ab97-1688dc3f4e7f","person":4,"name":"Lily Jones","editable":true,"personid":"S4"}, {"pkey":12,"sessionkey":2,"daypart":"Friday June 15 PM","itemno":5,"type":"S","slot":"Student 5","id":"6a619cdb-240c-49f5-ab97-1688dc3f4e7f","person":0,"name":"(Available) ","editable":true,"personid":"S0"}, {"pkey":13,"sessionkey":2,"daypart":"Friday June 15 PM","itemno":6,"type":"I","slot":"Instructor 1","id":"","person":0,"name":"(Available)","editable":false,"personid":"I0"}, {"pkey":14,"sessionkey":2,"daypart":"Friday June 15 PM","itemno":6,"type":"I","slot":"Instructor 2","id":"6a619cdb-240c-49f5-ab97-1688dc3f4e7f","person":1,"name":"Susan Jones","editable":true,"personid":"I1"}, {"pkey":15,"sessionkey":4,"daypart":"Saturday June 16 PM","itemno":1,"type":"S","slot":"Student 1","id":"6a619cdb-240c-49f5-ab97-1688dc3f4e7f","person":5,"name":"James Jones","editable":true,"personid":"S5"}, {"pkey":16,"sessionkey":4,"daypart":"Saturday June 16 PM","itemno":2,"type":"S","slot":"Student 2","id":"6a619cdb-240c-49f5-ab97-1688dc3f4e7f","person":0,"name":"(Available) ","editable":true,"personid":"S0"}, {"pkey":17,"sessionkey":4,"daypart":"Saturday June 16 PM","itemno":3,"type":"S","slot":"Student 3","id":"6a619cdb-240c-49f5-ab97-1688dc3f4e7f","person":0,"name":"(Available) ","editable":true,"personid":"S0"}, {"pkey":18,"sessionkey":4,"daypart":"Saturday June 16 PM","itemno":4,"type":"S","slot":"Student 4","id":"6a619cdb-240c-49f5-ab97-1688dc3f4e7f","person":0,"name":"(Available) ","editable":true,"personid":"S0"}, {"pkey":19,"sessionkey":4,"daypart":"Saturday June 16 PM","itemno":5,"type":"S","slot":"Student 5","id":"6a619cdb-240c-49f5-ab97-1688dc3f4e7f","person":0,"name":"(Available) ","editable":true,"personid":"S0"}, {"pkey":20,"sessionkey":4,"daypart":"Saturday June 16 PM","itemno":6,"type":"I","slot":"Instructor 1","id":"","person":0,"name":"(Available)","editable":false,"personid":"I0"}, {"pkey":21,"sessionkey":4,"daypart":"Saturday June 16 PM","itemno":6,"type":"I","slot":"Instructor 2","id":"","person":0,"name":"(Available)","editable":false,"personid":"I0"} ]; var gridsource = { datatype: 'json', dataFields: [ { name: 'pkey', type: 'int' }, { name: 'sessionkey', type: 'int' }, { name: 'daypart', type: 'string' }, { name: 'itemno', type: 'int' }, { name: 'type', type: 'string' }, { name: 'slot', type: 'string' }, { name: 'id', type: 'string' }, { name: 'person', type: 'int' }, { name: 'name', type: 'string' }, { name: 'editable', type: 'boolean' }, { name: 'personid', type: 'string' } ], id: 'pkey', localdata: gridraw, async: false }; var griddata = new $.jqx.dataAdapter(gridsource); griddata.dataBind(); $('#jqxSchedule').jqxGrid({ source: griddata, width: '100%', groupable: true, editable: true, groups: ['daypart'], groupsrenderer: groupsrenderer, showheader: false, showsortmenuitems: false, showgroupmenuitems: false, columns: [ { text: 'pkey', datafield: 'pkey', hidden: true }, { text: 'sessionkey', datafield: 'sessionkey', hidden: true }, { text: 'Session', datafield: 'daypart', editable: false, hidden: true }, { text: 'Slot', datafield: 'slot', editable: false, groupable: false, width: '25%' }, { text: 'Name', datafield: 'personid', displayfield: 'name', columntype: 'custom', createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) { var rowdata = $('#jqxSchedule').jqxGrid('getrowdata', row); if (rowdata.editable) { editor.jqxDropDownList({ source: dddata, displayMember: 'name', valueMember: 'personid' }); editor.jqxDropDownList({ promptText: "", placeHolder: "" }); } else { editor.jqxInput({ source: griddata, displayMember: 'name', width: cellwidth, height: cellheight }); var inputElement = $("<input readonly/>").prependTo(editor); } }, initeditor: function (row, cellvalue, editor, celltext, pressedChar) { var rowdata = $('#jqxSchedule').jqxGrid('getrowdata', row); if (!rowdata.editable) { var inputField = editor.find('input'); inputField.val(rowdata.name); } else if (typeof celltext != 'undefined' && celltext != "") { if (celltext.substring(1, 2) == "0") { editor.jqxDropDownList('selectIndex', 0); } else { var i = editor.jqxDropDownList('getItemByValue', celltext); editor.jqxDropDownList('selectIndex', i.index); } } }, geteditorvalue: function (row, celltext, editor) { var rowdata = $('#jqxSchedule').jqxGrid('getrowdata', row); return (rowdata.editable) ? editor.val() : editor.find('input').val(); } } ] }); $('#jqxSchedule').jqxGrid('showgroupsheader', false); $("#jqxSchedule").on('cellvaluechanged', function (event) { if (args.newvalue == "") return; if (args.newvalue == null) return; var rowdata = $('#jqxSchedule').jqxGrid('getrowdata', args.rowindex); var url = '/Schedule/UpdateChoice/' + rowdata.sessionkey; $.ajax({ type: "POST", url: url, data: { oldvalue: args.oldvalue, newvalue: args.newvalue }, success: function () { // location.reload(); }, error: function () { // alert("Bad news"); } }); }); }); </script> </body> </html>October 26, 2017 at 10:14 pm in reply to: Problem with Google Chrome Problem with Google Chrome #96957Is this going to be fixed soon? It’s a show-stopper for me if not.
September 29, 2016 at 3:56 pm in reply to: Minimized Menu with Right Justified Icon Minimized Menu with Right Justified Icon #87802This isn’t quite what I was looking for. I would like to have the help icon right justified (completely on the right) on the menu bar plus to have it so that even if the menu is minimized the help icon is still visible on the right.
You’re right! Sorry about that. Thank you for your help.
Here’s the output from the console.log(data) statement:
[{“key”:1,”type”:”Engine”,”date”:”2016-09-01T00:00:00″,”cost”:234.0},{“key”:2,”type”:”Interior”,”date”:”2016-07-01T00:00:00″,”cost”:12.0},{“key”:3,”type”:”Wheels”,”date”:”2011-08-19T00:00:00″,”cost”:200.0},{“key”:4,”type”:”Bumpers”,”date”:”2006-01-12T00:00:00″,”cost”:300.0}]
Peter,
You’re right. It was a css problem. For those of you playing at home, the default project generated by ASP .Net Core includes a site.css file that sets a maxwidth of 280px for input, select and textareas. That’s what caused the problem
You are misunderstanding the question. It’s not that I’m not getting anything back from the server, it’s that the GET request to the server is never sent, which I can tell by looking at the network traffic in the debug mode of my browser. However I serendipitously solved the problem myself. I replaced all the script requests for the individual jqx javascript files (jqxcore, jqxdata, jqxgrid, etc.) as shown in all the examples with a single request for jqx-all.js. Then everything worked. It appears that jqx-all.js contains more than just the individual .js files listed in the example code.
-
AuthorPosts