Grid with column template for combobox

John Stephen Mangam

Asked On September 3, 2019 05:34 PM UTC

Hi,

This is my grid:

<ejs-grid id="Grid" load="onLoad" allowPaging="true" allowSorting="true"

allowFiltering="true" toolbar="@(new List<string>() {"Search" })"

query="new ej.data.Query().addParams('DId', '@Model.ModelId')">

<e-data-manager url="@Url.Action("GetDataFields", "DataModels")" adaptor="UrlAdaptor"></e-data-manager>

<e-grid-editSettings allowEditing="true" allowAdding="true" allowDeleting="true"></e-grid-editSettings>

<e-grid-columns>

<e-grid-column field="Id" isIdentity="true" headerText="DID" visible="false" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-

<e-grid-column field="SType" headerText="Some Type" template="#testComboBox" width="150"></e-grid-column>

</e-grid-columns>

</ejs-grid>

This is my template:

<ejs-combobox id="DataType" autoFill="true"

datasource="SomeService.GetSomeDataAsSelectListItems()"

placeholder="Choose data type">

<e-combobox-fields text="Text" value="Value" />

</ejs-combobox>

</script>

Ids are shown but the comboBoxes aren't shown. Please provide me a sample working example.

Thank you.

Reply | Reply with quote

Pavithra Subramaniyam [Syncfusion]

Replied On September 4, 2019 06:38 AM UTC

Hi John,

Thanks for contacting Syncfusion support.

In Essential JavaScript 2 ASP.NET CORE Grid, you can render the combobox component using the queryCellInfo event with the following code. Please refer to the below code example and documentation link and sample link for more information.

[index.cshtml]

<ejs-grid id="Grid" dataSource="@ViewBag.data" queryCellInfo="dropdown">

<e-grid-columns>

<e-grid-column headerText="Order Status" width="200" template="#dropdown"></e-grid-column>

. . .

</e-grid-columns>

</ejs-grid>

// initializing with unique id. OrderID is a column name

</div>

function dropdown(args) {

var ele = args.cell.querySelector("#combo"+args.data["OrderID"]);

var drop = new ej.dropdowns.ComboBox({

dataSource: sportsData,

autoFill: "true",

fields: { value: 'Game' },

placeholder:"Choose data type"

});

drop.appendTo(ele);

}

</script>

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/how-to/render-other-components-in-column/

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/urlAdaptor-141696308

Please get back to us if you need any further assistance on this.

Regards,

Pavithra S.

Reply | Reply with quote

John Stephen Mangam

Replied On September 4, 2019 09:45 AM UTC

Thank you Pavithra.

I have followed your instructions but I have landed in a new problem with regard to the datasource.

@inject Presentation.Services.ISomeService SomeService;

function queryCell(args) {

var ele = args.cell.querySelector("#combobox" + args.data["Id"]);

let combodata = JSON.stringify('@Html.Raw(SomeService.GetDataTypesAsSelectListItems())');

var drop = new ej.dropdowns.ComboBox({

dataSource: combodata,

autoFill: "true",

fields: { value: 'Value', text: 'Text' },

placeholder: "Choose data type"

});

drop.appendTo(ele);

}

I get the error:

"System.Collections.Generic.List`1[Microsoft.AspNetCore.Mvc.Rendering.SelectListItem]"

Uncaught DataManager: Invalid arguments

Error: DataManager: Invalid arguments

Reply | Reply with quote

Pavithra Subramaniyam [Syncfusion]

Replied On September 5, 2019 07:29 AM UTC

Hi John,

Thanks for your update.

Query: Getting error while serializing combobox dataSource.

We have validated your query and we are able to reproduce the reported problem while we are try to serialize the combobox datasource based on your code snippets(JSON.stringify('@Html.Raw(SomeService.GetDataTypesAsSelectListItems())');). You can resolve the reported problem by serialize the dataSource using the below way. Please find the below code example and sample for your reference.

[code example]

<ejs-grid id="Grid" dataSource="@ViewBag.data" queryCellInfo="dropdown">

<e-grid-columns>

...

</e-grid-columns>

</ejs-grid>

</div>

function dropdown(args) {

var ele = args.cell.querySelector("#combo"+args.data["OrderID"]);

var drop = new ej.dropdowns.ComboBox({

dataSource: @Html.Raw(Json.Serialize(@ViewBag.combodata)), //resolve the reported problem by serialize the data like this

autoFill: "true",

fields: { value: 'Game' },

placeholder:"Choose data type"

});

drop.appendTo(ele);

}

</script>

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2Grid-2142194898

Please get back to us if you need further assistance.

Regards,

Pavithra S.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
147170	Sep 3,2019 05:34 PM UTC	Sep 5,2019 07:29 AM UTC	ASP.NET Core - EJ 2	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US