Css Clarification in SFGrid and sfcombobox

[KINS]

I have below clarification of sfgrid CSS.

1.How to make Grid Header color as "Light Grey"

2.How to remove box in Action button (Edit/Delete button)

3.How to change fontsize for sftextbox and sfcombobox including placeholder font.

[Rahul Narayanasamy]

Hi Ahmed, 

Greetings from Syncfusion. 

Query: How to make Grid Header color as "Light Grey" 

We have validated your query and you want to change the Grid header background color. You can achieve your requirement by using below CSS style. Find the below code snippets and screenshot for your reference. 

Also we suggest you to refer the below documentation for customizing styles in the grid. 

 

https://blazor.syncfusion.com/documentation/datagrid/how-to/grid-styling/ 

https://blazor.syncfusion.com/documentation/datagrid/how-to/customize-column-styles/ 

 

<style> 

    .e-grid th.e-headercell { 

        background-color: lightgrey; 

    } 

</style> 

[Screenshot] 

 

Query: How to remove box in Action button (Edit/Delete button) 

We suspect that you want to remove the border around the actions buttons. We need some details regarding the reported query. Could you please share the below details. It will be helpful to validate and provide a better solution. 

• Share a screenshot of the action buttons which needs modification.
• Which Syncfusion theme was currently you are using?(like bootstrap, bootstrap4, fabric, etc).

Query: How to change fontsize for sftextbox and sfcombobox including placeholder font. 

You want to change the font for the SfComboBox textbox. You can achieve your requirement by using below CSS. Find the below code snippets for your reference. 

We have already documented this topic in our documentation. Find the below reference for your reference. 

Reference: 

https://blazor.syncfusion.com/documentation/combobox/style/ 

 

<style> 

 

    .e-ddl.e-input-group.e-control-wrapper .e-input { 

        font-size: 20px; 

        font-family: 'French Script MT'; 

        color: #ab3243; 

    } 

 

</style> 

[Screenshot] 

 

Please let us know if you have any concerns. 

Regards, 

Rahul 

[KINS]

Thanks for support

How can I change the height of sftextbox and sfcombobox ???

For second query

I am using material theme

see the video link for second query

https://www.screencast.com/t/QoDtCypnvX0

[Renjith Singh Rajendran]

Hi Ahmed, 

Query : How can I change the height of sftextbox and sfcombobox ??? 

We suggest you to apply styles for the corresponding components as like below to achieve this requirement. 

 

<SfTextBox ...></SfTextBox> 

<SfComboBox ... TValue="string" TItem="string"></SfComboBox> 

 

<style> 

.e-ddl.e-control-wrapper{ 

    height:90px; 

} 

.e-input-group.e-control-wrapper{ 

    height:90px; 

} 

</style> 

Query 2 : see the video link for second query https://www.screencast.com/t/QoDtCypnvX0 

We suggest you to add the below style in your application to prevent the button hovering behavior. 

<style>.e-rowcell.e-unboundcell .e-btn.e-flat:hover, .e-rowcell.e-unboundcell .e-css.e-btn.e-flat:hover {     @*Customize button hovering style here*@     background-color: unset;}</style>

Please get back to us if you need further assistance. 

Regards, 

Renjith R 

[KINS]

Thanks for report..

it's working fine..

but fonts not changing for dropdown.please advise the css class for dropdown font and drop down placeholder font

[Sevvandhi Nagulan]

Hi Ahmed, 

Please refer the below UG documentation for changing the font and placeholder font.  

https://blazor.syncfusion.com/documentation/dropdown-list/style/ 

https://blazor.syncfusion.com/documentation/dropdown-list/style/#customizing-the-appearance-of-wrapper-element 

https://blazor.syncfusion.com/documentation/dropdown-list/style/#customizing-the-color-of-the-placeholder-text 

Kindly get back to us for further assistance. 

Regards, 

Sevvandhi N 

[KINS]

I have check below css from above link but it's shows an error message as  "::placeholder" is not a valid pseudo-element"

.e-ddl.e-input-group input.e-input::placeholder {
    color: red;
}

