Hi
R Brian Lindahl,
Query
1: when I get the datamanager object on the server side, the "where"
query field is "ID", not "Name".
Query 2:
If I make it by modifying the query on the server side, the value displayed
in the grid when not editing is the integer ID, not the text.
In
your scenario, you wanted to display the text field (Name) in the Grid
as well as during typing in the search field of the AutoComplete
component. It is important to note that in the EJ2 AutoComplete component, the
search and filter functions operate exclusively based on the value
field. Mapping the text field will only update the list items' text in the
popup, while search and filter actions will be conducted based on the value
field. If you require filtering based on both text and value fields, you can
utilize the filtering event with a custom predicate. Please refer to the
provided code example, updated sample, and video demonstration where we have
customized the AutoComplete component's filtering event. This setup will search
for both Name and ID in the data source and return the corresponding results.
|
Index.cshtml
<script>
var typeAutoCompleteEle;
var element
function create(args) {
element =
document.createElement('input');
return element;
}
function read(e) {
return typeAutoCompleteEle.text;
}
function destroy() {
typeAutoCompleteEle.destroy();
}
function writeTypeAC(args) {
typeAutoCompleteEle = new
ej.dropdowns.AutoComplete({
allowCustom:
true,
filterType:
"Contains",
text:
args.rowData[args.column.field],
dataSource: new
ej.data.DataManager({
url: "/Home/UrlDataSource",
adaptor: new ej.data.UrlAdaptor(),
headers: [{ 'XSRF-TOKEN': "Your Token Value" }]
}),
fields: { value: 'EmployeeID',
text: 'CustomerID' },
filtering:
function (e) {
e.preventDefaultAction = true;
var predicate = new ej.data.Predicate('CustomerID', 'contains', e.text);
predicate
= predicate.or('EmployeeID', 'contains', e.text);
var query = new ej.data.Query();
//frame the query based on search string with filter type.
query = (e.text != "") ? query.where(predicate) : query;
//pass the filter data source, filter query to updateData
method.
e.updateData(this.dataSource, query);
}
});
typeAutoCompleteEle.appendTo(element);
}
</script>
|
Query
3: I originally had this as a dropdownedit in the grid, but the number of
records in the data source has grown to the point where it's almost impossible
to scroll through the dropdown and find what I'm looking for in a timely
manner.
For
the dropdown edit functionality, you are encountering issues with record
searches. This can be resolved by activating the allowFiltering property
in the DropDownList component. Kindly refer to the code example below for this
implementation.
|
@{
var DropDownList = new Syncfusion.EJ2.DropDowns.DropDownList() {
AllowFiltering = true };
}
<ejs-grid id="Grid"
dataSource="@ViewBag.DataSource" allowPaging="true"
toolbar="@( new List<object>()
{"Add","Edit","Delete","Update","Cancel"})">
<e-grid-editsettings
allowAdding="true" allowDeleting="true"
allowEditing="true"></e-grid-editsettings>
<e-grid-pageSettings
pageSize="15"></e-grid-pageSettings>
<e-grid-columns>
……………………………
<e-grid-column
field="CustomerID" type="string"
headerText="Customer Name" type="string"
width="150" editType="dropdownedit" edit="new {@params =
DropDownList }"></e-grid-column>
</e-grid-columns>
</ejs-grid>
|
Document
Reference:
Custom
Filtering in AutoComplete Component
API
References:
filtering
allowfiltering
If
you need any other assistance or have additional questions, please feel free to
contact us.
Regards
Aishwarya
R
Attachment:
195169SampleAndVideo_29422cf2.zip
