Changing color of active inputs in edit dialog for EJ2 grid
How do I adjust the color of the pink that is applies the default to an EJ2 grid edit dialog. Example in the attached image. I would like to change the color of those to match the rest of the site. Here is my cshtml.
@{
ViewData["Title"] = "Subpay Setup";
}
<h1 style="color:#4383A4"> @ViewData["Title"]</h1>
@{
var message = TempData["successmessage"] ?? string.Empty;
}
<ejs-grid id="Grid"
allowPaging="true"
allowSorting="true"
allowFiltering="true"
allowGrouping="true"
showColumnChooser="false"
showColumnMenu="true"
toolbar="@(new List<string>() {"Add", "Edit", "Delete", "Update", "Cancel" , "Search" })">
<e-data-manager url="@Url.Action("UrlDatasource", "Subpay")"
crudUrl="@Url.Action("CrudUpdate", "Subpay")"
adaptor="UrlAdaptor">
</e-data-manager>
<e-grid-editSettings allowDeleting="true" allowEditing="true" allowAdding="true" mode="Dialog"></e-grid-editSettings>
<e-grid-pagesettings pageSize="50"></e-grid-pagesettings>
<e-grid-filterSettings type="Excel"></e-grid-filterSettings>
<e-grid-columns>
<e-grid-column field="subpayID" headerText="SubpayID" isPrimaryKey="true" type="number" visible="false" width="120"></e-grid-column>
<e-grid-column field="subcontractorID" headerText="Subcontractor" foreignKeyField="Vista_Vendor_ID" foreignKeyValue="Vista_Vendor_Name" dataSource="@ViewBag.vendorList" width="150"></e-grid-column>
<e-grid-column field="jobCode" headerText="JobCode" width="130" textAlign="Left"></e-grid-column>
<e-grid-column field="trade" headerText="Trade" visible="false" foreignKeyField="Value" foreignKeyValue="Text" dataSource="@ViewBag.trades" width="120"></e-grid-column>
<e-grid-column field="phase" headerText="Phase" foreignKeyField="TP_ID" foreignKeyValue="Phase_Name" dataSource="@ViewBag.tradePhases" textAlign="Left" width="120"></e-grid-column>
<e-grid-column field="amount" headerText="Amount" editType="numericedit" width="150"></e-grid-column>
<e-grid-column field="originatorID" headerText="Originator" foreignKeyField="Employee_ID" foreignKeyValue="Employee_Name" dataSource="@ViewBag.employeeList" width="130" textAlign="Right"></e-grid-column>
<e-grid-column field="originationDate" headerText="OriginationDate" type="date" editType="datepickeredit" customFormat="@(new { type ="date", format="MM/dd/yyyy" })" width="120"></e-grid-column>
<e-grid-column field="officeApproverID" headerText="OfficeApprover" foreignKeyField="Employee_ID" foreignKeyValue="Employee_Name" dataSource="@ViewBag.employeeList" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="officeApproverDate" headerText="OfficeApproverDate" type="date" editType="datepickeredit" customFormat="@(new { type ="date", format="MM/dd/yyyy" })" width="150"></e-grid-column>
<e-grid-column field="subcontractorCompleteDate" headerText="SubcontractorCompleteDate" visible="false" type="date" editType="datepickeredit" customFormat="@(new { type ="date", format="MM/dd/yyyy" })" width="130" textAlign="Right" format="yMd"></e-grid-column>
<e-grid-column field="subcontractorCompletionFormRecord" headerText="SubcontractorCompletionFormRecord" visible="false" width="120"></e-grid-column>
<e-grid-column field="sIFinalApprovalDate" headerText="SIFinalApprovalDate" type="date" editType="datepickeredit" customFormat="@(new { type ="date", format="MM/dd/yyyy" })" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="sIFinalApprovalFormRecord" headerText="SIFinalApprovalFormRecord" width="150"></e-grid-column>
<e-grid-column field="paySplit" headerText="PaySplit" type="boolean" editType="booleanedit" width="130" textAlign="Right"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
function failure(args) {
var errorMessage = args.error[0].error.responseText.split("Exception:")[1].split('<br>')[0]; //extract the message from args
alert(errorMessage);
}
</script>
<style>
.e-grid td.e-active {
background-color: #E9B151;
}
.e-pager .e-currentitem, .e-pager .e-currentitem:hover {
background-color: #E9B151;
}
.e-btn.e-flat.e-primary, .e-css.e-btn.e-flat.e-primary {
color: #3bb6ed;
}
</style>
SIGN IN To post a reply.
3 Replies
Hi Jake,
Thanks for contacting Syncfusion forum.
We can achieve your requirement ”Changing color of active inputs in edit dialog for EJ2 grid” by overriding default input style reference of material theme like below code. Please refer to the below code and screenshot.
|
<style>
input.e-input::selection,
textarea.e-input::selection,
.e-input-group input.e-input::selection,
.e-input-group.e-control-wrapper input.e-input::selection,
.e-float-input input::selection,
.e-float-input.e-control-wrapper input::selection,
.e-input-group textarea.e-input::selection,
.e-input-group.e-control-wrapper textarea.e-input::selection,
.e-float-input textarea::selection,
.e-float-input.e-control-wrapper textarea::selection {
background: #dae316;
color: #fff;
}
.e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::before, .e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::after, .e-float-input.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::before, .e-float-input.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::after, .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::before, .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::after, .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::before, .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::after {
background: #dae316;
}
.e-float-input:not(.e-input-group) .e-float-line::before, .e-float-input:not(.e-input-group) .e-float-line::after, .e-float-input:not(.e-input-group) .e-float-line::before, .e-float-input:not(.e-input-group) .e-float-line::after, .e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::before, .e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::after, .e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::before, .e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::after {
background: #dae316;
}
.e-float-input:not(.e-error) input:focus ~ label.e-float-text, .e-float-input:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
.e-float-input:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text, .e-float-input:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text, .e-float-input:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
.e-float-input.e-control-wrapper:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text, .e-float-input:not(.e-error) textarea:focus ~ label.e-float-text, .e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text, .e-float-input.e-control-wrapper:not(.e-error) textarea:focus ~ label.e-float-text, .e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text, .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text {
color: #dae316;
}
</style>
|
Screenshot :
Reference Sample link : https://stackblitz.com/edit/ehd7lp-6pe5a9?file=index.html
Please get back to us, if you need any further assistance.
Regards,
Thiyagu S.
That gets part way there but there are still some elements with the default pink. Such as dropdown list items, components of the date picker, and the checkbox, as seen in the images below.
Hi Jake,
Thanks for your update.
Based on your reported information we suspect that you want to change entire color of active element. By default we have an theme options for material, fabric, bootstrap and highcontrast with various theme mode and colors.
We have explained theme options in below EJ2 Syncfusion theme studio link. Please refer it.
Theme Studio link: https://ej2.syncfusion.com/themestudio/?theme=material
Using above link you can change primary and Accent colors which you want to apply for the active element. Once you changed the colors click apply it and then download & save the required CSS by clicking download button and refer this downloaded CSS style reference in your application.
Please refer to the below images.
Please get back to us, if you need any further assistance.
Regards,
Thiyagu S.
SIGN IN To post a reply.
