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. Image for the cookie policy date

field name is not shown in e-outline mode when the date field is filled.

Hi,

I would like the field name to be shown as it is done in ejs-numerictextbox.

This same problem happens in the dropdownlist, combobox components.

see photo

How to do this?

Thank you for your help.




  <ejs-datetimepicker locale="pt"

                                id="datamovimenta"

                                name="datamovimenta"

                                ejs-for="datamovimenta"

                                value="@Model.datamovimenta"

                                max="@DateTime.Now"

                                cssClass="e-multi-column e-outline"

                                placeholder="Data movimentação">

                </ejs-datetimepicker>


6 Replies

SP Sureshkumar P Syncfusion Team October 28, 2022 06:28 AM

Hi Roberto,

We suggest you use the floatLabelType property to achieve your requirement from your application on datetimepicker,dropdownlist, combobox components.

Find the code example here:

<ejs-datetimepicker locale="pt"

                    id="datamovimenta"

                    name="datamovimenta"

                    ejs-for="datamovimenta"

                    value="@Model.datamovimenta"

                    max="@DateTime.Now"

                    cssClass="e-multi-column e-outline"

                    floatLabelType="Auto"

                    placeholder="Data movimentação">

 

</ejs-datetimepicker>

Regards,

Sureshkumar P



RO Roberto October 31, 2022 10:07 AM

Hi,

It is woking.


but how to put the field name different from the placeholder?

placeHolder = "Select an item" but I would like to show when the field is filled only "Item"


thanks



SP Sureshkumar P Syncfusion Team November 1, 2022 09:21 AM

Hi Roberto,

We suggest you change the placeholder text by using the placeholder property value as like the below code example

Find the code example here:

<ejs-dropdownlist id="vegetable" dataSource="@ViewBag.data" cssClass="e-multi-column e-outline" placeholder="Item" floatLabelType="Auto" popupHeight="220px">

    <e-dropdownlist-fields value="Vegetable"></e-dropdownlist-fields>

</ejs-dropdownlist>


Regards,

Sureshkumar P



RO Roberto November 4, 2022 06:55 AM

Hello,

I understand, but when the field is blank I would like to show other text that is not the same when the field is filled.



SP Sureshkumar P Syncfusion Team November 7, 2022 06:00 AM

You can change the placeholder property value dynamically based on component value by using the component instance.

Find the code example here:

<ejs-dropdownlist id="vegetable" dataSource="@ViewBag.data" change="Valuechange" cssClass="e-multi-column e-outline" placeholder="select any Item" floatLabelType="Auto" popupHeight="220px">

 

    <e-dropdownlist-fields value="Vegetable"></e-dropdownlist-fields>

 

</ejs-dropdownlist>

 

<script type="text/javascript">

    function Valuechange() {

        // get the component instance

        var Instance = document.getElementById('vegetable').ej2_instances[0];

        if(Instance.value !=null){

            // check the component value is null or not

            Instance.placeholder = "select any Item";

        } else {

            // change the placeholder text after changed the value

            Instance.placeholder = "already Item selected";

        }

    }

</script>




RO Roberto November 8, 2022 08:26 AM

Hi,

Perfect!!

thanks.


Loader.
Live Chat Icon For mobile
Up arrow icon