jQWidgets Forums

Forum Replies Created

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
May 18, 2013 at 2:36 pm in reply to: Text Input and Grid Text Input and Grid #21379
Larryp88
Participant
In case someone else could use this, here’s the final code for testing: (this is a CFM page, but you can remove/replace the few CF tags as needed and make it an HTM page).
```
<cfset hTheme = 'highcontrast'>
<!DOCTYPE html>
<html lang="en">
    <head>
    <title id='Description'>Testing grid with CFC and Text Input</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.<cfoutput>#hTheme#</cfoutput>.css" type="text/css" />
    <script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqx-all.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = '<cfoutput>#hTheme#</cfoutput>';
            // initialize button.            
				$("#getcasebutton").jqxButton({ theme: theme });
				// trigger database search for case.
				$("#getcasebutton").click(function() {
					 var source = {
                	datatype: "json",
                	datafields:
                	[
                    { name: 'seqid', type: 'string' },
                    { name: 'fullcaseno', type: 'string' },
                    { name: 'defname', type: 'string' },
                    { name: 'dob', type: 'string' },
                    { name: 'race', type: 'string' },
						  { name: 'gender', type: 'string' },
                    { name: 'statusdesc', type: 'string' },
                    { name: 'judgelastname', type: 'string' }
                	],
					 	data: {
							iData: $("#getcaseinput").val()
						},
                	url: 'getCases.cfc?method=gCases'
            	};
            	var dataAdapter = new $.jqx.dataAdapter(source);
            	// initialize jqxGrid
            	$("#jqxgrid").jqxGrid({
                	width: 750,
                	height: 558,
                	source: dataAdapter,
						 sortable: true,
					 	pageable: true,
						 pagesize: 20,
					 	columnsresize: true,
                	theme: theme,
                	columns: [
                  	{ text: 'ID', datafield: 'seqid', width: 50 },
                  	{ text: 'Case Number', datafield: 'fullcaseno', width: 135 },
                  	{ text: 'Defendant', datafield: 'defname', width: 218 },
                  	{ text: 'DOB', datafield: 'dob', width: 95 },
                  	{ text: 'Race', datafield: 'race', width: 50 },
                  	{ text: 'Gender', datafield: 'gender', width: 50 },
							{ text: 'Status', datafield: 'statusdesc', width: 90 },
                  	{ text: 'Judge', datafield: 'judgelastname', width: 110 }
                	]
            	});
				});
				// hide the ID column
				$("#jqxgrid").on("bindingcomplete", function (event) {
					$("#jqxgrid").jqxGrid('hidecolumn', 'seqid');
				});
        });
    </script>
    </head>
    <body class='default'>
<div>
      	<input style="width: 100px;" maxlength="20" id="getcaseinput" type="text" autofocus />
      	<input id="getcasebutton" type="button" value="Search" />
      </div>
<div id="jqxgrid"> </div>
</body>
</html>
```
May 18, 2013 at 1:16 pm in reply to: Text Input and Grid Text Input and Grid #21378

Larryp88
Participant

Thank you Peter for your fast reply. I do understand that. That’s why in the click handler I had the data entry tied to the text input field. And that was working fine. I can verify that the typed data into the field was being passed to the server.

Oh well, the way I have it now is working as I need it to, so I am thrilled. I love the widget package that you guys have put together and am excited about using them.

Thanks so much!
Larry

May 18, 2013 at 1:09 pm in reply to: Text Input and Grid Text Input and Grid #21376

Larryp88
Participant

Success!
After typing all of that, I simply deleted everything in my click function and moved the entire source, data adapter line, and grid initialization into my click function. It works as expected, I just don’t have a grid showing on the screen before they submit their first search, but that’s not a problem.

Cheers.
Larry

May 18, 2013 at 12:59 pm in reply to: Text Input and Grid Text Input and Grid #21374

Larryp88
Participant

Hi Peter,

I’m not clear about what “formatdata” does for me. In the example for it in the page you linked to (which I have already read over multiple times based on the same advice you’ve given in other posts), what is “my data”? I don’t see it defined anywhere in the example. Regardless, you said “instead of”, but the example shows both a “data” entry and a formatdata entry. Very confusing for a newbie.

Is this replacement you speak of in the original defined “source” or as part of my click function?

So I would be replacing this:

data: {iData: $(“#getcaseinput”).val()},

with:

formatdata: function (data) {data.iData = $(“#getcaseinput”).val();},

Maybe I’m not stating my issue correctly… The data I am sending when I click my “Search” button is getting to the server fine the way I have it, and the query I have there in my CFC is executing properly. So it seems like I have something missing in my click function that uses that new data when it comes back, even though it shows the “Loading Data” message on the grid. Also, if I put an initial value in my input text form field, the original load of the page brings back and displays the data perfectly. So I know that the overall setup is correct. It’s just that when I then type something into the input field and click the Search button, it executes the CFC as expected and updates the grid, but the grid is still showing the original data from the initial load. It just feels like I’m missing something pretty basic here but I don’t know enough about it to figure out what it is. Or maybe the order of my code is bad?

By the way, I’m using version 2.8.3 and the latest, updated versions of IE9, Firefox, and Chrome for testing. I know it must be very frustrating for you when people like me read your documentation but don’t get it. And I apologize for that. I was hoping you would have a specific example of what I’m trying to do, since it is a pretty common thing to do. I wish I could just load up the data in the grid and filter it, but I’m dealing with millions of records here, so I need to have the user enter some initial info for the person they are looking for before I hit the database. For testing I am just trying to get it to work with one data field (last name), but eventually I will have 9 search fields in the entry form. Then when they locate the correct person, they’ll click that row in the grid and be taken to a detail page.

Thanks for your assitance.
Larry

May 16, 2013 at 4:22 am in reply to: jqxGrid, json & ColdFusion jqxGrid, json & ColdFusion #21233

Larryp88
Participant

Got it. Fixed the “RecordCount” to “CurrentRow” in CFC, works great. FYI…
So all of my problems were in the CFC due to silly mistakes. Great.

May 16, 2013 at 4:18 am in reply to: jqxGrid, json & ColdFusion jqxGrid, json & ColdFusion #21232

Larryp88
Participant

I got it to work with 1 record instead of 500, so I’m close. Sorry to bother you. Love the widgets! Thanks!

May 16, 2013 at 4:12 am in reply to: jqxGrid, json & ColdFusion jqxGrid, json & ColdFusion #21231

Larryp88
Participant

I also fixed the “rdata” vs. “data” var name issue. Must sleep.

May 16, 2013 at 4:00 am in reply to: jqxGrid, json & ColdFusion jqxGrid, json & ColdFusion #21229

Larryp88
Participant

Well, I found one problem in my CFC…I’m looping through a query that doesn’t exist! Regardless, I fixed that and still no go tho.
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)