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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid with column template for combobox

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
loading
Tags: DataGrid
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:

 <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 [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> 
 
<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> 
  
 
 
 
Please get back to us if you need any further assistance on this. 
 
Regards, 
Pavithra S. 


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

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 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> 
 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Pavithra S. 


CONFIRMATION

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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon