Telerik grid column command , add to url # on click

Question

I have this telerik grid in a asp.net mvc project

<div class="actualGrid" id="actualGrid">
    @(Html.Kendo().Grid<AVNO_KPMG.Models.Bench>()    //Bench Grid
        .Name("grid")

    .Columns(columns =>
    {
        columns.Bound(p => p.name).Title("Bench").Filterable(ftb => ftb.Cell(cell => cell.Operator("startswith"))).Width(100);
        columns.Bound(p => p.freeSeats).Title("Free Seats").Width(200).Filterable(ftb => ftb.Cell(cell => cell.Operator("gte"))).HtmlAttributes(new { @class = "FreeSeats" })
            .ClientTemplate("<div class='barthingy'><div class='bars_text'><div class='seatsText'><span class=\"bookNotfull\"></span> <b>#=bookedSeats#</b> USED SEATS</div><div class='seatsText'><span class=\"bookfull\"></span> <b>#=freeSeats#</b> TOTAL OFSEATS</div></div><div id='bigbar'><div  class='bigbar'  style='width:100%; float:left; background-color:rgb(142, 188, 0);'><div  ' style='float:right; width:#=bookedSeats *100 / seatsCount#%; background-color:rgb(255, 99, 71); height:16px '  class='b_#=name#' id='temp-log'></div></div></div></div>");

        //buttons
        columns.Command(command => { command.Custom("checkBench1 ").Text(" AM ").Click("doCheckIn"); command.Custom("checkBench 2").Text(" PM ").Click("doCheckIn"); command.Custom("checkBench3").Text("All Day").Click("doCheckIn"); }).HtmlAttributes(new { @class = "comms#=freeSeats# freeAM#=seatsCount - (bookings_am + bookings_allday)# freePM#=seatsCount - (bookings_pm + bookings_allday)# freeALLDAY#=freeSeats#" }).Title("Check in").Width(200);
    })

    .Pageable()
    .Sortable()

    .Scrollable(scrolling => scrolling.Enabled(false))
            .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
            //.HtmlAttributes(new { style = "height:530px;" })
            .Events(events => events.DataBound("onDataBound"))
    .DataSource(dataSource => dataSource
    .Ajax()
    //.Sort(sort => sort.Add("freeSeats").Ascending())
    .PageSize(10)
    .Events(events => events.Error("error_handler"))
    .Model(model => model.Id(p => p.id))
                    .Read(read => read.Action("GetBenches", "Deskcheckin"))
            )
    )
</div>

Everytime i press on of the buttons in the command column, the url gets a # in front of it, even if i set the buttons to do nothing. my url is something like

http://www.aaaaaa.com/stuff

When i press one of the buttons i get

http://www.aaaaaa.com/stuff#

How can i disable this?

Answer 1

Please try with the below code snippet. For custom command button grid generate anchor control for same. By default it set href='#' and I have replaced it with href='javascript:void(0)'.

<div>
    @(Html.Kendo().Grid<MvcApplication1.Models.Student>()
        .Name("grid")
        .Columns(columns =>
        {
            ..........
            ..........
            columns.Command(command => { command.Custom("checkBench1").Text("AM").Click("doCheckIn"); }).Title("Check in").Width(200);
        })
        .Events(events => events.DataBound("onDataBound"))
        ..........
        ..........
    )
</div>

<script> 
    function doCheckIn() {
        alert('a');
    }
    function onDataBound(arg) {
        $("#.k-grid-checkBench1").attr('href', 'javascript:void(0)');
    }
</script>

Let me know if any concern.