Mon. - Fri. 9 am - 5 pm Ask a Question
Remember me

frontend table which we can edit

1 week 6 days ago #1

  • Birger's Avatar
  • Birger
  • Posts: 73
Hello,

I currently can't figure out a good way to display database table data (SQL query) with frontend inside gridbox. Would be nice to have this as an additional field type (pagination, filter, sorting, search, csv import, csv export) with gridbox in order to show some database values (user restricted).

I have tried to use php4grid, but the sourcerer solution seems to not work anymore. Have to check this solution again. Maybe my mistake. I have also tried droptables, but can't be injected inside gridbox. I have tried to build a module, but no success so far.

I could build a form for single values, but a dynamic table?

Do you have any good advice.

1 week 6 days ago #2

  • Birger's Avatar
  • Birger
  • Posts: 73
view, edit, delete - per line - would add even more functionality :)

1 week 6 days ago #3

  • Birger's Avatar
  • Birger
  • Posts: 73
Well, after some more tests, regularlabs sourcerer does work with e.g. this code (Joomla 3.x). Now I can show tables without view, edit, delete.
{source}
<?php
$query = "SELECT name from #__users WHERE 1 = 1";

$db->setQuery($query);
$row = $db->loadRowList();
print_r($row);

?>
{/source}

1 week 6 days ago #4

  • Birger's Avatar
  • Birger
  • Posts: 73
Never mind...

It looks like php4grid does show, using sourcerer directly:
{source}
<?php
$db_conf = array();
$db_conf["type"] = 'mysqli';
$db_conf["server"] = $app->get("host");
$db_conf["user"] = $app->get("user");
$db_conf["password"] = $app->get("password");
$db_conf["database"] = $app->get("db");

// create the grid, passing the db connection array to the constructor
require_once(JPATH_ROOT."/phpgrid/inc/jqgrid_dist.php");
$grid = new jqgrid($db_conf);

// set a few parameters of the grid
$opts["caption"] = "Joomla Update Sites";
// horizontal scroll bar
$opts["autowidth"] = false;
$opts["shrinkToFit"] = false;
$grid->set_options($opts);

// set database table for CRUD operations
$grid->table = $app->get("dbprefix")."users";

// call render method to get the html and js output
$out = $grid->render("update_sites");
?>
<div>
<?php echo $out ?>
</div>
{/source}

Can't wait to see something like this with Gridbox ;)

1 week 5 days ago #5

  • G.'s Avatar
  • G.
  • Posts: 94
+1

1 week 4 days ago #6

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 11200
Hello

We think your decision will be very useful for customers!

Regards,
Vyacheslav, Balbooa.com

1 week 4 days ago #7

  • Rene's Avatar
  • Rene
  • Posts: 306
+1

1 week 4 days ago #8

  • Birger's Avatar
  • Birger
  • Posts: 73
Well, the Grid4PHP solution looks like this:

1) Download Extension www.gridphp.com/ and unzip in folder root/phpgrid
1) Install Module www.regularlabs.com/extensions/sourcerer
2) Add the following line to the Joomla index.php file right before the line $app>execute();
if (isset($_POST['id'])){ 
unset($_REQUEST['id']); 
}

3) Add Scripts to the template header, using Gridbox Template in Joomla backend
<link rel="stylesheet" href="/phpgrid/js/themes/base/jquery-ui.custom.css"></link>
<link rel="stylesheet" href="/phpgrid/js/jqgrid/css/ui.jqgrid.bs.css"></link>
<script src="/phpgrid/js/jqgrid/js/i18n/grid.locale-de.js" type="text/javascript"></script>
<script src="/phpgrid/js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="/phpgrid/js/themes/jquery-ui.custom.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="/phpgrid/js/themes/metro-light/jquery-ui.custom.css"></link>

- ui.jqgrid.bs.css is for Bootstrap Templates (vs => ui.jqgrid.css)
- you can change the "metro-light" folder/path name for another theme
- Github Sample Code: gist.github.com/gridphp/2d81ce6cb4488acadb0162c1ba168b91
- Doc: www.gridphp.com/docs/

