Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
143756 | Apr 4,2019 12:54 AM UTC | Apr 5,2019 09:41 AM UTC | ASP.NET MVC - EJ 2 | 3 |
![]() |
Tags: Grid |
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>
|
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.