jQWidgets Forums

jQuery UI Widgets › Forums › Lists › DropDownList › Update the DataSource

Tagged: , , ,

This topic contains 4 replies, has 3 voices, and was last updated by  eno 12 years, 6 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Update the DataSource Posts
  • November 9, 2011 at 4:55 pm Update the DataSource #1184

    larry81
    Member

    Hello,

    I’m trying to change DropDownList’s data during the runtime and I’m wondering can I do this without recreating the widget. I mean if I set the source property (along the creation) to some array can I set it to another array (or the same but changed) later?

    Best Regards,

    Larry.

    November 10, 2011 at 7:59 pm Update the DataSource #1194

    Peter Stoev
    Keymaster

    Hi Larry,

    You can achieve this by doing the following:

    1. Create jqxDropDownList and initialize the data source.

              var source = [
                        "Affogato",
                        "Americano",
                        "Bicerin",
    		        ];
                    // Create a jqxDropDownList
                    $("#jqxWidget").jqxDropDownList({ source: source, selectedIndex: 0, width: '200', height: '25'});

    2. After changing the data source, update the jqxDropDownList by setting its ‘source’ property again.

       // change the source.
                    source = [
                        "Caffé Latte",
                        "Caffé macchiato",
                        "Café mélange",
                    ];
                    // update the source.
                    $("#jqxWidget").jqxDropDownList({ source: source, selectedIndex: 0 });

    Best Regards,
    Peter Stoev

    October 3, 2012 at 11:37 pm Update the DataSource #8883

    eno
    Member

    I hope to use multiple sources from php script at same time. and scripts as below

    <!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="css/jqx.classic.css" type="text/css" />
<script type='text/javascript' src='js/dhtmlgoodies.js'></script>
<script type='text/javascript' src='js/format.js'></script>

<script type='text/javascript' src='js/jquery-1.8.0.min.js'></script>
<script type='text/javascript' src='js/jqw/jqxcore.js'></script>
<script type='text/javascript' src='js/knockout-2.1.0.js'></script>
<script type='text/javascript' src='js/knockout-mapping-2.0.0.js'></script>
<script type='text/javascript' src='js/qunit-git.js'></script>
<script type='text/javascript' src='js/jqw/jqx-all.js'></script>
<script type='text/javascript' src='js/jqw/jqxbuttongroup.js'></script>
<script type='text/javascript' src='js/jqw/jqxbuttons.js'></script>
<script type='text/javascript' src='js/jqw/jqxcalendar.js'></script>
<script type='text/javascript' src='js/jqw/jqxchart.js'></script>
<script type='text/javascript' src='js/jqw/jqxcheckbox.js'></script>
<script type='text/javascript' src='js/jqw/jqxcolorpicker.js'></script>
<script type='text/javascript' src='js/jqw/jqxcombobox.js'></script>
<script type='text/javascript' src='js/jqw/jqxdata.js'></script>
<script type='text/javascript' src='js/jqw/jqxdatetimeinput.js'></script>
<script type='text/javascript' src='js/jqw/jqxdocking.js'></script>
<script type='text/javascript' src='js/jqw/jqxdockpanel.js'></script>
<script type='text/javascript' src='js/jqw/jqxdragdrop.js'></script>
<script type='text/javascript' src='js/jqw/jqxdropdownbutton.js'></script>
<script type='text/javascript' src='js/jqw/jqxdropdownlist.js'></script>
<script type='text/javascript' src='js/jqw/jqxexpander.js'></script>
<script type='text/javascript' src='js/jqw/jqxgauge.js'></script>

