Eternally Curious

Flexigrid examples using xml

noreply@blogger.com (Hector Perez) — Thu, 20 Oct 2011 19:37:00 -0400

Lately I have been using the jquery ui to improve the look and style on the web site I am developing for a company. But as good as jquery ui is what messing a big piece, grids!

So I looked for a solution that would create good looking grids with the minimun of fuzz. I found it in http://flexigrid.info/

It is a jquery ui extension that adds easy to create grids to a web site. The only draw back it is not well documented, especially if using xml data instead of the json data. I advice that you start by reading and seeing the examples on the http://flexigrid.info/ site so you can get started. But soon you will need to see some examples, especially with xml. These XML examples helpful to figure out how to use flexigrid with xml data.

First here is the link to a zip file with the source code for the examples.

The first example uses a static xml file. It just creates a grid on a page. Notice that I placed the grid inside a div container. This is the best method to size the height and width of the grid. Also note that I did not specified the width, so the grid will expand to all available width on the division. The height of the grid I control with javacode $("#GridArea").innerHeight()*.80 . This makes the grid 80% of the container leaving space for the navigation bar. You can also choose just to subtract a specific number of pixels instead.

Here is this example page on my website and here is the code:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Flexigrid Example 1</title>

<link href="/CSS/flexigrid.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" />

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script language="javascript" src="/js/flexigrid.js"></script>

<script type="text/javascript" >

$(function() {

$("#flex1").flexigrid({
url: 'zipcode_small.xml',
dataType: 'xml',
colModel : [
{display: 'City', name : 'City', width : 150, align: 'left'},
{display: 'State', name : 'StateName', width : 150,  align: 'left'},
{display: 'Abbreviation', name : 'StateAbb', width : 40, align: 'left'},
{display: 'Zip', name : 'Zip', width : 50, align: 'left'},
{display: 'Latitude', name : 'Latitude', width : 100, align: 'left'},
{display: 'Longitude', name : 'Longitude', width : 100, align: 'left'},
{display: 'Timezone', name : 'Timezone', width : 100, align: 'left'},
{display: 'DST', name : 'DST', width : 50, align: 'left'}
],
rp: 20,
usepager: true,
title: "Zip code list",
useRp: true,
showTableToggleBtn: false,
resizable: true,
height: $("#GridArea").innerHeight()*.80,
singleSelect: true
});

});

</script>
</head>

<body>
<div id="content" style="width:600px; height:400px">
The flexigrid display a static xml file. added  height: $("#GridArea").innerHeight()*.80   , to make the grid 80% og the height of the countainer to give espace for the page bar. You can also use  height: $("#GridArea").innerHeight()-45, to do the same thing (substractiong 45 pixels to give it space).
<div id="GridArea" style="width:100%; height:100%">
<table id="flex1">
</table>
</div>
</div>
</body>
</html>

The grid open the zipcode_small.xml page with the data. The xml is has to be formatted in a very specific way.

Example:

<rows>

<page>x</page> <total>xx</total>

<row id="1"><cell></cell><cell></cell></row>

<row id="2"><cell></cell><cell></cell></row>

</rows>

The <page> is the page of the record set the <total> is the number of records, then each row for the table with each cell of data for the table.

Here is this example page 2 on my website
Here is this example page 3 on my website

On example page 4 flexigrid4.php has two functions, have one that fires when a cell is clicked and another changes the color of the cell according to value (if the state is Florida or Georgia).

<!DOCTYPE HTML>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flexigrid Example 4</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" />
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script language="javascript" src="/js/flexigrid.js"></script>
<link href="/CSS/flexigrid.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" >

$(function() {

$("#flex1").flexigrid({
url: 'vwzip.php',
dataType: 'xml',
colModel : [
{display: 'City', name : 'City', width : 150, sortable : true, align: 'left',process: procMe},
{display: 'State', name : 'StateName', width : 150, sortable : true, align: 'left',process: procMe},
{display: 'Abbreviation', name : 'StateAbb', width : 40, sortable : true, align: 'left',process: procMe},
{display: 'Zip', name : 'Zip', width : 50, sortable : true, align: 'left',process: procMe},
{display: 'Latitude', name : 'Latitude', width : 100, sortable : true, align: 'left',process: procMe},
{display: 'Longitude', name : 'Longitude', width : 100, sortable : true, align: 'left',process: procMe},
{display: 'Timezone', name : 'Timezone', width : 100, sortable : true, align: 'left',process: procMe},
{display: 'DST', name : 'DST', width : 50, sortable : true, align: 'left',process: procMe}
],
searchitems : [
{display: 'City', name : 'City'},
{display: 'State', name : 'StateName'},
{display: 'Zip', name : 'Zip', isdefault: true}
],
rp: 20,
sortname: "City",
sortorder: "asc",
usepager: true,
title: "Zip code list",
useRp: true,
showTableToggleBtn: false,
resizable: true,
height: $("#GridArea").innerHeight()*.80,
singleSelect: true,
onSuccess: function(){highlight()}
});
});

function procMe(celDiv,id) {
$(celDiv).click(
function () {
alert('Row ID:'+(id)+' with cell value of '+celDiv.innerHTML);
}
);
};

