Hi,
I'm trying to integrate jqGrid inside a backend item form. The idea is to handle m-n relations using the grid.
When the user open the item view (input-output from table A) some of the fields are rendered as a grid (jqGrid) connected to table C. The grid should already contain:
- id of the item, from table A
- a drop-down cell (e.g. id of a second element), from table B
- some fields to be filled by the user -> the complete row is then written to the m-n C table.
An example could be a reference book.
Label of the field: bibliography
- id of the item
- id of the book (from a drop-down cell)
- Field "page number" to be filled by the user.
So far I am just trying to use a simple grid (no drop-down cells) to show/edit data from/to an external table, i.e. I am trying to reproduce the "inline navigator" (add-delete rows section) demo here: =http://www.trirand.net/demophp.aspx .
Here is what I did.
1) Copy the jqSuite folder inside admin (change accordingly the mycomponent.xml root file)
2) Inside admin/helpers/helper.php I have added, inside headerDeclarations:
// CUSTOM JqGrid
//$doc->addScript($componentUrlAdmin . 'jqsuite/js/jquery.js');
$doc->addScript($componentUrlAdmin . 'jqsuite/js/i18n/grid.locale-en.js');
$doc->addScript($componentUrlAdmin . 'jqsuite/js/jquery.jqGrid.min.js');
$doc->addScript($componentUrlAdmin . 'jqsuite/js/jquery-ui-custom.min.js');
// END CUSTOM JqGrid
I have commented the first line as jquery.js is the non minified 1.8.2 version, that should be the same as 1.8.2.min.js already loaded by Cook.
In the [CSS] part of the function
//CUSTOM JQGRID
$doc->addStyleSheet($componentUrlAdmin . '/css/jqsuite/themes/redmond/jquery-ui-custom.css');
$doc->addStyleSheet($componentUrlAdmin . '/css/jqsuite/themes/ui.jqgrid.css');
$doc->addStyleSheet($componentUrlAdmin . '/css/jqsuite/themes/ui.multiselect.css');
//END CUSTOM
3) Inside views/item/tmpl/item.php I have modified the ready(function()) as follows:
jQuery(document).ready(function(){
jQuery("#adminForm").validationEngine();
jQuery("#grid").jqGrid();
4) Inside views/item/tmpl/item_form.php, after </fieldset> I have added:
<div class="elena">
<?php include ("grid.php");?>
</div>
5) I have created the grid.php file and I have saved it inside views/item/tmpl/. The file is copied from Trirand demo site, except for the fact that I have disabled the tab view under the grid and that I have replaced this code:
// Connection to the server
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
// Tell the db that we use utf-8
$conn->query("SET NAMES utf8");
with this one:
$db = JFactory::getDBO();
$conn = $db -> getQuery(true);
Then the grid is rendered normally with:
$grid = new jqGridRender($conn);
Now, when I load my item view, I don't see any grid (I also tried loading some data directly inside the database, but nothing appears).
Firefox shows that this code is generated:
<div class="elena">
<table id="grid"></table>
<script type="text/javascript">
jQuery(document).ready(function($) {jQuery('#grid').jqGrid({"width":"650","hoverrows":true,"viewrecords":true,"jsonReader":{"repeatitems":false,"subgrid":{"repeatitems":false}},"xmlReader":{"repeatitems":false,"subgrid":{"repeatitems":false}},"gridview":true,"url":"C:\\xampp_old\\htdocs\\seblod\/administrator\\components\\com_manta\\views\\element\\tmpl\\grid.php","editurl":"C:\\xampp_old\\htdocs\\seblod\/administrator\\components\\com_manta\\views\\element\\tmpl\\grid.php","cellurl":"C:\\xampp_old\\htdocs\\seblod\/administrator\\components\\com_manta\\views\\element\\tmpl\\grid.php","caption":"This is custom Caption","rowNum":10,"sortname":"id_el","rowList":[10,20,50],"postData":{"grid_recs":776,"oper":"grid"},"datatype":"json","colModel":[],"prmNames":{"page":"page","rows":"rows","sort":"sidx","order":"sord","search":"_search","nd":"nd","id":"id_el","filter":"filters","searchField":"searchField","searchOper":"searchOper","searchString":"searchString","oper":"oper","query":"grid","addoper":"add","editoper":"edit","deloper":"del","excel":"excel","subgrid":"subgrid","totalrows":"totalrows","autocomplete":"autocmpl"},"loadError":function(xhr,status, err){ try {jQuery.jgrid.info_dialog(jQuery.jgrid.errors.errcap,'<div class="ui-state-error">'+ xhr.responseText +'</div>', jQuery.jgrid.edit.bClose,{buttonalign:'right'});} catch(e) { alert(xhr.responseText);} },"pager":"#pager"});jQuery('#grid').jqGrid('navGrid','#pager',{"edit":false,"add":false,"del":true,"search":true,"refresh":true,"view":false,"excel":false,"pdf":false,"csv":false,"columns":false},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150,"errorTextFormat":function(r){ return r.responseText;}},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150,"errorTextFormat":function(r){ return r.responseText;}},{"errorTextFormat":function(r){ return r.responseText;}},{"drag":true,"closeAfterSearch":true,"multipleSearch":true},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150});jQuery('#grid').jqGrid('inlineNav','#pager',{"addParams":{"addRowParams":{"oneditfunc":function()
{
alert("oneditfunc");
}},"aftersavefunc":function (id, res)
{
res = res.responseText.split("#");
try {
$(this).jqGrid('setCell', id, res[0], res[1]);
$("#"+id, "#"+this.p.id).removeClass("jqgrid-new-row").attr("id",res[1] );
$(this)[0].p.selrow = res[1];
} catch (asr) {}
}},"editParams":{"aftersavefunc":function (id, res)
{
res = res.responseText.split("#");
try {
$(this).jqGrid('setCell', id, res[0], res[1]);
$("#"+id, "#"+this.p.id).removeClass("jqgrid-new-row").attr("id",res[1] );
$(this)[0].p.selrow = res[1];
} catch (asr) {}
}}});
});
</script>
</div>
So, something seems to happen, but then Firefox also gives this error:
TypeError: jQuery(...).jqGrid is not a function
jQuery("#grid").jqGrid();
That is the code I put in my item.php file (following what stated here: =http://www.trirand.com/jqgridwiki/doku.php?id=wiki:conventions
Can anyone help me getting this working ?
Thanks for any possible suggestion !
Elena
) ?