[DollyBMember]

Hi Dimitar,
I have implemented the solution provided in the Customized Editors example. I am getting 3 errors when trying to edit the column.
<strong><span style="text-decoration:underline;">Error Details:</span></strong>
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; QS 4.2.4.0; QS 5.3.0.4; BTRS125009; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; MS-RTC LM 8; QS 4.2.4.0; QS 5.3.0.4; InfoPath.2)
Timestamp: Tue, 30 Oct 2012 04:50:42 UTC
Message: 'listBox' is null or not an object
Line: 1184
Char: 17
Code: 0
URI: http://marsvcd1.sw.ericsson.se:8085/eMatrix/jQuery/jqwidgets/jqxdropdownlist.js
Message: 'this.listBox' is null or not an object
Line: 773
Char: 13
Code: 0
URI: http://marsvcd1.sw.ericsson.se:8085/eMatrix/jQuery/jqwidgets/jqxdropdownlist.js
Message: 'self.editcell.editor.jqxDropDownList' is null or not an object
Line: 6430
Char: 41
Code: 0
URI: http://marsvcd1.sw.ericsson.se:8085/eMatrix/jQuery/jqwidgets/jqxgrid.js
<strong><span style="text-decoration:underline;">Included js files in the file I am working with:</span></strong>
<link rel="stylesheet" href="/eMatrix/jQuery/jqwidgets/styles/jqx.base.css" media="screen" />
    <link rel="stylesheet" href="/eMatrix/jQuery/jqwidgets/styles/jqx.classic.css" media="screen" />
    <link rel="stylesheet" href="/eMatrix/jQuery/styles/jqx.apireference.css" media="screen" />
    <link rel="stylesheet" href="/eMatrix/jQuery/styles/site.css" type="text/css" />
    <link rel="stylesheet" href="/eMatrix/jsp/mars/jquery/jqMars.css" type="text/css" />
    <script type="text/javascript" src="/eMatrix/jQuery/scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="/eMatrix/js/json2.js"></script> 
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/globalization/jquery.global.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxpanel.js"></script>  
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxdropdownbutton.js"></script> 
<strong><span style="text-decoration:underline;">Implemented logic for dropdown column:</span></strong>
for (var attribute in attrList) {
		  i++;
		  row = {};
		  props = 	attrList [attribute];
		  row["datafield"] = attribute;
		  row["text"] =  props["Caption"];
		  row["width"] =  100;
		  if(props["Range Use"] == "true"){
			var rangeVals = props["Range Values"];
			var dropDownListSource =
			{
				localdata: rangeVals,
				datatype: "array",
				datafields: "Priority",
				id: attribute
			};
			//var dropdownListAdapter = new $.jqx.dataAdapter(dropDownListSource, { autoBind: true, async: false });
			var list = ['Germany', 'Brazil', 'France'];
			row["columntype"] = "dropdownlist";
			row["createeditor"] = function (row, column, editor) {
									editor.jqxDropDownList({ source: list });
								};
			row["cellvaluechanging"] = function (row, column, columntype, oldvalue, newvalue) {
							                // return the old value, if the new value is empty.
							                if (newvalue == "") return oldvalue;
							            };					
		  }
		  
		  GridColumns[i] = row;
	  }

I am working on jqwidgets 2.5 version.

[DollyBMember]

Hi Dimitar,

Yes. I am able to fix the issue.
When I try to edit the cell, calendar icon is not visible. It is editing as a simple text.

What needs to be done to have calendar icon to select the date?

Thankx
DollyB

[DollyBMember]

Hi Dimitar,

Yes. I am able to fix the issue.
When I try to edit the cell, calendar icon is not visible. It is editing as a simple text.

What needs to be done to have calendar icon with the specified format?

Thankx
DollyB

[DollyBMember]

Hi Dimitar,

We upgraded the version to 2.4.2 and the error now shows, “Object doesn’t support this property or method”.
Following are the details ofthe error.

