KendoUI Grid Column Command :Custom Button Text for each row

[Misahael]

Hello,

I need a custom text for each command button.

The label/text of the button depends on the data (E.g personal, name or DNI). It is different for every row

Please help me if you know the solution.

My source is:

    @(Html.Kendo().Grid(Model)
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Command(command => command.Custom("Name").Text("CustomTextEachRow").Click("ShowRates")).Width(75);
            //columns.Command(command => command.Custom("solicitud").HtmlAttributes(new { actionName = "Edit" }));
            columns.Bound(p => p.ID_SOLICITUDSERVICIO).Visible(false);
            columns.Bound(p => p.NOMBRE_CLIENTE).Title("Cliente");
            columns.Bound(p => p.FECHA_SOLICITOSERVICIO).Format("{0: yyyy-MM-dd HH:mm:ss}").Title("Fecha");
        })
               .DataSource(dataSource => dataSource
                   .Ajax()
                   .Read(read => read.Action("LeerExt_ControlInterno", "Consultas").Data("getParameter"))
                   .Model(model => { model.Id(p => p.ID_SOLICITUDSERVICIO); })
               )
           )

[Dimiter Madjarov]

Hi Catalina,


To achieve this you could set some arbitrary text in the Grid configuration (or none at all).
E.g.

columns.Command(command => command.Custom("custom").Text("").Click("showDetails"));

Then in the dataBound event of the Grid you should iterate over the current page data and set the custom text for each button. Here is an example in which I am changing the text for each with even id.
E.g.

.Events(e => e.DataBound("dataBound"))

function dataBound(e) {
    var data = this.dataSource.view();
    for (var i = 0; i < data.length; i++) {
        var uid = data[i].uid;
        var row = this.table.find("tr[data-uid='" + uid + "']");

        if (data[i].EmployeeID % 2 == 0) {
            row.find(".k-grid-custom").contents().last()[0].textContent='New Text';
        }
    }
}

Regards,
Dimiter Madjarov
Telerik

[Misahael]

Thanks Dimiter

I'am trying with your source but it is not resolve my problem

I made the following changes:

 .Columns(columns =>
        {
            columns.Command(command => command.Custom("custom").Text("").Click("ShowRates")).Width(75);
            columns.Bound(p => p.ID_SOLICITUDSERVICIO).Visible(false);
            columns.Bound(p => p.CODIGO_SOLICITUDSERVICIO).Title("N° de solicitud");
        })
               .Events(e => e.DataBound("dataBound"))


function dataBound(e) {
        var data = this.dataSource.view();
        for (var i = 0; i < data.length; i++) {
            var uid = data[i].CODIGO_SOLICITUDSERVICIO;
            alert(uid);
            var row = this.table.find("tr[data-CODIGO_SOLICITUDSERVICIO='" + uid + "']");

            if (data[i].ID_SOLICITUDSERVICIO % 2 == 0) {
                row.find(".k-grid-custom").contents().last()[0].textContent = 'New Text1';
            }
        }
    }

[Dimiter Madjarov]

Hello Christian,


I assume that the reason for the issue is in the following row:

var row = this.table.find("tr[data-CODIGO_SOLICITUDSERVICIO='" + uid + "']");

You should get the rows by the data-uid attribute:

var row = this.table.find("tr[data-uid='" + uid + "']");

Regards,
Dimiter Madjarov
Telerik

[Misahael]

Thank Dimiter

the code works fine, but when I grouped one or more columns displayed again in the button text "custom"

This  occurs only when I group, when I use a filter or ordered works fine.

Please help me with this

[Dimiter Madjarov]

Hello Christian,


This behavior is expected, since when the items are grouped, the structure of the dataSource view is different i.e. each element in it represent a single group, not a single item. As a solution, in the dataBound event you could check if the items are grouped and iterate the data accordingly.
E.g.

function dataBound(e) {
    var data = this.dataSource.view();

    if (this.dataSource.group().length == 0) {
        for (var i = 0; i < data.length; i++) {
            var uid = data[i].uid;
            var row = this.table.find("tr[data-uid='" + uid + "']");

            if (data[i].EmployeeID % 2 == 0) {
                row.find(".k-grid-custom").contents().last()[0].textContent = 'New Text';
            }
        }
    } else {
        for (var i = 0; i < data.length; i++) {
            var items = data[i].items;
            for (var j = 0; j < items.length; j++) {
                var uid = items[j].uid;
                var row = this.table.find("tr[data-uid='" + uid + "']");

                if (items[j].EmployeeID % 2 == 0) {
                    row.find(".k-grid-custom").contents().last()[0].textContent = 'New Text';
                }
            }
        }
    }
}

 

