Combining two database field to show in one column

[Alex Kleyman]

So in building the view in the cshtml file we specify the columns

<div class="row">

    <ejs-grid id="GridDetail" allowFiltering="true" allowSorting="true" allowGrouping="false" enableHover="true" rowHeight="38" allowPaging="true" dataSource="ViewBag.students" allowSelection="true">

        <e-grid-pagesettings pageSizes="true" pageSize="10"></e-grid-pagesettings>

        <e-grid-filtersettings type="Menu"></e-grid-filtersettings>

        <e-grid-columns>

            <e-grid-column field="ResidencyStatus" headerText="Residency Status" filter="@(new { type="CheckBox"})" clipMode="EllipsisWithTooltip" width="170"></e-grid-column>

          <e-grid-column field="LastName" headerText="Last Name" filter="@(new { type="CheckBox"})" clipMode="EllipsisWithTooltip" width="170"></e-grid-column>

            <e-grid-column field="HomeDistrictId" headerText="District" filter="@(new { type="CheckBox"})" clipMode="EllipsisWithTooltip" width="170"></e-grid-column>

        </e-grid-columns>

    </ejs-grid>

</div>

I need to combine columns LastName and FirstName together with a Header "Student" and result displayed as LastName, FirstName

I don't see any examples of how to do it or the documentation on this very common need except this

@Html.EJS().Grid("DefaultFunctionalities").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 

    { 

        col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add(); 

        col.Field("FirstName").HeaderText("Full Name").Width("150").ValueAccessor("valueAccess").Add(); 

    }).Render() 

</div> 

<script> 

    function valueAccess(field, data, column) { 

        return data[field] + '-' + data['LastName']; 

    } 

</script> 

[Sujith Kumar Rajkumar]

Hi Alex, 

 

Greetings from Syncfusion support. 

 

Based on the query we could understand that your requirement is to combine two field values and display it under one column. You can achieve it by using one of the below approaches, 

 

• You can use the Grid column template which allows to display custom elements for achieving your requirement. More details on this can be checked in the below documentation link,

 

Documentation: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/columns/#column-template 

 

With this template support, the two column fields can be defined as shown in the below code snippet, 

 

<script id="template" type="text/x-template"> 

    <div> 

        ${FirstName} - ${LastName} 

    </div> 

</script> 

 

• You can also use the value accessor feature approach mentioned in your update to achieve the requirement. More details on this can be checked in the below documentation link,

 

Documentation: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/columns/#valueaccessor 

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R