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.
col.Field("EmployeeID").HeaderText("Employee Name").Width("150").ForeignKeyValue("FirstName").DataSource(ViewBag.ForeignData).Edit(new { create = "create", read = "read", destroy = "destroy", write = "write" }).Add()
and the part of the JavaScript functions in which the DropDownList changes by an AutoComplete
<script>
var autoComplete;
var employeeData = @Html.Raw(Json.Encode(@ViewData["ForeignData"]));
function create () { // to create input element
return createElement('input');
}
function read () { // return edited value to update data source
let value = new ej.data.DataManager(employeeData).executeLocal(new ej.data.Query().where('LastName', 'equal', autoComplete.value));
return value.length && value[0]['EmployeeID']; // to convert foreign key value to local value.
}
function destroy () { // to destroy the custom component.
autoComplete.destroy();
}
function write (args) { // to show the value for custom component
autoComplete = new ej.dropdowns.AutoComplete({
dataSource: employeeData,
fields: { value: args.column.foreignKeyValue },
value: args.foreignKeyData[0][args.column.foreignKeyValue]
});
autoComplete.appendTo(args.element);
}
</script>But I do not know if you can customize the DropDownList to add the filtering instead of changing it to an AutoComplete
Here is my Code:@(Html.EJS().Grid("Grid")
.DataSource(dataManager =>
dataManager.Url(Url.Action("GetAlbum", "JS2", null, Request.Url.Scheme))
.InsertUrl( Url.Action( "InsertAlbum", "Ext", null, Request.Url.Scheme ) )
.UpdateUrl( Url.Action( "UpdateAlbum", "Ext", null, Request.Url.Scheme ) )
.Adaptor("UrlAdaptor").CrossDomain(true))
.EditSettings( ed =>
{
ed.AllowAdding( true ).AllowEditing( true ).NewRowPosition( Syncfusion.EJ2.Grids.NewRowPosition.Bottom ).Mode( Syncfusion.EJ2.Grids.EditMode.Normal );
} )
.Columns(c =>
{
c.Field("AlbumId").HeaderText("Id").IsPrimaryKey( true ).IsIdentity( true ).Add();
c.Field("Title").Add();
c.Field("ArtistId").HeaderText("Artist").ForeignKeyField("ArtistId").ForeignKeyValue("Name")
.DataSource((IEnumerable<object>)ViewBag.artist).Add();
c.Field("GenreId").HeaderText("Genre").ForeignKeyField("GenreId").ForeignKeyValue("Name")
.DataSource((IEnumerable<object>)ViewBag.genre).Add();
}).Toolbar( new List<string>() { "Add", "Edit", "Update", "Cancel" } )
.Render()
)
I hope you can help me.
Thank you for your attention|
col.Field("EmployeeID")...ForeignKeyValue("ShipCountry").Edit(new { @params = new { allowFiltering = true } })...Add();
|
|
<div>
@Html.EJS().Grid("Grid")...Load("load")...Columns(col =>
{
...
col.Field("EmployeeID").HeaderText("Employee ID").ForeignKeyValue("ShipCountry").DataSource(ViewBag.datasource).Width("200px").Add();
})...Render()
</div>
<script>
function load(args) {
this.getColumns()[1].edit = {
params: {
allowFiltering: true,
width: 200,
itemTemplate: "<span><span class='name'>${EmployeeID}</span><span class ='city'>${ShipCountry}</span></span>"
}
}
}
</script>
|
