Grid in Inline form template

[Jeff Olson]

I have a data set and I have a child data set which I want to display in an inline form using the inline form template.  I would like to be able to add/edit records in this child data set.  Basically I have an entity and it has multiple payments.  Currently I have a child grid and and inline form template and it works, but I do not like the way it works or looks.  I is possible to access the child data set in the template?  I've searched everywhere for the answer and unable to find what I'm looking for.

Thanks,
Jeff

[Prasanna Kumar Viswanathan]

Hi Jeff, 

Thanks for contacting Syncfusion support. 

We suspect that you are having a hierarchy grid and performing CRUD operations on both parent and child data set individually. Instead, you would like to edit the child data set details while editing the parent data set. So can you please share following details 

1.       Layout/Screenshot of your actual requirement. 

 

2.       Brief explanation on your requirement. 

3.       Relationship between the child and parent dataset. 

 

Regards, 

Prasanna Kumar N.S.V 

[Jeff Olson]

Right, I would just like the user to be able to click on the row and have an area where they can edit/add child records as well as update parent records.  Even if I could access the child data set in the template someone so it's mapped to the parent.  Having to click on the arrow to update child records and double click the row to edit parent records is counter intuitive.  Maybe there's a better approach but this is all I can think of

@(Html.EJ().Grid<Object>("EvictGrid")

      .Datasource(ds => ds.Json(Model.EvictionForbearances).UpdateURL("EvictionForbearance/Update").Adaptor(AdaptorType.RemoteSaveAdaptor))

      .AllowScrolling()

      .ClientSideEvents(eve => { eve.ActionComplete("complete").Create("create"); })

      .AllowPaging()

      .PageSettings(page => page.PageSize(200))

      .IsResponsive()

      .AllowFiltering()

      .AllowSorting()

      .AllowTextWrap(true)

      .ClientSideEvents(eve => { eve.ActionComplete("complete"); })

      .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })

      .EditSettings(edit => { edit.AllowEditing().EditMode(EditMode.InlineFormTemplate).InlineFormTemplateID("#template").TitleColumn("Resident"); })

      //.EditSettings(edit => { edit.AllowEditing().EditMode(EditMode.InlineForm); }) 

      .ToolbarSettings(toolbar =>

      {

          toolbar.ShowToolbar().ToolbarItems(items =>

          {

              items.AddTool(ToolBarItems.Edit);

              items.AddTool(ToolBarItems.Update);

              items.AddTool(ToolBarItems.ExcelExport);

          });

      })

      .Columns(col =>

      {

          col.Field("EvictionForbearanceID").IsPrimaryKey(true).Visible(false).Add();

          col.Field("MarketName").HeaderText("Market").AllowEditing(false).Add();

          col.Field("PropertyIdentifier").HeaderText("Property ID").AllowEditing(false).Add();

          col.Field("County").HeaderText("County").AllowEditing(false).Add();

          col.Field("Resident").HeaderText("Resident").AllowEditing(false).Add();

          col.Field("YardiStatus").HeaderText("Yardi Status").AllowEditing(false).Add();

          col.Field("DelinquentDate").HeaderText("Delinquent Date").Format("{0:MM/dd/yyyy}").AllowEditing(false).Add();

          col.Field("TotalDelinquentBalance").HeaderText("Total Delinquent Balance").AllowEditing(false).Add();

          col.Field("DaysInDelinquency").HeaderText("Days In Delinquency").AllowEditing(false).Add();

          col.Field("EvictionStatusDate").HeaderText("Changed to Evict Date").Format("{0:MM/dd/yyyy}").AllowEditing(false).Add();

          col.Field("JudgementFlag").HeaderText("Judgement?").Width(175).AllowEditing(true).DisplayAsCheckbox().EditType(EditingType.Boolean).Add();

          col.Field("ForbearanceAgreementFlag").HeaderText("Forbearance Agreement?").Width(175).AllowEditing().DisplayAsCheckbox().EditType(EditingType.Boolean).Add();

          col.Field("YardiTenantLink").HeaderText("Yardi Link").Template(" <a rel='nofollow' href='{{:YardiTenantLink}}'>Yardi</a>").AllowEditing(false).Add(); //render link

          col.Field("InferedEvictionWorkFlowStatus").HeaderText("Inferred Eviction Status or Work Flow Status").AllowEditing(true).Add();

      })

      .ChildGrid(child =>

      {

          child.Datasource(ds => ds.Json(Model.Payments).UpdateURL("EvictionForbearance/UpdatePayment").InsertURL("EvictionForbearance/InsertPament").Adaptor(AdaptorType.RemoteSaveAdaptor))

          .QueryString("EvictionForbearanceID")

          .EditSettings(pay => { pay.AllowEditing().EditMode(EditMode.Dialog).AllowAdding().RowPosition(RowPosition.Bottom); })

           .ToolbarSettings(toolbar1 =>

           {

               toolbar1.ShowToolbar().ToolbarItems(items1 =>

               {

                   items1.AddTool(ToolBarItems.Edit);

                   items1.AddTool(ToolBarItems.Update);

                   items1.AddTool(ToolBarItems.Add);

               });

           })

          .Columns(col1 =>

          {

              col1.Field("EvictionForebearanceXrefID").IsPrimaryKey(true).Visible(false).Add();

              col1.Field("EvictionForbearanceID").Visible(false).Add();

              col1.Field("PaymentDate").HeaderText("Payment Date").Format("{0:MM/dd/yyyy}").EditType(EditingType.Datepicker).AllowEditing(true).Add(); //

              col1.Field("PaymentAmount").HeaderText("Payment Amount").Format("{0:C2}").AllowEditing(true).EditType(EditingType.Numeric).NumericEditOptions(new EditorProperties() { DecimalPlaces = 2 }).Add(); //

              col1.Field("ActualString").HeaderText("Actual?").AllowEditing(true).Add();

          });

      })

      );

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

    <div class="e-hide">

        <input class="e-field e-ejinputtext e-disable" value="{{:MarketName}}" id="EvictGridMarketName" name="MarketName">

        <input class="e-field e-ejinputtext e-disable" value="{{:EvictionForbearanceID}}" id="EvictGridEvictionForbearanceID" name="EvictionForbearanceID">

        <input class="e-field e-ejinputtext e-disable" value="{{:PropertyIdentifier}}" id="EvictGridPropertyIdentifier" name="PropertyIdentifier">

        <input class="e-field e-ejinputtext e-disable" value="{{:County}}" id="EvictGridCounty" name="County">

        <input class="e-field e-ejinputtext e-disable" value="{{:Resident}}" id="EvictGridResident" name="Resident">

        <input class="e-field e-ejinputtext e-disable" value="{{:YardiStatus}}" id="EvictGridYardiStatus" name="YardiStatus">

        <input class="e-datetimepicker e-field e-disable e-js e-input" value="{{:DelinquentDate}}" id="EvictGridDelinquentDate" name="DelinquentDate" disabled="disabled" tabindex="0" aria-atomic="true" aria-live="assertive" aria-disabled="true" placeholder="Select datetime">

        <input class="e-field e-ejinputtext e-disable" value="{{:DaysInDelinquency}}" id="EvictGridDaysInDelinquency" name="DaysInDelinquency">

        <input class="e-field e-ejinputtext e-disable" value="{{:TotalDelinquentBalance}}" id="EvictGridTotalDelinquentBalance" name="TotalDelinquentBalance">

        <input class="e-datetimepicker e-field e-disable e-js e-input" value="{{:EvictionStatusDate}}" id="EvictGridEvictionStatusDate" name="EvictionStatusDate" disabled="disabled" tabindex="0" aria-atomic="true" aria-live="assertive" aria-disabled="true" placeholder="Select datetime">

        <input class="e-field e-ejinputtext e-disable" value="{{:JudgementFlag}}" id="EvictGridJudgementFlag" name="JudgementFlag">

        <input class="e-field e-ejinputtext e-disable" value="{{:ForbearanceAgreementFlag}}" id="EvictGridForbearanceAgreementFlag" name="ForbearanceAgreementFlag">

        <input class="e-field e-ejinputtext e-disable" value="{{:YardiTenantLink}}" id="EvictGridYardiTenantLink" name="YardiTenantLink">

        <input class="e-field e-ejinputtext e-disable" value="{{:InferedEvictionWorkFlowStatus}}" id="EvictInferedEvictionWorkFlowStatus" name="InferedEvictionWorkFlowStatus">

      </div>

    <div class="row">

        <div class="col-xs-4">

            <center><h4>-Dates-</h4></center>

            <hr />

            <table cellspacing="10" align="center">

                <tr align="center">

                    <th>Sent to Attorney Date</th>

                    <td>

                        <input type="text" value="{{:SentToAttorneyDate}}" id="EvictGridSentToAttorneyDate" name="SentToAttorneyDate" tabindex="0" aria-atomic="true" aria-live="assertive" placeholder="Select date">

                    </td>

                </tr>

                <tr align="center">

                    <th>Court Date</th>

                    <td>

                        <input type="text" value="{{:CourtDate}}" id="EvictGridCourtDate" name="CourtDate" tabindex="0" aria-atomic="true" aria-live="assertive" placeholder="Select date">

                    </td>

                </tr>

                <tr align="center">

                    <th>Forbearance Agreement Date</th>

                    <td>

                        <input type="text" value="{{:ForbearanceAgreementDate}}" id="EvictGridForbearanceAgreementDate" name="ForbearanceAgreementDate" tabindex="0" aria-atomic="true" aria-live="assertive" placeholder="Select date">

                    </td>

                </tr>

                <tr align="center">

                    <th>Next Payment Date</th>

                    <td>

                        <input type="text" value="{{:NextPaymentDate}}" id="EvictGridNextPaymentDate" name="NextPaymentDate" tabindex="0" aria-atomic="true" aria-live="assertive" placeholder="Select date">

                    </td>

                </tr>

                <tr align="center">

                    <th>Sent To Sheriff Date</th>

                    <td>

                        <input type="text" value="{{:SentToSheriffDate}}" id="EvictGridSentToSheriffDate" name="SentToSheriffDate" tabindex="0" aria-atomic="true" aria-live="assertive" placeholder="Select date">

                    </td>

                </tr>

                <tr align="center">

                    <th>Satisfied Date</th>

                    <td>

                        <input type="text" value="{{:SatisfiedDate}}" id="EvictGridSatisfiedDate" name="SatisfiedDate" tabindex="0" aria-atomic="true" aria-live="assertive" placeholder="Select date">

                    </td>

                </tr>

                <tr align="center">

                    <th>Lockout Date</th>

                    <td>

                        <input type="text" value="{{:LockoutDate}}" id="EvictGridLockoutDate" name="LockoutDate" tabindex="0" aria-atomic="true" aria-live="assertive" placeholder="Select date">

                    </td>

                </tr>

            </table>

        </div>

        <div class="col-xs-4">

            <center><h4>-Info-</h4></center>

            <hr />

        </div>

    </div>

</script>

Attachment: Capture_a8d1f40e.zip

[Prasanna Kumar Viswanathan]

Hi Jeff, 

According to your requirement when edit the parent grid data you also need to edit the child grid data in the same template. 

In hierarchy grid the child grid data has been bound as a collection of data based on the foreign key field to querystring property. So, while edit the parent grid data you need to display any particular data from the child grid in the same template for editing?. It is not possible to display the collection of child grid data in the template for editing. 

So, please confirm with the above requirement that you are expecting in your sample. 

Regards, 

Prasanna Kumar N.S.V