KendoUI Grid Column Command :Custom Button Text for each row

14 posts, 0 answers
  1. Misahael
    Misahael avatar
    25 posts
    Member since:
    Oct 2013

    Posted 14 Oct 2013 Link to this post

    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); })
                   )
               )
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2310 posts

    Posted 14 Oct 2013 Link to this post

    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!
  3. Misahael
    Misahael avatar
    25 posts
    Member since:
    Oct 2013

    Posted 14 Oct 2013 Link to this post

    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';
                }
            }
        }
  4. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2310 posts

    Posted 15 Oct 2013 Link to this post

    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!
  5. Misahael
    Misahael avatar
    25 posts
    Member since:
    Oct 2013

    Posted 15 Oct 2013 Link to this post

    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
  6. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2310 posts

    Posted 15 Oct 2013 Link to this post

    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!
  7. Misahael
    Misahael avatar
    25 posts
    Member since:
    Oct 2013

    Posted 15 Oct 2013 Link to this post

    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?
  8. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2310 posts

    Posted 15 Oct 2013 Link to this post

    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!
  9. Misahael
    Misahael avatar
    25 posts
    Member since:
    Oct 2013

    Posted 15 Oct 2013 Link to this post

    Very good job Dimiter. !!

    The source works perfectly.

    Thank you
  10. Venu
    Venu avatar
    11 posts
    Member since:
    Aug 2013

    Posted 23 Nov 2016 in reply to Dimiter Madjarov Link to this post

    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

  11. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2310 posts

    Posted 24 Nov 2016 Link to this post

    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.
  12. Venu
    Venu avatar
    11 posts
    Member since:
    Aug 2013

    Posted 24 Nov 2016 in reply to Dimiter Madjarov Link to this post

    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.

     

     

     

  13. Aydın
    Aydın avatar
    3 posts
    Member since:
    Mar 2015

    Posted 07 Dec 2017 in reply to Dimiter Madjarov Link to this post

    This script does not work if the grid is grouped by a column
  14. Preslav
    Admin
    Preslav avatar
    576 posts

    Posted 11 Dec 2017 Link to this post

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