grid detail similar formview

[Maria]

Hi, i have this needs:i want to select an item in my grid with server side grid selection, at the selection, i want that a similar structure as aspner formview it will fill with another dataset from sqldatasource, from the ID selection in grid. I want to replicate the manage of Inline- edit- form of grid, but with selection command with differente table taplate and different datasoucrce, how i make it in aspnet formview. It is possible make this?

i have seen also dialog detail, simila to this, but not want dialog, but a section below row selection with customs date with different datasource from parent but the same key

[Maria]

Any suggestion for this?

[Venkatesh Ayothi Raman]

Hi Maria, 

Thank you for contacting Syncfusion support. 

We have achieved your requirement using inline form template feature in Grid. In this, we can render the edit form with data. In server side, we can bound the data source for EmployeeID column. If we select the data, we can have rendered the templated form with additional input field of FirstName while editing the record. 

Here FirstName is the another datasource field but both EmployeeID values are same. In ActionComplete event, we have bound the FirstName field data. Please refer to the code example, sample, demo and Help documents for more information, 

Code example: 

<Grid> 

<ej:Grid ID="Grid1"    AllowPaging="True" 

             

               runat="server"> 

            <Columns> 

             . . . 

            </Columns> 

             

            <ClientSideEvents RecordClick="RecordClick" ActionComplete="ActionComplete"/>            . . . 

              <EditSettings  AllowEditOnDblClick="false" AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="InlineFormTemplate" InlineFormTemplateID="#template"></EditSettings> 

              

        </ej:Grid> 

 

<Template> 

  <script type="text/template" id="template"> 

        <b>Order Details</b> 

        <table cellspacing="10"> 

            <tr> 

                <td style="text-align: right;">Order ID 

                </td> 

                <td style="text-align: left"> 

                    <input id="OrderID" name="OrderID" value="{{: OrderID}}" disabled="disabled" 

                        class="e-field e-ejinputtext valid e-disable" style="text-align: right; width: 116px; height: 28px" /> 

                </td> 

                <td style="text-align: right;">Employee ID 

                </td> 

                <td style="text-align: left"> 

                    <input id="EmployeeID" name="EmployeeID" value="{{:EmployeeID}}" class="e-field e-ejinputtext valid" 

                        style="width: 116px; height: 28px; text-align: left!important" /> 

                </td> 

            </tr> 

 

            <tr> 

                <td style="text-align: right;">FristName 

                </td> 

                <td style="text-align: left"> 

                    <input type="text" id="FristName" name=" FristName " value=" " /> 

                </td>            

            </tr> 

        </table> 

    </script> 

 

<RecordClick Event> 

function RecordClick(args) { 

            emp = args.data.EmployeeID; // We can get the employeeID data while selecting the Grid 

             

        } 

<ActionComplete> 

 

function ActionComplete(e) { 

            if (e.requestType == "beginedit") { // Check the Condition  

                var columnCount = e.model.columns.length; 

                               for (var k = 0; k < columnCount; k++) {                                   

                                       

                                   if (this.model.columns[k]["field"] == "EmployeeID") 

                                   { 

                                       var dataManager = ej.DataManager(this.model.columns[k]["dataSource"]).executeLocal(ej.Query().where("EmployeeID", "equal", emp));// Filter the datasource with selected employeeID value 

                                       var value = dataManager[0].FirstName; 

                                       $("#FirstName").val(value); //Update the data  

                                   } 

                } 

                 

            } 

        } 

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/7z/InlineFormTemplate715445951 

Demo: http://www.syncfusion.com/downloads/support/directtrac/general/7z/template165522817 

Help Documents: 

1)      RecordClick: https://help.syncfusion.com/js/api/ejgrid#events:recordclick 

2)      ActionComplete: https://help.syncfusion.com/js/api/ejgrid#events:actioncomplete 

Regards, 

Venkatesh Ayothiraman. 

[Maria]

