[RedantJParticipant]

Sure:

One of the complaints that we have is that because the table is so long, horizontally and vertically, using the mouse scroll button to move up and down the screen, actually moves the grid to the left and right.

One of the other complaints is when clicking on the horizontal bar, it doesn’t snap to that exact location on the grid.

We have also received some requests to see if we can have a horizontal scrollbar at the top of the grid.

As for the iFrame, it was only one idea that I had. I’m pretty sure there are better ideas out there.

[RedantJParticipant]

I think I found my answer. It’s not pretty but seems to work:

		$("#absLoading").jqxLoader({ isModal: true, width: 100, height: 60, theme: 'berkeley', textPosition: 'center' });

		$("#Confirm1").on({
			mousedown: function (event) {
				$("#setupReport").jqxWindow('close');
				$('#absLoading').jqxLoader('open');
			},
			click: function (event) {
			// Did the user put anything in any of the diplay fields?
			var listBox = $("#dispDetails").jqxListBox('getItems');
			var beanCounter = 0;
			var valProgress;
			if (listBox) {
                               .
                               .
                               .

                               .
                               .
                               .
				$('#absLoading').jqxLoader('close');
			}
		});

I had to change the Z-index of <div id=absLoading> to some high number. The spinning Loader does not animate, but that’s minor.

Basically, I snuck in the jqxLoader using the Mousedown event.

[RedantJParticipant]

Hello developers!

About a week ago, I have been told to add graphs to the solo project.

After reading through the API and working through the code, I believe I have a more confident understanding of how DataAdapter works. This understanding makes all the difference in the world when implementing more than one widget on the same page using different data sets. I’ve also been making use of Grid and Chart’s “refresh” method when viewing different data sets.

[RedantJParticipant]

I’ve made the following changes to the code and the “data binding” error is no longer appearing:

var boolDetails = [];

// initialize jqxGrid
		
$("#jqxgrid").jqxGrid(
{		
	source: dataadapter,
	width: wide,
	width: 850,
	height: 250,
	showrowdetailscolumn: false,
	selectionmode: 'multiplecellsadvanced',
	editable: true,
	rowdetails: true,
	autoheight: true,
	pageable: true,
	showfilterrow: true,
	sortable: true,	
	virtualmode: true,
	rendergridrows: function(obj)
	{
		return dataAdapter.records;
	},
	rowdetailstemplate: { rowdetails: "<div style='margin: 10px;'><ul style='margin-left: 30px;'><li class='title'></li><li>Notes</li></ul><div class='information'></div><div class='notes'></div></div>", rowdetailsheight: 200 },
	initrowdetails: initrowdetails,
	pagesize: 20,
	pagesizeoptions: ['20', '50', '100'],
	rendergridrows: function(obj)
	{
		return obj.data;    
	},
	columns: [
		{ text: 'Details', datafield: 'Show', columntype: 'button', width: 80, filterable: false,
			cellsrenderer: function (row) {
				return "Show";
			}, buttonclick: function (row) {
				if (!boolDetails[row]) {
					$('#jqxgrid').jqxGrid({ rowdetails: true}); 
					$('#jqxgrid').jqxGrid('showrowdetails', row);
					$('#jqxgrid').jqxGrid({ rowdetails: false});
				} else {
					$('#jqxgrid').jqxGrid({ rowdetails: true}); 
					$('#jqxgrid').jqxGrid('hiderowdetails', row);
					$('#jqxgrid').jqxGrid({ rowdetails: false});
					boolDetails[row] = null;
				}
			}
		},
		{ text: 'First Name', datafield: 'firstname', width: 200 },
		{ text: 'Last Name', datafield: 'lastname', width: 200 },
		{ text: 'Title', datafield: 'title', width: 180 },
		{ text: 'City', datafield: 'city', width: 100 },
		{ text: 'Country', datafield: 'country'}
	]				

});

$('#jqxgrid').on('rowexpand', function (event) 
{
	// event arguments.
	var args = event.args;
	// row's bound index.
	var rowBoundIndex = args.rowindex;
	boolDetails[rowBoundIndex] = true;
});

This replaced the built-in rowdetails column with a column of buttons. This is not the best fix in the world, but I’m not encountering the “data binding” issue as I have in the past.

[RedantJParticipant]

I’ve added in this code in the same program after jqxGrid has been initialized:

$('#jqxgrid').on('rowcollapse', function (event) 
{ 
	$('#jqxgrid').jqxGrid({ rowdetails: false});
	$('#jqxgrid').jqxGrid('refresh');
	$('#jqxgrid').jqxGrid({ rowdetails: true});
	
});

Step by step:
* The application page comes up
* The user opens up details (for example, the second row in the grid)
* The user closes details row
* The user applies a filter (for example, choosing “FRANCE” for Country)
* The user clicks on details twice (for example, the second row in the grid)
* Note: all arrows in the details column disappear

[RedantJParticipant]

I will explain the issue step-by-step:

* The application page comes up.
* The user opens up details (for example, the second row in the grid)
* The user applies a filter (for example, choosing “FRANCE” for Country)
* The user is unable to open details for any row in the grid

The following also produces the same issue:

* The application page comes up.
* The user opens up details (for example, the second row in the grid)
* The user goes to the next page.
* The user applies a filter (for example, choosing “FRANCE” for Country)
* The user is unable to open details for any row in the grid

[RedantJParticipant]

….or, if I understand you correctly, Dimitar, I could figure out the correct way to use bindingcomplete. It takes a while for coffee to start working in the morning.

[RedantJParticipant]

I have one working solution for the bindingcomplete event: After hiding the row details bar, have the web browser refresh itself, such as location.reload(), then re-apply the filter somehow. (or, simply just have a button to refresh the window).

Is there a better way?

[RedantJParticipant]

…and I was overlooking something basic!

This is the only code that I needed:

beforeprocessing: function(data)
{		
	if (data != null)
	{
               $('#jqxgrid').jqxGrid('setcolumnproperty', 'firstName', 'filteritems', data[2].filterFirstName);
        }
}

[RedantJParticipant]

This is becoming a little frustrating:

beforeprocessing: function(data)
{		
	if (data != null)
	{
  	    filterFirstName.length = 0
	    var value1 = data[2].filterFirstName[0];
	    alert (value1);
	    filterFirstName.unshift("AAA"); // This works
	    filterFirstName.unshift(value1); // This doesn't
        }
}

I know I’m overlooking something pretty basic.

[RedantJParticipant]

This absolutely does work.

When the source is prepared, remove the filter:

	var source =
	{
		datatype: "json",
		datafields: [
		{ name: 'ID', type: 'string'},
		{ name: 'foo1', type: 'string'},
		{ name: 'foo2', type: 'string'},
		{ name: 'foo3', type: 'string'}
		],
		cache: false,
		url: './data/data.asp',
//		filter: function()
//		{
//			
//			// update the grid and send a request to the server.
//			$("#jqxgrid").jqxGrid('updatebounddata', 'filter');
//		},
		root: 'Rows',
		beforeprocessing: function(data)
		{		
			if (data != null)
			{
				// Get the total number of records
				source.totalrecords = data[0].TotalRows;
			}
		}
	};

Add the filter with the Data Adapter:

	var dataadapter = new $.jqx.dataAdapter(source, {
// Add "formatData"
		formatData: function (data) {
			data.foo1_startsWith = $("#searchField").val();
			return data;
		},
		loadError: function(xhr, status, error)
		{
			alert(error);
		}
	});

Then you can design your filter bar using any input method you wish. In this case, the combobox:

	rendertoolbar: function (toolbar) {
		var me = this;
		var container = $("<div style='margin: 5px;'></div>");
		var input = $("<div id='searchField' />");
		toolbar.append(container);
		container.append(input);
		input.addClass('jqx-widget-content-theme');
		input.addClass('jqx-rc-all-theme');
		var oldVal = "";
		input.jqxComboBox({
			source: ['Item 1', 'Item 2', 'Item 3'],
			width: 200,
			height: 23
		});
		input.on('keydown', function (event) {
			if (input.val().length >= 2) {
				if (me.timer) {
					clearTimeout(me.timer);
				}
				if (oldVal != input.val()) {
					me.timer = setTimeout(function () {
						$("#jqxgrid").jqxGrid('updatebounddata');
					}, 1000);
					oldVal = input.val();
				}
			}
			else {
				$("#jqxgrid").jqxGrid('updatebounddata');
			}
		});
	}

Add as many input fields as required and write your server code accordingly.
In this case, when “Inspect Element” is selected, foo1_startsWith will show up on the Query string parameters.

It is a lot of code to write, especially if you want to put in more than one filter, which is why there is a filterrow feature in jqxGrid to begin with. This works if you want to program your own filterrow.

[RedantJParticipant]

I just realized that a work-around solution is possible. There is a search function used here that works the similar to a filter. I’m going to see if I can make something that looks like a filter row, using the toolbar and combobox.

[RedantJParticipant]

Was this implemented?

My requirements are to have a combobox on the filterrow.

If not, is a work-around possible? Such as building a custom filterrow using jqxPanel?

[RedantJParticipant]

The following code solved the problem:

 $("#clearfilteringbutton").bind('click', function () {
        $('#jqxgrid').jqxGrid('clearfilters', true);
	$('#jqxgrid').on("bindingcomplete", function (event) {
		$('#jqxgrid').jqxGrid('focus');
	});
  });

[RedantJParticipant]

This is one solution:

In a situation where you want to test for unique values in a Server Side setting, construct the JSON this way:

{
"TotalRows": 4
},
{
"Asset": [
	{
		"indexHB":"1",
		"foo1":"1111",
		"foo1_b":"true",
		"foo2":"Mary",
		"foo2_b":"false",
		"foo3":"Ford"
	},
.
.
.

For the fields foo1_b and foo2_b, test for unique values on the server side, data.asp, like so:

 .
.
.
response.write chr(34) & "foo1_b" & chr(34) & ":"

tempSQL = "SELECT * FROM Foobar WHERE foo1 = '" & value & "'"
Set rs2 = Conn.execute(tempSQL)
y = 0
do until rs2.eof
	y = y + 1
	rs2.movenext
loop
			
if y > 1 then
	response.write chr(34) & "true" & chr(34) & ","
else
	response.write chr(34) & "false" & chr(34) & ","
end if

Then, using this as a model:

var cellclass = function (row, columnfield, value) {
	var value2 = $('#jqxgrid').jqxGrid('getcellvaluebyid', row, columnfield.concat("_b"));
        if (value2 == true) {
              return 'yellow';
        }
};

[Author]

Posts