jQWidgets Forums

Forum Replies Created

Viewing 1 post (of 1 total)
  • Author
    Posts
  • in reply to: problem while editing grid problem while editing grid #31154

    AhmedHamed
    Member

    Hello

    this is the sample code, as the image with class delete has the tool tip, when I just double click a cell, the tooltip doesn’t show up again

    and u can view a live demo here http://hamed.foozee.net/cabs/rooms.php

    Thanks In Advance

    <?php
    include('connect.php');
    // get data and store in a json array
    $query = "SELECT * FROM room";
    // SELECT COMMAND
    $result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
    while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
    $rooms[] = array(
    'roomsn' =>$row['ID'],
    'name' => $row['name'],
    'capacity' => $row['capacity'],
    // this is the image link which has the tool tip and it has class "delete".........................
    'delete'=>'<a href="data.php?deleteroom=true&roomsn='.$row['ID'].'"><img src="delete.png" class="delete" style="width: 20px;
    margin-left: 20px;"/></a>'
    );
    }
    $rooms=json_encode($rooms);
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" type="text/css"/>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css"/>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.metrodark.css" type="text/css"/>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.darkblue.css" type="text/css"/>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.classic.css" type="text/css"/>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.shinyblack.css" type="text/css"/>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.orange.css" type="text/css"/>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.ui-le-frog.css" type="text/css"/>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.energyblue.css" type="text/css"/>
    <script type="text/javascript" src="scripts/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="scripts/gettheme.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqx-all.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var source =
    {
    datatype: "json",
    datafields: [
    { name: 'roomsn',type: 'number' },
    { name: 'name' ,type: 'string'},
    { name: 'capacity',type: 'number' },
    { name: 'delete' }
    ],
    id: 'roomsn',
    localdata: <?php echo $rooms;?>,
    updaterow: function (rowid, rowdata, commit) {
    // synchronize with the server - send update command
    var data = "updateroom=true&name=" + rowdata.name + "&capacity=" + rowdata.capacity ;
    data = data + "&roomsn=" + rowdata.roomsn;
    $.ajax({
    dataType: 'json',
    url: 'data.php',
    data: data,
    success: function (data, status, xhr) {
    // update command is executed.
    commit(true);
    },
    error: function () {
    // cancel changes.
    commit(false);
    }
    });
    }
    };
    $("#jqxgrid").jqxGrid({
    width: 900,
    autoheight:true,
    selectionmode: 'singlecell',
    editable: true,
    filterable: true,
    sortable:true,
    pageable:true,
    pagesize: 15,
    enablehover: true,
    pagesizeoptions: ['10', '15', '20'],
    showfilterrow: true,
    source: source,
    theme: 'classic',
    columns: [
    { text: 'Room SN.', editable: false,filtertype:'textbox', datafield: 'roomsn' },
    { text: 'Room Name', columntype: 'name',filtertype:'textbox', datafield: 'name' },
    { text: 'Capacity', columntype: 'numberinput',filtertype:'textbox', datafield: 'capacity' },
    { text: 'Delete',selectionmode:'none',width:70,enablehover: false, editable: false,filterable: false,sortable:false, datafield: 'delete'
    }
    ]
    });
    $(".delete").jqxTooltip({ position: 'top', content: 'Delete Room', theme:'metrodark',
    autoHide:true,autoHideDelay: 9999999999 });
    });
    </script>
    </head>
    <body>
    <div id="jqxgrid"></div>
    </body>
    </html>
Viewing 1 post (of 1 total)