Thanks for reply, in other, so, I need that in inline template fill another grid with another different data source. For example I need to fill this in inline template: fields of employ, fields of employed order from second data source, and fill a grid of all product manager of this employed. All in detail in click row. In other, all this field I want that not are editable. But also read. Is possible to add a different grid in inline template?

[Venkatesh Ayothi Raman]

Hi Maria, 

Thanks for the update. 

Query #1: “I need to fill this in inline template: fields of employ, fields of employed order from second data source” 

  

We have achieved your requirement using same recordClick and ActionComplete event in Grid. While selecting the record, we can get the row details and row data. Here, we get the EmployeeID value and pass the additional parameter using addParams method. In server side, we can filter the data with second data source by using additional parameter and return the result.   

We can store the values to inline template form fields while editing the record by using ActionComplete event. In this event, we can retrieve the data from second data source and fill the corresponding data to the template fields. Please refer to the code example and sample.  

Code example: 

<GRID> 

<ej:Grid ID="Grid1"    AllowPaging="True" 

            EnableRowHover="true"     AllowCellMerging="false" 

              AllowReordering="false" Locale="en-US" AllowMultiSorting="false"  

              AllowSelection="True" Selectiontype="Single" 

               runat="server"> 

            <Columns> 

           . . .  

            </Columns> 

             

            <ClientSideEvents  RecordClick="RecordClick"  ActionComplete="ActionComplete"/> 

           . . .             

        </ej:Grid> 

 

<Template for second datasource fields> 

<script type="text/template" id="template"> 

        <b>Order Details</b> 

        <table cellspacing="10"> 

            <tr> 

            <td style="text-align: right;">Employee ID 

                </td> 

                <td style="text-align: left"> 

                    <input id="EmployeeID" name="EmployeeID" disabled="disabled" value="{{:EmployeeID}}"  

                       class="e-field e-ejinputtext valid e-disable"  style="width: 116px; height: 28px; text-align: left!important" /> 

                </td> 

                <td style="text-align: right;">PostalCode 

                </td> 

                <td style="text-align: left"> 

                    <input id="PostalCode" name="PostalCode" value="" disabled="disabled" 

                        class="e-field e-ejinputtext valid e-disable" style="text-align: right; width: 116px; height: 28px" /> 

                </td> 

                 

            </tr> 

 

            <tr> 

                <td style="text-align: right;">FirstName 

                </td> 

                <td style="text-align: left"> 

                    <input type="text" class="e-field e-ejinputtext valid e-disable" id="FirstName" name="FirstName" disabled="disabled"  value="" /> 

                </td>   

                 <td style="text-align: right;">LastName 

                </td> 

                <td style="text-align: left"> 

                    <input id="LastName" name="LastName" value="" disabled="disabled" 

                        class="e-field e-ejinputtext valid e-disable" style="text-align: right; width: 116px; height: 28px" /> 

                </td> 

                          

            </tr> 

            <tr> 

                <td style="text-align: right;">City 

                </td> 

                <td style="text-align: left"> 

                    <input type="text" class="e-field e-ejinputtext valid e-disable" id="City" disabled="disabled" name="City" value="" /> 

                </td>   

                  <td style="text-align: right;">Country 

                </td> 

                <td style="text-align: left"> 

                    <input type="text" class="e-field e-ejinputtext valid e-disable" id="Country" disabled="disabled" name="Country" value="" /> 

                </td> 

                </tr> 

        </table> 

    </script> 

 

<RECORD CLICK EVENT> 

 

function RecordClick(args) { 

          var  emp = args.data.EmployeeID; // We can get the employeeID data while selecting the Grid 

          dataSource2 = ej.DataManager(window.employeeView).executeLocal(ej.Query().where("EmployeeID", 'equal', emp)); //// get the filtered data from another datasource 

             

        } 

 <ActionComplete Event> 

 

