Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Populating JQGRID with options from a select.

Posted on 2014-01-29
3
Medium Priority
?
2,751 Views
Last Modified: 2014-02-04
I have two drop downs named: SendtoOrg and SendtoRole. They are auto-populated based on my user's organization and role as follows:

SendtoOrg = #session.currentTierID#
SendtoRole = '1'

On the same page I have a jqgrid that I want to populate with those values on page load and change onChange.

Here's the .cfm for the grid:

<div class="row-fluid">
	<div class="span8 text-center"
        <div id="GridContainer" class="GridCont">
            <table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
                <div id="pager" class="scroll" style="text-align:center;"></div> 
                <div id="mysearch"></div>
        </div> 
	</div>
</div>

Open in new window


Here is my jqgrid:

/*
js/modules/email/selectrecipients.js
Description: This is the jgrid for the apps/admin/email functionality - select recipients 
*/

	 
$(document).ready(function($) {

	buildjqGrid();
	
	// This binds the resizeGrid method to a change of the window size
    $(window).resize(function(){
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout("resizeGrid();", 100);
    });

	return;

});


 
function buildjqGrid() { 
	$("#GridContainer").show();

	var grid = $("#list")
		, gCfg = {	
			prmNames:{
				page: 'pageIndex', 
				sort: 'sortCol', 
				order: 'sortDir', 
				rows: 'pageSize'
			},
			postData: {
				method: "getTestUsers",
				returnFormat:"json"
				/*
				// Pass other params here as needed for the query method
				DSN: cfrequest.dsn,
				InstanceId: cfrequest.instanceId,
				bMySearches: isMySearch,
				bShowActive: true,
				bShowInactive: false,
				xJLLISUserId: cfrequest.xJLLISUserId
				*/
			},
			datatype: function (postdata) {
				var $that = $(this); 
				$("#GridContainer").mask("Loading..."); 
				$.ajax({
					url: "/cfc/Services/EmailRemote.cfc",
					data: postdata,
					type: 'POST',
					dataType: 'json',
					dataFilter: transformData,
					success: function(d, r, o){ 
						if (d.success) 
							$that[0].addJSONData($.serializeCFJSON(d));
						else
							bootbox.alert("There was an error in retrieving this data<br>" + d.message);
					
						$("#GridContainer").unmask(); 
					},
					error: function () {
						bootbox.alert("There was an error in making your search.");
						$("#GridContainer").unmask();
					}
				});
			},
		width:"auto",
		height:"auto",
		colModel:[
			{name: 'checkbox', label: 'Checkbox', width: 75, fixed: false, classes: "actionTD"},
			{name:'id', label: 'User ID', index:'id', width:55},
			{name:'firstname', label: 'First Name', index:'firstname', width:200},
			{name:'lastname', label: 'Last Name', index:'lastname', width:250},
			
		],
			jsonReader : {
				 repeatitems: true,
				 root: "DATA",
				 page: "PAGEINDEX",
				 total: "PAGECOUNT",
				 records: "RECORDCOUNT",
				 id: "id"
			},
			pager: $("#gridPager"),
			pgtext : "Page {0} of {1}",
		sortname: 'id',
		sortorder: "asc",
		viewrecords: true,
			toppager:true,
			pagerpos:'left',
		rowNum:10,
		rowList:[10,20,30]
			/* <!--- Use if you need row checkboxes to work --->
			,multiselect: true
			,onSelectRow: rowSelectionHandler
			,onSelectAll: selectAllHandler
			,gridComplete: recheckSelections
			*/
		};
				
	grid.jqGrid(gCfg);
	//end jqGrid
};

function transformData (data) {
	return data.replace(/[^\x20-\x7E\xA1-\xFF]+/g,"");
}

Open in new window


and here's my .cfc:

<cfcomponent displayname="UserMgr" output="false"  extends="cfc/services/DataAccess"> 
  
<cffunction name="init" output="no" returntype="struct">

	<cfreturn this>

</cffunction>

