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

template controls water mark and style

Thread ID:

Created:

Updated:

Platform:

Replies:

129444 Mar 18,2017 06:38 AM UTC Mar 28,2017 07:31 AM UTC ASP.NET Web Forms 3
loading
Tags: Grid
Pratheep
Asked On March 18, 2017 06:38 AM UTC

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 [Syncfusion]
Replied On March 20, 2017 12:45 PM UTC

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, 

Screenshot
 
Regards, 
Venkatesh Ayothiraman. 


Pratheep
Replied On March 27, 2017 11:32 AM UTC

 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 [Syncfusion]
Replied On March 28, 2017 07:31 AM UTC

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, 

Regards, 
Venkatesh Ayothiraman. 


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

;