jqxDropDownList closes instantly when you try to open it.

[hussain_rangwalaParticipant]

Hi
First of all thank you for creating such a great and a wonderful product. I have been using jqxwidgets for the past 1 year now and it has been really amazing. However, I am facing this issue for quite some time now and i decided to post this to the forum to get your expert advice.

I am using jqxDropDownList within a jqxGrid, the values for jqxDropDownList is static (Yes, No). Everything works fine except on ios devices (iPhone 5,6, iPad) where the behaviour of dropdown is pretty weird. Whenever I click on the dropdown, it opens and close instantly and I am unable to make any selection as it happens very fast. Though the same dropdown works fine on Andoid/ Desktop/ Laptop devices etc. I am pretty sure I have messed up something, but if you guys can look at the below code and try it out, I would really appreciate that, I have also created a jsFiddlfor the below code :

https://jsfiddle.net/hussain_rangwala/toa61gbw/44/

var themeName = "energyblue";
var columnsHeight=60;

var data = [{
    menu:"Chicken Manchurian, Rice, Roti",
         thaaliDate:"2015 - 03 - 28T04 : 00 : 00.000Z",
        userThaaliStatus:"NOT_REQUESTED_BY_USER",
        thaaliStatus:"THAALI_PRESENT",
        userThaaliCategory:"Medium",
        locked: true,
        thaaliInstructions:"",
        uid: 0,
        userThaaliStatusUI:"No",
       "thaaliStatusUI":"Yes"
}, {
    menu:"Chicken Tawa Masala, Rice, Roti",
         thaaliDate:"2015 - 03 - 29T04 : 00 : 00.000Z",
        userThaaliStatus:"NOT_REQUESTED_BY_USER",
        thaaliStatus:"THAALI_PRESENT",
        userThaaliCategory:"Medium",
        locked: true,
        thaaliInstructions:"",
        uid: 1,
        userThaaliStatusUI:"No",
       "thaaliStatusUI":"Yes"
}, {
    menu:"Daal, Rice, Roti",
         thaaliDate:"2015 - 03 - 30T04 : 00 : 00.000Z",
        userThaaliStatus:"NOT_REQUESTED_BY_USER",
        thaaliStatus:"THAALI_PRESENT",
        userThaaliCategory:"Medium",
        locked: false,
        thaaliInstructions:"",
        uid: 2,
        userThaaliStatusUI:"No",
       "thaaliStatusUI":"Yes"
}, {
    menu:"Daal, Chaawal, Palidu",
         thaaliDate:"2015 - 03 - 31T04 : 00 : 00.000Z",
        userThaaliStatus:"NOT_REQUESTED_BY_USER",
        thaaliStatus:"THAALI_PRESENT",
        userThaaliCategory:"Medium",
        locked: false,
        thaaliInstructions:"",
        uid: 3,
        userThaaliStatusUI:"No",
       "thaaliStatusUI":"Yes"
}, {
    menu:"Gosht Curry, Rice, Roti",
         thaaliDate:"2015 - 04 - 02T04 : 00 : 00.000Z",
        userThaaliStatus:"NOT_REQUESTED_BY_USER",
        thaaliStatus:"THAALI_PRESENT",
        userThaaliCategory:"Medium",
        locked: false,
        thaaliInstructions:"",
        uid: 4,
        userThaaliStatusUI:"No",
       "thaaliStatusUI":"Yes"
}, {
    menu:"Gosht Kadai, Rice, Roti",
         thaaliDate:"2015 - 04 - 03T04 : 00 : 00.000Z",
        userThaaliStatus:"NOT_REQUESTED_BY_USER",
        thaaliStatus:"THAALI_PRESENT",
        userThaaliCategory:"Medium",
        locked: false,
        thaaliInstructions:"",
        uid: 5,
        userThaaliStatusUI:"No",
       "thaaliStatusUI":"Yes"
}, {
    menu:"Green Chicken, Rice, Roti",
         thaaliDate:"2015 - 04 - 04T04 : 00 : 00.000Z",
        userThaaliStatus:"NOT_REQUESTED_BY_USER",
        thaaliStatus:"THAALI_PRESENT",
        userThaaliCategory:"Medium",
        locked: false,
        thaaliInstructions:"",
        uid: 6,
        userThaaliStatusUI:"No",
       "thaaliStatusUI":"Yes"
}, {
    menu:"Guvar with Kheema, Rice, Roti",
         thaaliDate:"2015 - 04 - 05T04 : 00 : 00.000Z",
        userThaaliStatus:"NOT_REQUESTED_BY_USER",
        thaaliStatus:"THAALI_PRESENT",
        userThaaliCategory:"Medium",
        locked: false,
        thaaliInstructions:"",
        uid: 7,
        userThaaliStatusUI:"No",
       "thaaliStatusUI":"Yes"
}, {
    menu:"Haleem, Roti",
         thaaliDate:"2015 - 04 - 06T04 : 00 : 00.000Z",
        userThaaliStatus:"NOT_REQUESTED_BY_USER",
        thaaliStatus:"THAALI_PRESENT",
        userThaaliCategory:"Medium",
        locked: false,
        thaaliInstructions:"",
        uid: 8,
        userThaaliStatusUI:"No",
       "thaaliStatusUI":"Yes"
}, {
    menu:"Handi Chicken, Rice, Roti",
         thaaliDate:"2015 - 04 - 07T04 : 00 : 00.000Z",
        userThaaliStatus:"NOT_REQUESTED_BY_USER",
        thaaliStatus:"THAALI_PRESENT",
        userThaaliCategory:"Medium",
        locked: false,
        thaaliInstructions:"",
        uid: 9,
        userThaaliStatusUI:"No",
       "thaaliStatusUI":"Yes"
}, {
    menu:"TBD",
         thaaliDate:"2015 - 04 - 09T04 : 00 : 00.000Z",
        userThaaliStatus:"NOT_REQUESTED_BY_USER",
        thaaliStatus:"THAALI_PRESENT",
        userThaaliCategory:"Medium",
        locked: false,
        thaaliInstructions:"",
        uid: 10,
        userThaaliStatusUI:"No",
       "thaaliStatusUI":"Yes"
}, {
    menu:"Palak Paneer, Rice, Roti",
         thaaliDate:"2015 - 04 - 10T04 : 00 : 00.000Z",
        userThaaliStatus:"NOT_REQUESTED_BY_USER",
        thaaliStatus:"THAALI_PRESENT",
        userThaaliCategory:"Medium",
        locked: false,
        thaaliInstructions:"",
        uid: 11,
        userThaaliStatusUI:"No",
       "thaaliStatusUI":"Yes"
}, {
    menu:"Chicken jalfrezi, rice, roti",
         thaaliDate:"2015 - 04 - 11T04 : 00 : 00.000Z",
        userThaaliStatus:"NOT_REQUESTED_BY_USER",
        thaaliStatus:"THAALI_PRESENT",
        userThaaliCategory:"Medium",
        locked: false,
        thaaliInstructions:"",
        uid: 12,
        userThaaliStatusUI:"No",
       "thaaliStatusUI":"Yes"
}, {
    menu:"Gosht Kadai, Rice, Roti",
         thaaliDate:"2015 - 04 - 12T04 : 00 : 00.000Z",
        userThaaliStatus:"NOT_REQUESTED_BY_USER",
        thaaliStatus:"THAALI_PRESENT",
        userThaaliCategory:"Medium",
        locked: false,
        thaaliInstructions:"",
        uid: 13,
        userThaaliStatusUI:"No",
       "thaaliStatusUI":"Yes"
}, {
    menu:"Gosht Kadai, Rice, Roti",
         thaaliDate:"2015 - 04 - 13T04 : 00 : 00.000Z",
        userThaaliStatus:"NOT_REQUESTED_BY_USER",
        thaaliStatus:"THAALI_PRESENT",
        userThaaliCategory:"Medium",
        locked: false,
        thaaliInstructions:"",
        uid: 14,
        userThaaliStatusUI:"No",
       "thaaliStatusUI":"Yes"
}, {
    menu:"Fruits",
         thaaliDate:"2015 - 04 - 14T04 : 00 : 00.000Z",
        userThaaliStatus:"NOT_REQUESTED_BY_USER",
        thaaliStatus:"THAALI_PRESENT",
        userThaaliCategory:"Medium",
        locked: false,
        thaaliInstructions:"",
        uid: 15,
        userThaaliStatusUI:"No",
       "thaaliStatusUI":"Yes"
}, {
    menu:"Chicken Kaaree, Rice, Roti",
         thaaliDate:"2015 - 04 - 16T04 : 00 : 00.000Z",
        userThaaliStatus:"NOT_REQUESTED_BY_USER",
        thaaliStatus:"THAALI_PRESENT",
        userThaaliCategory:"Medium",
        locked: false,
        thaaliInstructions:"",
        uid: 16,
        userThaaliStatusUI:"No",
       "thaaliStatusUI":"Yes"
}, {
    menu:"Chicken Manchurian, Rice, Roti",
         thaaliDate:"2015 - 04 - 17T04 : 00 : 00.000Z",
        userThaaliStatus:"NOT_REQUESTED_BY_USER",
        thaaliStatus:"THAALI_PRESENT",
        userThaaliCategory:"Medium",
        locked: false,
        thaaliInstructions:"",
        uid: 17,
        userThaaliStatusUI:"No",
       "thaaliStatusUI":"Yes"
}, {
    menu:"Guvar with Kheema, Rice, Roti",
         thaaliDate:"2015 - 04 - 18T04 : 00 : 00.000Z",
        userThaaliStatus:"NOT_REQUESTED_BY_USER",
        thaaliStatus:"THAALI_PRESENT",
        userThaaliCategory:"Medium",
        locked: false,
        thaaliInstructions:"",
        uid: 18,
        userThaaliStatusUI:"No",
       "thaaliStatusUI":"Yes"
}, {
    menu:"Haleem, Roti",
         thaaliDate:"2015 - 04 - 19T04 : 00 : 00.000Z",
        userThaaliStatus:"NOT_REQUESTED_BY_USER",
        thaaliStatus:"THAALI_PRESENT",
        userThaaliCategory:"Medium",
        locked: false,
        thaaliInstructions:"",
        uid: 19,
        userThaaliStatusUI:"No",
       "thaaliStatusUI":"Yes"
}, {
    menu:"TBD",
         thaaliDate:"2015 - 04 - 20T04 : 00 : 00.000Z",
        userThaaliStatus:"NOT_REQUESTED_BY_USER",
        thaaliStatus:"THAALI_PRESENT",
        userThaaliCategory:"Medium",
        locked: false,
        thaaliInstructions:"",
        uid: 20,
        userThaaliStatusUI:"No",
       "thaaliStatusUI":"Yes"
}, {
    menu:"TBD",
         thaaliDate:"2015 - 04 - 21T04 : 00 : 00.000Z",
        userThaaliStatus:"NOT_REQUESTED_BY_USER",
        thaaliStatus:"THAALI_PRESENT",
        userThaaliCategory:"Medium",
        locked: false,
        thaaliInstructions:"",
        uid: 21,
        userThaaliStatusUI:"No",
       "thaaliStatusUI":"Yes"
}];