<script type='text/javascript' src='js/jqw/jqxgrid.js'></script>
<script type='text/javascript' src='js/jqw/jqxgrid.aggregates.js'></script>
<script type='text/javascript' src='js/jqw/jqxgrid.columnsresize.js'></script>
<script type='text/javascript' src='js/jqw/jqxgrid.edit.js'></script>
<script type='text/javascript' src='js/jqw/jqxgrid.filter.js'></script>
<script type='text/javascript' src='js/jqw/jqxgrid.grouping.js'></script>
<script type='text/javascript' src='js/jqw/jqxgrid.pager.js'></script>
<script type='text/javascript' src='js/jqw/jqxgrid.selection.js'></script>
<script type='text/javascript' src='js/jqw/jqxgrid.sort.js'></script>
<script type='text/javascript' src='js/jqw/jqxlistbox.js'></script>
<script type='text/javascript' src='js/jqw/jqxlistmenu.js'></script>
<script type='text/javascript' src='js/jqw/jqxmaskedinput.js'></script>
<script type='text/javascript' src='js/jqw/jqxmenu.js'></script>
<script type='text/javascript' src='js/jqw/jqxnavigationbar.js'></script>
<script type='text/javascript' src='js/jqw/jqxnumberinput.js'></script>
<script type='text/javascript' src='js/jqw/jqxpanel.js'></script>
<script type='text/javascript' src='js/jqw/jqxpopup.js'></script>
<script type='text/javascript' src='js/jqw/jqxprogressbar.js'></script>
<script type='text/javascript' src='js/jqw/jqxradiobutton.js'></script>
<script type='text/javascript' src='js/jqw/jqxrating.js'></script>
<script type='text/javascript' src='js/jqw/jqxscrollbar.js'></script>
<script type='text/javascript' src='js/jqw/jqxscrollview.js'></script>
<script type='text/javascript' src='js/jqw/jqxslider.js'></script>
<script type='text/javascript' src='js/jqw/jqxsplitter.js'></script>
<script type='text/javascript' src='js/jqw/jqxswitchbutton.js'></script>
<script type='text/javascript' src='js/jqw/jqxtabs.js'></script>
<script type='text/javascript' src='js/jqw/jqxtooltip.js'></script>
<script type='text/javascript' src='js/jqw/jqxtouch.js'></script>
<script type='text/javascript' src='js/jqw/jqxtree.js'></script>
<script type='text/javascript' src='js/jqw/jqxvalidator.js'></script>
<script type='text/javascript' src='js/jqw/jqxwindow.js'></script>
<script type='text/javascript' src='js/jqw/globalization/jquery.global.js'></script>

<script type='text/javascript' src='js/gettheme.js'></script>
<script type="text/javascript" src="generatedata.js"></script>

