[GrantMParticipant]

Thanks Peter.

The issue that now arrises is that i am loading the values for the combos dynamically using AJAX get and sometimes when i open the window, change the selected item on a combo, close the window then open again, it doesnt recognise that a new item has been selected and doesnt show the alert. I noticed it shows alerts based on the previous windows options rather than the options that are visibly selected when the window is open.

I originally tried to combat that by setting the selected index (which it did) as you can see my first post, but then that is duplicating the bind event. Is the problem because my get get is asynchronous?

where it has

            $("#combo1").jqxComboBox("selectItem", "Breve");
            $("#combo2").jqxComboBox("selectItem", "Café Bombón");
            $("#combo3").jqxComboBox("selectItem", "Affogato");

I have

					$.get("includes/getDashModsJSON.asp", function(data) {
							$("#combo1").jqxComboBox("selectItem", data[0].Page);
							$("#combo2").jqxComboBox("selectItem", data[1].Page);
							$("#combo3").jqxComboBox("selectItem", data[2].Page);
						},
						"json"
					);

[GrantMParticipant]

Hello Sreenivasa,

You can add wrapping by removing “white-space: nowrap;” in the CSS jqx.base.css file where for the class “.jqx-validator-hint”.

Also you should set a “max-width” so that it wraps where you want it to.

[GrantMParticipant]

Thats the information I needed! Finally making some progress on this, thanks for your help so far.

Lastly, i need to get the displayMember to show instead of the original “strSQL” string but i dont know what that is until i have created the new adapter. Also, each cell in the column will have a unique displayMember, so what syntax do i need to retrieve the returned column header in cellComboAdapter.

So basically i need to return “Category” from this:

[{"Category":"Area"},{"Category":"Country"},{"Category":"Customer"},{"Category":"GroupCode"},{"Category":"SalesRep"},{"Category":"Sector"}]

and “Year” from this:

[{"Year":2014},{"Year":2013},{"Year":2012},{"Year":2011},{"Year":2010},{"Year":2009}]

baring in mind the column header will potentially be different each time.

Apologies if im not explaining this too well.
Thanks

[GrantMParticipant]

Thanks for the documentation.
I have followed your advice despite my head telling otherwise and tried using the initeditor callback with many different permitations of datatypes, columntypes, async and autobind, and still cant get this to work. 3 Days now and nothing works.

Im still at the same issue, the dropdownlist doesnt appear to populate because it isnt executing my SQL query. I created a simple array and used that as drop down source and that worked perfectly so i know it works.

Logically, I cant see how it would work without a PHP file using its connection object to connect to the database, execute, then return the data. How can setting the URL on the source as an SQL statement possibly work?

My code is now:

				var paramsSource = {
					datatype: "json",
					datafields: [
						{ name: 'Page', type: 'string' },
						{ name: 'Parameter', type: 'string' },
						{ name: 'ParameterType', type: 'string' },
						{ name: 'OperatorType', type: 'string' },
						{ name: 'strSQL', type: 'string' }
					],
					id: 'id',
					url: 'includes/getParametersJSON.asp?page='+selectedModule
				};
				var paramsAdapter = new $.jqx.dataAdapter(paramsSource);
				$("#paramsGrid").jqxGrid({
					width: 440,
					height: 220,
					source: paramsAdapter,
					selectionmode: 'singlecell',
					editable: true,
					columnsresize: true,
					columns: [
						{ text: 'Parameter', datafield: 'Parameter', width: 270	},
						{ text: 'Value', datafield: 'strSQL', width: 170, columntype: 'dropdownlist',
							initeditor: function (row, cellvalue, editor, celltext, pressedChar) {
								var cellComboSource = {
									datatype: "json",
									url: cellvalue,
									async: true,
									autoBind: true
								};
								var cellComboAdapter = new $.jqx.dataAdapter(cellComboSource);
								editor.jqxDropDownList({ autoDropDownHeight: true, source: cellComboAdapter });
							},
							cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
								// return the old value, if the new value is empty.
								if (newvalue == "") return oldvalue;
							}
						}
					]
				});