var thaaliStatusMap = [{displayName:"Yes", serverName:"REQUESTED_BY_USER", status:"user_status"},
                       {displayName:"No", serverName:"NOT_REQUESTED_BY_USER", status:"user_status"},
                       {displayName:"Yes (No Rice)", serverName:"REQUESTED_WITH_NO_RICE", status:"user_status"},
                       {displayName:"Yes", serverName:"THAALI_PRESENT", status:"thaali_status"},
                       {displayName:"No", serverName:"THAALI_NOT_PRESENT", status:"thaali_status"}];
					   
var userThaaliTblHeaders = {MENU:"Menu", THAALI_STATUS: "Thaali Available for the day", THAALI_DATE: "Thaali <br/> Date", THAALI_CATEGORY: "Category", USER_THAALI_STATUS: "Thaali <br/> Requested"};

var updatedRecords = {
	'updated' : false
}; //Array that would hold the records that needs to be sent to the server.

//Will have to check the isError attribute on the response object returned before proceeding any further.

//get the service url
var currentDate = new Date();
var toDate = new Date();
var yesterday = new Date();
var initialRowsLoadedFromDatabase = -1;

yesterday.setDate(yesterday.getDate() - 1);
toDate.setDate(toDate.getDate() + num_of_days_to_Advance);

