Item Command for checked item on Kendo Grid with Custom button

[Ryan]

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

[Ryan]

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

[Alex Hajigeorgieva]

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

[Ryan]

Thanks Alex Hajigeorgieva, it work like a charm!

[Mayurbhai]

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

[Mihaela]

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