Grid with column template for combobox

[John Stephen Mangam]

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:

 <script id="testComboBox" type="text/x-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.

[Pavithra Subramaniyam]

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> 

 

<div id='dropdown'> 

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

    <input id="combo${OrderID}"> 

</div> 

 

<script> 

     

    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. 

[John Stephen Mangam]

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

[Pavithra Subramaniyam]

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 id='dropdown'> 

    <input id="combo${OrderID}"> 

</div> 

 

<script> 

   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.