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 : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

128018 Dec 27,2016 09:32 AM UTC Jan 31,2017 11:30 AM UTC ASP.NET MVC 3
loading
Tags: Grid
Felix
Asked On December 27, 2016 09:32 AM UTC


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 [Syncfusion]
Replied On December 28, 2016 11:13 AM UTC

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  
 
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 
 
Regards, 
Thavasianand S.

Felix
Replied On January 30, 2017 12:55 PM UTC

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 [Syncfusion]
Replied On January 31, 2017 11:30 AM UTC

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.  



Regards, 
Prasanna Kumar N.S.V 


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

;