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

KendoUI Grid Column Command :Custom Button Text for each row

13 Answers 1131 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Misahael
Top achievements
Rank 1
Misahael asked on 14 Oct 2013, 03:00 PM
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); })
               )
           )

13 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 14 Oct 2013, 03:20 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Misahael
Top achievements
Rank 1
answered on 14 Oct 2013, 03:53 PM
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';
            }
        }
    }
0
Dimiter Madjarov
Telerik team
answered on 15 Oct 2013, 08:06 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Misahael
Top achievements
Rank 1
answered on 15 Oct 2013, 02:26 PM
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
0
Dimiter Madjarov
Telerik team
answered on 15 Oct 2013, 02:48 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Misahael
Top achievements
Rank 1
answered on 15 Oct 2013, 03:05 PM
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?
0
Dimiter Madjarov
Telerik team
answered on 15 Oct 2013, 03:30 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Misahael
Top achievements
Rank 1
answered on 15 Oct 2013, 04:52 PM
Very good job Dimiter. !!

The source works perfectly.

Thank you
0
Venu
Top achievements
Rank 1
answered on 24 Nov 2016, 05:38 AM

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

0
Dimiter Madjarov
Telerik team
answered on 24 Nov 2016, 08:41 AM

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
Telerik UI for ASP.NET MVC is ready for Visual Studio 2017 RC! Learn more.
0
Venu
Top achievements
Rank 1
answered on 24 Nov 2016, 10:09 AM

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.

 

 

 

0
Aydın
Top achievements
Rank 1
answered on 07 Dec 2017, 01:57 PM
This script does not work if the grid is grouped by a column
0
Preslav
Telerik team
answered on 11 Dec 2017, 12:16 PM
Hi Aydın,

To remove the grouping rows, you could use the jQuery ":not()" selector:
For example, check my testing Dojo:
I hope this helps.


Regards,
Preslav
Progress Telerik
Try our brand new, jQuery-free Angular 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
Misahael
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Misahael
Top achievements
Rank 1
Venu
Top achievements
Rank 1
Aydın
Top achievements
Rank 1
Preslav
Telerik team
Share this question
or