function highlight() {
var i=0;
for (i=0;i < document.getElementById("flex1").rows.length;i++)
{
var table=document.getElementById("flex1");
// cell numbers start with 0 since the state is the second column the cell number is 1
var State_To_Check=table.rows[i].cells[1].firstChild.innerHTML;
if (State_To_Check=="FLORIDA") {
table.rows[i].cells[1].firstChild.style.backgroundColor="#FF0";
}
if (State_To_Check=="GEORGIA") {
table.rows[i].cells[1].firstChild.style.backgroundColor="#00FF00";
}
}
}

</script>
</head>

<body>
<div id="content" style="width:600px; height:400px">
<div id="GridArea" style="width:100%; height:100%">
<table id="flex1">
</table>
</div>
</div>
</body>
</html>

The code for the xml generating page is important. You must pass the following post variables for the navegation bar to be usefull: rp,page, sortorder,sortname,query, qtype

The variable are use for the following functions:

the rp sets the number of records per page

page is what page you are on.

sortorder = the order of field (asc for ascending, desc for descending)

sortname= the field to sort

query= the value to each for

qtype= the column to search for

in the example bellow you can see how these post variable work to select and order the xml data.

<?php require_once('../Connections/ExampleDB.php'); ?>

<?PHP
//page number of the grid
$pageNum_Recordset1 = 1;
if (isset($_POST['page'])) {
$pageNum_Recordset1 = mysql_real_escape_string($_POST['page']);

}

// sort order of the grid

$Recordset1_Order="";
if (isset($_POST['sortorder']) and isset($_POST['sortname'])) {
$SortBy_Recordset1= mysql_real_escape_string($_POST['sortname']);
$SortDirectionRecordset1 = mysql_real_escape_string($_POST['sortorder']);
$Recordset1_Order="Order by ".$SortBy_Recordset1." ".$SortDirectionRecordset1;

}

// passing the search values from the search box
$Search_column="";
$Search_value="";
$query_Recordset1_Where="";
if (isset($_POST['query']) and isset($_POST['qtype'])) {
$Search_column = trim(mysql_real_escape_string($_POST['qtype']));
$Search_value = trim(mysql_real_escape_string($_POST['query']));
$query_Recordset1_Where=" Where ".$Search_column." like '".$Search_value. "%' ";

}

// number of records on the grid

$maxRows_Recordset1 = 20;
if (isset($_POST['rp'])) {
$maxRows_Recordset1 = mysql_real_escape_string($_POST['rp']);
}

// idField is the firld name to use for row id key and for the cound of records

$idField = "Zip";
// basic query statements
$query_Statement_Recordset1 = "SELECT City,StateName,StateAbb,Zip,Latitude,Longitude,Timezone,DST FROM vwzip ";
$query_Count_Statement_Recordset1 = "SELECT COUNT(Zip) FROM vwzip ";

// start row is the page times the number of records per page

$startRow_Recordset1=0;
$startRow_Recordset1 = ($pageNum_Recordset1-1) * $maxRows_Recordset1;

// add filter (search) criteria
$query_Recordset1 = $query_Statement_Recordset1.$query_Recordset1_Where.$Recordset1_Order;

$query_Count_Recordset1 = $query_Count_Statement_Recordset1.$query_Recordset1_Where;

// limit to the page amount of records
$query_limit_Recordset1 = sprintf("%s LIMIT %d, %d", $query_Recordset1, $startRow_Recordset1, $maxRows_Recordset1);

//open connection
mysql_select_db($database_ExampleDB, $ExampleDB);

// recordset with count

$all_Recordset1 = mysql_query($query_Count_Recordset1, $ExampleDB) or die(mysql_error());
$row = mysql_fetch_row($all_Recordset1);
$totalRows_Recordset1 = $row[0];
$totalPages_Recordset1 = ceil($totalRows_Recordset1/$maxRows_Recordset1)-1;

// record set with data

$Recordset1 = mysql_query($query_limit_Recordset1, $ExampleDB) or die(mysql_error());

// $row_Recordset1 = mysql_fetch_assoc($Recordset1);

header ("content-type: text/xml");

