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

Item Command for checked item on Kendo Grid with Custom button

5 Answers 303 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ryan
Top achievements
Rank 1
Ryan asked on 01 Dec 2019, 07:08 PM

Hi All,

Just wondering where to find sample to invoke item command for checked item on my kendo grid using my custom button?

Also how to show that row is selected when I check the checkbox?

Lastly how to unchecked my header template checkbox when I change page?

columns.Bound(column => column.ProfileID)
.ClientTemplate("<input class='box' type='checkbox' value='#=ProfileID#' />")
.ClientHeaderTemplate("<input type='checkbox' id='selectAll' onclick='toggleSelection()' />")
.Width(40)
.Sortable(false)
.Filterable(false);

Thanks in Advance

Ryan

5 Answers, 1 is accepted

Sort by
0
Ryan
Top achievements
Rank 1
answered on 02 Dec 2019, 10:54 AM

Last 2 questions already managed to make it work.

Just the 1st question regarding sample to invoke item command (popup edit/delete) on checked item on Kendo Grid.

Thanks!

Ryan

0
Accepted
Alex Hajigeorgieva
Telerik team
answered on 03 Dec 2019, 01:00 PM

Hello, Ryan,

The Kendo UI Grid for ASP.NET MVC offers the checkbox selection functionality out of the box by just adding a selectable column to the configuration as demonstrated in this online demo:

https://demos.telerik.com/aspnet-mvc/grid/checkbox-selection

Whether you decide to use the built-in checkbox selection or not, you can add a click handler to the grid tbody and get the currently selected row and use the grid client-side method editRow() to open the row for editing:

https://dojo.telerik.com/@bubblemaster/ayAhASUQ/2

 $("#grid tbody").on("click", ".k-checkbox-label", function(e){
     var grid = $("#grid").data("kendoGrid");
     var selectedRow = $(e.target).closest("tr");
     grid.editRow(selectedRow);
});

Let me know in case you have further questions.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Ryan
Top achievements
Rank 1
answered on 06 Dec 2019, 07:29 PM
Thanks Alex Hajigeorgieva, it work like a charm!
0
Mayurbhai
Top achievements
Rank 1
Veteran
answered on 02 Apr 2021, 03:27 AM

Hi Alex,

I also need to use the "checkbox" column on the Kendo Grid, but I need to display the header for the checkbox column instead of "checkbox" itself. Can you please help me out on this? I really appreciate your help.

Best,

Mickey

0
Mihaela
Telerik team
answered on 05 Apr 2021, 03:17 PM

Hello Mayurbhai,

I would suggest the following approaches:

  1. Adding the required column title by using the client-side property 'columns.headerTemplate' (it is highlighted in yellow in the code snippet below):
@(Html.Kendo().Grid<Model>()
    .Name("Grid")
    .Columns(columns => {
        columns.Select().Width(50).HeaderTemplate("TestText");
    })
    ...
)

     2. A custom solution:

Find the specific checkbox's label, insert a new HTML element, which contains the custom title/text, and hide the checkbox element and its label:

<script>
    function onDataBound(e) {
        var label = e.sender.element.find(".k-grid-header .k-checkbox-label.k-no-text");  //finding the label of the "checkbox" column
        if (label) {
            var newlabeltext = $("<p>Select All</p>"); //creating the HTML element with the required title
            label.parent().prepend(newlabeltext); //inserting the title as a first element of the table header
            newlabeltext.on("click", function () {   //the click event is added in order to alternate the check state of the checkbox when a user clicks on the text
                this.nextSibling.click();
            })
            $(".k-grid-header .k-checkbox:first, .k-checkbox-label.k-no-text:first").hide(); //hiding of the checkbox in the column header
        }
    }
</script>

The function "onDataBound" is a handler of the 'dataBound' event of the grid (it is highlighted in yellow below). It will be executed when the grid is bound to data from its data source. 

@(Html.Kendo().Grid<Model>()
    .Name("Grid")
    .Columns(columns => {
        columns.Select().Width(50);
    })
    .Events(ev =>
    {
        ev.DataBound("onDataBound");
     })
    .DataSource(dataSource => dataSource
      ...
    )
)

Would you please give the examples above a try and let me know if it works as per your requirements?

If you have any other questions, don't hesitate to share them.

 

Regards, Mihaela Lukanova Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Grid
Asked by
Ryan
Top achievements
Rank 1
Answers by
Ryan
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Mayurbhai
Top achievements
Rank 1
Veteran
Mihaela
Telerik team
Share this question
or