How To Get Kendo Grid ClientTemplate Value To Javascript

Question

Please find my Kendo Grid below

@(Html.Kendo().Grid(Model)
                    .Name("Grid")
                    .Columns(columns =>
                    {
                        columns.Bound(p => p.Callid).Title("CALL ID").Sortable(true).Width(80);        
                        columns.Bound(p => p.CallConnectTime).Title("CONNECTED TIME");
                        columns.Bound(p => p.CallTerminateTime).Title("TERMINATED TIME");
                        columns.Bound(p => p.Duration).Title("DURATION(Seconds)").Width(140);  
                        columns.Bound(p => p.AudioFileName).ClientTemplate("<input type='hidden'
         value='#=AudioFileName#'/> 
            <a href='javascript:void(0)' class='ui-btn-a ecbPlayClass'>
        <img src='" + Url.Content("~") + "img/play-circle-fill-32.png'
         height='20' width='20'/>"          



                          );        
                    })
                        .Pageable()
                             .Sortable()
                             .Groupable()
                             .Scrollable()
                             .Filterable()
                             .ColumnMenu()
                              .DataSource(dataSource => dataSource
                                 .Ajax()
                             .ServerOperation(false)
                             .Model(model => model.Id(p => p.Callid))
                             )
                         )

I am trying to call call a JavaScript mentioned below

    <script type="text/javascript">

        $(".ecbPlayClass").click(function (event) {
            var fPath = $(this).children().attr("#= AudioFileName #");           
            var tbl = $('#ECBPlayer');      

            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetEcbaudioPlay")',
                dataType: 'html',
                data: { AFilePath: fPath }
            }).success(function (result) {
                tbl.empty().append(result);
                $("#dialog").dialog();
            }).error(function () {

            });
        });

    </script>

where method mentioned in the JavaScript is

 public ActionResult GetEcbaudioPlay(string AFilePath)
        {
            string SimageBase64Data = string.Empty;
            try
            {
                //byte[] imageByteData = System.IO.File.ReadAllBytes(AFilePath);
                //SimageBase64Data = Convert.ToBase64String(imageByteData);
            }
            catch (Exception)
            {

            }
            return PartialView("_EcbAudioPlayer", AFilePath);
        }

All I want is to get the AudioFile value to the string parameter in the method GetEcbaudioPlay. How can I get the value to that method?Please can anyone help me with this. Or is there any alternative method to do this.

Thanks Shyam

Answer 1

Ok if it was me I would probably tweak the code a little like this.

For your clientTemplate I would probably do this:

columns.Bound(p => p.AudioFileName).ClientTemplate("#=showAudioButton(data.AudioFileName)#");

This will then call a javascript function that will then display a button/link for you.

function showAudioButton(filename) {
    var retString = '';

    if (filename.length !== 0 && filename !== '' && filename !== undefined) {
        retString = '<button type="button" class="ui-btn-a ecbPlayClass" data-audio-filename="' + 
            filename +
            '">' +
            '<img src="@Url.Content("~/img/play-circle-fill-32.png")"  height="20" width="20"/>
              </button>';
    } else {
        retString = '<span>-</span>';
    }

    return retString;

}

This should then return back a button with the image if a file name is provided.

Then adding a DataBound event to the grid like this:

.Events(events => {events.DataBound("onDataBound");})

we can then attach the event handler to the items like so:

function onDataBound(e) {
    var audioButtons = $('button[data-audio-filename]');
    if (audioButtons !== null && audioButtons.length > 0) {
        $('button[data-audio-filename]').on('click', function (me) {
            me.preventDefault();
            var myvalue = $(this).data("audio-filename");
            var tbl = $('#ECBPlayer');   

            //call your service url here.
            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetEcbaudioPlay")',
                dataType: 'html',
                data: {
                    AFilePath: myvalue
                }
            }).success(function (result) {
                tbl.empty().append(result);
                $("#dialog").dialog();
            }).error(function () {

            });


        });
    }
}

I haven't tested this code but hopefully you can see what I am trying to achieve here for you.

If you need more info let me know.