Numeric data not displayed in dialog when using .EditMode(EditMode.DialogTemplate).DialogEditorTemplateID("#template")

[Felix]

Problem with Edge browser and editing the ejGrid.

 

I searched Syncfusion online material to try to find some explanation for the following Edge problem with is confined to the Edge Browser. (Microsoft’s finest).

The problem concerns:

  .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.DialogTemplate).DialogEditorTemplateID("#template"); })

When displaying in Chrome or Firefox, the edit screen (Template) appears filled with existing numerical data from the specific grid row. When using Edge, none of the numerical data is displayed in the Template screen as in the attached zip file.

Columns settings defined below

Template defined below

As I said, Chrome and Firefox work just fine.

Have found code on the internet which should enable me to warn any user using Edge that some functionality in the app will not function in the Edge browser and prevent him/her from continuing.

Do you have any more elegant solution?

 

Felix

 

 

 

Column defs

 

  .Columns(col =>

            {

                col.Field("fldProductName").HeaderText("Product Name").Width(150).IsPrimaryKey(true).TextAlign(TextAlign.Left).Add();

                col.Field("fldProductID").HeaderText("Product ID").TextAlign(TextAlign.Right).AllowEditing(false).Width(60).Add();

 

                col.Field("fldPrice").HeaderText("Unit Price").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Right).Format("{0:n2}").Width(80).AllowEditing(true).Add();

                col.Field("fldCollectionDays").HeaderText("Collect. Days").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Right).Width(80).AllowEditing(true).Add();

                col.Field("fldPercentageVAT").HeaderText("% VAT").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Right).Format("{0:n2}").Width(80).AllowEditing(true).Add();

 

                for (int intRow = 0; intRow < 16; intRow++)

                {

                    var strFieldName = @ViewBag.arrayPeriods[intRow]["fldMVCName"];

                    var strColsTitle = @ViewBag.arrayPeriods[intRow]["fldColumnCaption"];

                    var strCSSClass = @ViewBag.arrayPeriods[intRow]["fldCSSClass"];

                    col.Field(strFieldName).HeaderText(strColsTitle).HeaderTextAlign(TextAlign.Center).CssClass(strCSSClass).TextAlign(TextAlign.Right).Format("{0:n2}").Width(80).Add();

                }

