template controls water mark and style

[Pratheep]

Hi

How to change inside  template controls  water mark  text and style

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

      <input type="text" id="dtp_start" name="dtp_start" value="{{:dtp_start}}" class="e-field e-ejinputtext valid"/>

   </script>

Thanks
Pratheep

[Venkatesh Ayothi Raman]

Hi Pratheep, 

Thanks for contacting Syncfusion support. 

We can change the style and set the watermark text for template controls like as follows, 

Code example: 

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

        <b>Order Details</b> 

        <table cellspacing="10"> 

            <tr> 

                . . . 

            <tr> 

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

                </td> 

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

                    <input id="ShipName" name="ShipName" placeholder="ship name" class="e-field e-ejinputtext valid" 

                        style="width: 116px; height: 28px" value="{{:ShipName}}" /> 

                </td> 

. . . 

            </tr> 

        </table> 

    </script> 

Do you want to bind the other controls such as Numeric Textbox, Dropdown? If so, we suggest you to render the other controls in actionComplete event while editing/adding the Grid like as follows, 

Code example: 

@Grid 

<ej:Grid  runat="server"  ID="Grid"  AllowPaging="true" > 

          <ClientSideEvents ActionComplete="complete" /> 

        <Columns> 

  

            . . . 

        </Columns> 

       . . . 

    </ej:Grid> 

 

@actionComplete event 

  function complete(args) { 

            

            if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "dialogtemplate") { 

                $("#Freight").ejNumericTextbox({ value: parseFloat($("#Freight").val()), width: "116px", height: "28px", decimalPlaces: 2 }); 

                $("#EmployeeID").ejNumericTextbox({ value: $("#EmployeeID").val(), width: "116px", height: "28px" }); 

                $("#ShipCountry").ejDropDownList({ width: '116px' }); 

                if (args.requestType == "beginedit") { 

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

                    $("#ShipCountry").ejDropDownList("setSelectedValue", args.row.children().eq(4).text()); 

                } 

            } 

        } 

We have also prepared a sample for your requirement which can be download from following link, 

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/ze/DataBinding160653_(3)868116221 

Screenshot: 

 

Regards, 

Venkatesh Ayothiraman. 

[Pratheep]

 Hi

template  date placeholder is Date but dialog showing select date and font style also not apply

<input id="date" name="date"  class="e-field e-ejinputtext valid" placeholder="Date"
                        style="width: 116px; height: 28px;font-style: normal;" value="{{:date}}" />

Thanks
Pratheep

Attachment: new_4af49345.rar

[Venkatesh Ayothi Raman]

Hi Pratheep, 

Thanks for the update. 

We went through your project and found that you are rendered the input box as ejDatePicker in actionComplete event. This is the cause of the issue, because its overriding the style and placeholder while rendered the ejDatePicker control. So, we suggest you to use ejDataPicker properties such as watermarktext,height and width for customizing the ejDatepicker while editing. Please refer to the following code example, 

Code example: 

function complete(args) { 

 

 

        if (args.requestType == "refresh" || args.requestType == "save") { 

            $("#date").ejDatePicker({ dateFormat: "MM/dd/yyyy" }); 

 

 

        } 

 

   if ((args.requestType == "beginedit" || args.requestType == "add")) { 

 

       $("#date").ejDatePicker({ dateFormat: "MM/dd/yyyy", watermarkText: "Date", height: 35, width: 200 }); //Modified code example 

 

                

         } 

 

   } 

 

 

 

 

    </script> 

  

Output screenshot: 

 

We have also modified your project for your requirement which can be download from following link, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1-261858571 

Regards, 

Venkatesh Ayothiraman.