<script type="text/javascript">
        $(document).ready(function () {
            $("#jqxwindow").jqxWindow({ resizable: false, theme: 'classic', autoOpen: false, width: 210, height: 180 });
            $("#jqxwindow").jqxWindow('open');
            $("#clearButton").click(function () { $("#jqxgrid").jqxGrid('clearfilters'); });

            $("#findButton").click(function () {
		var vid = $("#inputPTid").val();
		var did = $("#inputWKid").val();
		$("#eventLog").html(" selected : (" + vid + ") and (" + did+")");
		var source =
		{
			url: 'gmddata.php', datatype: "json", data: {cid: vid}, cache: false,
			datafields: [ { name: 'CustomerID'}, { name: 'CompanyName'}, { name: 'ContactName'}, { name: 'ContactTitle'}, { name: 'Address'}, { name: 'City'}, ],
			root: 'Rows', beforeprocessing: function (data) { source.totalrecords = data[0].TotalRows; }
		};

		var Adapter = new $.jqx.dataAdapter(source);
		$("#jqxgrid").jqxGrid( { source: Adapter, rendergridrows: function (obj) { return obj.data; } });

		var vsource =
		{
			url: 'gmddata.php', datatype: "json", data: {cstid: did}, cache: false,
			datafields: [ { name: 'CustomerID'}, { name: 'CompanyName'}, { name: 'ContactName'}, { name: 'ContactTitle'}, { name: 'Address'}, { name: 'City'}, ],
			root: 'Rows', beforeprocessing: function (data) { source.totalrecords = data[0].TotalRows; }
		};

		var dataAdapter = new $.jqx.dataAdapter(vsource, {
	                loadComplete: function () {
	                    var records = dataAdapter.records;
	                    var length = records.length;
	                    var html = "<table border='1'><tr><th align='left'>Customer ID</th><th align='left'>Company Name</th><th align='left'>Contact Title</th><th align='left'>Address</th><th align='left'>City</th></tr>";
	                    for (var i = 0; i < length; i++) {
	                        var record = records[i];
	                        html += "<tr>";
	                        html += "<td>" + record.CustomerID + "</td>";
	                        html += "<td>" + record.CompanyName + "</td>";
	                        html += "<td>" + record.ContactTitle + "</td>";
	                        html += "<td>" + record.Address + "</td>";
	                        html += "<td>" + record.City + "</td>";
	                        html += "</tr>";
	                    }
	                    html += "</table";
	                    $("#jqxRecord").html(html);
	                }
	        });
	        dataAdapter.dataBind();

            });

	    $("#jqxgrid").jqxGrid(
            {
                theme: 'classic', pageable: false, autoheight: false, virtualmode: false, rendergridrows: function () { return Adapter.records; },
                columns: [
                  { text: 'Customer ID', datafield: 'CustomerID', width: 100},
                  { text: 'Company Name', datafield: 'CompanyName', width: 250},
                  { text: 'ContactName', datafield: 'ContactName', width: 150 },
                  { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
                  { text: 'Address', datafield: 'Address', width: 200 },
                  { text: 'City', datafield: 'City', width: 120 }
              ]
            });
	    $("#jqxgrid").jqxGrid('hide');

	    $("#ordersGrid").jqxGrid(
			{
				virtualmode: true, pageable: true, autoheight: true, theme: 'classic',
				columns: [
					  { text: 'Shipped Date', datafield: 'ShippedDate', cellsformat: 'd', width: 200 },
					  { text: 'Ship Name', datafield: 'ShipName', width: 200 },
					  { text: 'Address', datafield: 'ShipAddress', width: 180 },
					  { text: 'City', datafield: 'ShipCity', width: 100 },
					  { text: 'Country', datafield: 'ShipCountry', width: 140 }
				  ]
	    });

	    $("#jqxgrid").bind('rowselect', function (event) {
			var row = event.args.rowindex;
			var id = $("#jqxgrid").jqxGrid('getrowdata', row)['CustomerID'];
			var source =
			{
				url: 'gmddata.php', datatype: 'json', data: {customerid: id}, cache: false,
				datafields: [ { name: 'ShippedDate' }, { name: 'ShipName' }, { name: 'ShipAddress' }, { name: 'ShipCity' }, { name: 'ShipCountry' } ],
				root: 'Rows', beforeprocessing: function (data) { source.totalrecords = data[0].TotalRows; }
 			};
			var adapter = new $.jqx.dataAdapter(source);
			$("#ordersGrid").jqxGrid( { source: adapter, rendergridrows: function (obj) { return obj.data; } });
			$("#ordersGrid").jqxGrid('show');
		 });
        });
    </script>
</head>
<body class='default'>
<table>
<tr valign=top><td><h3>Customers</h3><div id="jqxgrid"></div></td><td><h3>Orders by Customer</h3><div id="ordersGrid"></div></td></tr>
</table>
<div id="jqxwindow">
            <div>Find Record</div>
            <div>
                <div>Find what:</div>
                <div style='margin-top:5px;'><input id='inputPTid' type="text" class="jqx-input" style="width: 200px; height: 23px;" /></div>
                <div style='margin-top:5px;'><input id='inputWKid' type="text" class="jqx-input" style="width: 200px; height: 23px;" /></div>
                <div>
                    <input type="button" style='margin-top: 15px; margin-left: 50px; float: left;' value="Find" id="findButton" />
                    <input type="button" style='margin-left: 5px; margin-top: 15px; float: left;' value="Clear" id="clearButton" />
                </div>
            </div>
</div>
<div id = 'eventLog'></div>
<div id = 'jqxRecord'></div>

</body>
</html>

and php script
<?php

$rval = "";
while (list($key, $val) = each($_REQUEST)) { $rval .= "(".$key . ") = (" . $val . ")<br>"; }
$myFile = "gmddata-testfile.txt";
$fh = fopen($myFile, 'a+') or die("can't open file");
fwrite($fh,"-----------------------------------------\n".$rval."\n");
fclose($fh);

include('connect.php');
$connect = mysql_connect($hostname, $username, $password) or die('Could not connect: ' . mysql_error());
$bool = mysql_select_db($database, $connect); if ($bool === False){ print "can't find $database"; }

if (isset($_REQUEST['customerid']))
{
        $pagenum = $_REQUEST['pagenum'];
        $pagesize = $_REQUEST['pagesize'];
        $start = $pagenum * $pagesize;
        $query = "SELECT SQL_CALC_FOUND_ROWS * FROM Orders WHERE CustomerID='" .$_REQUEST['customerid'] . "'";
        $query .= " LIMIT $start, $pagesize";
        $result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
        $sql = "SELECT FOUND_ROWS() AS `found_rows`;";
        $rows = mysql_query($sql);
        $rows = mysql_fetch_assoc($rows);
        $total_rows = $rows['found_rows'];
        // get data and store in a json array
        while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
                $orders[] = array(
                        'OrderDate' => $row['OrderDate'],
                        'ShippedDate' => $row['ShippedDate'],
                        'ShipName' => $row['ShipName'],
                        'ShipAddress' => $row['ShipAddress'],
                        'ShipCity' => $row['ShipCity'],
                        'ShipCountry' => $row['ShipCountry']
                  );
        }
    $data[] = array( 'TotalRows' => $total_rows, 'Rows' => $orders);
        echo json_encode($data);
}
elseif (isset($_REQUEST['cstid']))
{
 if (isset($_REQUEST['cstid'])) $cid=$_REQUEST['cstid']; else $cid = "AROUT";

        $query = "SELECT SQL_CALC_FOUND_ROWS * FROM Customers WHERE CustomerID='" .$cid. "'";
        $result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
        $sql = "SELECT FOUND_ROWS() AS `found_rows`;";
        $rows = mysql_query($sql);
        $rows = mysql_fetch_assoc($rows);
        $total_rows = $rows['found_rows'];
        while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
                $customers[] = array(
                        'CustomerID' => $row['CustomerID'],
                        'CompanyName' => $row['CompanyName'],
                        'ContactName' => $row['ContactName'],
                        'ContactTitle' => $row['ContactTitle'],
                        'Address' => $row['Address'],
                        'City' => $row['City'],
                        'Country' => $row['Country']
                  );
        }
    $data[] = array( 'TotalRows' => $total_rows, 'Rows' => $customers);
        echo json_encode($data);
}
elseif (isset($_REQUEST['cid']))
{
 if (isset($_REQUEST['cid'])) $cid=$_REQUEST['cid']; else $cid = "AROUT";

        $query = "SELECT SQL_CALC_FOUND_ROWS * FROM Customers WHERE CustomerID='" .$cid. "'";
        $result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
        $sql = "SELECT FOUND_ROWS() AS `found_rows`;";
        $rows = mysql_query($sql);
        $rows = mysql_fetch_assoc($rows);
        $total_rows = $rows['found_rows'];
        while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
                $customers[] = array(
                        'CustomerID' => $row['CustomerID'],
                        'CompanyName' => $row['CompanyName'],
                        'ContactName' => $row['ContactName'],
                        'ContactTitle' => $row['ContactTitle'],
                        'Address' => $row['Address'],
                        'City' => $row['City'],
                        'Country' => $row['Country']
                  );
        }
    $data[] = array( 'TotalRows' => $total_rows, 'Rows' => $customers);
        echo json_encode($data);
}

