jquerykendo-gridquery-stringkendo-windowrequest-uri

passing image to kendo popup window [Request Uri too long 414]


My web page has kendo grid loaded with images and a "Graph Map" button.

enter image description here 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].

  1. Why is the kendoWindow taking this data as query string although the window is present in the same view?

  2. How can i rectify this issue?


Solution

  • 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();}