[swisspenParticipant]

Thank you very much for your rapid reply, Hristo.

On the subject of taking my grid creation out of the button click event’s scope: well, I did that, but then I had the problem that my parameter named “initialIn” is always empty. I tried creating a hidden input in the html and sending the alphabetic button’s value to this input field during the button click event … however, when it’s time to build the grid, “initialIn” is still empty! How do I get around this problem?

My additional html is:

<input id="buttonVal" type="hidden">

The alphabetic button click event is now:

$("input[name*='but']").click(function()
	{	
		$('#buttonVal').val($(this).val());
                [some other code here]
        });

and then in the grid’s source:

datatype: "json",
			url: 'iwcn-json-responses.php?fct=getTheseNames',
			data: {
			initialIn: $("#buttonVal").val(),
			style: "full",
			maxRows: 50
			},
			datafields: datafields

but the response in my dev console always shows “initialIn=&” whereas in my old version initialIn= had the button’s letter after the = sign.

Thanks if you can help with this.

SP

[swisspenParticipant]

Hi Peter, the only problem is that the picture does not reflect the reality of the text above it! I was interested in the date format and treatment in the picture, but the text does not contain that information because it refers to something else.

And I will post the problem I have with js date in a grid cell crashing on update to MySQL elsewhere on the forum. I have done a lot of searching and reading and trying different things for 3 days now with no good result.

[swisspenParticipant]

aha! so if i upgrade to 4.1.2 it will work as before, simply with

$("#jqxgrid1").jqxGrid('exportdata', 'xls', 'jqxGrid');

thanks
SP

[swisspenParticipant]

Okay, got it! I misunderstood something I read, and thought that that the function above was doing something behind-the-scenes (hosted on your server). If it’s under my control that’s perfect.

Thanks very much for your help.
SP

[swisspenParticipant]

aHa! Now I think I see – I need my server-side SQL to have a SElECT last_name WHERE last_name LIKE “n%” statement …

Is that what you mean?

[swisspenParticipant]

Sorry Vladimir, I forget to include that piece of my code … I have it already:

var dataAdapter = new $.jqx.dataAdapter(source,
		{
			formatData: function (data) 
			{
				data.name_startsWith = $("#searchField").val();
				return data;
			}
		});

At first I thought that it did not understand data.name_startsWith, because my displayMember is “last_name”, but even when I changed it to
data.last_name_startsWith = $("#searchField").val();

it still did not work! I must be missing something else ….

[swisspenParticipant]