Error Details in IE:
Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; QS 4.2.4.0; QS 5.3.0.4; BTRS125009; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; MS-RTC LM 8; QS 4.2.4.0; QS 5.3.0.4; InfoPath.2)
Timestamp: Mon, 24 Sep 2012 06:48:33 UTC

Message: Object doesn’t support this property or method
Line: 1434
Char: 24
Code: 0
URI: http://marsvcd1.sw.ericsson.se:8085/eMatrix/jQuery/jqwidgets/jqxdata.js

Error Details in Firefox:

Timestamp: 24/09/2012 12:16:42
Error: TypeError: date.getTime is not a function
Source File: http://marsvcd1.sw.ericsson.se:8085/eMatrix/jQuery/jqwidgets/jqxdata.js
Line: 1434

Please suggest solution for this issue.

Regards
DollyB

[DollyBMember]

I tried your solution. But it is showing another warning message now for Date column, Object doesn’t support this property or mehtod

We are using 2.2 version of JQWidgets. U mean to say the solution works from v 2.4.1?

[DollyBMember]

Hi Dimitar,

Thankx a lot for the solution. We implemented it. It worked fine.
1) But, one of the grid column is set to Date type, and the properties set are,

row[“columntype”] = ‘datetimeinput’;
row[“cellsformat”] = ‘yyyy-MM-dd’;

The solution you gave for greying out the rows doesn’t work from the column which has Date type set with above properies. It throws an warning message saying, Bad number format specifier: Y
The javascript error details are as below.

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; QS 4.2.4.0; QS 5.3.0.4; BTRS125009; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; MS-RTC LM 8; QS 4.2.4.0; QS 5.3.0.4)
Timestamp: Wed, 12 Sep 2012 08:01:42 UTC

Message: Exception thrown and not caught
Line: 7
Char: 16953
Code: 0
URI: http://marsvcd1.sw.ericsson.se:8085/eMatrix/jQuery/jqwidgets/jqxdata.js
2) If I remove the cellsformat property, greying ou is happening fine but when we try to edit the Date cell, we are not able to see the Calendar window.

The script files we are including are,

jquery/jqwidgets/styles/jqx.base.css
jquery/scripts/jquery-1.7.2.min.js
jquery/scripts/gettheme.js
jquery/jqwidgets/jqx-all.js
js/json2.js

Please provide solutions for these 2 issues if I am doing anything wrong.

[DollyBMember]

[DollyBMember]

Hi Dimitar,

Thankx a lot for the solution. We implemented it. It worked fine.
1) But, one of the grid column is set to Date type, and the properties set are,

row[“columntype”] = ‘datetimeinput’;
row[“cellsformat”] = ‘yyyy-MM-dd’;

The solution you gave for greying out the rows doesn’t work from the column which has Date type set with above properies. It throws an warning message saying, Bad number format specifier: Y

The javascript error details are as below.

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; QS 4.2.4.0; QS 5.3.0.4; BTRS125009; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; MS-RTC LM 8; QS 4.2.4.0; QS 5.3.0.4)
Timestamp: Wed, 12 Sep 2012 08:01:42 UTC

Message: Exception thrown and not caught
Line: 7
Char: 16953
Code: 0
URI: http://marsvcd1.sw.ericsson.se:8085/eMatrix/jQuery/jqwidgets/jqxdata.js

2) If I remove the cellsformat property, greying ou is happening fine but when we try to edit the Date cell, we are not able to see the Calendar window.

Please provide solutions for these 2 issues if I am doing anything wrong.

The script files we are including are,

[DollyBMember]

Hi Peter,

You are doing the validation on loading the data into Grid.
But I want to do integer validation on cell edit and show an alert message if value is not an integer and revert back the new value.
How do I acheive this?

I tried like,

