New to Kendo UI for jQuery? Start a free 30-day trial

Sheets.drawings

configuration

An array which contains the drawings used in this sheet.

sheets.drawings

Array

<div id="spreadsheet"></div>
<script>
  $("#spreadsheet").kendoSpreadsheet({
    images: {
      "1": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=="
    },
    sheets: [{
      drawings: [{
        topLeftCell: "A1",
        offsetX: 10,
        offsetY: 10,
        width: 100,
        height: 100,
        image: "1"
      }]
    }]
  });
</script>

sheets.drawings.height

Number

The drawing's height in pixels.

<div id="spreadsheet"></div>
<script>
  $("#spreadsheet").kendoSpreadsheet({
    sheets: [{
      drawings: [{
        topLeftCell: "A1",
        width: 100,
        height: 150
      }]
    }]
  });
</script>

sheets.drawings.image

String

The ID of the image to display.

<div id="spreadsheet"></div>
<script>
  $("#spreadsheet").kendoSpreadsheet({
    images: {
      "logo": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=="
    },
    sheets: [{
      drawings: [{
        topLeftCell: "A1",
        width: 100,
        height: 100,
        image: "logo"
      }]
    }]
  });
</script>

sheets.drawings.offsetX

Number

The horizontal offset from the anchor cell's top-left corner, in pixels.

<div id="spreadsheet"></div>
<script>
  $("#spreadsheet").kendoSpreadsheet({
    sheets: [{
      drawings: [{
        topLeftCell: "A1",
        offsetX: 15,
        width: 50,
        height: 50
      }]
    }]
  });
</script>

sheets.drawings.offsetY

Number

The vertical offset from the anchor cell's top-left corner, in pixels.

<div id="spreadsheet"></div>
<script>
  $("#spreadsheet").kendoSpreadsheet({
    sheets: [{
      drawings: [{
        topLeftCell: "A1",
        offsetY: 20,
        width: 50,
        height: 50
      }]
    }]
  });
</script>

sheets.drawings.topLeftCell

String

A cell to which the drawing's top-left corner is anchored.

<div id="spreadsheet"></div>
<script>
  $("#spreadsheet").kendoSpreadsheet({
    sheets: [{
      drawings: [{
        topLeftCell: "B2",
        width: 50,
        height: 50
      }]
    }]
  });
</script>

sheets.drawings.width

Number

The drawing's width in pixels.

<div id="spreadsheet"></div>
<script>
  $("#spreadsheet").kendoSpreadsheet({
    sheets: [{
      drawings: [{
        topLeftCell: "A1",
        width: 120,
        height: 80
      }]
    }]
  });
</script>