function ActionComplete(e) { 

 

            if (e.requestType == "beginedit") { // Check the Condition  

                var data = dataSource2[0];                   $("#PostalCode").val(data.PostalCode); //Store the data into template fields with another datasource 

                $("#FirstName").val(data.FirstName);   //Store the data into template fields with another datasource 

                $("#LastName").val(data.LastName);     //Store the data into template fields with another datasource 

                $("#City").val(data.City);             //Store the data into template fields with another datasource 

                $("#Country").val(data.Country);       //Store the data into template fields with another datasource 

 

 

 

            } 

        } 

screenshot: 

 

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/7z/InlineFormTemplate2016731802 

Note: We have disable the edit form fields for as you have mentioned “ll this field I want that not are editable”. 

Query #2: “Is possible to add a different grid in inline template” 

We have unclear about your requirement. Do you want to display the another Grid instead of inline edit form? Could you please share the more information about your requirement? 

Regards, 

Venkatesh Ayothiraman. 

[Maria]

Query #2: “Is possible to add a different grid in inline template” :

i explain this, i tryng to find a method more similar to structuere of asp formiew. Ap forview, with a semple structure permitted me to add different field with one datasource, but in edit template, also in item template, a differentcontrol , how gridview, to bind different information with diffente source data. A searching to replicate this management with grid syncfusion. Now, i have understand that i can feel diffenrent field with different data source; now, in edit template, then i not want edit but also view other information of one record (then also without save and cancel button), i want add also control Grid that i need to bind with another source, for example product source; that i want to see also in edit template of the same record; as ican make it in asp:formview with Edit template or Item template.

[Venkatesh Ayothi Raman]

Hi Maria, 

Thanks for the update. 

From your query we understood that, you want to render the form view with different data source as well as render the new grid control with different data source depends upon selected the record. We created the sample which we have understand as from your query. 

In this sample, we have rendered the Form view with different data source while click the expand icon/row and rendered the another Grid when we click the record using Detail template feature in Grid. Please refer to the code example, sample and Help documents, 

Code example: 

<GRID> 

div class="frame "> 

    <div> 

        <ej:Grid ID="EmployeesGrid"  runat="server" AllowPaging="true" DetailsTemplate="#tabGridContents"> 

            <ClientSideEvents DetailsDataBound="detailGridData" /> 

           <Columns> 

                . . . 

            </Columns> 

            <PageSettings PageSize=5></PageSettings> 

        </ej:Grid> 

    </div> 

 

<Another Grid> 

<ej:Grid ID="OrdersGrid"  runat="server" AllowPaging="true"> 

            <Columns> 

                

                . . . 

            </Columns> 

        </ej:Grid> 

 

 

//Detailtemplate 

<script id="tabGridContents" type="text/x-jsrender"> 

                             <div id="detailGrid{{:EmployeeID}}"> 

 

                     <b>Order Details</b> 

        <table cellspacing="10"> 

            <tr> 

            <td style="text-align: right;">Employee ID 

                </td> 

                <td style="text-align: left"> 

                    <input class="EmployeeID" name="EmployeeID" disabled="disabled" value=""  

                         style="width: 116px; height: 28px; text-align: left!important" /> 

                </td> 

                <td style="text-align: right;">PostalCode 

                </td> 

                <td style="text-align: left"> 

                    <input class="PostalCode" name="PostalCode" value="" disabled="disabled" 

                         style="text-align: right; width: 116px; height: 28px" /> 

                </td> 

                 

            </tr> 

 

            <tr> 

                <td style="text-align: right;">FirstName 

                </td> 

                <td style="text-align: left"> 

                    <input type="text"  class="FirstName" name="FirstName" disabled="disabled"  value="" /> 

                </td>   

                 <td style="text-align: right;">LastName 

                </td> 

                <td style="text-align: left"> 

                    <input class="LastName" name="LastName" value="" disabled="disabled" 

                         style="text-align: right; width: 116px; height: 28px" /> 

                </td> 

                          

            </tr> 

            <tr> 

                <td style="text-align: right;">City 

                </td> 

                <td style="text-align: left"> 

                    <input type="text"  class="City" disabled="disabled" name="City" value="" /> 

                </td>   

                  <td style="text-align: right;">Country 

                </td> 

                <td style="text-align: left"> 

                    <input type="text"  class="Country" disabled="disabled" name="Country" value="" /> 

                </td> 

                </tr> 

        </table> 

        

                </div>          

        

    </script> 

 