[Sevvandhi Nagulan]

Hi Ahmed, 

We checked your query. In order to avoid the reported issue, please add the ::-moz-placeholder and ::-webkit depending on the browser. Please refer the below code. 

  .e-ddl.e-input-group input.e-input ::-webkit-input-placeholder { 

        font-family: emoji; 

    } 

Stack overflow link: https://stackoverflow.com/questions/58564686/error-when-attempting-to-change-a-placeholders-color 

Kindly get back to us for further assistance. 

Regards, 

Sevvandhi N 

[KINS]

I have tried below css and check all browser but still not working

.e-ddl.e-input-group input.e-input ::-webkit-input-placeholder {

    font-size: 13px;

    letter-spacing: 0px;

    font-weight: 500;

    font-family: "Poppins";

    color:green;

}

e-ddl.e-input-group input.e-input ::-moz-placeholder {

    font-size: 13px;

    letter-spacing: 0px;

    font-weight: 500;

    font-family: "Poppins";

    color: green;

}

e-ddl.e-input-group input.e-input :-ms-input-placeholder{

font-size: 13px;

letter-spacing: 0px;

font-weight: 500;

font-family: "Poppins";

color: green;

}

e-ddl.e-input-group input.e-input :-ms-input-placeholder {

    font-size: 13px;

    letter-spacing: 0px;

    font-weight: 500;

    font-family: "Poppins";

    color: green;

}

[KINS]

please help it's my top most urgent

[KINS]

awaiting for reply

[Sevvandhi Nagulan]

Hi Ahmed, 

You have incorrectly used the selectors. Please find the modified code below. We have ensured in all the browsers and working as expected. 

@using Syncfusion.Blazor.DropDowns 

 

<SfDropDownList TValue="string" TItem="string" DataSource="@data" Placeholder="Choose value"></SfDropDownList> 

 

@code { 

    public List<string> data = new List<string> { "a", "b" }; 

} 

<style> 

 

    .e-ddl.e-input-group input.e-input::-webkit-input-placeholder { 

        font-size: 13px; 

        letter-spacing: 0px; 

        font-weight: 500; 

        font-family: "Poppins"; 

        color: green; 

    } 

 

 

 

    .e-ddl.e-input-group input.e-input::-moz-placeholder { 

        font-size: 13px; 

        letter-spacing: 0px; 

        font-weight: 500; 

        font-family: "Poppins"; 

        color: green; 

    } 

 

    .e-ddl.e-input-group input.e-input:-ms-input-placeholder { 

        font-size: 13px; 

        letter-spacing: 0px; 

        font-weight: 500; 

        font-family: "Poppins"; 

        color: green; 

    } 

 

</style> 

Please find the sample link below. 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DDL1506737739 

Kindly get back to us for further assistance. 

Regards, 

Sevvandhi N 

[KINS]

thanks for reply....

I have another issue,please check my comments in below video

https://www.screencast.com/t/Jw86rzHJw

[KINS]

please help...

[Sevvandhi Nagulan]

Hi Ahmed, 

We checked the comments in the provided video. We modified the style customization code based on the requirement and attached it below. Refer the following code and sample. 

@using Syncfusion.Blazor.DropDowns 

@using Syncfusion.Blazor.Inputs 

 

<SfDropDownList TValue="string" TItem="string" DataSource="@data" FloatLabelType="Syncfusion.Blazor.Inputs.FloatLabelType.Auto" Placeholder="Choose value"></SfDropDownList> 

<SfTextBox Placeholder="choose value"></SfTextBox> 

@code { 

    public List<string> data = new List<string> { "a", "b" }; 

} 

