Grid and JQWindow Issue

[raybtwoParticipant]

A little bit of background before I jump into the issue I am having. I am in the process of updating a web application that went into use back in 2014. Mainly I am focused on updating the various code libraries that the application uses such as JQWidgets and JQuery to their most recent versions. Note also that I am not the original developer of the app.

I have updated JQWidgets from version 3.4.0 to version 14.

The only issue I have run into at this point is with a grid. I have a grid with an edit button that when clicked pops up a window so that comments can be added to the entry. After updating to version 14 when I click on the edit button the grid completely locks up and is unresponsive until the browser is refreshed.

There are no errors in the Chrome developers console. Any ideas what might be causing this?

Here is the code:

$("#jqxgrid").jqxGrid({
    width:1220,
    source: dataAdapter,
    pageable: true,
    virtualmode: true,
    theme: 'material',
    pagermode: 'simple',
    rendergridrows: function (params) {
      return params.data;
    },
    autoheight: true,
    showtoolbar: true,
    rendertoolbar: function (toolbar) {
      var me = this;
      var container = $("<div style='margin: 5px;'></div>");
      var span = $("<span style='float: left; margin-top: 5px; margin-right: 4px; height: 100px;'>Clear Filters: </span>");
      var input = $("<input id='btnClearAll' type='button' value='Clear' style='height: 30px important!;' />");

      toolbar.append(container);
      container.append(span);
      container.append(input);

      input.on('click', function (event) {
        var filterinfo = $("#jqxgrid").jqxGrid('getfilterinformation');

        if(parseInt(filterinfo.length) > 0) {
        	$("#jqxgrid").jqxGrid('clearfilters');
        }
      });
    },
    editable: true,
    pagesize: 20,
    rowdetails: true,
    sortable: true,
    rowdetailstemplate: {
      rowdetails: "<div style='margin: 10px;'><ul style='margin-left: 30px;'><li class='title'></li><li>Description</li><li>Attachments</li><li>Comments</li></ul><div class='information'></div><div class='description'></div><div class='attachments'></div><div class='comments'></div></div>",
      rowdetailsheight:200
    },
    initrowdetails: initRowDetails,
    filterable: true,
    showfilterrow: true,
    autoshowfiltericon: true,
    showfiltermenuitems: true,
    enabletooltips: true,
    autoshowloadelement: false,
    columns: [
      {
        text: 'Name', cellclassname: hasAttachClass, datafield: 'fullName', width: 140, editable: true,
        validation: function(cell, value) {
          var str = $.trim(value);
          var regex = /^[a-zA-Z ]+$/g;
          return regex.test(str);
        }
      },
      {
        text: 'Phone', cellclassname: hasAttachClass, datafield: 'phone', width: 120, editable: true,
        validation: function(cell, value) {
          var str = $.trim(value);
          var regex = /^[1-9][0-9]{2}[\-]?[1-9][0-9]{2}[\-]?[0-9]{4}$/g
          return regex.test(str);
        }
      },
      {
        text: 'User Type', cellclassname: hasAttachClass, columntype: 'dropdownlist', datafield: 'userTypeId', displayfield: 'userType', filteritems: userTypeFilterList, width: 120,
        createeditor: function (row, value, editor) {
          editor.jqxDropDownList({ source: userTypeDropDown, displayMember: 'name', valueMember: 'id' });
        }, filtertype: 'checkedlist', editable: true
      },
      {
        text: 'ISU Unit', cellclassname: hasAttachClass, columntype: 'dropdownlist', datafield: 'isuUnitId', displayfield: 'isuUnit', filteritems: isuUnitFilterList, width: 210,
        createeditor: function (row, value, editor) {
          editor.jqxDropDownList({ source: isuUnitDropDown, displayMember: 'name', valueMember: 'id' });
        }, filtertype: 'checkedlist', editable: true
      },
      {
    text: 'Analyst', cellclassname: hasAttachClass, columntype: 'dropdownlist', datafield: 'analystId', displayfield: 'analyst', filteritems: analystFilterList, filtertype: 'checkedlist', width: 120,
        createeditor: function (row, value, editor) {
          editor.jqxDropDownList({ source: analystDropDown, displayMember: 'shortName', valueMember: 'id' });
        }, editable: true
      },
      {
        text: 'Date Added', cellclassname: hasAttachClass, datafield: 'requestAdded', cellsformat: dateFormat, width: 120, columntype: 'datetimeinput', filtertype: 'date', editable: true,
        validation: function(cell, value) {
          return true;
        }
      },
      {
        text: 'Date Needed', cellclassname: hasAttachClass, datafield: 'requestDate', cellsformat: dateFormat, width: 120, columntype: 'datetimeinput', filtertype: 'date', editable: true,
        validation: function(cell, value) {
          var data = $('#jqxgrid').jqxGrid('getrowdata', cell.row);
          var reqDate = new Date(data.requestAdded);  //The DateAdded of the row in the database
          var needDate = new Date(value);

          reqDate.setHours(0, 0, 0 ,0);
          needDate.setHours(0, 0, 0 ,0);

          //if(reqDate > needDate) { return false; }

          return true;
        }
      },
      {
        text: 'Closed Date', cellclassname: hasAttachClass, columntype: 'datetimeinput', datafield: 'closedDate', cellsformat: dateFormat, width: 120, filtertype: 'date', editable: true,
        validation: function(cell, value) {
          if(value == "") { return true; }

          var data = $('#jqxgrid').jqxGrid('getrowdata', cell.row);
          var reqDate = new Date(data.requestAdded);  //The DateAdded of the row in the database
          var cloDate = new Date(value);

          reqDate.setHours(0, 0, 0 ,0);
          cloDate.setHours(0, 0, 0 ,0);

          //if(reqDate > cloDate) { return false; }

          return true;
        }
      },
      { text: 'Closed', cellclassname: hasAttachClass, columntype: 'checkbox', datafield: 'isClosed', width: 70, filtertype: 'boolean', filteritems: ['Open', 'Close'], editable: true },
	  { text: 'Edit', columntype: 'button',cellsrenderer: function () { return "Edit";},filterable:false,
	           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);
                     $("#txtComments").val(dataRecord.comments);                     
                     // show the popup window.
                     $("#popupWindow").jqxWindow('open');
                 }}
    ]
  });
  
  // initialize the popup window and buttons.
	$("#popupWindow").jqxWindow({
		width: 1250, resizable: false,  isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01           
	});
	$("#popupWindow").on('open', function () {
		
	}); 
	
	// update the edited row when the user clicks the 'Save' button.
	$("#Save").click(function () {
		if (editrow >= 0) {
		   var data = $('#jqxgrid').jqxGrid('getrowdata', editrow);
		   data.comments = $("#txtComments").val();
		   var rowID = data.id;	
            //alert(rowID);		
			 $.post("/datarequest/index.cfm?event=admin.update", {
			 id: rowID,
			 COLUMN: 'comments',
			 VAL: data.comments
			 }).done(function () {
					$("#jqxgrid").jqxGrid('updatebounddata');   //Refresh Data
				}).fail(function() {  });
			$("#popupWindow").jqxWindow('hide');
		}
	});
  
  var oVal;	//Original value
  var nVal;	//New column value
  var isDropDown = false;

  // events
  $("#jqxgrid").on('cellbeginedit', function (event) {
    var args = event.args;

    isDropDown = false;
    if(args.columntype === 'dropdownlist') {
      isDropDown = true;
    }
    oVal = args.value;
  });

  //Cell Edit Ends
  $("#jqxgrid").on('cellendedit', function (event) {
    var args = event.args;

    if(args.columntype === 'dropdownlist') {
      nVal = args.value.value;
    }
    else {
      nVal = args.value;
    }
  });

  //Cell edit end  save
  $("#jqxgrid").on('cellvaluechanged', function (event) {
    var args = event.args;
    var data = $('#jqxgrid').jqxGrid('getrowdata', args.rowindex);
    var reqId = data.id;	//The id of the row in the database
    var dataField = args.datafield;

   if(!isDropDown) {
      nVal = args.value;
   }
   //if(!nVal) { return; }
   if(oVal === nVal) { return; }

   $.post("/datarequest/index.cfm?event=admin.update", {
    id: reqId,
    COLUMN: dataField,
    VAL: nVal
   }).done(function () {
     $("#jqxgrid").jqxGrid('updatebounddata');   //Refresh Data
   }).fail(function() {
   });
  });

  $("#jqxgrid").on("filter", function (event) {
     $("#jqxgrid").jqxGrid('updatebounddata');   //Refresh Data
  });

  $("#jqxgrid").on("sort", function (event) {
     $("#jqxgrid").jqxGrid('updatebounddata');   //Refresh Data
  });

[svetoslav_borislavovParticipant]

Hi,

Can you please give me a demo? Meanwhile, have a look at the example with a popup editing:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/popupediting.htm
The best option would be to give me a demo (host it if needed)

Best regards,
Svetoslav Borislavov
jQWidgets Team

[raybtwoParticipant]

Thanks for the response Svetoslav. Let me see if I can come up with a demo for you. Right now the web app is behind the a firewall. Let me see if I can get it running on a public facing web server.

[Author]

Posts