We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

grid detail similar formview

Thread ID:

Created:

Updated:

Platform:

Replies:

126131 Sep 26,2016 01:28 PM UTC Sep 30,2016 12:19 PM UTC ASP.NET Web Forms 6
loading
Tags: Grid
Maria
Asked On September 26, 2016 01:28 PM UTC

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
Replied On September 27, 2016 08:01 AM UTC

Any suggestion for this?

Venkatesh Ayothi Raman [Syncfusion]
Replied On September 27, 2016 01:21 PM UTC

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  
                                   } 
                } 
                 
            } 
        } 

Help Documents: 

Regards, 
Venkatesh Ayothiraman. 


Maria
Replied On September 28, 2016 01:55 PM UTC

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 [Syncfusion]
Replied On September 29, 2016 09:57 AM UTC

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: 
 
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
Replied On September 29, 2016 01:34 PM UTC

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 [Syncfusion]
Replied On September 30, 2016 12:19 PM UTC

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 
} 

Help Documents: 

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


Regards, 
Venkatesh Ayothiraman. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;