jQuery Grid Plugin - jqGridForum

Topic RSS

cutomize edit problem

09/12/2009
10:01

sayed

Guest

Guests

I am having problem to add in line buttions for edit,save,cancel. here is my code ...

index.php

<html> <head> <title>jqGrid Demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="themes/coffee/grid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/jqModal.css" />
<link rel="stylesheet" href="css/calendar.css" media="screen"></link>
<script language="JavaScript" type="text/JavaScript" src="js/cms.js"></script>
<script language="JavaScript" type="text/javascript" src="js/calendar.js"></script>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.jqGrid.js" type="text/javascript"></script>
   <script src="js/jqModal.js" type="text/javascript"></script>
   <script src="js/jqDnR.js" type="text/javascript"></script>
   <script type="text/javascript">
    jQuery(document).ready(function(){ jQuery("#list").jqGrid({
    url:'example_j.php',
    datatype: 'xml',
    mtype: 'GET',
    colNames:['Actions','Request From','Mobile No','Massege', 'Time','Call Type'],
    colModel :[{name:'act',index:'act', width:75,sortable:false},{name:'request_from', index:'request_from', width:150, align:'center',editable:true,edittype:"text",editoptions: {size:10, maxlength: 30}}, {name:'msisdn', index:'msisdn', width:150,editable:true,edittype:"text",editoptions: {size:10, maxlength: 30}}, {name:'msg_body', index:'msg_body', width:350, sortable:false,editable:true,edittype:"text",editoptions: {size:10, maxlength: 30}}, {name:'creation_time', index:'creation_time', width:220, align:'right',editable:true,edittype:"text",editoptions: {size:10, maxlength: 30}}, {name:'call_type', index:'call_type', width:120, align:'right',editable:true,edittype:"text",editoptions: {size:10, maxlength: 30}}],

    pager: jQuery('#pager'),
    rowNum:20,
    rowList:[10,20,30],
    sortname: 'creation_time',
    sortorder: "desc",
    width: 900,
    height: "auto",
    viewrecords: true,
    imgpath: 'themes/coffee/images',

    gridComplete: function()
    {
    var ids = jQuery("#list").jqGrid('getDataIDs');

        for(var i=0;i < ids.length;i++)
        { var cl = ids[i];
            be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=\\"jQuery('#list').editRow('"+cl+"');\\" />";
            se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=\\"jQuery('#list').saveRow('"+cl+"');\\" />";
            ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\\"jQuery('#list').restoreRow('"+cl+"');\\" />";

            jQuery("#list").jqGrid('setRowData',ids[i],{act:be+se+ce});

        }
    },
    editurl: "example_j.php",
    caption: 'My first grid'

});

    var timeoutHnd;
var flAuto = false;
   function doSearch(ev){ if(!flAuto)
    return; // var elem = ev.target||ev.srcElement;
if(timeoutHnd)
     clearTimeout(timeoutHnd)
timeoutHnd = setTimeout(gridReload,500) }

function gridReload()
{

<div>

     <br/> Date From<br />
     <input type="text" id="date_from" /><input name="datebutton" type="button" onClick="displayCalendar(document.getElementById('date_from'),'yyyy/mm/dd',this,true)" value="Calendar" /> </div>
     <div> Date To<br>
      <input type="text" id="date_to" /><input name="datebutton" type="button" onClick="displayCalendar(document.getElementById('date_to'),'yyyy/mm/dd',this,true)" value="Calendar" />
       <div>

       <button onClick="gridReload()" id="submitButton" style="margin-left:30px;">Search</button>
        </div>

    <div style="text-align:center; width:100%; margin-left:150px">
    <div id="srccontents"></div>
    <table id="list" class="scroll" ></table>
     <div id="pager" class="scroll" style="text-align:center;"></div>
    </div>
    </body>
    </html>

example_j.php

<?php
//include the information needed for the connection to MySQL data base server.
// we store here username, database and password
include("dbconfig.php");

// to the url parameter are added 4 parameters as described in colModel
// we should get these parameters to construct the needed query
// Since we specify in the options of the grid that we will use a GET method
// we should use the appropriate command to obtain the parameters.
// In our case this is $_GET. If we specify that we want to use post
// we should use $_POST. Maybe the better way is to use $_REQUEST, which
// contain both the GET and POST variables. For more information refer to php documentation.
// Get the requested page. By default grid sets this to 1.
$page = $_GET['page'];

// get how many rows we want to have into the grid - rowNum parameter in the grid
$limit = $_GET['rows'];

// get index row - i.e. user click to sort. At first time sortname parameter -
// after that the index from colModel
$sidx = $_GET['sidx'];

// sorting order - at first time sortorder
$sord = $_GET['sord'];

// if we not pass at first time index use the first column for the index or what you want
if(!$sidx) $sidx =1;

date_default_timezone_set('Asia/Dhaka');
//$current_date_time=date("Y/m/d");
$current_date_time="2009/06/04";

if(isset($_GET["date_from"]))
$date_from = $_GET['date_from'];
else $date_from = "";

if(isset($_GET["date_to"]))
$date_to = $_GET['date_to'];
else $date_to = "";

//construct where clause
//AND time(creation_time) BETWEEN '00:00:01' AND '23:59:59'
$where = "WHERE 1=1 ";
if($date_from!='' && $date_to!='')
$where.= " AND creation_time BETWEEN '$date_from%' AND '$date_to%'";
else if($date_from!='')
$where.= " AND creation_time LIKE '$date_from%'";
else if($date_to!='')
$where.= " AND creation_time LIKE '$date_to%'";

// connect to the MySQL database server
$db = mysql_connect($dbhost, $dbuser, $dbpassword) or die("Connection Error: " . mysql_error());

// select the database
mysql_select_db($database) or die("Error connecting to db.");

// calculate the number of rows for the query. We need this for paging the result
$result = mysql_query("SELECT COUNT(*) AS count FROM outbox ".$where."");
//$result = mysql_query("SELECT COUNT(*) AS count FROM invheader");
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$count = $row['count'];

// calculate the total pages for the query
if( $count > 0 ) {
$total_pages = ceil($count/$limit);
} else {
$total_pages = 0;
}

// if for some reasons the requested page is greater than the total
// set the requested page to total page
if ($page > $total_pages) $page=$total_pages;

// calculate the starting position of the rows
$start = $limit*$page - $limit;

// if for some reasons start position is negative set it to 0
// typical case is that the user type 0 for the requested page
if($start <0) $start = 0;

// the actual query for the grid data
//$SQL = "SELECT id, invdate, amount, tax,total, note FROM invheader ORDER BY $sidx $sord LIMIT $start , $limit";
//echo "SELECT inbox_id,msisdn, msg_body, creation_time, out_telco,call_type, status FROM outbox ORDER BY $sidx $sord LIMIT $start , $limit";

$SQL = "SELECT inbox_id,msisdn, msg_body, creation_time, call_type,request_from FROM outbox ".$where." ORDER BY $sidx $sord LIMIT $start , $limit";
$result = mysql_query( $SQL ) or die("Couldn't execute query.".mysql_error());

// we should set the appropriate header information
if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) {
header("Content-type: application/xhtml+xml;charset=utf-8");
} else {
header("Content-type: text/xml;charset=utf-8");
}
echo "<?xml version='1.0' encoding='utf-8'?>";
echo "<rows>";
echo "<page>".$page."</page>";
echo "<total>".$total_pages."</total>";
echo "<records>".$count."</records>";

// be sure to put text data in CDATA
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {

echo "<row id='". $row[inbox_id]."'>";
echo "<cell></cell>";
            echo "<cell>". $row[request_from]."</cell>";
            echo "<cell>". $row[msisdn]."</cell>";
            echo "<cell>". $row[msg_body]."</cell>";
            echo "<cell>". $row[creation_time]."</cell>";
            echo "<cell>". $row[call_type]."</cell>";

echo "</row>";
}
echo "</rows>";
?>

can any one help me, where is the problem ?

11/12/2009
00:45

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

What is exactley your problem? Any error?

What you expect ?

Which version of jqGrid?

It seems like your response does not match the colModel

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.