jQWidgets Forums

Tagged: #jqwidgets-grid, grid, grid customeditor, javascript grid, jquery grid

This topic contains 6 replies, has 3 voices, and was last updated by Hristo 7 years, 1 month ago.

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

Author

Grid with Custom Editor column Posts

April 11, 2018 at 3:28 pm Grid with Custom Editor column #99674

Participant

I am trying to create a grid with a custom editor column. The editor for the column should be a dropdown list if the boolean value editable in the row data is true. Otherwise it should just show the value of the datafield name. I am having no success getting this to work, Please see the code below:


<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title> - Sailing School</title>

   
      <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="container body-content">      
   <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="Public" />
            <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
         };
         var dddata = new $.jqx.dataAdapter(ddsource, { autobind: true });

         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":1,"name":"Kaylee Smith","editable":false,"personid":"S1"},
            {"pkey":2,"sessionkey":1,"daypart":"Friday June 15 AM","itemno":2,"type":"S","slot":"Student 2","id":"c9491ad3-9742-4301-8629-cb147f669713","person":2,"name":"Shannon Smith","editable":false,"personid":"S2"},
            {"pkey":3,"sessionkey":1,"daypart":"Friday June 15 AM","itemno":3,"type":"S","slot":"Student 3","id":"6a619cdb-240c-49f5-ab97-1688dc3f4e7f","person":5,"name":"James Jones","editable":true,"personid":"S5"},
            {"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":0,"name":" ","editable":true,"personid":"S0"},
            {"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":"","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":" ","editable":true,"personid":"S0"},
            {"pkey":13,"sessionkey":2,"daypart":"Friday June 15 PM","itemno":6,"type":"I","slot":"Instructor 1","id":"","person":0,"name":"","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":" ","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":" ","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":" ","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":" ","editable":true,"personid":"S0"},
            {"pkey":20,"sessionkey":4,"daypart":"Saturday June 16 PM","itemno":6,"type":"I","slot":"Instructor 1","id":"","person":0,"name":"","editable":false,"personid":"I0"},
            {"pkey":21,"sessionkey":4,"daypart":"Saturday June 16 PM","itemno":6,"type":"I","slot":"Instructor 2","id":"","person":0,"name":"","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: 'personid', type: 'string' },
               { name: 'name', type: 'string' },
               { name: 'name1', value: 'personid', values: { source: dddata.records, value: 'personid', name: 'name' } },
               { name: 'editable', type: 'boolean' }
            ],
            id: 'pkey',
            localdata: gridraw
         };

         var griddata = new $.jqx.dataAdapter(gridsource);

         $('#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: 'name1', 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' });
                     }
                     else {
                        editor.jqxInput();
                     }
                  },
               initeditor: function (row, cellvalue, editor, celltext, pressedChar) {
                  var rowdata = $('#jqxSchedule').jqxGrid('getrowdata', row);
                  if (!rowdata.editable)
                     return;

                  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);
                     if (rowdata.editable) {
                        var i = editor.jqxDropDownList('getItemByValue', rowdata.type+rowdata.uid);
                        editor.jqxDropDownList('selectIndex', i.index);
                     }
                     else {
                        editor.jqxInput('val', rowdata.name);
                     }
                  }
                  */
               }
            ]
         });

         $('#jqxSchedule').jqxGrid('showgroupsheader', false);

         $("#jqxSchedule").on('cellvaluechanged', function (event) {
            if (args.newvalue == "")
               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.value },
               success: function () {
                  // location.reload();
               },
               error: function () {
                  // alert("Bad news");
               }
            });
         });
      });
   </script>

</body>
</html>

April 18, 2018 at 11:22 am Grid with Custom Editor column #99763

Hristo

Participant

Hello tcorrigan5,

When using jqxInput you should use the “<input/>” tag for it.
You could try to use this approach:

else {
	var inputElement = $("<input/>").prependTo(editor);
	inputElement.jqxInput();
}

Please, take a look at this topic:
https://www.jqwidgets.com/community/topic/jqxinput-in-grid/

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

April 24, 2018 at 2:25 am Grid with Custom Editor column #99853

tcorrigan5

Participant

Below 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>

April 25, 2018 at 10:32 am Grid with Custom Editor column #99886

Hristo

Participant

Hello tcorrigan5,

Please, take a look at this forum topic as I mentioned before:
https://www.jqwidgets.com/community/topic/jqxinput-in-grid/#post-71091
It demonstrates how to implement the jqxInput into the Grid.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

April 26, 2018 at 2:34 am Grid with Custom Editor column #99910

tcorrigan5

Participant

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 26, 2018 at 7:52 am Grid with Custom Editor column #99915

Peter Stoev

Keymaster

We already have online demo with Custom Editor: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/cellcustomediting.htm?light. I suggest you looking at it. Also the column’s type should be ‘template’.

April 26, 2018 at 7:56 am Grid with Custom Editor column #99916

Hristo

Participant

Hello tcorrigan5,

Please, provide us one simple example that demonstrates this case.
It will be better for testing in https://www.jseditor.io/ or https://fiddle.jshell.net/

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.