OK – I did what you said, then I tried moving the function that handles a row-select for the first grid:
$("#lang-grid").on('rowselect', function (event)
to a position AFTER all the code that sets up the 2nd grid – and that worked! Now I can even get both grids to show up side by side, as long as their row-select functions come AFTER the grid setup.

I can’t say I understand why this should be, but that’s okay!

Thanks,
SP

[swisspenParticipant]

Hi Dimitar,

Many thanks – that is most helpful. (Latency problem … tricky.)

Best,
SP

[swisspenParticipant]

Okay – I have discovered that as soon as I change my first grid (jqxgrid1) from selectionmode: ‘singlerow’ to ‘checkbox’, the grid crashes, never loading. This page has 2 grids and one dropdown list on it. The idea is that the Site Admin can drag a name from the first grid into the second grid, having first selected one of the Activities from the dropdown list (jqxActList). My debugger shows that my JSON file supplies the contents of the first grid with no problem – it’s just the grid itself that refuses to initialize when I try to use ‘checkbox’.

<?php
require_once 'header.php';

/*********************** CALL GET LATEST EVENT TO GET EVENT ID **********************/
/*************************************************************************************/
	$connectionObject = connect();
	$event = getLatestEvent($connectionObject);

/*************************************************************************************/

if (empty($event))
{
	echo "There were either no members or this Event ID # is wrong.";
}
else
{
	$_SESSION['eventId'] = 10;
	//$_SESSION['eventId'] = $event['id'];
	$_SESSION['eventName'] = $event['name'];
	$_SESSION['eventDate'] = $event['date'];
}
?>

<TITLE>Organize Members at all Activities</TITLE>

<script type="text/javascript">
$(document).ready(function ()
{
//SOURCE THE GRID CONTAINING ALL SIGNUPS:
    var data1 =
    {
        datatype: "json",
        datafields: [
		{ name: 'id'},
		{ name: 'name_first'},
		{ name: 'name_last'},
		{ name: 'email'},
		{ name: 'phone'},
		{ name: 'activity_short_code'},
		{ name: 'activity_name'},
		{ name: 'capacity'}
			        ],
        url: 'stcg-json-responses.php?fct=getJSONMembersAtEvent&eventId=<?php echo $_SESSION['eventId'] ?>',
        sortcolumn: 'name_last',
        sortdirection: 'asc',
        async: false
    };//end data source

//ASSIGN ADAPTER 1 TO SOURCE DATA
    var adapter1 = new $.jqx.dataAdapter(data1);

    var columns = [
	  	            { text: 'First Name', datafield: 'name_first', width: 90 },
	  	            { text: 'Last Name', datafield: 'name_last', width: 110 },
                            { text: 'Email', datafield: 'email', width: 180 },
                            { text: 'Phone', datafield: 'phone', width: 110 },
                            { text: 'Code', datafield: 'activity_short_code', width: 50 },
	  	            { text: 'Activity', datafield: 'activity_name', width: 250 }
	  	         ];

//INITIALIZE GRID 1
	    $("#jqxgrid1").jqxGrid(
	    {
	    	width: 620,
	        height: 450,
	        source: adapter1,
	        sortable: true,
	        theme: 'classic',
	        selectionmode: 'singlerow',
	        columns: columns,

//rendering for drag-drop functionality
	        rendered: function ()
	        {
                // select all grid cells.
                var gridCells = $('#jqxgrid1').find('.jqx-grid-cell');
                if ($('#jqxgrid1').jqxGrid('groups').length > 0)
                {
                    gridCells = $('#jqxgrid1').find('.jqx-grid-group-cell');
                }
                // initialize the jqxDragDrop plug-in. Set its drop target to the second Grid.
                gridCells.jqxDragDrop(
                {
                    appendTo: 'body', theme: 'classic', dragZIndex: 99999,
                    dropAction: 'none',
                    initFeedback: function (feedback)
                    {
                        feedback.height(120);
                        feedback.width(220);
                    }
                });

                // initialize the dragged object.
                gridCells.off('dragStart');
                gridCells.on('dragStart', function (event)
                {
                    var position = $.jqx.position(event.args);
                    var cell = $("#jqxgrid1").jqxGrid('getcellatposition', position.left, position.top);

                    $(this).jqxDragDrop('data', $("#jqxgrid1").jqxGrid('getrowdata', cell.row));
                    //var value = $('#jqxgrid1').jqxGrid('getcellvaluebyid', id1, "activity_short_code");

                    var groupslength = $('#jqxgrid1').jqxGrid('groups').length;

                    // update feedback's display value.

                    var feedback = $(this).jqxDragDrop('feedback');
                    var feedbackContent = $(this).parent().clone();
                    var table = '<table>';
                    $.each(feedbackContent.children(), function (index)
                    {
                        if (index < groupslength)
                            return true;
                            table += '<tr>';
                            table += '<td>';
                            table += columns[index - groupslength].text + ': ';
                            table += '</td>';
                            table += '<td>';
                            table += $(this).text();
                            table += '</td>';
                            table += '</tr>';
                    });
                    table += '</table>';
                    feedback.html(table);
                });//end drag start

                    gridCells.off('dragEnd');
                    gridCells.on('dragEnd', function (event)
                    {
                            var value = $(this).jqxDragDrop('data');
                            var position = $.jqx.position(event.args);
                            var pageX = position.left;
                            var pageY = position.top;
                            var $destination = $("#jqxgrid2");
                            var targetX = $destination.offset().left;
                            var targetY = $destination.offset().top;
                            var width = $destination.width();
                            var height = $destination.height();

                            // fill the grid if the user dropped the dragged item over it.
                            if (pageX >= targetX && pageX <= targetX + width)
                            {
                                if (pageY >= targetY && pageY <= targetY + height)
                                {
                                    $destination.jqxGrid('addrow', null, value);
                                }
                            }//end if
                    });//end drag end
	        }//end rendered function
       });//end grid 1

	   $("#excelExport").jqxButton(
	    {
			theme: 'energyblue'
		});

		$("#excelExport").click(function()
		{
			$("#jqxgrid1").jqxGrid('exportdata', 'xls', 'jqxGrid');
		});

var currentActId=-1;

//SOURCE THE GRID CONTAINING ONLY SIGNUPS SELECTED FOR ONE ACTIVITY:
    var data2 =
    {
	    datatype: "json",
	    datafields: [
		{ name: 'id'},
		{ name: 'name_first'},
		{ name: 'name_last'},
		{ name: 'email'},
		{ name: 'phone'},
		{ name: 'activity_id'},
		{ name: 'activity_short_code'}
		        ],
        id: 'id',
        async: false,
        url: 'stcg-json-responses.php?fct=getJSONSelectedMembersAtActivity&eventId=<?php echo $_SESSION['eventId'] ?>&actId='+currentActId,

    };

var columnCheckBox = null;
var updatingCheckState = false;
//ASSIGN ADAPTER 2 TO SOURCE DATA
    var adapter2 = new $.jqx.dataAdapter(data2);

//INITIALIZE GRID 2
		$("#jqxgrid2").jqxGrid(
		{
                    width: 600,
                    height: 200,
                    source: adapter2,
                    sortable: true,
                    selectionmode: 'checkbox',
                    theme: 'classic',
                    keyboardnavigation: false,

	        columns: [
                { text: 'First Name', datafield: 'name_first', width: 90 },
                { text: 'Last Name', datafield: 'name_last', width: 130 },
                { text: 'Email', datafield: 'email', width: 220 },
                { text: 'Phone', datafield: 'phone', width: 110 },
                { text: 'Code', datafield: 'activity_short_code', width: 50 }
		       	  	 ]
		});//end grid 2

//EVENT HANDLERS
		$('#jqxgrid2').on('rowselect', function (event)
		{
///////DO NOT DELETE! IT'S THE ONLY COMBO THAT WORKS!!!/////////////
var row = $("#jqxgrid2").jqxGrid('getrowdata', event.args.rowindex);
			//alert(row.id);//returns member id
		});

//SOURCE THE DROP-DOWN LIST OF ACTIVITY SHORT CODES
        var actListData =
	    {
        	datatype: "json",
    	        datafields:
                [
                    { name: 'activity_short_code'},
                    { name: 'capacity'},
                    { name: 'activity_id'},
                    { name: 'project_leader'}
            	],
    	        url: "stcg-json-responses.php?fct=getJSONAllSCsAtEvent&eventId=<?php echo $_SESSION['eventId'] ?>",
    	        async: false
    	};//end data

//ASSIGN ADAPTER ACTLIST TO SOURCE DATA
       var adapterActList = new $.jqx.dataAdapter(actListData);

	        // Create a jqxDropDownList
            $("#jqxActList").jqxDropDownList(
            {
              source: adapterActList,
              selectedIndex: 0,
              displayMember: 'activity_short_code',
              valueMember: 'activity_id',
              width: '260',
              height: '20',
              theme: 'classic',
              renderer: function (index, label, value) {
                  var datarecord = adapterActList.records[index];
                  var txt = label+ " " + datarecord.project_leader + " (" + datarecord.capacity + ")";
                  return txt;
              }
            });

			rebindSelectedMembersGrid(adapter2,data2);

            $('#jqxActList').bind('select', function (event)
            {
                var args = event.args;
                var item = $('#jqxActList').jqxDropDownList('getItem', args.index);
            });

            $("#jqxActList").on('change', function (event)
            {
                 rebindSelectedMembersGrid(adapter2,data2);
            });

    	    $("#submit").jqxButton(
    	    	{ theme: 'classic' }
    	    );

           $("#submit").on('click', function (event)
            {
           		var item = $("#jqxActList").jqxDropDownList('getSelectedItem');
				updaterows(item.value, $('#jqxgrid2').jqxGrid('getrows'));

        	 });//end submit click

    	    $("#deleterowbutton").bind('click', function () {
    	        var selectedrowindex = $("#jqxgrid2").jqxGrid('getselectedrowindex');
    	        var rowscount = $("#jqxgrid2").jqxGrid('getdatainformation').rowscount;
    	        if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
    	            var id = $("#jqxgrid2").jqxGrid('getrowid', selectedrowindex);
    	            $("#jqxgrid2").jqxGrid('deleterow', id);
    	        }
    	    });

});//end jquery stuff

