How to show concatnated values in Kendo Grid

[prasanna]

Team,

I have a data source with firstname and lastname fields.
But I want my grid to show only fullname (firstname+lastname)

Regards
Prasanna

[Dimo]

Hi Prasanna,

You can use a column template or a row template. These are described in our documentation. I strongly recommend that you read it in full. This will make using the Kendo UI widgets easier and streamlined.

http://docs.kendoui.com/api/web/grid#columnstemplate-string

http://docs.kendoui.com/api/web/grid#rowtemplate-function

http://docs.kendoui.com/getting-started/framework/templates/overview

http://demos.kendoui.com/web/grid/rowtemplate.html

If you choose to use a column template (which is the better option), the field that you specify for the column will be the one used for sorting and filtering.

Greetings,
Dimo
the Telerik team

[Rohith]

Hi,

I am trying to show 2 column values together in a single column using kendo mvc grid

   @(Html.Kendo().Grid<G3MSViewModel.UnitStatus>()
                    .Name("grid_unitStatus")
                    //.Events(events => events.Change("Grid_OnRowSelect"))
                    .Columns(columns =>
                    {

                        columns.Bound(p => p.StatusTimeDiff & p.ElevatorUnitNumber).Title("Unit Number").Width("auto").ClientTemplate(
                            "# if (StatusTimeDiff < 1) {#" +
                            "<img src='/Images/icon-status-green.png'  /> Healthy" +
                            "# } else { #" +
                            "<img src='/Images/icon-status-red.png' /> Un-Healthy" + "#  } #"
                            );
                        columns.Bound(p => p.PassengerStatus).Title("Passenger in Car").Width("auto").ClientTemplate(
                            "# if (PassengerStatus == 'Maybe Occupied') {#" +
                            "<img src='/Images/icon-trapped.png'  />" +
                            "# } else { #" +
                            "#: PassengerStatus #" + "#  } #"
                            );
                        columns.Bound(p => p.ControllerStatus).Title("Controller Status").Width("auto").ClientTemplate(
                            "# if (ControllerStatus == 'True') {#" +
                            "<img src='/Images/icon-con-on.png'  />" +
                            "# } else if(ControllerStatus == 'False') { #" +
                            "<img src='/Images/icon-con-off.png'  />" + "#  } else { #" +
                                "<img src='/Images/icon-con-inactive.png'  />" + "#  } #"
                                ); 
                        columns.Bound(p => p.Address1).Title("Address").Width("auto");
                        columns.Bound(p => p.DeviceStatusDateTime).Hidden(true);
                    })
                                .HtmlAttributes(new { style = "height: 100%;text-align:left; vertical-align:middle" })
                                //.Pageable()
                                //.Selectable()
                                .Scrollable(scrollable => scrollable.Virtual(true))
                                .Filterable()
                                .Sortable()
                                .ColumnMenu()
                                .DataSource(dataSource => dataSource
                                .Ajax()
                                .PageSize(10)
                                .Read(read => read.Action("GetUnitStatus", "Home"))
                                )
        )

can someone help me here real quick

[Stefan]

Hello Rohith,

This can be achieved using the ClientTemplate() property which I saw is utilized already in the Grid.

The syntax should be like this:

columns.Bound(p => p.ColumnName).ClientTemplate("#=ColumnName# #=ColumnNameTwo#");

Let me know if you need additional information on this matter.

Regards,
Stefan
Progress Telerik