// prepare the data
var source = {
	//json/xml doesn't matter
	datatype :"json",
	datafields : [{
			name : 'menu',
			type : 'string'
		}, {
			name : 'thaaliDate',
			type : 'date',
			format : 'yyyy-MM-dd'
		}, {
			name : 'userThaaliStatus',
			type : 'string'
		}, {
			name : 'thaaliStatus',
			type : 'string'
		}, {
			name : 'userThaaliCategory',
			type : 'string'
		}, {
			name : 'locked',
			type : 'bool'
		}, {
			name : 'thaaliInstructions',
			type : 'string'
		}
	],
	localdata: data,
	sortcolumn : 'thaaliDate',
	sortdirection : 'asc'
};

/**
 * Method that will provide the Data Adapter to be used for screen sizes >= 992 (anything but mobile)
 * @param source
 * @returns {$.jqx.dataAdapter}
 */
getDataAdapter = function (source) {
	var dataAdapter = new $.jqx.dataAdapter(source, {
			
			beforeLoadComplete : function (records) {
				var data = new Array();
				if (records != null && records.length > 0) {
					for (var i = 0; i < records.length; i++) {
						var record = records[i];
						var status = record.thaaliStatus;
						var userStatus = record.userThaaliStatus;

						if (status != null) {
							//This is done to show user a more use friendly thaali status rather than showing
							for (var mapCnt = 0; mapCnt < thaaliStatusMap.length; mapCnt++) {
								if (thaaliStatusMap[mapCnt].serverName == userStatus) {
									record.userThaaliStatusUI = thaaliStatusMap[mapCnt].displayName;
								}
								if (thaaliStatusMap[mapCnt].serverName == status) {
									record.thaaliStatusUI = thaaliStatusMap[mapCnt].displayName;
								}
							}

							if (record.thaaliStatusUI =="No") {
								record.userThaaliStatusUI ="No";
							}
							data.push(record);
						}
					}
				}
				return data;
			}

		});
	return dataAdapter;
};

