How to pass parameter to javascript function from kendo <a href=""></a>

Question

Here is the kendo grid I have <href> tag with onclick function().Now I want to pass filename as parameter to my onclick function.I want to pass that file name to the CallAjaxMethod Function as a parameter. How to do ths?

@(Html.Kendo().Grid<MVCAPPModels..AttachmentsModel>()
        .Name("grid")
        .Columns(columns =>
        {   
            columns.Bound(p => p.FileName).ClientTemplate("<a id='FileName' href='\\#' data-pdfurl='#= FileName #' onclick='CallAjaxMethod('#= FileName #');'>/#= FileName #</a>");

            columns.Bound(c => c.CreatedDate).Width(70);
            columns.Bound(c => c.CreatedBy).Width(70);
            columns.Bound(c => c.UpdatedDate).Width(70);
            columns.Bound(c => c.UpdatedbBy).Width(70);
        })

        .HtmlAttributes(new { style = "height: 350px;" })
        .Scrollable()
        .Groupable()
        .Sortable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(1))
        .DataSource(dataSource => dataSource
            .Ajax()
                      .ServerOperation(false)

            .Read(read => read.Action("Customers_Read", "Home"))
        )
)

JavaScript function :

function CallAjaxMethod()
    {
        alert("page! CallAjax");
        $.ajax({
            type: "POST",
            url: "@Url.Action("Submit", "Home")",
            data: { fileName: "/pdfSample.pdf" },
            type: 'GET',
            cache: false,
            success: function (result) {
                        $('#partialView_div').data(result);
            }
        });
    }

Answer 1

First, add a parameter to your function, so you can actually use what is passed in:

function CallAjaxMethod(filename)
{
    alert("page! CallAjax");
    $.ajax({
        type: "POST",
        url: "@Url.Action("Submit", "Home")",
        data: { fileName: filename },
        type: 'GET',
        cache: false,
        success: function (result) {
                    $('#partialView_div').data(result);
        }
    });
}

Then your HTML and Javascript quotes are conflicting with each other because they are all single quotes, so you need to change some of them, preferably the HTML ones:

@(Html.Kendo().Grid<MVCAPPModels.AttachmentsModel>()
        .Name("grid")
        .Columns(columns =>
        {   
            columns.Bound(p => p.FileName).ClientTemplate("<a id=\"FileName\" href=\"\\#\" data-pdfurl=\"#= FileName #\" onclick=\"CallAjaxMethod('#= FileName #');\">/#= FileName #</a>");

            columns.Bound(c => c.CreatedDate).Width(70);
            columns.Bound(c => c.CreatedBy).Width(70);
            columns.Bound(c => c.UpdatedDate).Width(70);
            columns.Bound(c => c.UpdatedbBy).Width(70);
        })

        .HtmlAttributes(new { style = "height: 350px;" })
        .Scrollable()
        .Groupable()
        .Sortable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(1))
        .DataSource(dataSource => dataSource
            .Ajax()
                      .ServerOperation(false)

            .Read(read => read.Action("Customers_Read", "Home"))
        )
)