4) Add some custom.css (SCSS) to get a minimalistic design
/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* php4grid (https://www.gridphp.com/)
/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */

/* navbar width for icons */
.ui-jqgrid .navtable {
	width: 0px !important;
}
/* font */
.ui-jqgrid table{
	font-size: 14px !important;
}
/* borders outer */
.ui-jqgrid {
	box-shadow: none !important;
	border: none !important;
}
/* borders inner */
.ui-jqgrid table,
.ui-jqgrid table th,
.ui-jqgrid table td {
	box-shadow: none !important;
	border: none !important;
}
/* height icons top & bottom */
.ui-jqgrid .ui-pager-control {
	height: 60px !important;
}
/* background icons top */
.ui-jqgrid .ui-jqgrid-toppager {
	background: none !important;
}
/* background icons bottom */
.ui-jqgrid .ui-jqgrid-pager {
	background: none !important;
}
/* icons hover */
.ui-pg-button:hover {
	background: none !important;
	color: var(--text) !important;
}
/* background row labels & search */
.ui-state-default {
	background: none !important;
	color: var(--text) !important;
}
/* background row labels */
.ui-jqgrid .ui-jqgrid-labels .ui-state-default {
	background: none !important;
	color: var(--text) !important;
}
/* background row search */
.ui-jqgrid .ui-search-toolbar .ui-state-default {
	background: none !important;
	color: var(--text) !important;
}
/* search table */
#update_sites_globalsearchtext {
	min-width: 300px !important;
}
/* result table grid */
.ui-jqgrid-btable tr td {
	border: 1px solid var(--border) !important;
	padding: 0px 5px 0px 5px !important
}
/* result table  icons edit, delete */
.ui-jqgrid td .ui-custom-icon {
	margin: 8px;
}

4) Inject PHP code with Gridbox page using Regularlabs Sourcerer

Just a sample:
{source}

<?php

$db_conf = array();
$db_conf["type"] = 'mysqli';
$db_conf["server"] = $app->get("host");
$db_conf["user"] = $app->get("user");
$db_conf["password"] = $app->get("password");
$db_conf["database"] = $app->get("db");

// create the grid, passing the db connection array to the constructor
require_once(JPATH_ROOT."/phpgrid/inc/jqgrid_dist.php");
$grid = new jqgrid($db_conf);

// set a few parameters of the grid
$opts["form"]["nav"] = false;
$opts["caption"] = "";
$opts["autowidth"] = true;
$opts["autoresize"] = true;
$opts["resizable"] = false;
$opts["shrinkToFit"] = false;
$opts["loadtext"] = "...";
$opts["rowList"] = array(10,100,1000);
$opts["height"] = "100%";
$opts["multiselect"] = true;
$opts["cellEdit"] = true;
$opts["altRows"] = false;
$opts["pgbuttons"] = false;
$opts["viewrecords"] = false;
$opts["tooltip"] = false;
$opts["actionicon"] = false;
$opts["toolbar"] = false;
$opts["add_options"]["success_msg"] = "Daten hinzugefügt";
$opts["edit_options"]["success_msg"] = "Daten aktualisiert";
$opts["delete_options"]["success_msg"] = "Daten gelöscht";
$opts["edit_options"]["success_msg_bulk"] = "Daten aktualisiert";
$opts["pgtext"] = null;
$opts["pgbuttons"] = false;

$grid->set_options($opts);

$grid->set_actions(array(
    "add"=>false,
    "edit"=>false,
    "clone"=>false,
    "bulkedit"=>false,
    "delete"=>false,
    "view"=>false,
    "rowactions"=>false,
    "export"=>false,
    "import"=>false,
    "autofilter" => false,
    "search" => false,
    "inlineadd" => false,
    "showhidecolumns" => false
    )
);

// set database table for CRUD operations
$grid->table = $app->get("dbprefix")."baforms_submissions";

// call render method to get the html and js output
$out = $grid->render("update_sites");
?>
<div>
<?php echo $out ?>
</div>

{/source}
Powered by Kunena Forum