Grid with detail template, editing mode don´t work

[Ricardo]

Hi,

I´m trying to have a grid with detail template and edit the row info. But when i click on edit button  i received the attached error, could you please help me in this situation?

@{

    List<object> commands = new List<object>();

    commands.Add(new { type = "Edit", buttonOption = new { iconCss = "e-icons e-edit", cssClass = "e-flat" } });

    commands.Add(new { type = "Delete", buttonOption = new { iconCss = "e-icons e-delete", cssClass = "e-flat" } });

    commands.Add(new { type = "Save", buttonOption = new { iconCss = "e-icons e-update", cssClass = "e-flat" } });

    commands.Add(new { type = "Cancel", buttonOption = new { iconCss = "e-icons e-cancel-icon", cssClass = "e-flat" } });

}

@(Html.EJS().Grid("PendingGrid")

    .DataSource((IEnumerable<object>)ViewBag.dataSource)

    .AllowExcelExport()

    .ToolbarClick("toolbarClick")

    .AllowFiltering()

    .DetailTemplate("#detailtemplate")

    .Columns(col =>

    {

        col.Field("Cargo_Shipment_ID").HeaderText("ID").Width("120").IsPrimaryKey(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

        col.Field("Cargo_Shipment_Container_ID").HeaderText("C_ID").Width("120").IsPrimaryKey(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

        col.Field("ID").HeaderText("L_ID").Width("120").IsPrimaryKey(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

        col.Field("Is_Export").HeaderText("Export").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Width("80").Type("boolean").DisplayAsCheckBox(true).Add();

        col.Field("Booking").HeaderText("Booking").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Width("120").Add();

        col.Field("BL").HeaderText("BL").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Width("150").Add();

        col.Field("Container").HeaderText("Container").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Width("150").Add();

        col.Field("Abbrev").HeaderText("Type").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Width("80").Add();

        col.Field("Is_Hazardous").HeaderText("IMO").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Width("80").Type("boolean").DisplayAsCheckBox(true).Add();

        col.Field("OverDimensions").HeaderText("Over Dimensions").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Width("140").Type("boolean").DisplayAsCheckBox(true).Add();

        col.Field("Customer_Appointment_Date").HeaderText("Appointment Date").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Format("yMd").Width("150").Add();

        col.Field("Origin").HeaderText("Origin").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Width("150").Add();

        col.Field("Final_Dest").HeaderText("Destination").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Width("150").Add();

        col.HeaderText("").Width("150").Commands(commands).Add();

    }).AllowPaging().FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.CheckBox); })

    .PageSettings(page => page.PageCount(5)).Toolbar(new List<string>() { "ExcelExport" })

    .PageSettings(p =>

    {

        p.PageSizes(new List<int>() { 20, 50, 100, 200 });

    }).EditSettings(edit => { edit.AllowEditing(true).AllowDeleting(true).ShowDeleteConfirmDialog(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Render())

<style type="text/css" class="cssStyles">

    .detailtable td {

        font-size: 13px;

        padding: 4px;

        max-width: 0;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;

    }

</style>

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

    <table class="detailtable" width="100%">

        <colgroup>

            <col width="20%" />

            <col width="20%" />

            <col width="20%" />

            <col width="20%" />

            <col width="20%" />

        </colgroup>

        <tbody>

            <tr>

                <td>

                    <span ><b>Vessel:</b> </span> ${Vessel}

                </td>

                <td>

                    <span ><b>Voyage: </b></span> ${Voyage}                    

                </td>

                <td>

                    <span ><b>Service:</b> </span> ${Service}                   

                </td>

                <td>

                    <span ><b>POL: </b></span> ${POL}

                </td>

                <td>

                    <span ><b>POD: </b></span> ${POD}

                </td>

            </tr>

            <tr>

                <td>

                    <span ><b>Weight: </b></span> ${Weight}

                </td>

                <td>

                    <span ><b>From City: </b></span> ${S_Loca}

                </td>

                <td>

                    <span ><b>From Depot: </b></span> ${S_Depot}

                </td>

                <td>

                    <span ><b>To city: </b></span> ${E_Loca}

                </td>

                <td>

                    <span ><b>To Depot:</b> </span> ${E_Depot}

                </td>

            

        </tr>

        <tr>

            <td>

                <span ><b>Cross Booking: </b></span> ${Cross_Booking}

            </td>

            <td>

                <span ><b>Transport Mode: </b></span> ${Name}

            </td>

            <td>

                <span ><b>Charge: </b></span> ${Design}

            </td>           

            <td>

                <span ><b>Value: </b></span> ${Profit}

            </td>

            <td>

                <span ><b>Currency: </b></span> ${ISO_Code}

            </td>

        </tr>

        </tbody>

    </table>

</script>

<script>

    function toolbarClick(args) {

        var gridObj = document.getElementById("PendingGrid").ej2_instances[0];

        if (args.item.id === 'PendingGrid_excelexport') {

            gridObj.pdfExport();

        }

    }

</script>

Attachment: images_aaf8431c.zip

[Venkatesh Ayothi Raman]

Hi Ricardo, 

We have confirmed this “Script error thrown during editing using command column with detailTemplate Grid” as issue and logged the defect report for the same. The fix for this issue will be included in our September 26, 2018 patch release. 

Until then we appreciate your patience. 

Regards, 

Venkatesh Ayothiraman.