<cffunction name="getTestUsers" access="remote" output="false" returnformat="json">
    <cfargument name="page" required="no" default="1">
    <cfargument name="rows" required="no" default="10">
    <cfargument name="sidx" required="no" default="">
    <cfargument name="sord" required="no" default="ASC">
	
	<cfargument name="SelectList" default="ID,Firstname,Lastname">

    <cfset var q = "">
	<cfset var returnData = {"success": true, "message": "", "statuscode": 200}>

    <cfquery datasource="#session.currentdsn#" name="LOCAL.q">
		SELECT <!--- TOP #local.nPageSize# -- Need this if the results are paginated --->
			1 AS PageCount,
			1 AS PageIndex,
			10 AS TotalRecordCount,
		id, firstname, lastname
	    FROM f_users
	    <cfif len(arguments.sidx)>
	    ORDER BY #arguments.sidx# #arguments.sord#
	    </cfif>
    </cfquery>
	<cfset LOCAL.returnData.data.q = LOCAL.q>
	<cfset LOCAL.returnData.pageIndex = ( LOCAL.returnData.data.q.recordCount ) ? LOCAL.returnData.data.q.pageIndex : 0>
	<cfset LOCAL.returnData.pageCount = ( LOCAL.returnData.data.q.recordCount ) ? LOCAL.returnData.data.q.PageCount : 0>
	<cfset LOCAL.returnData.recordCount = ( LOCAL.returnData.data.q.recordCount ) ? LOCAL.returnData.data.q.TotalRecordCount : 0>
	<cfset LOCAL.returnData.data = SUPER.getQueryOfQueryBySelectList(LOCAL.returnData.data.q, ARGUMENTS.selectList)>

    <cfreturn LOCAL.returnData />

  </cffunction>
  
  <cffunction name="queryConvertForJQGRID" access="package" returnformat="json" output="no"> 
    <cfargument name="q" type="query" required="yes"> 
    <cfargument name="page" type="numeric" required="no" default="1"> 
    <cfargument name="rows" type="numeric" required="no" default="10"> 
    <cfset var result = structnew()> 
    <cfset var rowStruct = structnew()> 
    <cfset var col = ""> 
    <cfset result.page = arguments.page> 
    <cfset result.total = ceiling(arguments.q.recordcount/arguments.rows)> 
    <cfset result.records = arguments.q.recordcount> 
    <cfset result.rows = arraynew(1)> 
    <cfoutput query="arguments.q" startrow="#(arguments.page-1)*arguments.rows+1#" maxrows="#arguments.rows#"> 
      <cfset rowStruct = structnew()> 
      <cfset rowStruct['id'] = id>
	  <cfset rowStruct['cell'] = arraynew(1)>
      <cfset rowStruct['cell'][1] = arguments.q['id'][currentrow]> 
      <cfset rowStruct['cell'][2] = arguments.q['firstname'][currentrow]> 
      <cfset rowStruct['cell'][3] = arguments.q['lastname'][currentrow]> 
      <cfset arrayappend(result.rows, rowStruct)> 
    </cfoutput>
	<cfset output = SerializeJSON(result)>
	<cfset output = replace(output,'.0','','all')>
	<cfset output = replace(output,'ROWS','rows','all')>
	<cfset output = replace(output,'PAGE','page','all')>
	<cfset output = replace(output,'TOTAL','total','all')>
	<cfset output = replace(output,'RECORDS','records','all')>
	<cfset output = replace(output,'CELL','cell','all')>
    <cfreturn output /> 
  </cffunction> 

</cfcomponent>

Open in new window


How would I:

a) Load the jqgrid with the initial values
b) Change the contents of the jqgrid when the select values change

I also need to add a checkbox functionality in one of the columns and I almost have that function written to run by you all here.

THANKS!
0
Comment
Question by:traport
  • 2
3 Comments
 

Author Comment

by:traport
ID: 39821620
Anyone?

*crickets*
0
 
LVL 4

Accepted Solution

by:
Rodrigo Munera earned 2000 total points
ID: 39828688
As far as loading the data into the grid, the documentation says that you should pass the JSON data to the grid via the addJSONData method (http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods), as long as you're sending the data with in the same format as it's laid out in the grid, you should be fine.

As far as editing the data in the cells it seems to depend on how you want to do it, since there's the option of editing in-line, in-cell, remotely or locally. So that really depends on the workflow of your application. Doing some reading on the documentation of jqgrid (http://www.trirand.com/jqgridwiki/doku.php?id=wiki:cell_editing), I was able to find that there's an event that will handle the saves by setting your cellsubmit value to 'remote' and creating a function in your cfc to save the data based on what information is passed from the grid.
0
 

Author Closing Comment

by:traport
ID: 39832434
Thanks the documentation was very helpful.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

971 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question