//Need to align the column heading  in the center
var columnsrenderer = function (value) {
	return '<div style="text - align: center;margin - top: 5px;">' + value + '</div>';
}

determineColumnType = function () {
	var rowData = $("#jqxUserThaaliDataGrid").jqxGrid('getrowdata', row);
	var thaaliNotAvailable = false;
	var isLocked = rowData.locked;
};
/**
 * Method that will get the number of columns that would be displayed on the screen.
 * @returns {Array}
 */
getColumns = function () {
	var columnArr = null;

	var cellWidth = '25%'; //default for a 4 column layout
	//in case of mobile view we need fewer columns
	if (isMobileView()) {
		cellWidth = 100 / 3 + '%';
	}

	columnArr = [{
			text : userThaaliTblHeaders.THAALI_DATE,
			datafield : 'thaaliDate',
			renderer : columnsrenderer,
			width : cellWidth,
			cellsalign : 'center',
			editable : false,
			cellsformat : 'D'
		}, {
			text : userThaaliTblHeaders.MENU,
			datafield : 'menu',
			renderer : columnsrenderer,
			cellsalign : 'center',
			width : cellWidth,
			editable : false
		}, {
			text : userThaaliTblHeaders.USER_THAALI_STATUS,
			datafield : 'userThaaliStatusUI',
			renderer : columnsrenderer,
			cellsalign : 'center',
			width : cellWidth,
			columntype : 'dropdownlist',
			cellsrenderer : function (row, columnfield, value, defaulthtml, columnproperties) {
				// condition follows
				var rowData = $("#jqxUserThaaliDataGrid").jqxGrid('getrowdata', row);
				var thaaliNotAvailable = false;
				var isLocked = rowData.locked;

				if (rowData.thaaliStatusUI =="No") {
					//In case if Thaali is not present for the day, we still need to disable the said columns and also thaali requested field should be automatically marked as NO.
					thaaliNotAvailable = true;
				}
				if (isLocked == true || thaaliNotAvailable == true) {
					var id ="statusToolTip"+ row;
					var cell = '<div id="' + id + '">' + defaulthtml + '</div>';
					return cell;
				}
				return defaulthtml;
			},
			createeditor : function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
				// assign a new data source to the dropdownlist.
				var list = [];
				for (var i = 0; i < thaaliStatusMap.length; i++) {
					if (thaaliStatusMap[i].status =="user_status") {
						list.push(thaaliStatusMap[i].displayName);
					}
				}

				editor.jqxDropDownList({
					theme : themeName,
					autoDropDownHeight : true,
					source : list,
					autoOpen : true,
					enableBrowserBoundsDetection : true
				});
			},
			// update the editor's value before saving it.
			cellvaluechanging : function (row, column, columntype, oldvalue, newvalue) {
				// return the old value, if the new value is empty.
				if (newvalue =="")
					return oldvalue;
			}
		}, {
			text : userThaaliTblHeaders.THAALI_CATEGORY,
			datafield : 'userThaaliCategory',
			renderer : columnsrenderer,
			cellsalign : 'center',
			width : cellWidth,
			columntype : 'dropdownlist',
			cellsrenderer : function (row, columnfield, value, defaulthtml, columnproperties) {
				var rowData = $("#jqxUserThaaliDataGrid").jqxGrid('getrowdata', row);
				var thaaliNotAvailable = false;
				var isLocked = rowData.locked;

				if (rowData.thaaliStatusUI =="No") {
					//In case if Thaali is not present for the day, we still need to disable the said columns and also thaali requested field should be automatically marked as NO.
					thaaliNotAvailable = true;
				}

				if (isLocked == true || thaaliNotAvailable == true) {
					var id ="thaaliCategoryToolTip"+ row;
					var cell = '<div id="' + id + '">' + defaulthtml + '</div>';
					return cell;
				}
				return defaulthtml;
			},

			createeditor : function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
				// assign a new data source to the dropdownlist.
				var list = user_thaali_category;
				editor.jqxDropDownList({
					theme : themeName,
					autoDropDownHeight : true,
					source : list,
					autoOpen : true,
					enableBrowserBoundsDetection : true
				});
			},
			// update the editor's value before saving it.
			cellvaluechanging : function (row, column, columntype, oldvalue, newvalue) {
				// return the old value, if the new value is empty.
				if (newvalue =="")
					return oldvalue;
			},

			//hide the column for mobile views.
			hidden : isMobileView()
		}, {
			text : '',
			datafield : 'locked',
			editable : false,
			hidden : true
		}, {
			text : '',
			datafield : 'thaaliInstructions',
			editable : false,
			hidden : true
		}
	]

	return columnArr;
}

