jQWidgets Forums

This topic contains 3 replies, has 3 voices, and was last updated by Pietervk 8 years ago.

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

Author

No refresh options are working Posts

May 12, 2017 at 4:27 pm No refresh options are working #93556

Participant

Hello
Firstly, thanks for great library. Now to my problem. I have 2 problems but I shall save the second problem for another post. What is the correct way to refresh a grid after update? I can see that my data is being returned correctly in firebug and I have tried several ways to refresh. I have tried these ways in my success code as I list below. I have posted my full code and would appreciate it if someone could point out my error. Many thanks.

var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid({ source: dataAdapter });

$('#jqxGrid').jqxGrid('updatebounddata');

$('#jqxGrid').jqxGrid('refresh');

<!DOCTYPE html>
<html lang="en">

<head>
   <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
   <link rel="stylesheet" href="../../jqwidgets/styles/jqx.ui-redmond.css" type="text/css" />
   <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
   <script type="text/javascript" src="../../jqwidgets/jqx-all.js"></script>
   <script type="text/javascript" src="../../scripts/gettheme.js"></script>
   <script type="text/javascript">
      $(document).ready(function() {
         var theme = 'ui-redmond';
				
         // prepare the data
         var source = {
            datatype: "json",
            datafields: [
               {
                  name: 'id',
                  type: 'number'
	       },
               {
                  name: 'slot'
	       },
               {
                  name: 'service'
	       },
               {
                  name: 'activity'
	       },
               {
                  name: 'department'
	       },
               {
                  name: 'company'
	       },
               {
                  name: 'user'
	       },
               {
                  name: 'item'
	       },
               {
                  name: 'filebox'
	       },
               {
                  name: 'destroyedby'
	       },
               {
                  name: 'destroyedbydate',
                  type: 'date',
                  format: 'yyyy-MM-dd HH:mm:ss'
	       },
               {
                  name: 'destdate',
                  type: 'date',
                  format: 'd'
	       },
               {
                  name: 'date',
                  type: 'date',
                  format: 'd'
	       },
               {
                  name: 'type'
	       },
	    ],
            id: 'id',
            url: 'data.php',
            //        editrow: function(rowid, rowdata, commit) {
            //          // synchronize with the server - send edit command
            //          var data = "edit=true&id=" + rowid;
            //					
            //          $.ajax({
            //            dataType: 'json',
            //            url: 'data.php',
            //            data: data,
            //            success: function(data, status, xhr) {
            //              // delete command is executed.
            //              //console.log(service);
            //            }
            //          });
            //		commit(true);
            //        },
            //        actionrow: function(actrowid) {
            //          // synchronize with the server - send action command
            //          var data = "action=true&id=" + actrowid;
            //          alert(actrowid);
            //          $.ajax({
            //            dataType: 'json',
            //            url: 'data.php',
            //            data: data,
            //            success: function(data, status, xhr) {
            //              // delete command is executed.
            //              //console.log(data);
            //            }
            //          });
            //        }
         };
         // initialize the input fields.
         $("#id").addClass('jqx-input');
         $("#service").addClass('jqx-input');
         $("#slot").width(150);
         $("#slot").height(23);
         $("#activity").width(150);
         $("#activity").height(23);
         $("#department").width(150);
         $("#department").height(23);
         $("#company").width(150);
         $("#company").height(23);
         $("#user").width(150);
         $("#user").height(23);
         $("#item").width(150);
         $("#item").height(23);
         $("#filebox").width(150);
         $("#filebox").height(23);
         $("#destroyedbydate").width(150);
         $("#destroyedbydate").height(23);
         $("#destdate").width(150);
         $("#destdate").height(23);
         $("#date").width(150);
         $("#date").height(23);
         $("#rack").width(150);
         $("#rack").height(23);
         $("#row").width(150);
         $("#row").height(23);
         $("#column").width(150);
         $("#column").height(23);
         $("#bay").width(150);
         $("#bay").height(23);
				
         if(theme.length > 0) {
            $("#id").addClass('jqx-input-' + theme);
            $("#service").addClass('jqx-input-' + theme);
         }
         
         $("#editrowbutton").jqxButton({
            theme: theme
         });
				
         $("#actionrowbutton").jqxButton({
            theme: theme
         });
				
         var dataAdapter = new $.jqx.dataAdapter(source);
         var editrow = -1;
         var acteditrow = -1;
				
         // initialize jqxGrid
         $("#jqxgrid").jqxGrid(
         {
            width: '100%',
            height: '100%',
            source: dataAdapter,
            theme: theme,
            pageable: true,
            sortable: true,
            filterable: true,
            autoheight: false,
            pagesizeoptions: ['10', '20', '30', '40'],
            rowdetails: true,
            selectionmode: 'singlecell',
            columnsResize: true,
            columns: [
               {
                  text: 'Id',
                  datafield: 'id',
                  width: 40,
                  hidden: true,
               },
               {
                  text: 'Slot',
                  datafield: 'slot',
                  width: 76
               },
               {
                  text: 'Service',
                  datafield: 'service',
                  width: 114
               },
               {
                  text: 'Activity',
                  datafield: 'activity',
                  width: 138,
                  cellsalign: 'left'
               },
               {
                  text: 'Department',
                  datafield: 'department',
                  width: 130,
                  cellsalign: 'left'
               },
               {
                  text: 'Company',
                  datafield: 'company',
                  width: 70,
                  cellsalign: 'left'
               },
               {
                  text: 'User',
                  datafield: 'user',
                  width: 116,
                  cellsalign: 'left'
               },
               {
                  text: 'Item',
                  datafield: 'item',
                  width: 140,
                  cellsalign: 'left'
               },
               {
                  text: 'Filebox',
                  datafield: 'filebox',
                  width: 50,
                  cellsalign: 'left'
               },
               {
                  text: 'Destroyed By Date',
                  datafield: 'destroyedbydate',
                  width: 90,
                  hidden: true,
                  cellsalign: 'left'
               },
               {
                  text: 'Destruction Date',
                  datafield: 'destdate',
                  width: 120,
                  cellsalign: 'left',
                  columntype: 'datetimeinput',
                  cellsformat: 'dd/MM/yyyy',
                  filtertype: 'date'
               },
               {
                  text: 'Intake Date',
                  datafield: 'date',
                  width: 150,
                  cellsalign: 'left',
                  columntype: 'datetimeinput',
                  cellsformat: 'dd/MM/yyyy HH:mm:ss',
                  filtertype: 'date'
               },
               {
                  text: 'Edit',
                  datafield: 'Edit',
                  columntype: 'button',
                  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) + 360,
                           y: parseInt(offset.top) + 60
                        }
                     });
										
                     // get the clicked row's data
                     var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
                     $("#slot").val(dataRecord.slot);
                     $("#department").val(dataRecord.department);
                     $("#company").val(dataRecord.company);
                     $("#activity").val(dataRecord.activity);
                     $("#item").val(dataRecord.item);
                     // show the popup window.
                     //alert(editrow);
                     $("#popupWindow").jqxWindow('show');
                     //console.log(dataRecord.slot);
                  }
		  },
               	{
                  text: 'Action',
                  datafield: 'Action',
                  columntype: 'button',
                  cellsrenderer: function() {
                     return "Action";
                  },
                  buttonclick: function(row) {
                     // open the popup window when the user clicks a button.
                     editrow = row;
                     var offset = $("#jqxgrid").offset();
                     $("#actionWindow").jqxWindow({
                        position: {
                           x: parseInt(offset.left) + 360,
                           y: parseInt(offset.top) + 60
                        }
                     });
                     // get the clicked row's data and initialize the input fields.
                     var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
                     var activity = dataRecord.activity;
                     if(activity == "New Intake") {
                        $("#rack").val(dataRecord.rack);
                        $("#row").val(dataRecord.row);
                        $("#column").val(dataRecord.column);
                        $("#bay").val(dataRecord.bay);
                        // show the popup window.
                        $("#actionWindow").jqxWindow('show');
                     }
                     //IF NOT NEW INTAKE CONTINUE WITH PROCESSING WITHOUT SHOWING WINDOW
                  }
		},
	     ]
         });
         //            $("#jqxgrid").bind('cellclick', function (event) {
         //                if (event.args.datafield == 'Edit') {
         //                    // 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) + 360, y: parseInt(offset.top) + 160} });
         //
         //                    // get the clicked row's data and initialize the input fields.
         //                    var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
         //                    $("#slot").val(dataRecord.slot);
         //                    $("#department").val(dataRecord.department);
         //                    $("#company").val(dataRecord.company);
         //                    //$("#quantity").jqxNumberInput({ decimal: dataRecord.quantity });
         //                    //$("#price").jqxNumberInput({ decimal: dataRecord.price });
         //										$("#item").val(dataRecord.item);
         //                    // show the popup window.
         //										//alert(editrow);
         //                    $("#popupWindow").jqxWindow('show');
         //										//console.log(dataRecord);
         //                    
         //                }
         //            });
         //            $("#jqxgrid").bind('cellclick', function (event) {
         //                if (event.args.datafield == 'Action') {
         //                    // open the popup window when the user clicks a button.
         //                    acteditrow = event.args.rowindex;
         //                    var offset = $("#jqxgrid").offset();
         //                    $("#actionWindow").jqxWindow({ position: { x: parseInt(offset.left) + 360, y: parseInt(offset.top) + 160} });
         //
         //                    // get the clicked row's data and initialize the input fields.
         //                    var actdataRecord = $("#jqxgrid").jqxGrid('getrowdata', acteditrow);
         //                    $("#rack").val(actdataRecord.rack);
         //                    $("#row").val(actdataRecord.row);
         //                    $("#column").val(actdataRecord.column);
         //                    $("#bay").val(actdataRecord.bay);
         //                    //alert(acteditrow);
         //                    // show the popup window.
         //                    $("#actionWindow").jqxWindow('show');
         //                    
         //                }
         //            });
         // initialize the popup edit window and buttons.
         $("#popupWindow").jqxWindow({
            width: 270,
            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 = {
                  slot: $("#slot").val(),
                  activity: $("#activity").val(),
                  department: $("#department").val(),
                  company: $("#company").val(),
                  item: $("#item").val()
               };
               var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow);
               $('#jqxgrid').jqxGrid('updaterow', editrow, row);
               $("#popupWindow").jqxWindow('hide');
               //alert(editrow);
            }
                var data = "edit=edit" + 
		"&slot=" + row.slot + 
		"&activity=" + row.activity + 
		"&department=" + row.department + 
		"&company=" + row.company + 
		"&item=" + row.item + 
		"&id=" + rowID;
            
            $.ajax({
               cache: false,
               dataType: 'json',
               url: 'data.php',
               data: data,
               success: function(data, status, xhr) {
                  
                  var dataAdapter = new $.jqx.dataAdapter(source);
                  $("#jqxgrid").jqxGrid({ source: dataAdapter });
                 
               }
            });
            $('#jqxGrid').jqxGrid('updatebounddata');
         });
         $('#jqxGrid').jqxGrid('refresh');
         // initialize the action window and buttons.
         $("#actionWindow").jqxWindow({
            width: 250,
            resizable: false,
            theme: theme,
            isModal: true,
            autoOpen: false,
            cancelButton: $("#Cancel"),
            modalOpacity: 0.01
         });
         $("#Cancel").jqxButton({
            theme: theme
         });
         $("#Action").jqxButton({
            theme: theme
         });
				
         // update the action row when the user clicks the 'action' button.
         $("#Action").click(function() {
            if(acteditrow >= 0) {
               var row = {
                  rack: $("#rack").val(),
                  row: $("#row").val(),
                  column: $("#column").val(),
                  bay: $("#row").val(),
               };
							
               var rowid = $('#jqxgrid').jqxGrid('getrowid', acteditrow);
							
               $('#jqxgrid').jqxGrid('updaterow', acteditrow, row);
               $("#actionWindow").jqxWindow('hide');
            }
					 
            var data = "edit=edit&slot=" + row.slot + "&activity=" + row.activity + "&department=" + row.department + "&company=" + row.company + "&item=" + row.item + "&id=" + rowid;
            $.ajax({
               cache: false,
               dataType: 'json',
               url: 'data.php',
               data: data,
               success: function(data, status, xhr) {
                  // delete command is executed.
                  //console.log(service);
                  var dataAdapter = new $.jqx.dataAdapter(source);
                  $("#jqxgrid").jqxGrid({ source: dataAdapter });
               }
            });
         });
      });
   </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" style="width: 300px !important;">
         <div>Edit</div>
         <div style="overflow: hidden;">
            <table>
               <tr>
                  <td align="right">Slot:</td>
                  <td align="left"><input id="slot" /></td>
               </tr>
               <tr>
                  <td align="right">Activity:</td>
                  <td align="left"><input id="activity" /></td>
               </tr>
               <tr>
                  <td align="right">Department:</td>
                  <td align="left"><input id="department" /></td>
               </tr>
               <tr>
                  <td align="right">Company:</td>
                  <td align="left"><input id="company" /></td>
               </tr>
               <tr>
                  <td align="right">Item:</td>
                  <td align="left"><input id="item" /></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 id="actionWindow">
         <div>Action Intake</div>
         <div style="overflow: hidden;">
            <table>
               <tr>
                  <td align="right">Rack:</td>
                  <td align="left"><input id="rack" /></td>
               </tr>
               <tr>
                  <td align="right">Row:</td>
                  <td align="left"><input id="row" /></td>
               </tr>
               <tr>
                  <td align="right">Column:</td>
                  <td align="left"><input id="column" /></td>
               </tr>
               <tr>
                  <td align="right">Bay:</td>
                  <td align="left"><input id="bay" /></td>
               </tr>
               <tr>
                  <td align="right"></td>
                  <td style="padding-top: 10px;" align="right"><input style="margin-right: 5px;" type="button" id="Action" value="Action" /><input id="Cancel" type="button" value="Cancel" /></td>
               </tr>
            </table>
         </div>
      </div>
   </div>
</body>

</html>

May 15, 2017 at 10:06 am No refresh options are working #93584

Hristo

Participant

Hello mr_putersmit,

It is a big source code and we do not have the practice to revise that kind of code.
I try to test your example and found two places where you try to use the incorrect selector.
The selectors are case sensitive. Please, change “$(‘#jqxGrid’).jqxGrid(‘refresh’);” with $('#jqxgrid').jqxGrid('refresh');.
Also, the same thing when using updatebounddata method. $(‘#jqxgrid’)

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

May 17, 2017 at 8:18 am No refresh options are working #93675

mr_putersmit

Participant

Thank you for support Hristo

May 24, 2017 at 9:35 am No refresh options are working #93829

Pietervk

Participant

For me this works:
1) not recreate the dataAdapter, just use the existing variable
2) refresh:


function updateGrid() {
  if ($('#jqxgrid').is(":visible")) {
     $("#jqxgrid").jqxGrid({ source: dataAdapter });
     $('#jqxGrid').jqxGrid('updatebounddata',"cells");

}
}
`

Author

Posts

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

You must be logged in to reply to this topic.