jQuery Grid Plugin - jqGrid - Topic: How to insert jqgrid in the edit form of another jqgrid? http://www.trirand.com/blog/?page_id=393/help/how-to-insert-jqgrid-in-the-edit-form-of-another-jqgrid Simple:Press Version 5.7.5.3 Wafaas on How to insert jqgrid in the edit form of another jqgrid? http://www.trirand.com/blog/?page_id=393/help/how-to-insert-jqgrid-in-the-edit-form-of-another-jqgrid#p22222 Help http://www.trirand.com/blog/?page_id=393/help/how-to-insert-jqgrid-in-the-edit-form-of-another-jqgrid#p22222 Yes, i already used insertAfter and insertBefore to move some HTML elements.

Would you look at this code, i successfully inserted autocomplete plugin into the edit form but i failed to do the same for a simple jqgrid, please tell me if it is possible to modify and make it work or i should look for another solution.

    jQuery(document).ready(function(){

      var url ="<%= request.getContextPath() %>/GetHotDocs?detailsType=HotDoc";
      var editurl ="<%= request.getContextPath() %>/UpdateHotDocs?detailsType=HotDoc";
        var autocompleteurl ="<%= request.getContextPath() %>/GetAutoCompleteData";
        var mydata = [{id:"1",name:"install"}, {id:"2",name:"monitor"}, {id:"3",name:"backup"}];
        /*for(var i=0;i<=mydata.length;i++) {
            jQuery("#associatedlist").jqGrid('addRowData',i+1,mydata[i]);
        }*/
            
      jQuery("#hotdocgrid").jqGrid({
        url: url+"&item="+ $('#concept_name').text()+ "&catg="+$('#concept_category').text().trim(),
        datatype: "json",  
        colNames:['id','LinkTitle','Title', 'URL', 'Concept','ConceptX','ConceptY','Category', 'Concept2', 'Concept3', 'Concept4', 'Concept5'],
        colModel:[      
                      {name:'id',index:'id', hidden:true},
                    {name:'LinkTitle',index:'LinkTitle', width:40, sortable:false},
                    {name:'Title',index:'Title', width:40, hidden:true, sortable:false,editable:true, editrules:{required:true, edithidden:true},
                     editoptions:{size:50}
                    },                           
                    {name:'url',index:'url',width:40,hidden:true, sortable:false, editable:true, editrules:{required:true,edithidden:true},
                    //{name:'url',index:'url',width:40,sortable:false, editable:true, editrules:{required:true},
                      editoptions:{size:50},formoptions:{elmprefix:'<div id="form_concept_head"><b>Concepts:</b></div>'}    
                    },                         
                    {name:'Product1',index:'Product1', width:40, sortable:false, editable:true, editrules:{required:true},
                      editoptions:{
                        size:50,                             
                         dataInit: function(elem) {
                            $(elem).autocomplete(autocompleteurl, {
                                  minChars:3,
                                scroll: true,
                                scrollHeight: 200,
                                limit:200,
                                extraParams:{catg:'Product'},
                                autoFill: false,
                                noCache:true
                               });
                           $(elem).result(function(event, data, formatted) {
                           if (data)
                               $("#Product1").val(data[1]);
                           });
                           
                           $(elem).autocomplete(autocompleteurl, {
                                  minChars:3,
                                scroll: true,
                                scrollHeight: 200,
                                limit:200,
                                extraParams:{catg:'Activity'},
                                autoFill: false,
                                noCache:true
                               });}},                        
                        formoptions:{label: '*Product', elmsuffix:'<div id="prod_addrow"><input id="addprodRow" '+
                              'colspan="2" type="button" class="addRow" value="Add" /></div>'}
                    },
                    {name:'Category',index:'Category', width:40, sortable:false},                         
                    {name:'Activity1',index:'Activity1',width:40,hidden:true, sortable:false, editable:true, editrules:{required:false,edithidden:true},
                      editoptions: {
                         size:50,                             
                         dataInit: function(elem) {
                            $(elem).autocomplete(autocompleteurl, {
                                  minChars:3,
                                scroll: true,
                                scrollHeight: 200,
                                limit:200,
                                extraParams:{catg:'Activity'},
                                autoFill: false,
                                noCache:true
                               });
                           $(elem).result(function(event, data, formatted) {
                           if (data)
                               $("#Activity1").val(data[1]);
                           });}},
                        formoptions:{label: 'Activity',elmsuffix:'<div id="act_addrow"><input id="addactRow" '+
                                                      'colspan="2" type="button" class="addRow" value="Add" />'}
                    },
                    {name:'ConceptX',index:'ConceptX', width:40, sortable:false, editable:true, editrules:{required:true},
                      editoptions:{
                        size:50,                             
                         dataInit: function(elem) {
                            $(elem).autocomplete(autocompleteurl, {
                                  minChars:3,
                                scroll: true,
                                scrollHeight: 200,
                                limit:200,
                                extraParams:{catg:'Product'},
                                autoFill: false,
                                noCache:true
                               });
                           $(elem).result(function(event, data, formatted) {
                           if (data)
                               $("#ConceptX").val(data[1]);
                           });}},                     
                        formoptions:{label: '*ConceptX', elmsuffix:'<div id="ConceptX_addrow"><input id="addConceptXRow" '+
                              'colspan="2" type="button" class="addRow" value="Add" /></div>'}
                    },   
                    {name:'ConceptY',index:'ConceptY', width:40, sortable:false, editable:true, editrules:{required:true},
                      editoptions:{
                        size:50,                             
                         dataInit: function(elem) {
                            jQuery("#associatedlist").jqGrid({
                                data: mydata,
                                datatype: "local",
                                colNames:['id','name'],
                                colModel:[
                                    {name:'id',index:'id', width:55, editable:true, editoptions:{readonly:true}, sorttype:'int'},
                                    {name:'name',index:'name', width:90, sorttype:'date', editable:true}],
                                rowNum:10,
                                rowTotal: 50,
                                rowList:[10,20,30],
                                //pager: '#pcrud',
                                sortname: 'id',
                                loadonce: true,
                                viewrecords: true,
                                sortorder: "desc",
                                editurl: 'server.jsp',
                                caption:"CRUD on Local Data" });
                        }},                     
                        formoptions:{label: '*ConceptY', elmsuffix:'<div id="ConceptX_addrow"><table id="associatedlist"><tr><td>&nbsp;</td></tr></table></div>'}
                    },                      

]]> Sun, 27 Feb 2011 19:00:28 +0200 OlegK on How to insert jqgrid in the edit form of another jqgrid? http://www.trirand.com/blog/?page_id=393/help/how-to-insert-jqgrid-in-the-edit-form-of-another-jqgrid#p22217 Help http://www.trirand.com/blog/?page_id=393/help/how-to-insert-jqgrid-in-the-edit-form-of-another-jqgrid#p22217 Hello,

Your scenario seems me too complex, but if you really need to add any additional HTML element in the edit form you can do this inside of beforeShowForm event handler. You can for example use jQuery.insertAfter or close jQuery functions to insert any HTML fragment in the form. See for example Add dialog of this example.

Best regards
Oleg 

]]> Sun, 27 Feb 2011 15:20:44 +0200 Wafaas on How to insert jqgrid in the edit form of another jqgrid? http://www.trirand.com/blog/?page_id=393/help/how-to-insert-jqgrid-in-the-edit-form-of-another-jqgrid#p22215 Help http://www.trirand.com/blog/?page_id=393/help/how-to-insert-jqgrid-in-the-edit-form-of-another-jqgrid#p22215 Hi,

I really appreciate help, and below is the scenario.

I have jqgrid with certain customization to show and hide columns in the edit form, and i want to customize the edit form to include another simple jqgrid which contains 2 columns only id and name in order to add or edit it instantly inside the form.

Thanks,

]]> Sun, 27 Feb 2011 14:40:26 +0200