<style> 

    /* styles for dropdown*/ 

    e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::before, .datetime.e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::before, .datetime.e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::after, .datetime.e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::after { 

        font-size: 13px; 

        letter-spacing: 0px; 

        font-weight: 500; 

        font-family: "Poppins"; 

        color: green; 

        background-color:green; 

    } 

    .e-float-input:not(.e-error):not(.e-input-focus):not(.e-disabled) input:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top), .e-float-input:not(.e-error):not(.e-input-focus) textarea:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top), .e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus):not(.e-disabled) input:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top) { 

        font-size: 13px; 

        letter-spacing: 0px; 

        font-weight: 500; 

        font-family: "Poppins"; 

        color: green; 

    } 

    .e-ddl.e-lib.e-input-group.e-control-wrapper.e-float-input .e-float-text.e-label-top { 

        font-size: 13px; 

        letter-spacing: 0px; 

        font-weight: 500; 

        font-family: "Poppins"; 

        color: green; 

    } 

    /* styles for textbox*/ 

    .e-control-wrapper.e-input-group input.e-input::-webkit-input-placeholder { 

        font-size: 13px; 

        letter-spacing: 0px; 

        font-weight: 500; 

        font-family: "Poppins"; 

        color: green; 

    } 

    .e-control-wrapper.e-input-group input.e-input::-moz-placeholder { 

        font-size: 13px; 

        letter-spacing: 0px; 

        font-weight: 500; 

        font-family: "Poppins"; 

        color: green; 

    } 

 

    .e-control-wrapper.e-input-group input.e-input:-ms-input-placeholder { 

        font-size: 13px; 

        letter-spacing: 0px; 

        font-weight: 500; 

        font-family: "Poppins"; 

        color: green; 

    } 

</style> 

  

Please find the sample below. 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorServerApp5.0119600718 

Kindly get back to us for further assistance. 

Regards, 

Sevvandhi N 

[KINS]

Thanks

Thanks but placeholder font not working for textbox.please check below link

https://www.screencast.com/t/ANHnvWWNsiPp

[KINS]

pls help

[Sevvandhi Nagulan]

Hi Ahmed,

We checked your query. Based on the requirement we modified the code and changed the float label element color for textbox component also. Refer the below sample.

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DDL1645373174

In addition, you can download theme from the theme studio by changing the primary color, accent color and choose the components which you want to change color. Then refer the downloaded css in your application to customize the color of the control.

Themestudio link: https://ej2.syncfusion.com/themestudio/?theme=material

Regards,

Sevvandhi N

[KINS]

Thanks working fine 

But how to change the placeholder and value fonts if syncfusion control is readonly or disabled 

[Sevvandhi Nagulan]

Hi Ahmed, 

We checked your query. Please find the style for customizing the disabled color. Also, readonly color will be changed with the previously shared style customization code. 

.e-input[disabled], .e-input-group .e-input[disabled], .e-input-group.e-control-wrapper .e-input[disabled], .e-input-group.e-disabled, .e-input-group.e-control-wrapper.e-disabled, .e-float-input input[disabled], .e-float-input.e-control-wrapper input[disabled], .e-float-input textarea[disabled], .e-float-input.e-control-wrapper textarea[disabled], .e-float-input.e-disabled, .e-float-input.e-control-wrapper.e-disabled { 

        -webkit-text-fill-color: green; 

        font-size: 13px; 

        letter-spacing: 0px; 

        font-weight: 500; 

        font-family: "Poppins"; 

    } 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DDL833538698 

Regards, 

Sevvandhi N 

[KINS]

I have another clarification in placeholde.please check below link to solve this issue.

https://www.screencast.com/t/oJ3J0Uamc

[Sevvandhi Nagulan]

Hi Ahmed, 

We checked your query. Please use the below selector to customize the focusing color after the value has been selected.  Refer the below code. 

    .e-input-group.e-control-container.e-control-wrapper.e-valid-input.e-float-input .e-float-text.e-label-top { 

        font-size: 13px; 

        letter-spacing: 0px; 

        font-weight: 500; 

        font-family: "Poppins"; 

        color: green; 

    } 

Please find the sample below. 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DDL648496897 

Kindly get back to us for further assistance. 

Regards, 

Sevvandhi N 

[KINS]

thanks for support.

it works fine,but i have one more clarification.pls check below link

https://www.screencast.com/t/LUosGh8F

CSS:-

