This is a migrated thread and some comments may be shown as answers.

How to show concatnated values in Kendo Grid

3 Answers 3143 Views
Grid
This is a migrated thread and some comments may be shown as answers.
prasanna
Top achievements
Rank 1
prasanna asked on 09 Jan 2013, 12:16 PM
Team,

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

Regards
Prasanna

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 09 Jan 2013, 03:38 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Rohith
Top achievements
Rank 1
answered on 23 Aug 2017, 09:49 AM

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

0
Stefan
Telerik team
answered on 25 Aug 2017, 05:33 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
prasanna
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Rohith
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or