$("#jqxgridDR").bind('cellendedit', function (event) {
        	var attrProp = [];
			attrProp = reqJsonAttrTemplate [event.args.datafield];
			if(event.args.datafield != "revision"){
			if(attrProp["Integer"] == "true"){
				if(!(/^[0-9]+$/.test(event.args.value))){
					alert(attrProp["Caption"]+" must be Integer !");						
					$("#jqxgridDR").jqxGrid('setcellvalue', event.args.rowindex, event.args.datafield, event.args.oldvalue);
					$('#jqxgridDR').jqxGrid('render');	
				}													 
			}
			}
        		
}

But it throws ‘this.editcell is null or not an object’. It is happening because of the last two lines shown above. Please suggest me the solution.

I have mailed the entire samle code to support mail id. Please have a look and suggest me the solution if you have any.

Thankx
DollyB.

[DollyBMember]

Hi Dimitar,

Thankx. But it doesn’t work for me!! 🙁

I sent my code sample to support@jqwidgets.com.
Could you please have a look and tell me wht I am doing actually wrong?

Thankx
DollyB.

[DollyBMember]

Hi Peter,

Sent the code sample through mail.

Thankx
DollyB.

[DollyBMember]

Hi Peter,

Thankx.
In the example mentioned above, how to get the month and day value like getting Year using getFullYear()? Are there any methods to get month and day value also?

-DollyB

[DollyBMember]

Hi Peter,

Yes. thats true.
I kept the same code in cellendedit handler. I am getting this.editcell is null or not an object error in the browser. Could you tell me why I am getting this message?
If I remove the line, $(‘#jqxgridDR’).jqxGrid(‘render’); the error message disappear but the old value is not placed on clicking on ok of the alert in both the cases.

Could you give me an example of such scenario if I am doing something wrong?

var attrProp = [];
				attrProp = reqJsonAttrTemplate [event.args.datafield];
				if(attrProp["Integer"] == "true"){
					if(!(/^[0-9]+$/.test(event.args.value))){
						alert("Please enter a valid number.");
						alert('event.args.oldvalue:'+event.args.oldvalue);
						$("#jqxgridDR").jqxGrid('setcellvalue', event.args.rowindex, event.args.datafield, event.args.oldvalue);
						$('#jqxgridDR').jqxGrid('render');	
					}													 
				}

[DollyBMember]

Hi,

I tried this way and it worked.

$('#popupWindow').bind('open', function (event) { 
				//alert("Inside OPEN event bind"+rowsel+", "+dataf+", "+$('#description').val());					
				$("#Save").click(function() {	
					//alert("On Save Click:"+rowsel+", "+dataf+", "+$('#description').val());		
					$("#jqxgridDR").jqxGrid('setcellvalue', rowsel, dataf, $('#description').val());
					$('#popupWindow').jqxWindow('hide');	
					$('#jqxgridDR').jqxGrid('render');				
				});
			});

Thankx Peter.

[DollyBMember]

My actual Requirement: I have a modalWindow which contains Grid. On clicking on any of the cell in the Grid for editing, a modal popup opens. The contents for this modal popup should be loaded dynamically.
I used setContent method for acheiving this which is shown below.
Need solution for referring save button on click event so that I can populate the modified value in the modalpopup to the Grid Cell.

The setCcontent method for rendering contents dynamically:

//if(event.args.datafield == "Description"){
				//	$("#popupWindow").jqxWindow('setContent', '<div id="editPopupWindow" calss="editPopup" style="overflow: hidden;">'+
						//	'<table><tr><td align="left">'+event.args.datafield+':</td></tr>'+
						//	'<tr>'+
						//	'<td align="left"><textarea name="description" id="description" rows="10" cols="70" >'+event.args.value+'</textarea></td>'+
						//	'<tr>'+			
						//	'<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>'+
					//		'</tr>'+
					//		'</table></div>');		
				//}

//$("#Save").click(function() {	
				//alert("On Save Click:");		
				//$("#jqxgridDR").jqxGrid('setcellvalue', rowsel, dataf, $('#description').val());
				//$('#popupWindow').jqxWindow('hide');	
				//$('#jqxgridDR').jqxGrid('render');				
			//});

How to refer save button on click event in the popup? I tried multiple ways. But failed 🙁

[Author]

Posts