$("#jqxUserThaaliDataGrid").jqxGrid({
	source : getDataAdapter(source),
	theme : themeName,
	altrows : true,
	width : '100%',
	height : '100%',
	pageable : true,
	rowsheight : 40,
	columnsresize : true,
	columnsheight : columnsHeight,
	editable : true,
	autorowheight : true,
	pagesize : getPageSize(),
	columns : getColumns()
});

//This method would make sure we dont let the user edit any fields if the Thaali Data is frozen for that day.
$("#jqxUserThaaliDataGrid").bind('cellbeginedit', function (event) {
	var rowData = $("#jqxUserThaaliDataGrid").jqxGrid('getrowdata', args.rowindex);
	var isLocked = rowData.locked;
	var column = args.datafield;
	var row = args.rowindex;
	var value = args.value;
	var msg = msg_on_thaali_frozen;

	var showMessage = false;

	//Check if user had already signed up for the thaali or not,
	//if the user has already signed up and isLocked is true then he/she should be given an option to modify or cancel.
	//If not signed up earlier show message and no modifications should be allowed...

	if (rowData.thaaliStatusUI =="No") {
		msg = rowData.thaaliInstructions; //In case if Thaali is not present for the day, we still need to disable the said columns and also thaali requested field should be automatically marked as NO.
		showMessage = true;
	}

	if (isLocked == true) {
		if (rowData.userThaaliStatusUI =="No") {
			//Means the thaali date has been frozen...no more modifications allowed at this time.
			showMessage = true;
		} else {
			//What if the date has been passed, this means user cannot update the record anymore.
			// make sure the thaali date is a future date and not a past date.
			var today = new Date();
			//reset todays date
			today.setHours(0);
			today.setMinutes(0);
			today.setSeconds(0);
			today.setMilliseconds(0);

			if (rowData.thaaliDate < today) {
				msg ="Thaali Date has already been passed.No more changes are allowed.";
				showMessage = true;
			}
		}
	}

	if (showMessage) {
		$("#jqxUserThaaliDataGrid").jqxGrid('endcelledit', row, column, true);
		if (column =="userThaaliStatusUI") {
			var id ="#statusToolTip"+ row;
			$(id).jqxTooltip({
				position : 'top',
				content : msg,
				theme : themeName
			});

		} else if (column =="userThaaliCategory") {
			var id ="#thaaliCategoryToolTip"+ row;
			$(id).jqxTooltip({
				position : 'top',
				content : msg,
				theme : themeName
			});
		}
	} else {
		//Means everything is fine, user is allowed to modify the data.
		// update the index of dirty records to be sent to server for updation.
		updatedRecords[row] = row;
		updatedRecords['updated'] = true
	}
});

