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

Grid.items

configuration

An array with objects representing the settings of the component items.

grid.items

Array

<div id="skeleton"></div>
<script>
$("#skeleton").kendoSkeletonContainer({
    width: 200,
    height: 300,
    grid: {
        items: [
            {
                colStart: 1,
                colSpan: 1,
                rowStart: 1,
                rowSpan: 1,
                shape: "rectangle"
            },
            {
                colStart: 2,
                colSpan: 1,
                rowStart: 1,
                rowSpan: 1,
                shape: "rectangle"
            }
        ],
        columns: 4,
        rows: 4
    }
});
</script>

grid.items.colSpan

Number

A value that determines how many columns will the item span.

<div id="skeleton"></div>
<script>
$("#skeleton").kendoSkeletonContainer({
    width: 200,
    height: 300,
    grid: {
        items: [
            {
                colStart: 1,
                colSpan: 1,
                rowStart: 1,
                rowSpan: 1,
                shape: "rectangle"
            },
            {
                colStart: 2,
                colSpan: 1,
                rowStart: 1,
                rowSpan: 1,
                shape: "rectangle"
            }
        ],
        columns: 4,
        rows: 4
    }
});
</script>

grid.items.colStart

Number

A value that determines the start position of the item on the column axis.

<div id="skeleton"></div>
<script>
$("#skeleton").kendoSkeletonContainer({
    width: 200,
    height: 300,
    grid: {
        items: [
            {
                colStart: 1,
                colSpan: 1,
                rowStart: 1,
                rowSpan: 1,
                shape: "rectangle"
            },
            {
                colStart: 2,
                colSpan: 1,
                rowStart: 1,
                rowSpan: 1,
                shape: "rectangle"
            }
        ],
        columns: 4,
        rows: 4
    }
});
</script>

grid.items.rowSpan

Number

A value that determines how many rows will the item span.

<div id="skeleton"></div>
<script>
  $("#skeleton").kendoSkeletonContainer({
    animation: "wave",
    height: 200,
    width: 340,
    grid: {
      items: [
        {
          colStart: 1,
          colSpan: 1,
          rowStart: 1,
          rowSpan: 2,
          shape: "rectangle"
        },
        {
          colStart: 2,
          colSpan: 1,
          rowStart: 1,
          rowSpan: 1,
          shape: "circle"
        }
      ],
      columns: 4,
      rows: 4
    },
    animation: "wave"
  });
</script>

grid.items.rowStart

Number

A value that determines the start position of the item on the row axis.

<div id="skeleton"></div>
<script>
  $("#skeleton").kendoSkeletonContainer({
    animation: "wave",
    height: 200,
    width: 340,
    grid: {
      items: [
        {
          colStart: 1,
          colSpan: 1,
          rowStart: 2,
          rowSpan: 2,
          shape: "rectangle"
        },
        {
          colStart: 2,
          colSpan: 1,
          rowStart: 1,
          rowSpan: 1,
          shape: "circle"
        }
      ],
      columns: 4,
      rows: 4
    },
    animation: "wave"
  });
</script>

grid.items.shape

String

A value that determines the shape of the item. Valid options are

rectangle: sets a rectangular form for the item
text: mimics a text placeholder for the item
circle: sets a circular shape for the item.

Default: 'text'

<div id="skeleton"></div>
<script>
$("#skeleton").kendoSkeletonContainer({
    width: 200,
    height: 300,
    grid: {
        items: [
            {
                colStart: 1,
                colSpan: 1,
                rowStart: 1,
                rowSpan: 1,
                shape: "rectangle"
            },
            {
                colStart: 2,
                colSpan: 1,
                rowStart: 1,
                rowSpan: 1,
                shape: "circle"
            }
        ],
        columns: 4,
        rows: 4
    }
});
</script>