<Detail Grid> 

<script type="text/javascript"> 

  function detailGridData(e) { 

             var filteredData = e.data["EmployeeID"];            

             var data = ej.DataManager(window.ordersView).executeLocal(ej.Query().where("EmployeeID", "equal", parseInt(filteredData), true)); // Bound the Grid with different data source 

             e.detailsElement.find("#detailGrid"+filteredData).ejGrid({ 

                 dataSource: data, 

                 allowSelection: false, 

                 columns: [ 

                     { field: "EmployeeID", width: 90 }, 

                     { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", width: 80, textAlign: ej.TextAlign.Right }, 

                     { field: "CustomerID", headerText: 'Customer ID', width: 80, textAlign: ej.TextAlign.Left }, 

                     { field: "CompanyName", headerText: 'Company Name', width: 120, textAlign: ej.TextAlign.Left }, 

                     { field: "ShipCity", headerText: 'City', width: 120, textAlign: ej.TextAlign.Left } 

                 ] 

             }); 

         } 

<Details data bound event> 

function detailGridData(e) { 

             var emp = e.data.EmployeeID 

           var dataSource2 = ej.DataManager(window.employeeView).executeLocal(ej.Query().where("EmployeeID", 'equal', emp)); //// get the filtered data from another datasource 

           var data = dataSource2[0]; 

           e.detailsElement.find(".EmployeeID").val(emp); 

           e.detailsElement.find(".PostalCode").val(data.PostalCode); //Store the data into template fields with another datasource 

           e.detailsElement.find(".FirstName").val(data.FirstName);   //Store the data into template fields with another datasource 

           e.detailsElement.find(".LastName").val(data.LastName);     //Store the data into template fields with another datasource 

           e.detailsElement.find(".City").val(data.City);             //Store the data into template fields with another datasource 

           e.detailsElement.find(".Country").val(data.Country);       //Store the data into template fields with another datasource 

         

         } 

 

 

// render the another grid when select the record from master Grid 

         $(function () { 

            $('#<%= EmployeesGrid.ClientID %>').ejGrid({ 

             selectedRowIndex: 0, 

             rowSelected: function (args) { 

                 var employeeId = args.data.EmployeeID; 

                 var detaildata = ej.DataManager(window.ordersView).executeLocal(ej.Query().where("EmployeeID", ej.FilterOperators.equal, employeeId, false).take(10));// bound the different data source 

                 var gridObj = $('#<%= OrdersGrid.ClientID %>').ejGrid("instance"); 

                 gridObj.dataSource(ej.DataManager(detaildata.slice(0, 5))); 

             } 

         }); 

         }); 

 

   //Record Click event 

function recordClick(e) { 

 

    var detailIcon = e.row.find(".e-detailrowcollapse").find(".e-icon"); 

    this.expandCollapse(detailIcon);//expand the detail grid when click the record 

} 

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/7z/InlineFormTemplate-2138694463 

Help Documents: 

1)      Detail template:https://help.syncfusion.com/aspnet/grid/row#details-template 

2)      DetailsDataBound event: https://help.syncfusion.com/js/api/ejgrid#events:detailsdatabound 

We have also created a demo video for your convenience, please kindly refer to the demo that can be download from following link, 

Demo: http://www.syncfusion.com/downloads/support/directtrac/general/7z/DetailMaster-578826835 

Regards, 

Venkatesh Ayothiraman.