/**
 * Utility method to check if the screen size is for smaller screens (mobile esp).
 * @returns {Boolean}
 */
function isMobileView(){
	if ($(window).width() <= 992) {
        return true;
    }else{
    	return false;
    }
}

/**
 * Determines the number of records to be displayed in a page depending upon the size of the screen.
 * @returns {Number}
 */
function getPageSize(){
	if(isMobileView()){
		return 4;
	}
	return 7;
}

[DimitarParticipant]

Hi hussain_rangwala,

Do you experience this issue with any of the online demos, such as Custom DropDownList Column? Please make sure you are using the latest version of jQWidgets (3.7.1).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[hjansenParticipant]

Hi,

I seem to have to same problem when using a DropDownList as an editor in a Grid.
If you set the autoopen property is does open automatically as expected, but when you try to move the mouse inside the list, the dropdown automatically closes before you can make a choice.
If you, when the drop-down opens, first use the arrow keys to move around in the list, it is however possible to move the mouse in to the list.

Are we doing something wrong?

[Peter StoevKeymaster]

We cannot reproduce such behavior. Grid demo: http://jsfiddle.net/xwmuLo4q/.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[hjansenParticipant]

Hi Peter,

thanks for looking in this. Your jsfiddle indeed does not have the same issue.
This link allows you to download a minimal example that should allow you to reproduce the issue I’m seeing.
The issue will show in the Type and Status columns which are dropdownlists.

https://drive.google.com/file/d/0BwUu-lYy-WoERTE2ODVuUTRWZzg/view?usp=sharing

[Peter StoevKeymaster]

Hi hjansen,

Please, share jsfiddle or jseditor samples only. We would not download .zip files due to security policy.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[hjansenParticipant]

Hi Peter,

this is the jsfiddle : https://jsfiddle.net/owgq5chq/1/

Strangely enough I don’t see the described behaviour in the fiddle.
I have changed all my local references to my .js and .css files to exact the same ones as in the fiddle and the problem suddenly is a lot less frequent, but still reproducable in 1 row in the grid.
So to really reproduce it, you would need to download the zip, but I understand the security concern.

As it stands, it is not reproducable on jsfiddle, but it is in the zip file.
I don’t know how get out of this deadlock.

[hjansenParticipant]

one more follow-up:
as I explained in my previous post the problem is a lot less with local data arrays, but when I switch back to a json datatype, loaded from a server-url or file, the problem is much worse. Strange….

[Author]

Posts