Label on Autocomplete
Hello,
How do I create a label for my grid's dialog's autocomplete input? It currently looks like this:
And my code looks like this:
.net grid code
<ejs-grid id="Grid"
load="onLoad()"
query="new ej.data.Query().addParams('currentUserSnlid', @ViewBag.AppUser.Snlid)"
actionComplete="actionComplete"
allowTextWrap="true"
allowGrouping="true"
allowSorting="true"
gridLines="Horizontal"
rowDataBound="highlightIssues"
toolbar="@(new List<string>() { "Add", "Delete", "Search" })">
<e-grid-loadingIndicator indicatorType="Shimmer"></e-grid-loadingIndicator>
<e-grid-editSettings allowAdding="@canEdit" allowDeleting="@canEdit" allowEditing="@canEdit" mode="Dialog" showDeleteConfirmDialog="true"></e-grid-editSettings>
<e-data-manager url="/Suppliers/[email protected]" adaptor="UrlAdaptor" insertUrl="/Suppliers/AddDistribution" updateUrl="/Suppliers/UpdateDistribution" removeUrl="/Suppliers/DeleteDistribution"></e-data-manager>
<e-grid-columns>
<e-grid-column
field="SupplierDepartmentDistributionId"
headerText="SupplierDepartmentDistributionId"
isPrimaryKey="true"
defaultValue="0"
allowEditing="false"
visible="false">
</e-grid-column>
<e-grid-column
field="SupplierId"
headerText="SupplierId"
allowEditing="false"
defaultValue="@Model.SupplierId"
visible="false">
</e-grid-column>
<e-grid-column
field="StartDate"
headerText="Start Date"
type="date"
editType="datepickeredit"
edit="@(new { @params = new Syncfusion.EJ2.Calendars.DatePicker() { Change="changeStartDate", ShowClearButton = false, ShowTodayButton=false, Start=Syncfusion.EJ2.Calendars.CalendarView.Year, Depth=Syncfusion.EJ2.Calendars.CalendarView.Year, Format="MM/yyyy" } })"
format="MM/dd/yyyy">
</e-grid-column>
<e-grid-column
field="EndDate"
headerText="End Date"
type="date"
editType="datepickeredit"
edit="@(new { @params = new Syncfusion.EJ2.Calendars.DatePicker() { Change="changeEndDate", ShowClearButton = false, ShowTodayButton=false, Start=Syncfusion.EJ2.Calendars.CalendarView.Year, Depth=Syncfusion.EJ2.Calendars.CalendarView.Year, Format="MM/yyyy" } })"
format="MM/dd/yyyy">
</e-grid-column>
<e-grid-column
field="PreviousEndDate"
type="date"
visible="false"
defaultValue="null"
format="MM/dd/yyyy">
</e-grid-column>
<e-grid-column
field="DepartmentId"
headerText="DepartmentId"
allowEditing="false"
visible="false">
</e-grid-column>
<e-grid-column
field="OrgNumber"
headerText="Org#"
type="string"
edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})">
</e-grid-column>
<e-grid-column
field="Distribution"
headerText="Distribution"
editType="numericedit">
</e-grid-column>
<e-grid-column
field="TotalDistribution"
headerText="TotalDistribution"
visible="false"
allowEditing="false">
</e-grid-column>
</e-grid-columns>
</ejs-grid>
create/read/destroy/write javascript code:
var autoCompleteEle;
var element;
function create(args) {
element = document.createElement('input');
return element;
}
function read(e) {
return autoCompleteEle.value;
}
function destroy() {
autoCompleteEle.destroy();
}
function write(args) {
autoCompleteEle = new ej.dropdowns.AutoComplete({
value: args.rowData[args.column.field],
dataSource: new ej.data.DataManager({
url: '/Suppliers/OrgSearch',
adaptor: new ej.data.UrlAdaptor
}),
fields: {value: 'Number', text: 'Number' },
placeholder: 'e.g. 09733'
}, args.form.elements.namedItem('Org #'));
autoCompleteEle.appendTo(element);
}
SIGN IN To post a reply.
3 Replies
Hi Jessica Goodrich,
Greetings from Syncfusion support!
To ensure the label is displayed in the dialog template, you can set the placeholder property and configure floatLabelType as 'Always'. This makes the label visible even when the input has a value.
In the example below, we bind the
CustomerID field to an AutoComplete component inside the Grid’s dialog edit template using the write method of the column edit settings. The write event is triggered when the dialog opens for editing, and it is the ideal place to render custom components like AutoComplete.Code example:
<e-grid-column field="CustomerID" headerText="Customer ID" width="120" edit="@(new { create = "createCustomerIDHandler", read = "readCustomerIDHandler", destroy = "destroyCustomerIDHandler", write = "writeCustomerIDHandler"})"> </e-grid-column> function writeCustomerIDHandler(args) { var rowData = args.rowData; autoCompleteObj = new ej.dropdowns.AutoComplete({ allowCustom: true, dataSource: autoCompleteData, floatLabelType: 'Always', placeholder: args.column.headerText || 'Customer ID', // Explicitly set for label text fields: { value: "CustomerID", text: "CustomerID" }, value: rowData.CustomerID, }); autoCompleteObj.appendTo(autoCompleteElement); } |
Screenshot:
Sample: Please refer to the attached sample.
Documentation Link: https://ej2.syncfusion.com/aspnetcore/documentation/grid/editing/edit-types#render-autocomplete-in-edit-form
API:
Please let us know if you need any further assistance!
Regards,
Sivaranjani R
Attachment: GridEditDialog_8606beae.zip
Hello! Thank you for your response.
Is there a way to have separate placeholder and label text? I want the label that appears above the autocomplete to be "Org#", but I want the placeholder text to be an example of an org number so the user knows what to input.
Like this:
Jessica Goodrich,
Thank you for your inquiry!
To achieve your requirement, you can utilize the create method to build a custom wrapper that includes both the label and the input element, and return this wrapper from the method. In the write method, set the
placeholder property to "e.g. 09733" and configure floatLabelType as "Never". This ensures that the placeholder is visible initially and disappears when the user starts typing.Please refer to the following code example:
Code Example : function createCustomerIDHandler() { var wrapper = document.createElement('div'); wrapper.className = 'custom-wrapper'; // Custom class, not e-float-input // Create label var label = document.createElement('label'); label.className = 'custom-label'; label.textContent = 'Org#'; label.id = 'GridCustomerID'; label.setAttribute('for', 'GridCustomerID'); wrapper.appendChild(label); // Create input autoCompleteElement = document.createElement('input'); autoCompleteElement.type = 'text'; autoCompleteElement.id = 'GridCustomerID'; autoCompleteElement.name = 'CustomerID'; wrapper.appendChild(autoCompleteElement); return wrapper; } function writeCustomerIDHandler(args) { var rowData = args.rowData; autoCompleteObj = new ej.dropdowns.AutoComplete({ allowCustom: true, dataSource: autoCompleteData, floatLabelType: 'Never', // Disable Syncfusion floating label placeholder: 'e.g. 09733', // Example inside input fields: { value: "CustomerID", text: "CustomerID" }, value: rowData.CustomerID || '', }); autoCompleteObj.appendTo(autoCompleteElement); } |
Site.css
.custom-wrapper { display: flex; flex-direction: column; margin-bottom: 12px; } .custom-label { font-size: 13px; font-weight: normal; margin-bottom: 4px; color: #7e7c7c; } |
Screenshot:
Please note : When adding a custom label manually, the label color and error validation styles will not automatically reflect as they do with Syncfusion’s default floating label. This is expected because the label is outside Syncfusion’s built-in styling logic.
Sample : Please find the sample attached.
Feel free to reach out if you need further assistance!
Attachment: GridEditDialog_Updated_4be8294.zip
SIGN IN To post a reply.
