Forum Replies Created

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts

  • swisspen
    Participant

    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

    • This reply was modified 2 years ago by  swisspen.

    swisspen
    Participant

    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.


    swisspen
    Participant

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

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

    thanks
    SP


    swisspen
    Participant

    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


    swisspen
    Participant

    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?


    swisspen
    Participant

    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 ….

    in reply to: 2 grids on one page 2 grids on one page #75611

    swisspen
    Participant

    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


    swisspen
    Participant

    Hi Dimitar,

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

    Best,
    SP


    swisspen
    Participant

    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


    swisspen
    Participant

    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>

    swisspen
    Participant

    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!


    swisspen
    Participant

    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.


    swisspen
    Participant

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

    thanks!


    swisspen
    Participant

    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.

    in reply to: Add Row not working Add Row not working #28656

    swisspen
    Participant

    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!

Viewing 15 posts - 1 through 15 (of 24 total)