.e-ddl.e-lib.e-input-group.e-control-wrapper.e-float-input .e-float-text.e-label-top {

    font-size: 14px;

    letter-spacing: 0px;

    font-weight: 500;

    font-family: "Poppins";

    color: black;

}

label.e-float-text, .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-float-input.e-bigger:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-float-input.e-control-wrapper.e-bigger:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-bigger .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-bigger .e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-float-input.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-small .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-small .e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-float-input.e-small.e-bigger:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-bigger .e-float-input.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {

    font-size: 14px;

    letter-spacing: 0px;

    font-weight: 500;

    font-family: "Poppins";

    color: black;

}

.e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text, .e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text, .e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text, .e-float-input .e-control-wrapper:not(.e-error) input label.e-float-text.e-label-top, .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input:focus ~ label.e-float-text, .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input:valid ~ label.e-float-text, .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text, .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text, .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text, .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text, .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text, .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text, .e-float-input.e-control-wrapper.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text, .e-bigger .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text {

    font-size: 14px;

    letter-spacing: 0px;

    font-weight: 500;

    font-family: "Poppins";

    color: black;

}

.e-input[disabled], .e-input-group .e-input[disabled], .e-input-group.e-control-wrapper .e-input[disabled], .e-input-group.e-disabled, .e-input-group.e-control-wrapper.e-disabled, .e-float-input input[disabled], .e-float-input.e-control-wrapper input[disabled], .e-float-input textarea[disabled], .e-float-input.e-control-wrapper textarea[disabled], .e-float-input.e-disabled, .e-float-input.e-control-wrapper.e-disabled {

    -webkit-text-fill-color: black;

    font-size: 14px;

    letter-spacing: 0px;

    font-weight: 500;

    font-family: "Poppins";

    color: black;

}

.e-input-group.e-control-container.e-control-wrapper.e-valid-input.e-float-input .e-float-text.e-label-top {

    font-size: 9px;

    letter-spacing: 0px;

    font-weight: 500;

    font-family: "Poppins";

    color: red;

}

[Sevvandhi Nagulan]

Hi Ahmed, 

We checked your query. We request that you to use below CSS code for bold the placeholder text when using the float label property. Refer the below code. 

  .e-input-group.e-control-container.e-float-input.e-control-wrapper label.e-float-text               { 

        font-weight: bold !important; 

  } 

Please find the sample below. 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DDL269173933 

If this solution does not help you, we request that you detail all of your questions about changing the color of placeholders so that we can address all of the requirements. 

Regards, 

Sevvandhi N 

[KINS]

thanks for support,

I have another clarification in grid css.please check my comments in below image

[Rahul Narayanasamy]

Hi Ahmed, 

Thanks for the update. 

Query: I have another clarification in grid css.please check my comments in below image 

We have validated your query with the provided details and you can achieve your requirement by using below CSS. Find the below code snippets and sample for your reference. 

<style> 

.e-pager .e-pagerconstant { 

    margin: 0 0 5px 12px !important; 

} 

.e-pager div.e-parentmsgbar { 

    padding-top: 21px !important; 

} 

</style> 

Sample: https://www.syncfusion.com/downloads/support/forum/167642/ze/SampleT-1854005357  

 

Please let us know if you have any concerns. 

Regards, 

Rahul 

 

[KINS]

sorry for late reply

the below css is not working for changing font of textbox 

<style> 

    .e-ddl.e-input-group.e-control-wrapper .e-input { 

        font-size: 20px; 

        font-family: 'French Script MT'; 

        color: #ab3243; 

    } 

</style> 

[Sevvandhi Nagulan]

Hi Ahmed, 

We checked your query. We can change the textbox component’s font by using the below style code.  Refer the below code. 

     .e-input-group.e-control-container.e-control-wrapper.e-float-input .e-control { 

        font-size: 20px; 

        font-family: 'French Script MT'; 

        color: #ab3243; 

    } 

Screenshot: 

 

Kindly get back to us for further assistance. 

Regards, 

Sevvandhi N 

[KINS]

everything works fine

but how to change font for sfmultiselect placeholder.

[Berly Christopher]

Hi Ahmed, 

  

