How to show concatnated values in Kendo Grid

4 posts, 0 answers
  1. prasanna
    prasanna avatar
    4 posts
    Member since:
    Jan 2013

    Posted 09 Jan 2013 Link to this post

    Team,

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

    Regards
    Prasanna
  2. Dimo
    Admin
    Dimo avatar
    8486 posts

    Posted 09 Jan 2013 Link to this post

    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!
  3. Rohith
    Rohith avatar
    3 posts
    Member since:
    Apr 2017

    Posted 23 Aug 2017 Link to this post

    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

  4. Stefan
    Admin
    Stefan avatar
    3076 posts

    Posted 25 Aug 2017 Link to this post

    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.
Back to Top