function rebindSelectedMembersGrid(source,data)
{
   	var item = $("#jqxActList").jqxDropDownList('getSelectedItem');
   	currentActId=item.value;
   	//alert("currACTID after rebind " + currentActId);

   	data.url='stcg-json-responses.php?fct=getJSONSelectedMembersAtActivity&eventId=<?php echo $_SESSION['eventId'] ?>&actId='+currentActId;
	source.dataBind();
}

////////// SAVE TO DB USING AJAX /////////////////////////
function updaterows(currentActId, rowdata){
        // synchronize with the server - send insert command
    	var data = "actId=" + currentActId;

    	for(var i=0;i<rowdata.length;i++)
        {
    		data = data + "&memId[]=" + rowdata[i]['id'];
    	}
        $.ajax({
            dataType: 'json',
            url: 'stcg-json-responses.php?fct=updateSelectedMembersAtActivity',
            data: data,
    		cache: false
    	});
}
</script>
</HEAD>
<BODY>
<div id="content">
<H2>Organize</H2>
    <H3>Volunteers signed up for Event ID #
        <?php echo $event['id'] . ",&nbsp;&nbsp;&nbsp;" . $event['name']; ?></H3>
    <table style="width: 70%">
        <tr><!-- ONLY ROW OF OUTER TABLE -->
            <td style="vertical-align: top;"><!-- FIRST COLUMN OF OUTER TABLE -->
            <div><b>&nbsp;List of all Signups to all Activities&nbsp;</b><br /><br /></div>
            <!-- START GRID 1 DIV -->
            <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid1" style="FLOAT: LEFT;"></div>
            </div>
            <!-- END GRID 1 DIV -->
            <br /><br />
            <input style='margin-top: 10px;' type="button" value="Export to Excel" id='excelExport' />
            </td><!-- END FIRST COLUMN OF OUTER TABLE -->
            <td width="20px"><!-- dummy column --></td>
            <td style="vertical-align: top;"><!-- SECOND COLUMN OF OUTER TABLE -->
            <!--fieldset style = "border: solid #AAAAAA 1px; padding: 20px; padding-top: 20px;">
            <legend>&nbsp;<b>Choose an Activity, then drag a Signup into it&nbsp;</b></legend-->
            <div><b>&nbsp;Assign one or more Signups to each Activity&nbsp;</b><br /><br /></div>
            <div>First, select one Activity from the list of Short Codes below<br /><br /></div>
            <!-- START ACT LIST DIV -->
            <div style="float: LEFT;" id="jqxActList"></div>
            <!-- END ACT LIST DIV -->
            <br/><br/>
            Then, drag a Signup from the list on the left into the grid below.<br/>
            (Click <b>Save</b> before selecting a new Activity!)
            <br/><br/>
            <!-- START GRID 2 DIV -->
            <DIV id ="jqxgrid2" style="FLOAT: LEFT;"></DIV>
            <!-- END GRID 2 DIV -->
            <div style="margin-top: 10px; float: left;">
                <BUTTON NAME="SUBMIT" ID ="submit" TYPE="SUBMIT" VALUE="Save">Save</BUTTON></div>
            <div style="margin-top: 10px; float: right;">
                <input id="deleterowbutton" type="button" value="Delete Selected Signup" /></DIV>
                </td>
            </tr><!-- END ONLY ROW OF OUTER TABLE -->
    </table>