$xml_output = '<?xml version="1.0" encoding="utf-8"?>';
$xml_output .= "<rows>";
$xml_output .= "<page>".$pageNum_Recordset1."</page>";
$xml_output .= "<total>".$totalRows_Recordset1."</total>";
for($x = 0 ; $x < mysql_num_rows($Recordset1) ; $x++){
$row = mysql_fetch_assoc($Recordset1);
$xml_output .= '<row id="'.$row[$idField].'">';
$i=0;
while ($i < mysql_num_fields($Recordset1)) {
$fn=mysql_field_name($Recordset1,$i);
// Escaping illegal characters
if (is_null($row[$fn])) { $fieldval=" ";} else {$fieldval = str_replace("&", "&", $row[$fn]);}
$fieldval = str_replace("<", "<", $fieldval);
$fieldval = str_replace(">", ">", $fieldval);
$fieldval = str_replace('"', """,$fieldval);
$fieldval = str_replace('"', """,$fieldval);
$fieldval = str_replace("'", """,$fieldval);

$xml_output .= "<cell>" .$fieldval . "</cell>";
$i++;
}

$xml_output .= "</row>";

}

$xml_output .= "</rows>";

echo $xml_output;

?>

Normally, I do not query the database table directly, but use a view instead. This allows me to format the fields as I want (add numeric format, timezone adjustments, etc) and allows the Sql server to presort the data.

Here is this example page 5 on my website

Here is a example of a grid integrated in my website.

I hope this helps!!!!

Photo Portfolio

noreply@blogger.com (Hector Perez) — Thu, 24 Mar 2011 12:25:00 -0400

Click here to view this photo book larger

Return

noreply@blogger.com (Hector Perez) — Thu, 2 Dec 2010 12:22:00 -0500

Back from Panama. will post soon.

Will Apple ever allow Flash on its IPads and IPhones?

noreply@blogger.com (Hector Perez) — Mon, 12 Apr 2010 19:33:00 -0400

Since Apple’s IPhone release in June 29, 2007, the IPhone has not supported Adobe Flash; and it doesn’t look like it will in the future. Apple stand on not supporting Flash is a business decision. Apple originally gave the excuse that Flash would slow down the IPhone browser and left it out for performance issues.

That was 3 years ago, now millions of IPhones and thousands of applications latter still no Flash. It’s not because the new phones can perform. It’s just that Apple would not like to see developers creating apps in flash that will work for IPhone and rivaling phones. Apple would not be able to control their products and applications as tightly as they have. They control the content, appearance, and ultimately the business of all the companies that make applications for the device. Think of it as a commercial big brother or China. If the government had such control of your phone people would be protesting on the street but Apple veneer of “we are cool, we are cheek, we are good” and quality of its products have for a time quieted most voices. But lets not forget; Apple is a business. They have stockholders and employees. They have to make a profit or the company will fail, a large profit for the company to succeed. Apple will not purposely hurt its bottom line by providing a way for customers to move away from their app store. They will continue to restrict and control their products for as long as they can. You don’t believe me? Why does the IPhone does not have a flash card reader? No USBs? Why did it take so long for Spype, Google, and others apps to be approved? Apple used every excuse that they could, without actually saying no.

So will Flash ever get to the IPhone… I think eventually it will. Eventually the excuses will run out. But Apple is hoping that they can delay it long enough that everyone who wants content will move to HTML5. Which they will find a way to control too.

How to filter messages on GMAIL

noreply@blogger.com (Hector Perez) — Mon, 29 Mar 2010 15:25:00 -0400

GMail has a great little function call filters that can help you organize your email quickly by automatically adding labels or executing a special action. I use it to organize my incoming emails by category so I can see important things like ebills together and non important things like my Netflix responses that I don't keep for long and usually delete soon after. You can create as many filters as you want on GMail.

Lets start by first going to your GMail inbox.

Then open an email that you want to add a filter to. You will see a button "More Actions" on top of the email. Press it and select "Filter messages like this"

On the next screen, in the "Create Filter" section verify that you have chosen the right senders email. You can all additional parameters on the other boxes. Then press the "Next Step" button.

On the "Create Filter" section select the actions you want to take with this filter. I usually use a filter to add a new label automatically. Check the apply filter to the following xxx conversations so that the filter will be applied to previous emails that meet the criteria. When finished click on the "Create Filter" button .

Under "Settings" the status will be updated and your new filter will be added.

Now if select your label all of the emails that meet your criteria will be selected and label automatically. You can now organize your emails more quickly

This was just a brief tutorial but it is a great feature of GMail that I use often.

Windows Phone 7 Series: Microsoft's Fresh Start

noreply@blogger.com (Hector Perez) — Tue, 16 Feb 2010 11:17:00 -0500

Windows Phone 7 Series: Microsoft's Fresh Start

Posted using ShareThis

Alternatives to Photoshop, Dreamweaver and InDesign

noreply@blogger.com (Hector Perez) — Mon, 15 Feb 2010 14:40:00 -0500

Alternatives to Photoshop, Dreamweaver and InDesign

Posted using ShareThis

Page 2 - 10 Reasons Why a Google Fiber Network Could Reshape the ISP Landscape - IT Infrastructure from eWeek

noreply@blogger.com (Hector Perez) — Fri, 12 Feb 2010 00:35:00 -0500

Page 2 - 10 Reasons Why a Google Fiber Network Could Reshape the ISP Landscape - IT Infrastructure from eWeek

Posted using ShareThis

Need to learn about technology? Ask your kids!

noreply@blogger.com (Hector Perez) — Mon, 25 Jan 2010 18:33:00 -0500

For many years I have served as my family and friends their technology installer, support, teacher and serviceman. It's a infamous position by my background and my incessant need to thinker with technology. I however have found a way to reduce the urgent phone calls at all times of day.

I simple tell then to find a teenager (hopefully your own) and ask for help.

You get the following advantages:

The usually understand the technology much better. They literally grew up on it.

They get show off, allowing to impress their elders and develop a rapport. You will be amazed on how much of this technology they have learned.

They are usually more available and free!