Kendo Window Json Pretty print Mvc

Question

I am a newbie and I am trying to figure out how to Pretty print Json on the Kendo Window, here is the function I am using:

function DisplayRequestSample(eventRequestSample) {
    var kendoWindow = $("<div />").kendoWindow({
        title: "Event Request Sample",
        resizable: false,
        modal: true,
        animation: false,
        width: 700,
        height: 600
    });
    kendoWindow.data("kendoWindow")
        .content(JSON.stringify(JSON.parse(eventRequestSample),null,4))
        .center().open();       
}

Current output:

{ "TrackingID": "89449f04-86b8-4e48-ad1d-52fde970261d", "RequestorID": "Web", "EventType": "Blah", "Environment": "TEST", "ProfileID": 0 }

But how can I put appropriate spaces and line breaks/ indentation.

JSON.stringify is not indenting the Json, not sure if I am using it right. Thank you for looking into this.

Answer 1

The problem is that you are printing the JSON in a DIV and DIVs remove spaces, tabs, newlines... so you should put it inside an element as a PRE, something like:

kendoWindow.data("kendoWindow")
    .content("<pre>" +
             JSON.stringify(JSON.parse(eventRequestSample),null,4)
             "</pre>")
    .center().open();

A second option is using a CSS for getting the same formatting for your DIV. You should use style='white-space: pre-wrap;' and you Window initialization would be something like:

var kendoWindow = $("<div style='white-space: pre-wrap;  '/>").kendoWindow({

A code snippet showing second approach:

function DisplayRequestSample(eventRequestSample) {
  var kendoWindow = $("<div style='white-space: pre-wrap;'/>").kendoWindow({
    title: "Event Request Sample",
    resizable: false,
    modal: true,
    animation: false,
    width: 300,
    height: 200
  });
  kendoWindow.data("kendoWindow")
  .content(JSON.stringify(JSON.parse(eventRequestSample),null,4))
  .center().open(); 
}

DisplayRequestSample('{ "TrackingID": "89449f04-86b8-4e48-ad1d-52fde970261d", "RequestorID": "Web", "EventType": "Blah", "Environment": "TEST", "ProfileID": 0 }');

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.default.min.css">

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>