My web page has kendo grid loaded with images and a "Graph Map" button.
When we click "Graph Map" button, another window pops up which would display the image in first record of grid, and then on "Next"/"Prev" button clicks we can move to the second, third images and so on...
I am providing a minimized version of the whole my view as follows
<div class="container" onclick="onContainerClick();">
<div class="row">
<div id="tabstrip"></div>
<div class="col-md-12 table-responsive table-bordered" style="padding-right: 0px; padding-left: 0px" id="mapsDiv" width="100%">
</div>
</div>
<div class="row col-md-12 col-md-push-11">
<button id="btnGraph" onclick="onShowGraph()">Graph Map</button>
</div>
<div id="graphsWindow" >
<div class="table" style="height:700px;">
<div class="row" style="margin-left:0px;margin-top:0px; padding-top:0px; padding-bottom:0px">
<div style="border:groove; margin-left:10px; margin-bottom:0px; padding-bottom:0px; margin-right:2px;" class="col-md-2">
<div class="row" style="padding-top:5px; margin-top:0px; padding-left:5px; padding-right:5px">
<div class="col-md-1" style="padding-left:0px; margin:0px; width:auto;">
<img src="~/Images/profile.png" height="85" width="85" id="studentPhoto"/>
</div>
</div>
</div>
</div>
</div>
</div>
onShowGraphs
function onShowGraphs(){
var window = $("#graphsWindow").data("kendoWindow");
...
var grid = $('#mapsDiv').data("kendoGrid");
var rows = grid.dataSource.data();
$('#studentPhoto').attr("src", rows[_currGridRowNo]["photo"]);
window.open().center();
}
In this case i get error [Request Uri too long 414].
Why is the kendoWindow taking this data as query string although the window is present in the same view?
How can i rectify this issue?
I just had to add "data:image/gif;base64,". So my function becomes
function onShowGraphs(){
var window = $("#graphsWindow").data("kendoWindow");
...
var grid = $('#mapsDiv').data("kendoGrid");
var rows = grid.dataSource.data();
$('#studentPhoto').attr("src", "data:image/gif;base64," + rows[_currGridRowNo]["photo"]);
window.open().center();}