1. Home
  2. Forum
  3. jQuery
  4. Details template: Display different input fields based on column field value plus show an ejGrid

Details template: Display different input fields based on column field value plus show an ejGrid

I have a TreeGrid like what's shown here: http://jsplayground.syncfusion.com/5m3uk1hp

When the user expands any details row I need to display (and allow the user to edit) the fields associated with its moreData array. These fields are based on the category field and can be different for each row. As part of the detailsTemplate I also have to display an ejGrid control (see processing array field) which will have the same columns but may have 0 to n rows. The ejGrid is displaying correctly in the detailsTemplate but I'm have a problem with the moreData fields. The json structure is shown below:

var projectData = [
       {
          :
          category: "Phone",
          :
         moreData: [{type: "Samsung", make: "Galaxy", model: "S7", description: "Some long description requiring a textarea"}],     //fields vary based on category
         processing: [{itemNo: "1.0.1", task: "Clean", worker: "Bob", isFinished: true}],          // used for the ejGrid
         subtasks: [
                  :                                                              // children of the TreeGrid
         ]
}


1) How do I show and allow editing of the fields in the moreData array in the detailsTemplate to be displayed along with the ejGrid? Maybe by using a template and switching the fields based on category or using jquery to show/hide content?
2) How do I allow the user to upload one or more files which may be associated with each parent or child row? 
3) How do I implement a context menu that allows the user to right-click on an existing row in the treeGrid and add a row above or below it?
4) How do I do the same thing as 2) for the ejGrid?
5) The tree grid and the ejGrid are a small part of a larger form. How do I get all the tree grid's data for submitting when the larger form's Save button is clicked? 

Thanks for any help you can provide.


1 Reply
JD Jayakumar Duraisamy Syncfusion Team June 20, 2018 10:50 AM UTC

Hi Janette, 
Please find the following response. 
 
Query 1: How do I show and allow editing of the fields in the moreData array in the detailsTemplate to be displayed along with theejGrid? Maybe by using a template and switching the fields based on category or using jquery to show/hide content?  
Answer: By using JS render helper methods, we can dynamically add input fields based on moreData array collection. We have prepared a sample and rendered input fields based moreData value in details template and added button to save modified value in data source, please refer following code snippet. 
//Js render template 
<script id="GridContents" type="text/x-jsrender"> 
        <div class="extra-category-questions" id="PhoneQuestions"> 
            <div class="row"> 
                <div id="form1"> 
                    {{for ~getFields(moreData[0])}} // Dynamically update input fields 
                    <div class="col-xs-2"> 
                        <div class="form-group"> 
                            <label for="{{>key}}">{{>key}}</label> 
                            <input value="{{>value}}" type="text" id="{{>key}}" name="{{>key}}" class="form-control"> 
                        </div> 
                    </div> 
                    {{/for}} 
                    <div class="col-xs-2"> 
                        <label></label> 
                        <input type="submit" class="form-control" value="Save" onclick="saveToMoreData();"> 
                    </div> 
                </div> 
            </div> 
        </div> 
        <div id="detailGrid{{:taskID}}"> 
 
    </script> 
<script type="text/javascript"> 
// Get key and value of JSON object 
            $.views.helpers({ 
                getFields: function (moreData) { 
                    var key, value, 
                 fieldsArray = []; 
                    for (key in moreData) { 
                        if (moreData.hasOwnProperty(key)) { 
                            value = moreData[key]; 
                            // For each property/field add an object to the array, with key and value 
                            fieldsArray.push({ 
                                key: key.toUpperCase(), 
                                value: value 
                            }); 
                        } 
                    } 
                    // Return the array, to be rendered using {{for ~fields(object)}} 
                    return fieldsArray; 
                } 
            }); 
 
Query 2: How do I allow the user to upload one or more files which may be associated with each parent or child row?   
Answer: In TreeGrid, we have column template support to render custom elements in column by using JS render template. In the sample, we have rendered custom column and displayed the folder icon which is used to open the file uploading dialog, please refer following code snippet. 
$("#TreeGrid").ejTreeGrid({ 
//.. 
columns: [ 
{ field: "upload", headerText: "Upload", isTemplateColumn: true, allowEditing: false, width:"45px", templateID:   "fileUploadTemplate" } 
]; 
}); 
}); 
                    ] 
 
Query 3:  How do I implement a context menu that allows the user to right-click on an existing row in the treeGrid and add a row above or below it? 
Answer: We can enable context menu support in TreeGrid by using “showContextMenu” inner property of “contextMenuSettings” property. Also, we can add required context menu options using “contextMenuItems” property, please refer following code snippet. 
$("#TreeGrid").ejTreeGrid({ 
//.. 
contextMenuSettings: { 
                        showContextMenu: true, 
                        contextMenuItems: ["add", "edit", "delete"] 
                    }, 
}); 
Please refer following UG documentation link to know more about context menu items support in TreeGrid. 
 
Query 4: How do I do the same thing as 2) for the ejGrid? 
Answer: In Grid also have column template support and we can implement as like TreeGrid. 
Please find the following UG link to know more about Grid column template. 

Query 5: The tree grid and the ejGrid are a small part of a larger form. How do I get all the tree grid's data for submitting when the larger form's Save button is clicked?   
Answer: We can get updated values in TreeGrid and Grid by using dataSource property. In the sample, we have displayed the updated data on button click action. 
Please refer following code snippet. 
<div class="col-xs-4"> 
        <button class="form-control" onclick="getTreeGridData();">Get All Data</button> 
    </div> 
function getTreeGridData() { 
                var treeObj = $("#TreeGrid").data("ejTreeGrid"); 
                data = treeObj.model.dataSource; 
                alert(JSON.stringify(data)); 
            } 
 
Please find the sample link as below. 
Please let us know, if you require any other assistance on this. 
Regards, 
Jayakumar D 


Loader.
Up arrow icon