Template

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

 

            <!--Header Area -->

            <table id="t01" cellspacing="10">

                <!--First row -->

                <tr>

                    <td>Product name</td>

                    <td> <input id="fldProductName" name="fldProductName" disabled="disabled" value="{{:fldProductName}}" class="e-field e-ejinputtext" style="width:232px;height:28px" /> </td>

                </tr>

            </table>

 

            <!--Parameters Area -->

            <table id="t02" cellspacing="10" class="template-editdialog-general">

                <!--Second row -->

                <tr>

                    <td width="80px">Unit Price         </td>

                    <td> <input type="number" id="fldPrice" name="fldPrice" value="{{:fldPrice}}" class="e-field e-ejinputtext" style="width:116px;height:28px" />                                                       </td>

                    <td width="80px">Collection days</td>

                    <td> <input type="number" id="fldCollectionDays" name="fldCollectionDays" value="{{:fldCollectionDays}}" class="e-field e-ejinputtext" style="width:116px;height:28px" /> </td>

                    <td width="80px">Percentage VAT</td>

                    <td> <input type="number" id="fldPercentageVAT" name="fldPercentageVAT" value="{{:fldPercentageVAT}}" class="e-field e-ejinputtext" style="width:116px;height:28px" />     </td>

                    <td width="80px">Product ID        </td>

                    <td> <input type="number" id="fldProductID" name="fldProductID" disabled="disabled" value="{{:fldProductID}}" class="e-field e-ejinputtext" style="width: 116px; height: 28px" />                         </td>

                </tr>

                <tr></tr>

            </table>

 

            <!--Periods Area -->

            <table id="t03" cellspacing="10" class="template-editdialog-periods">

 

                <!--Third row -->

                <tr>

                    <td width="80px">@ViewBag.arrayPeriods[0]["fldColumnCaption"]</td>

                    <td> <input type="number" id="fldm01" name="fldm01" oninput="AddTotalYear()" value="{{:fldm01}}" class="e-field e-ejinputtext" style="width:116px;height:28px" /> </td>

                    <td width="80px">@ViewBag.arrayPeriods[1]["fldColumnCaption"]</td>

                    <td> <input type="number" id="fldm02" name="fldm02" oninput="AddTotalYear()" value="{{:fldm02}}" class="e-field e-ejinputtext" style="width:116px;height:28px" /> </td>

                    <td width="80px">@ViewBag.arrayPeriods[2]["fldColumnCaption"]</td>

                    <td> <input type="number" id="fldm03" name="fldm03" oninput="AddTotalYear()" value="{{:fldm03}}" class="e-field e-ejinputtext" style="width:116px;height:28px" /> </td>

                    <td width="80px">@ViewBag.arrayPeriods[3]["fldColumnCaption"]</td>

                    <td> <input type="number" id="fldm04" name="fldm04" oninput="AddTotalYear()" value="{{:fldm04}}" class="e-field e-ejinputtext" style="width:116px;height:28px" /> </td>

                </tr>

 

                <!--Fourth row -->

                <tr>

                    <td>@ViewBag.arrayPeriods[4]["fldColumnCaption"]</td>

                    <td> <input type="number" id="fldm05" name="fldm05" oninput="AddTotalYear()" value="{{:fldm05}}" class="e-field e-ejinputtext" style="width:116px;height:28px" /> </td>

                    <td>@ViewBag.arrayPeriods[5]["fldColumnCaption"]</td>

                    <td> <input type="number" id="fldm06" name="fldm06" oninput="AddTotalYear()" value="{{:fldm06}}" class="e-field e-ejinputtext" style="width:116px;height:28px" /> </td>

                    <td>@ViewBag.arrayPeriods[6]["fldColumnCaption"]</td>

                    <td> <input type="number" id="fldm07" name="fldm07" oninput="AddTotalYear()" value="{{:fldm07}}" class="e-field e-ejinputtext" style="width:116px;height:28px" /> </td>

                    <td>@ViewBag.arrayPeriods[7]["fldColumnCaption"]</td>

                    <td> <input type="number" id="fldm08" name="fldm08" oninput="AddTotalYear()" value="{{:fldm08}}" class="e-field e-ejinputtext" style="width:116px;height:28px" /> </td>

                </tr>

                <!--Fifth row -->

                <tr>

                    <td>@ViewBag.arrayPeriods[8]["fldColumnCaption"]</td>

                    <td> <input type="number" id="fldm09" name="fldm09" oninput="AddTotalYear()" value="{{:fldm09}}" class="e-field e-ejinputtext" style="width:116px;height:28px" /> </td>

                    <td>@ViewBag.arrayPeriods[9]["fldColumnCaption"]</td>

                    <td> <input type="number" id="fldm10" name="fldm10" oninput="AddTotalYear()" value="{{:fldm10}}" class="e-field e-ejinputtext" style="width:116px;height:28px" /> </td>

                    <td>@ViewBag.arrayPeriods[10]["fldColumnCaption"]</td>

                    <td> <input type="number" id="fldm11" name="fldm11" oninput="AddTotalYear()" value="{{:fldm11}}" class="e-field e-ejinputtext" style="width:116px;height:28px" /> </td>

                    <td>@ViewBag.arrayPeriods[11]["fldColumnCaption"]</td>

                    <td> <input type="number" id="fldm12" name="fldm12" oninput="AddTotalYear()" value="{{:fldm12}}" class="e-field e-ejinputtext" style="width:116px;height:28px" /> </td>

                <tr>

 

                    <!--Sixth row -->

                <tr>

                    <td>@ViewBag.arrayPeriods[12]["fldColumnCaption"]</td>

                    <td> <input type="number" id="fldY01" name="fldY01" disabled="disabled" value="{{:fldY01}}" class="template-total-field" step="0.01" style="width:116px;height:28px" /> </td>

                    <td>@ViewBag.arrayPeriods[13]["fldColumnCaption"]</td>

                    <td> <input type="number" id="fldY02" name="fldY02" value="{{:fldY02}}" class="e-field e-ejinputtext" style="width:116px;height:28px" /> </td>

                    <td>@ViewBag.arrayPeriods[14]["fldColumnCaption"]</td>

                    <td> <input type="number" id="fldY03" name="fldY03" value="{{:fldY03}}" class="e-field e-ejinputtext" style="width:116px;height:28px" /> </td>

                    <td>@ViewBag.arrayPeriods[15]["fldColumnCaption"]</td>

                    <td> <input type="number" id="fldY04" name="fldY04" value="{{:fldY04}}" class="e-field e-ejinputtext" style="width:116px;height:28px" /> </td>

                <tr>

            </table>

            <p></p>

            <p></p>

        </script>

Attachment: EdgeProblems_1b8e28e4.zip

[Thavasianand Sankaranarayanan]

Hi Felix, 

 

Thanks for contacting Syncfusion support 

 

Query: While editing the Grid record numerical data is not shown in edge browser 

 

In your given Grid sample code, you have used the default numeric input text box. The default numeric text box is not supported in the edge browser. 

 

Please refer the below link  

Link: https://connect.microsoft.com/IE/feedbackdetail/view/2427100/inputs-with-type-number-do-not-have-spinner-controls-in-edge 

 

We have resolved your issue by using the ejNumericTextbox of Syncfusion control. By setting type of input element as text and make it as ejNumericTextbox in the “actioncomplete” event, while “add” and “edit” the records.  

 

Please refer the below code example 

 

 