</div>
<?php
	include_once 'footer.php';
?>

Maybe checkbox selection is incompatible with drag and drop? I suggest this because when I apply checkbox selection to the second grid (jqxgrid2), which is not draggable, there is no problem and the checkbox appears.

Thanks, regards,
SP

[swisspenParticipant]

As I told you, the required DIV is present. Here is an excerpt of my jQuery code:

//INITIALIZE GRID 1
	    $("#jqxgrid1").jqxGrid(
	    {
	    	width: 620,
	        height: 450,
	        source: adapter1,
	        sortable: true,
	        theme: 'classic',
	        selectionmode: 'checkbox',
                altrows: true,
	        columns: columns,

//rendering for drag-drop functionality
	        rendered: function ()
	        {
                // select all grid cells.
                var gridCells = $('#jqxgrid1').find('.jqx-grid-cell');
                if ($('#jqxgrid1').jqxGrid('groups').length > 0)
                {
                    gridCells = $('#jqxgrid1').find('.jqx-grid-group-cell');

… then after all the jQuery and jQWidgets stuff, I have the following HTML:

<body>
<div id="content">
<h2>Organize</h2>
	<h3>Volunteers signed up for Event ID #<?php echo $event['id'] . ",&nbsp;&nbsp;&nbsp;" . $event['name']; ?></h3>
	<table style="width: 70%">
		<tr><!-- ONLY ROW OF OUTER TABLE -->
			<td style="vertical-align: top;"><!-- FIRST COLUMN OF OUTER TABLE -->
			<div><b>&nbsp;List of all Signups to all Activities&nbsp;</b><br /><br /></div>
			<!-- START GRID 1 DIV -->
                        <div style="float: left;" id ="jqxgrid1"></div>
                        <!-- END GRID 1 DIV -->
			<br /><br />
			<input style='margin-top: 10px;' type="button" value="Export to Excel" id='excelExport' />
			</td><!-- END FIRST COLUMN OF OUTER TABLE -->
			<td width="20px"><!-- DUMMY COLUMN --></td>
			<td style="vertical-align: top;"><!-- SECOND COLUMN OF OUTER TABLE -->
			<div><b>&nbsp;Assign one or more Signups to each Activity&nbsp;</b><br /><br /></div>
			<div>First, select one Activity from the list of Short Codes below<br /><br /></div>
			<!-- START ACT LIST DIV --><div style="float: left;" id="jqxActList"></div><!--END ACT LIST DIV-->
			<br/><br/>
			Then, drag a Signup from the list on the left into the grid below.<br/>
			(Click <b>Save</b> before selecting a new Activity!)
			<br/><br/>
			<!-- START GRID 2 DIV -->
                        <div style="float: left;" id = "jqxgrid2"></div>
                        <!-- END GRID 2 DIV -->
			<div style="margin-top: 10px; float: left;">
                        <button name="submit" id ="submit" type="submit" value="Save">Save</button>
                        </div>
			<div style="margin-top: 10px; float: right;">
                        <input id="deleterowbutton" type="button" value="Delete Selected Signup" />
                        </td>
                </tr><!-- END ONLY ROW OF OUTER TABLE -->
	</table>
</div>

[swisspenParticipant]

But I DO HAVE the div with that id!!!! Just like the other user!! It is NOT MISSING and i have NOT CHANGED THE HTML in this page!

[swisspenParticipant]

Just for info, I have upgraded to JQWidgets version 3.2.1, but now I have the same issue as this user:
http://www.jqwidgets.com/community/topic/uncaught-error-invalid-jquery-selector-2/

so that now neither of the two grids on my page can display data. Therefore I can’t even see if the checkbox selection aspect is working.

I will post this new problem separately.

[swisspenParticipant]

okay – good point. i will check what version i am using.

thanks!

[swisspenParticipant]

Well, I already did that. My code contains (here are the relevant parts only):

//INITIALIZE GRID 1
	    $("#jqxgrid1").jqxGrid(
	    {
	    	width: 620,
	        height: 450,
	        source: adapter1,
	        sortable: true,
	        theme: 'classic',
	        selectionmode: 'checkbox',
                altrows: true,
	        columns: columns,

//rendering for drag-drop functionality
	        rendered: function ()
	        {

but no column with checkboxes appears …

I can scroll horizontally with my scrollbar, but find no checkbox anywhere. My data comes from JSON, and it appears just fine, just no checkbox column.

[swisspenParticipant]

sorry Peter! i am an idiot! [] instead of {} – aaaaaargh!

and don’t worry, i have been reading through your CRUD examples line by line and word for word. another really great feature for jQWidgets. thanks a lot!

[Author]

Posts