CODEWITHSUNDEEP
jquerykendo-uikendo-gridkendo-asp.net-mvc
Chatra
Chatra

Reputation: 3139

Display text on button and change color of the button Kendo UI

I want to display text on button based on the value from database.

So, button text varies in each row(Ex: In service, Expired, 30 days Expire).

1) How can I display text in button in Kendo row ?

2) I want to change the color of the button based on the above 3 values. (Ex: In Service - Green, Expired - Red, 30 day expire - Yellow)

I want to display that button in the custom command button in below code

How can I do this ?

@(Html.Kendo().Grid(Model)
       .Name("grid")
       .Columns(columns =>
       {
           columns.Bound(c => c.UserName).Title("User").Filterable(false);               
           columns.Bound(c => c.Role).Title("Role");               
           //columns.Command(command => command.Custom().Click("showDetails"));
       })
       .HtmlAttributes(new { style = "height: 500px;" })
       .Sortable()
       .Scrollable(x => x.Height(400))
       .Filterable()
       .Pageable(x => x.Enabled(true).PreviousNext(false).PageSizes(true))
   )

Upvotes: 1

Views: 2244

Answers (1)

kashyapa
kashyapa

Reputation: 1626

looks like you are doing a ServerSide binding to the grid. In this case you will need to use Template() method of the column builder.

I tried to replicate your scenario. I have a model with the following definition:

 public class StatusModel
    {
        public string Col1 { get; set; }
        public string Status { get; set; }
    }

Then in my controller, i am just creating a list with 3 items as below:

public ActionResult Index()
        {
            var data = new List<StatusModel>()
            {
                new StatusModel {Col1="Row 1",Status="In Service" },
                new StatusModel {Col1="Row 2",Status="Expire" },
                new StatusModel {Col1="Row 3",Status="30 days Expire" },
            };
                return View(data);
        }

And in the view here is how you need to define the grid:

@(Html.Kendo().Grid(Model)
                  .Name("kGrid")
                  .Columns(columns =>
                  {
                      columns.Bound(c => c.Col1).Title("Column 1");
                      columns.Bound(c => c.Status).Template(@<text>
                        @if (@item.Status == "In Service")
                        {
                            @Html.Kendo().Button().Name("kButton").Content(@item.Status).HtmlAttributes(new { style = "background-color:green;color:white;width:150px" })
                        }
                        else if (@item.Status == "Expire")
                        {
                            @Html.Kendo().Button().Name("kButton").Content(@item.Status).HtmlAttributes(new { style = "background-color:red;color:white;width:150px" })
                        }
                        else
                        {
                            @Html.Kendo().Button().Name("kButton").Content(@item.Status).HtmlAttributes(new { style = "background-color:orange;color:white;width:150px" })
                        }
                    </text>);
                  })
            )

You can optimize the code further by doing if else to decide on a CSS class you can apply and finally do a single call to Kendo.Button() and pass the css class as a HTML attribute.

Hope this helps.

Upvotes: 3

Related Questions