[Andrew CooperParticipant]

That works perfectly. You are the man.

[Andrew CooperParticipant]

Ah. I see. That’ll work. Thanks, Dimitar.

[Andrew CooperParticipant]

Somehow I missed the filterable property. You are awesome. Thanks.

Andrew

[Andrew CooperParticipant]

I was trying to be too tricky. I did it through jQuery instead of jqWidgets. $(“#input”).val(“some value”);

Got to remember that straight jQuery works too.

Andrew

[Andrew CooperParticipant]

I lied. It didn’t work. It was Chrome auto-filling the username and password fields. It is still not putting the values into the fields the way I expect.

[Andrew CooperParticipant]

Nevermind. I enclosed the inputs in a form tag and it is working now. Apparently that made all the difference.

Andrew

[Andrew CooperParticipant]

Peter,

Thanks so much. I’m not sure how I missed that.

Andrew

[Andrew CooperParticipant]

cje,

Here’s how I did it.

<div id="campaigns_table"></div>

<!-- Campaign content javascript -->

<script type="text/javascript" src="js/jqwidgets/jqxdata.js"></script> 
<script type="text/javascript" src="js/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="js/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="js/jqwidgets/jqxdatatable.js"></script> 
<script type="text/javascript" src="js/jqwidgets/jqxdropdownlist.js"></script> 
<script type="text/javascript" src="js/jqwidgets/jqxlistbox.js"></script> 

<script type="text/javascript">
    function contentReady() {
        // prepare the data
        var source = {
            dataType: "json",
            dataFields: [
                { name: 'id', type: 'integer' },
                { name: 'campaign_name', type: 'string' },
                { name: 'total_sales', type: 'float' },
                { name: 'status', type: 'string' }
            ],
            url: "campaigns/db_campaign_list.php"
        };

        var dataAdapter = new $.jqx.dataAdapter(source, {
                formatData: function (data) {
                    $.extend(data, {
                        featureClass: "P",
                        style: "full",
                        username: "jqwidgets",
                        maxRows: 50
                    });

                    return data;
                }
            }
        );

        $("#campaigns_table").jqxDataTable({
        	theme: "<?php echo $widget_style; ?>",
            width: 750,
            pageable: true,
            pagerButtonsCount: 10,
            source: dataAdapter,
            columnsResize: true,
			sortable: true,
			showToolbar: true,
			altRows: true,
            filterable: true,
			filterMode: "advanced",
            columns: [
                { text: 'ID', dataField: 'id', width: 50 },
                { text: 'Campaign Name', dataField: 'campaign_name', width: 250 },
                { text: 'Total Sales', dataField: 'total_sales', cellsFormat: 'c', width: 250 },
                { text: 'Status', dataField: 'status' }
            ]
        });
		
		$("#campaigns_table").on("rowDoubleClick", function (event) {
			var row = event.args.row;
			alert("You will be editing - " + row.campaign_name);
		});
    }
</script>

Here’s the data part from a PHP file.

<?php
$list = array();

$list[] = array("id" => 32, "campaign_name" => "A Brand New Campaign", "total_sales" => 0.00, "status" => "Active");
$list[] = array("id" => 31, "campaign_name" => "2015 Griffin Ga PD", "total_sales" => 3420.00, "status" => "Active");
$list[] = array("id" => 30, "campaign_name" => "2015 York Co", "total_sales" => 475.00, "status" => "Active");
$list[] = array("id" => 29, "campaign_name" => "2015 Hampton County", "total_sales" => 511.00, "status" => "Active");
$list[] = array("id" => 28, "campaign_name" => "2015 Liberty County", "total_sales" => 12458.00, "status" => "Inactive");
$list[] = array("id" => 27, "campaign_name" => "2015 Barnwell County", "total_sales" => 25365.00, "status" => "Inactive");
$list[] = array("id" => 26, "campaign_name" => "2015 Calhoun Co", "total_sales" => 4582.00, "status" => "Inactive");
$list[] = array("id" => 25, "campaign_name" => "2015 Chester County", "total_sales" => 125.00, "status" => "Inactive");
$list[] = array("id" => 24, "campaign_name" => "2015 Midland County", "total_sales" => 3541.00, "status" => "Active");
$list[] = array("id" => 23, "campaign_name" => "2015 Midland County", "total_sales" => 458.00, "status" => "Inactive");
$list[] = array("id" => 22, "campaign_name" => "2015 Gastonia, NC Explorers", "total_sales" => 985.00, "status" => "Inactive");
$list[] = array("id" => 21, "campaign_name" => "2015 Powder Springs Explorers", "total_sales" => 4592.00, "status" => "Inactive");
$list[] = array("id" => 20, "campaign_name" => "2015 Anderson Explorers", "total_sales" => 0.00, "status" => "Active");
$list[] = array("id" => 19, "campaign_name" => "2015 Richland Co", "total_sales" => 1256.00, "status" => "Inactive");
$list[] = array("id" => 18, "campaign_name" => "2015 Pickens, Sc Explorers", "total_sales" => 2453.00, "status" => "Inactive");
$list[] = array("id" => 17, "campaign_name" => "2015 Frankfort, KY P.D.", "total_sales" => 1253.00, "status" => "Inactive");
$list[] = array("id" => 16, "campaign_name" => "2015 Paducah Explorer", "total_sales" => 45.00, "status" => "Inactive");
$list[] = array("id" => 15, "campaign_name" => "2015 NCDOA BURLINGTON", "total_sales" => 3658.00, "status" => "Inactive");
$list[] = array("id" => 14, "campaign_name" => "2014 Burleson PD Explorer", "total_sales" => 0.00, "status" => "Inactive");
$list[] = array("id" => 13, "campaign_name" => "Nassau Co. FL", "total_sales" => 425.00, "status" => "Inactive");
$list[] = array("id" => 12, "campaign_name" => "2014 NCDOA Watauga", "total_sales" => 965.00, "status" => "Inactive");
$list[] = array("id" => 11, "campaign_name" => "2014 Reidsville NCPD", "total_sales" => 2632.00, "status" => "Inactive");
$list[] = array("id" => 10, "campaign_name" => "2014 NCDOA Monroe", "total_sales" => 125.00, "status" => "Inactive");
$list[] = array("id" => 9, "campaign_name" => "2014 NCDOA Waxhaw", "total_sales" => 0.00, "status" => "Inactive");
$list[] = array("id" => 8, "campaign_name" => "Liberty Co. TX", "total_sales" => 459.00, "status" => "Inactive");
$list[] = array("id" => 7, "campaign_name" => "2014 NCDOA Monroe", "total_sales" => 256.00, "status" => "Inactive");

echo json_encode($list);
?>

It doesn’t matter how I get the $list array. I haven’t gotten it from a db query yet but I will.

[Andrew CooperParticipant]

Just for the general information of others who might stumble upon this problem and still be looking for a solution. The solution to simply set the scrollbar’s display property to “none” sucks, as it results in an ugly space left at the bottom of the vertical scrollbar. However, there is now an easy solution that doesn’t seem to have made it into the documentation yet. The sizeMode property of the Panel accepts “horizontalWrap” and “verticalWrap” as values. They do what you would expect, causing the appropriate scrollbar to disappear and the contents to wrap in that direction. It works very well.

Andrew

[Author]

Posts