We can change the font family of the MultiSelect placeholder with help of below CSS styles.  

  

<style> 

    .e-float-input input:valid ~ label.e-float-text, 

    .e-float-input input ~ label.e-label-top.e-float-text, 

    .e-float-input input ~ label.e-label-bottom.e-float-text { 

        font-family: "Times New Roman"; 

    } 

</style> 

 

  

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MultiSelect_placeholder_167642-1246432281  

  

Regards, 

Berly B.C 

[KINS]

I have another two clarification.

1.How to change dropdown item value font.

2.Place Holder font family not changing (see below css).I have set "Helvatica font but its showing as "Roboto" font 

.e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text, .e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text, .e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text, .e-float-input .e-control-wrapper:not(.e-error) input label.e-float-text.e-label-top, .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input:focus ~ label.e-float-text, .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input:valid ~ label.e-float-text, .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text, .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text, .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text, .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text, .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text, .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text, .e-float-input.e-control-wrapper.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text, .e-bigger .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text {

    letter-spacing: 0px;

    font-size: 10px;

    color: red;

    font-family:Helvetica !important;

}

Please check below screencast for first query

https://www.screencast.com/t/GJJiBdLoByQA

[Berly Christopher]

Hi Ahmed, 

  

We have achieved the two requested requirements with below mentioned CSS styles. 

  

<style> 

    .e-float-input input:valid ~ label.e-float-text, 

    .e-float-input input ~ label.e-label-top.e-float-text, 

    .e-float-input input ~ label.e-label-bottom.e-float-text { 

        font-family: "Helvetica"; 

    } 

    .e-dropdownbase .e-list-item { 

        font-family: cursive; 

    } 

</style> 

  

Screenshot: 

  

 

  

Please find the sample from the below link. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorServerAPP5.0584521445  

  

Regards, 

Berly B.C 

1

[KINS]

sorry for late reply......

everything's works fine but I have another clarification.

1.I would like to change the font size of "place holder" when validation is done in Editform.

2.How to change place-holder text as "pascal case (text-transform:capitalize)"  for all input field.

3.How to change place-holder text as "pascal case (text-transform:capitalize)" for grid Header

[Berly Christopher]

Hi Ahmed, 

  

Query 1: 

  

1. I would like to change the font size of "place holder" when validation is done in Editform. 

2.How to change place-holder text as "pascal case (text-transform:capitalize)"  for all input field. 

  

Response: 

  

We can achieve the requested requirement with help of below CSS styles.  

  

<style> 

    .custom.e-float-input.e-valid-input.valid.e-success .e-float-text.e-label-top{ 

        text-transform: capitalize; 

    } 

</style> 

 

  

Please find the sample from the below link. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorServerAPP5.0_(2)495810512  

  

Query 2: 

  

How to change place-holder text as "pascal case (text-transform:capitalize)" for grid Header 

  

Response: 

  

We will check and update the details on tomorrow (19^th November 2021). 

  

Regards, 

Berly B.C 

[KINS]

Thanks for update

I have another clarification

Text-tranform is working fine for placeholder

And also I have applied the same for textbox

But I can not get exact Text-tranform value from textbox in .cs code

For example

In textbox, I am trying to enter customer name as lowecase,as per css rule it coverts as "capitilize Text-tranform format" but when I trying to get value from c# code (model binding in editform) it's returns as lowercase only.I need to get exact Text-tranform value in c#code ( capitalize format)

[Berly Christopher]

Hi Ahmed, 

  

Query 1: 

  

How to change place-holder text as "pascal case (text-transform:capitalize)" for grid Header  

  

Response: 

  

We have validated your query and we are quite unclear about your requirement(place-holder in Grid header). We suspect that you want to apply the style(text-transform:capitalize) to Grid header text. You can provide the HeaderText text based on your convenience by using HeaderText property directly like below.  

  

 

<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order Id" TextAlign="TextAlign.Right"Width="120"></GridColumn>  

<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 

 

  

(or)  

 

If you want to apply the text-transform style to header text by using CSS, then you can achieve your requirement by using below CSS.   

 

