How to get Kendo client card value for Javascript
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 trigger the JavaScript call 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 the method mentioned in 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 value AudioFile
for the string parameter in the method GetEcbaudioPlay
. How can I get the value of this method? Please help me with this. Or is there an alternative method for this.
Thanks Shyam
source to share
Ok if it was me, I would probably change the code a bit.
For your ClientTemplate, I'll probably do the following:
columns.Bound(p => p.AudioFileName).ClientTemplate("#=showAudioButton(data.AudioFileName)#");
Then the javascript function is called which will then render the 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;
}
Then the button with the image should be returned if the file name is specified.
Then adding the DataBound event to the grid like this:
.Events(events => {events.DataBound("onDataBound");})
we can then attach an event handler to elements like this:
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 have not tested this code, but hopefully you can see what I am trying to achieve here for you.
If you need more information, let me know.
source to share