(Html.EJ().Grid<object>("FlatGrid") 

        .Datasource((IEnumerable<object>)ViewBag.datasource) 

            .ClientSideEvents(eve => { eve.ActionComplete("complete"); }) /* client side action complete event   */ 

          

              ------------ 

 

        .Columns(col => 

        { 

 

             ------------------             

 

        })) 

 

    <script type="text/javascript"> 

        function complete(args) { 

            if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "dialogtemplate") {               /* for begin edit and adding the record in action complete event   */ 

 

                if (args.requestType == "beginedit")  

                    $("#OrderID").attr("disabled", "disabled"); 

 

                $("#Freight").ejNumericTextbox({ value: parseFloat($("#Freight").val()), width: "116px", height: "28px", decimalPlaces: 2 });            /* Create freight, input text box as ejNumericTextbox  */ 

 

                $("#ShipPostalCode").ejNumericTextbox({ value: parseFloat($("#ShipPostalCode").val()), width: "116px", height: "28px" });     /* Create ShipPostalCode, input text box as ejNumericTextbox  */ 

            } 

        } 

</script> 

 

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

        <b>Order Details</b> 

        <table cellspacing="10"> 

             

               -------------------- 

 

           <tr> 

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

                    Freight 

                </td> 

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

                    <input type="text" id="Freight" name="Freight" value="{{:Freight}}" /> 

                </td> 

            </tr> 

 

            <tr> 

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

                    ShipPostalCode 

                </td> 

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

                    <input type="text" id="ShipPostalCode" name="ShipPostalCode" value="{{:ShipPostalCode}}" /> 

                </td> 

            </tr> 

 

        </table> 

    </script> 

 

 

We have prepared a sample for your convenience and it will be downloaded from the below location 

Sample: http://www.syncfusion.com/downloads/support/forum/128018/ze/SyncfusionMvcApplication10859136136 

 

Regards, 

Thavasianand S.

[Felix]

Thank you Thavasianand for your suggestions.

I have adjusted the code as you recommended. The results are in the attached file. An unwanted 'updown' box appears and the value derived from the underlying grid is not correct.
[Jan 2017](14,400.55 -> 14.00)

My code changes were:
 @*<td> <input type="text" id="fldm01" name="fldm01" oninput="AddTotalYear()" value="{{:fldm01}}" class="e-field e-ejinputtext" style="width:116px;height:28px" /> </td>*@
                    <td style="text-align: right"><input type="text" id="fldm01" name="fldm01" oninput="AddTotalYear()" value="{{:fldm01}}" /></td>

and: function complete(args) {
                //alert("Starting complete(args).")
                var grid = $(".e-grid").ejGrid("instance");
                if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "dialogtemplate")
                    $('#' + this._id + '_dialogEdit').ejDialog("option", "title", "Details of " + this.getSelectedRecords()[0]["fldProductName"])
                $("#fldm01").ejNumericTextbox({ value: parseFloat($("#fldm01").val()), width: "116px", height: "28px", decimalPlaces: 2 });  

Do you see where my mistake is. Your sample project was a bit of a problem with all the referenced files and I couldn't get it to work.

Attachment: NumericTextBox_Syncfusion_e550dae6.zip

[Prasanna Kumar Viswanathan]

Hi Felix, 

Thanks for the update.  

In previous code example you have mentioned  input type as number (<input type="number" id="fldProductID" name="fldProductID") in the template.  When we mention type as number then it will be numeric text box. So, we suggest you the ejNumericTextbox of Syncfusion control. 

 

If you need normal textbox in the template screen, we suggest you to set the input type as text in the template.  

 

Find the code example :  

 

<tr> 

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

         Freight 

      </td> 

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

          <input type="text" id="Freight" name="Freight" value="{{:Freight}}" /> 

      </td> 

</tr> 

(Or) 

If you need the numeric textbox without the spin button, set ShowSpinButton API as false in ejNumericTextBox. You have also mentioned the value is not correct in the numeric textbox. For this, we suggest you to pass the value as string and set the value as 2 in decimalPlaces API in ejNumericTextBox. The decimalPlaces API specifies the number of digits that should be allowed after the decimal point. 

<script type="text/javascript"> 

        function complete(args) { 

            if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "dialogtemplate") {  /* for begin edit and adding the record in action complete event   */ 

                if (args.requestType == "beginedit") $("#OrderID").attr("disabled", "disabled"); 

                $("#Freight").ejNumericTextbox({ value: $("#Freight").val(), width: "116px", height: "28px", showSpinButton: false, decimalPlaces: 2 }); /* Create freight, input text box as ejNumericTextbox  */ 

                ---------------------      

            } 

        } 

</script> 

Refer to the Help document for the showSpinButton and decimalPlaces API.  

https://help.syncfusion.com/api/js/ejtextboxes#members:showspinbutton 

https://help.syncfusion.com/api/js/ejtextboxes#members:decimalplaces 

Regards, 

Prasanna Kumar N.S.V