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
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'
;
}
}
}
Dimiter Madjarov
Telerik

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';
}
}
}
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 +
"']"
);
Dimiter Madjarov
Telerik

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
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

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?
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

The source works perfectly.
Thank you

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
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.
Dimiter Madjarov
Telerik by Progress

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.

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
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.