[Solved] telerik grid with detail

[saroj]

Dear telerik team,

I'm using Telerik grid in my mvc 4 project.
In grid i've add new record and also detail for each record.

now, if i add new record to that grid then it's added successfully but then if i expand it's detail in which i've edit button.
when i click edit, i've have save and cancel button. now, if i click save or cancel it redirects me to unformated text page.

please find my code as follows:

 @(Html.Telerik().Grid<SYSSupplierModel>()
            .Name("GridTable")
            .Sortable(sort => sort.OrderBy(order => order.Add(t => t.SUPPLIER_NAME).Ascending()))
            .Pageable(paging => paging.Enabled(true).PageSize(15)).Footer(true)           
            .Footer(true)
                    .ClientEvents(events => events.OnDataBound("Flag_onDataBound").OnRowDataBound("onRowBound").OnError("onError").OnEdit("OnEdit"))
            .DataKeys(keys => keys.Add(p => p.SUPPLIER_ID))
                     .ToolBar(commands =>
                     {
                         commands.Insert().ButtonType(GridButtonType.Text).HtmlAttributes(new { @style = "color: black;" });
                     })
            .DataBinding(dataBinding => dataBinding.Ajax().Select("_SYSSupplier", "ReferenceFiles")
                                                          .Update("_SYSSupplierCodeEdit", "ReferenceFilesEdit")
                                                          .Insert("_SYSSupplierInsert", "ReferenceFilesInsert"))
            .Filterable(filtering => filtering.Enabled(true))
            .Reorderable(reorder => reorder.Columns(true))
            .Columns(columns =>
            {
                columns.Bound(p => p.SUPPLIER_NAME).Title("Name");
                columns.Bound(b => b.SUPPRESSED).Title("Suppressed")
                .ClientTemplate("<input type='checkbox' disabled='disabled' name='Suppressed' <#= SUPPRESSED?checked='checked':'' #> />");
                columns.Command(commands =>
                    {
                        commands.Edit().ButtonType(GridButtonType.Text).HtmlAttributes(new { @style = "color: #333;" });

                    }).Width(200).Title("Commands");
               
            })
            .Filterable()
            .Editable(editing => editing.Mode(GridEditMode.InLine))
            .DetailView(details => details.ClientTemplate(
                     Html.Telerik().TabStrip()
                            .Name("TabStrip_Supplier_<#= SUPPLIER_ID #>")
                            .HtmlAttributes(new { style = "font-size: 10pt; margin-left:-20px; margin-right:-8px; margin-top: -10px; border: 4px solid #f99f1c;" })
                            .SelectedIndex(0)                                 
                            .Items(items =>
                            {
                                items.Add()
                                .Text("Supplier details")
                                .HtmlAttributes(new { style = "height: 28px;" })
                                .LoadContentFrom(Url.Action("SYSSupplierCodeDetails", "ReferenceFiles", new { Id = "<#= SUPPLIER_ID #>" }));
                                
                                items.Add()
                               .Text("Transport details")
                               .HtmlAttributes(new { style = "height: 28px;" })
                               .LoadContentFrom(Url.Action("TRSTransportSuppliers", "ReferenceFiles", new { Id = "<#= SUPPLIER_ID #>" }));
                                
                            }).ToHtmlString()))
                     ) 

below is the code when i expand detail,

<div id="Supplier_@(Model.SUPPLIER_ID)">
    <table id="SupplierDetails" cellspacing="1px">
    <colgroup>
        <col id="EngineCol" class="odd" />
        <col id="field11Col" class="even" />
        <col id="HeightCol" class="odd" />
        <col id="field22Col" class="even" />
        <col id="SeatingCol" class="odd" />   
    </colgroup>
    <tbody>
       <tr>
           <th rowspan="1" colspan="6">
                @Ajax.ActionLink("Edit", "SYSSupplierCodeDetailsEdit", "ReferenceFilesEdit", new { Id = Model.SUPPLIER_ID },
                    new AjaxOptions
                    {
                        UpdateTargetId = "Supplier_" + Model.SUPPLIER_ID.ToString(),
                        InsertionMode = InsertionMode.Replace,
                        HttpMethod = "GET"
                    }, new { @class = "t-button", @style = "color: #333; margin-left:-2px;" })
            </th>        
       </tr>
       
       <tr>
            <th>                
               Name
            </th>
            <th>
                @Model.SUPPLIER_NAME
            </th>
            <th>
               Address 1 
            </th>
            <th>
                @Model.ADDRESS_01
            </th>
            <th>
                Insurance Company
            </th>
            <th>
               @Model.INSURANCE_COMPANY
            </th>
        </tr>

</tbody>
    </table>
</div>

below is the code when i click on save:

@using (Ajax.BeginForm("SYSSupplierCodeDetailsEdit", "ReferenceFilesEdit", new { Id = Model.SUPPLIER_ID },
                new AjaxOptions
                {
                    UpdateTargetId = "Supplier_" + Model.SUPPLIER_ID.ToString(),
                    InsertionMode = InsertionMode.Replace,
                    LoadingElementId = "ajaxLoading"
                }))
{   

<table id="SupplierDetails" cellspacing="1px">
    <colgroup>
        <col id="EngineCol" class="odd" />
        <col id="field1Col" class="even" />
        <col id="HeightCol" class="odd" />
        <col id="field2Col" class="even" />
        <col id="SeatingCol" class="odd" />        
    </colgroup>
    <tbody>        
       <tr>
            <th rowspan="1" colspan="6">
                <div style="float:left;">
                <button type="submit" class="t-button" style="margin-left:-2px; float:left;" name="SaveButton">Save</button>
                <button type="submit" class="t-button" name="CancelButton" id="buttonCancel">Cancel</button></div>
                <div id="ajaxLoading" style="display:none;float:left; margin-top:4px" class="transparent"><img src="@Url.Content("~/Content/Telerik/Office2007/loading.gif")"/></div>       
            </th>        
       </tr>        
        <tr>
            <th>                
               Name
            </th>
            <th>
               @Html.TextBoxFor(f => f.SUPPLIER_NAME)
            </th>
            <th>
               Address 1 
            </th>
            <th>
                @Html.TextBoxFor(f => f.ADDRESS_01)
            </th>
            <th>
                Insurance Company
            </th>
            <th>
               @Html.TextBoxFor(f => f.INSURANCE_COMPANY)
            </th>
        </tr>

</tbody>
    </table>
</div>

Hoping your reply soon.

Thanks in advance.