else
{
if(isset($_REQUEST['pagenum']) && isset($_REQUEST['pagesize'])) {
  $pagenum = $_GET['pagenum'];
  $pagesize = $_GET['pagesize'];
  $start = $pagenum * $pagesize;
  $query = "SELECT SQL_CALC_FOUND_ROWS * FROM Customers LIMIT $start, $pagesize";
}
else    $query = "SELECT SQL_CALC_FOUND_ROWS * FROM Customers";
        $result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
        $sql = "SELECT FOUND_ROWS() AS `found_rows`;";
        $rows = mysql_query($sql);
        $rows = mysql_fetch_assoc($rows);
        $total_rows = $rows['found_rows'];
        while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
                $customers[] = array(
                        'CustomerID' => $row['CustomerID'],
                        'CompanyName' => $row['CompanyName'],
                        'ContactName' => $row['ContactName'],
                        'ContactTitle' => $row['ContactTitle'],
                        'Address' => $row['Address'],
                        'City' => $row['City'],
                        'Country' => $row['Country']
                  );
        }
    $data[] = array( 'TotalRows' => $total_rows, 'Rows' => $customers);
        echo json_encode($data);
}

?>
when connect this page by browser put data ANTON and BOLID then php script works with parameter as below
-----------------------------------------
(filterscount) = (0)<br>(groupscount) = (0)<br>(pagenum) = (0)<br>(pagesize) = (10)<br>(recordstartindex) = (0)<br>(recordendindex) = (18)<br>(cid) = (ANTON)<br>(_) = (1349306872396)<br>
-----------------------------------------
(filterscount) = (0)<br>(groupscount) = (0)<br>(pagenum) = (0)<br>(pagesize) = (10)<br>(recordstartindex) = (0)<br>(recordendindex) = (18)<br>(cid) = (ANTON)<br>(_) = (1349306872396)<br>
-----------------------------------------
Last parameter set-> (_) = (1349306872396)<br>
As I have question
Why does not exist 'BOLID' and Why does it works tow times with 'ANTON'  and What is last empty parameter set.
when I was using single source then that php script works two times. does not have one time ?
if have solutions about that I hope to know how can I.
regards,
    October 5, 2012 at 10:10 am Update the DataSource #8973

    Peter Stoev
    Keymaster

    For server filtering, please take a look at this help topic: php-server-side-grid-filtering.htm.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    October 10, 2012 at 4:54 am Update the DataSource #9151

    eno
    Member

    Thanks for response to me,

    I need to use two source at one time and handle two result data.

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

You must be logged in to reply to this topic.