[GrantMParticipant]

I dont know what the initeditor function is, I cant find any examples of it being used or any documentation on it so i dont know how to use it or what stage to use it at. What are the parameters for it?

If as you say, i create a new instance of the dataadapter, how will it execute the SQL when normally a php file would do that and return the data? What datatype will i use for the source of the adapter?

[GrantMParticipant]

Hi Dimitar,

I dont fully understand your explanation but here is my current code that populates the grid.

							var paramsSource = {
								datatype: "json",
								datafields: [
									{ name: 'Page', type: 'string' },
									{ name: 'Parameter', type: 'string' },
									{ name: 'ParameterType', type: 'string' },
									{ name: 'OperatorType', type: 'string' },
									{ name: 'strSQL', type: 'string' }
								],
								id: 'id',
								url: 'includes/getParametersJSON.asp?page='+selectedModule
							};
							var paramsAdapter = new $.jqx.dataAdapter(paramsSource);
							$("#paramsGrid").jqxGrid({
								width: 440,
								height: 220,
								source: paramsAdapter,
								selectionmode: 'singlecell',
								editable: true,
								//autoheight: true,
								columnsresize: true,
								columns: [
									{ text: 'Parameter', datafield: 'Parameter', width: 270	},
									{ text: 'Value', datafield: 'strSQL', width: 170, columntype: 'dropdownlist',
											createeditor: function (row, column, editor) {
												// assign a new data source to the dropdownlist.
												var sqlString = $('#paramsGrid').jqxGrid('getcelltext', 0, "strSQL");
												editor.jqxDropDownList({ autoDropDownHeight: true, source: sqlString });
											},
											// 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;
											}
									}
								]
							});

This doesnt work as intended. The drop down should be populated with the value of “sqlString” which when executed returns the following:

Category (Row Header)
Area
Country
Customer
GroupCode
SalesRep
Sector

So these options should be displayed in the dropdownlist. This way the drop down will be populated dynamically depending on the different sql statements.

Thanks for your help.

[GrantMParticipant]

Sorry it loaded for me because i was logged in. Hopefully this shows:

The SQL is:

SELECT  'Customer' AS Category
UNION
SELECT  'GroupCode' AS Category
UNION
SELECT  'Sector' AS Category
UNION
SELECT  'Area' AS Category
UNION
SELECT  'SalesRep' AS Category
 UNION 
SELECT  'Country' AS Category

Basically that is a string inside the text box. I have the cell set up to be edited, its just that I would like the dropdown to be populated dynamically with the above SQL string if this is possible.

[GrantMParticipant]

It was actually “data[0].Page” I was after, but that done the trick. Thanks for your help.

[GrantMParticipant]

Its okay I found an example.

     
     // auto update timer
     var ttimer = setInterval(function () {
         var max = 800;
         for (var i = 0; i < data.length; i++) {
             data[i].a = Math.max(100, (Math.random() * 1000) % max);
             data[i].b = Math.max(100, (Math.random() * 1000) % max);
         }

         $('#chart').jqxChart('update');
     }, 3000);

[GrantMParticipant]

Do you have an example or demo with that in use please?

[GrantMParticipant]

This hasnt answered my questions but thanks anyway.

[GrantMParticipant]

Thanks for the quick response but im still none the wiser as to what these actually do.

What difference does it make to retrieving the data for the chart? By remote, do you mean from another server or on a seperate file?

What does “binding” actually do in simplistic terms? What is being binded with what? and is it integral to the chart displaying correctly? what does it effect? If it doesnt do it automatically, why does it need to be done at all?

Sorry for my stupidity but I dont have any idea how these effect anything. true or false, my charts load the same.

[GrantMParticipant]

Your reply helped me work it out, thank you.

I was using “event.args.target.id” instead of “event.args.target[0].id”

Thanks for your help.

[GrantMParticipant]

This has not been fixed as of the 3.2.1 release.

[Author]

Posts