<style>  

    .e-grid .e-headercelldiv {  

        text-transform: capitalize;  

    }  

</style>  

 

Please let us know if you have any concerns.  

  

Query 2: 

  

But I can not get exact Text-tranform value from textbox in .cs code 

  

Response: 

  

By default, the entered text will be updated in the @bind-value attribute. You can get the entered text in the capitalize format with help of ToTitleCase() method below code example. 

  

CultureInfo.CurrentCulture.TextInfo.ToTitleCase(employee.TextValue.ToLower()); 

 

  

Screenshot: 

  

 

  

Modified sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorServerAPP5.0_(3)309340834  

  

Regards, 

Berly B.C 

[KINS]

Thanks for quick support...

For Edit Form Clarification:-

How to use below function for EditForm textbox control

CultureInfo.CurrentCulture.TextInfo.ToTitleCase(employee.TextValue.ToLower()); 

<div class="col-sm-12 col-md-6 col-lg-6">

                                <SfTextBox CssClass="required properconversion" Placeholder="@GetResourceProvider.GetResourceValue(Resource, "lblColorName")" @bind-Value="colorSetup.ColorName" FloatLabelType="@FloatLabelType.Always" @onkeydown="@keydown" ></SfTextBox>

                                <ValidationMessage For="@(() => colorSetup.ColorName)" />

                            </div>

For Grid Column clarification

I have two columns in grid

1.Customer Code

2.Customer Name

I would like to know how to make customer code row cell value as "uppercase" and Customer Name row cell value as "Capitilize"

[Berly Christopher]

Hi Ahmed, 

  

Query 1: 

  

For Edit Form Clarification:- 

How to use below function for EditForm textbox control 

CultureInfo.CurrentCulture.TextInfo.ToTitleCase(employee.TextValue.ToLower()); 

 

  

Response: 

  

We can achieve the requested requirement by affect the bind-value property with help of getter setter function as mentioned in the below code example. 

  

  [Required(ErrorMessage = "Name is required")] 

         public string TextValue 

        { 

        get => _value; 

        set 

        { 

          _value = (value != null) ? CultureInfo.CurrentCulture.TextInfo.ToTitleCase(value.ToLower()) : null; 

        } 

        } 

 

  

Modified sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorServerAPP5.0_(4)427046909  

  

Query 2: 

  

For Grid Column clarification 

I have two columns in grid 

1.Customer Code 

2.Customer Name 

I would like to know how to make customer code row cell value as "uppercase" and Customer Name row cell value as "Capitilize" 

  

Response: 

  

We have validated your query and based on your requirement, we suggest you to achieve your requirement by using CustomAttributes. Find the below code snippets and sample for your reference.  

  

Reference:   

https://blazor.syncfusion.com/documentation/datagrid/cell#custom-attributes  

  

  

<SfGrid DataSource="@Orders" AllowPaging="true">  

    <GridPageSettings PageSize="5"></GridPageSettings>  

    <GridColumns>  

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order id" TextAlign="TextAlign.Right"Width="120"></GridColumn>  

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer ID" CustomAttributes="@(newDictionary<string, object>(){ { "class", "e-attr" }})" Width="150"></GridColumn>  

        <GridColumn Field=@nameof(Order.CustomerName) HeaderText="Customer name"CustomAttributes="@(new Dictionary<string, object>(){ { "class", "e-attr2" }})" Width="150"></GridColumn>  

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order date" Format="d"Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>  

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2"TextAlign="TextAlign.Right" Width="120"></GridColumn>  

    </GridColumns>  

</SfGrid>  

  

@code{  

    . ..   

}  

  

<style>  

    .e-grid .e-headercelldiv {  

        text-transform: capitalize;  

    }  

    .e-attr {  

        text-transform:uppercase;  

    }  

    .e-attr2 {  

        text-transform: capitalize;  

    }  

</style>  

  

Sample: https://www.syncfusion.com/downloads/support/forum/167642/ze/SampleCA-2123320330    

  

Please let us know if you have any concerns.  

  

Regards, 

Berly B.C