Regards,
Dimiter Madjarov
Telerik

[Misahael]

Very good  Dimiter!


I've used this source and it works very good, but when I group two or more columns the source does not work.

I have a lot of grids with a lot of columns, this columns should groups.

How can I solve this problem?

[Dimiter Madjarov]

Hi Christian,


Sorry for the inconvenience. An alternative approach, that I would suggest you, which does not depend on the grouping would to use the tr[role='row'], which will select only the rows, which contain actual items. With this information in place, we could use the dataItem method of the Grid's API to retrieve their underlying models and perform the custom check.
E.g.

function dataBound(e) {
    var rows = this.table.find("tr[role='row']");

    for (var i = 0; i < rows.length; i++) {
        var model = this.dataItem(rows[i]);
        if (model.EmployeeID % 2 == 0) {
            $(rows[i]).find(".k-grid-custom").contents().last()[0].textContent = 'New Text';
        }
    }
}

I hope that this was the information that you were looking for. I wish you a great day!

 

Regards,
Dimiter Madjarov
Telerik

[Misahael]

Very good job Dimiter. !!

The source works perfectly.

Thank you

[Venu]

I have a similar issue. I am trying to set the datarow column value as button text. but the grid find is not working. TabStrip has the grid.

Example grid data:

Header[RequestId

row1 [2314,ABCClient,Cancel]

row2 [2314,ABCClient,View detail]

The last column [Action] should be a button and if button is clicked a kendo window shows a partial view. 

--

<p>

tabstrip.Add().Text("Completed Requests")
              .Content(@<text>
                @(Html.Kendo().Grid<TestWeb.Models.RequestLog>()
                        .Name("CompletedGrid")
                        .Columns(columns =>
                        {
                            columns.Bound(e => e.RequestID).Width(110);
                            columns.Bound(e => e.Client);
                            columns.Bound(e => e.Action).ClientTemplate("<a href='' onclick='return false'>#=Action#</a>");
                            columns.Command(command => command.Custom("ViewDetails").Click("showDetails")).Width(180);
                        })
                                .DataSource(dataSource => dataSource
                                    .Ajax()
                                          .Read(read => read.Action("GetCompletedRequestData", "Tab"))
                                         ).Events(e => e.DataBound("dataBound"))
                )
            </text>);

 

function dataBound(e) {

        var data = this.dataSource.view();

        for (var i = 0; i < data.length; i++) {

            var uid = data[i].uid;

            var row = this.table.find("tr[data-uid='" + uid + "']");

            row.find(".k-grid-custom").contents().last()[0].textContent = data[i].Action; ///HERE errors out as .last() is NULL

        }

    }

--

I want to set Action value as the command button text

[Dimiter Madjarov]

Hello Venu,

It looks like the reason for the issue is that the name of the custom command is different in this case, so it's CSS will be k-grid-ViewDetails.

Let me know if this information helps.

Regards,
Dimiter Madjarov
Telerik by Progress

[Venu]

Hi Dimiter,

I realized after posting my earlier reply. Then I added a if condition to bypass Header where Contents().length() is zero. that fixed my scenario

function dataBound(e) {
        var rows = this.table.find("tr[role='row']");
        for (var i = 0; i < rows.length; i++) {
            var model = this.dataItem(rows[i]);
            if ($(rows[i]).find(".k-grid-custom").contents().length > 0) { ///Works
                $(rows[i]).find(".k-grid-custom").contents().last()[0].textContent = model.Action;
            }
        }
    }

 

Attached the error for others reference.

 

 

 

[Aydın]

This script does not work if the grid is grouped by a column

[Preslav]

Hi Aydın,

To remove the grouping rows, you could use the jQuery ":not()" selector:

• https://api.jquery.com/not-selector/

For example, check my testing Dojo:

• https://dojo.telerik.com/iNeKA

I hope this helps.


Regards,
Preslav
Progress Telerik

[Keith]

Works for me, but 1 thing.

For me if the text is 0 then dont want to have a button just text. If value for the column text is other than 0 then need a command.

How to do that? I then assume I can style the button so it just looks like text that highlights when hovered over.

[Ivan Danchev]

Keith,

You can use jQuery to modify the content of the cell. This way you can remove the button and add text to the cell. The dojo example that follows is based on the one Preslav linked, with some modifications explained below:  https://dojo.telerik.com/ariraPIk/3

A "text" field is added to the data the Grid is bound to. The condition in the dataBound event handler checks the value of "text" and if it is "0", the following logic is executed:

$(rows[i]).find(".k-grid-command").remove(); //removes the button
$(rows[i]).find(".k-command-cell").html('New Text'); //sets text in the cell