Enables or disables the alternating rows.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :altrows="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

This property specifies the first alternating row.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :altrows="true"
    :altstart="2"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the alternating step

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :altrows="true"
    :altstart="0" :altstep="2"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Determines whether the loading image should be displayed until the Grid's data is loaded.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :autoshowloadelement="false"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Displays the filter icon only when the column is filtered. When the value of this property is set to false, all grid columns will display a filter icon when the filtering is enabled.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :filterable="true"
    :autoshowfiltericon="false"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets whether the columns menu button will be displayed only when the mouse cursor is over a columns header or will be always displayed.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :filterable="true"
    :autoshowcolumnsmenubutton="false"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets whether the columns lines are displayed.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :showcolumnlines="false"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets whether the row lines are displayed.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :showrowlines="false"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets whether the column header lines are displayed.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :showcolumnheaderlines="false"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets whether adaptive mode is enabled.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :adaptive="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the Grid's breakpoint width when adaptive mode is actived.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :adaptive="true"
    :adaptivewidth="400"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Enables or disables the clipboard operations

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :clipboard="false"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

When the value of this property is true, a close button is displayed in each grouping column.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :groupable="true"
    :groups=" ['City'] " :closeablegroups="false"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the columns menu width.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :filterable="true"
    :autoshowcolumnsmenubutton="false" :columnsmenuwidth="40"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Callback called when a column menu is opening. You can use it for changing the size of the menu or cancelling the opening. Three params are passed - menu, datafield and menu's height. If you return false, the opening will be cancelled.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :columnmenuopening="columnmenuopening"
    :filterable="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      columnmenuopening: function (menu, datafield, height) {
        alert('Menu Opening');
      }
    }
  }
</script>

Callback called when a column menu is opening. You can use it for changing the size of the menu or cancelling the opening. Three params are passed - menu, datafield and menu's height. If you return false, the opening will be cancelled.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :columnmenuclosing="columnmenuclosing"
    :filterable="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      columnmenuclosing: function (menu, datafield, height) {
        alert('Menu Closing');
      }
    }
  }
</script>

Callback called when a cell is hovered.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :cellhover="cellhover"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      cellhover: function (cellhtmlElement, x, y) {
        alert('Cell Hovered!');
      }
    }
  }
</script>

Enables or disables the delete of a cell/row values by using the "delete" key.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :editable="true"
    :enablekeyboarddelete="false"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Determines whether ellipsis will be displayed, if the cells or columns content overflows.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :enableellipsis="false"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Determines whether mousewheel scrolling is enabled.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="false" :height="100"
    :enablemousewheel="false"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Enables or disables the grid animations.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :filterable="true"
    :enableanimations="false"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Enables or disables the grid tooltips.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :enabletooltips="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Enables or disables the grid rows hover state.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :enablehover="false"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Enables the text selection of the browser.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :enablebrowserselection="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets the position of the ever present row. Possible values: "top", "bottom", "topAboveFilterRow".

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :showeverpresentrow="true"
    :everpresentrowposition="'bottom'"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets the height of the ever present row.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :showeverpresentrow="true"
    :everpresentrowheight="40"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets the actions of the ever present row. Possible values: "add", "reset", "update", "delete". Instead of "add", you can also use "addBottom" which is the same as "add", but adds the new row to the bottom of the Grid.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :showeverpresentrow="true"
    :everpresentrowactions="'add update delete reset'"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets the actions display mode. By default they are displayed in a popup. You can set the property to "columns" and define columns with datafields - addButtonColumn, resetButtonColumn, updateButtonColumn and deleteButtonColumn to display the actions in columns.

<template>
  <JqxGrid ref="myGrid"
       :width="850" :source="source" :columns="columns" :autoheight="true" :showeverpresentrow="true"
       :everpresentrowactionsmode="'columns'" />
</template>

<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';

  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' },
          { datafield: 'addButtonColumn', width: 50 },
          { datafield: 'resetButtonColumn', width: 50 }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the filter row's height.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :filterable="true"
    :showfilterrow="true" :filterrowheight="40"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

The property specifies the type of rendering of the Filter Menu. Possible values: "default" and "excel". In "excel" mode, the Filter Menu displays a ListBox with Checkboxes with all unique cell values.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :filterable="true"
    :filtermode="'excel'"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

This function is called when a group is rendered. You can use it to customize the default group rendering.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :groupsrenderer="groupsrenderer"
    :groupable="true" :groups=" ['City'] "
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      groupsrenderer: function (text, group, expanded) {
        return 'City: ' + group;
      }
    }
  }
</script>

Sets or gets a custom renderer for the grouping columns displayed in the grouping header when the grouping feature is enabled.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :groupcolumnrenderer="groupcolumnrenderer"
    :groupable="true" :groups=" ['City'] "
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      groupcolumnrenderer: function (text) {
        return 'Grouped By: ' + text;
      }
    }
  }
</script>

Sets or gets the default state of the grouped rows.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :groupable="true"
    :groups=" ['ContactName'] " :groupsexpandedbydefault="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

The function is called when a key is pressed. If the result of the function is true, the default keyboard navigation will be overriden for the pressed key.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :handlekeyboardnavigation="handlekeyboardnavigation"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      handlekeyboardnavigation: function () {
        const key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
        alert(key);
      }
    }
  }
</script>

The function is called when the Grid Pager is rendered. This allows you to customize the default rendering of the pager.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :pagerrenderer="pagerrenderer"
    :pageable="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      pagerrenderer: function () {
        const element = document.createElement('div');
        element.innerHTML = 'Custom Render of the JqxGrid Pager!';
        return element;
      }
    }
  }
</script>

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :rtl="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Determines whether the Grid should display the built-in loading element or should use a DIV tag with class 'jqx-grid-load'

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :showdefaultloadelement="false"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

When this property is true, the Grid adds an additional visual style to the grid cells in the filter column(s).

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :filterable="true"
    :showfiltercolumnbackground="false"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Determines whether to display the filtering items in the column's menu.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :filterable="true"
    :showfiltermenuitems="false"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

When this property is true, the Grid adds an additional visual style to the grid cells in the pinned column(s).

<template>
  <JqxGrid ref="myGrid"
       :width="500" :source="source" :columns="columns" :autoheight="true" :showpinnedcolumnbackground="false" />
</template>

<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';

  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { pinned: 'true', text: 'Contact Name', datafield: 'ContactName', width: 150 },
          { text: 'Contact Title', datafield: 'Title', width: 150 },
          { text: 'City', datafield: 'City', width: 150 },
          { text: 'Country', datafield: 'Country', width: 150 },
          { text: 'Country1', width: 150 },
          { text: 'Country2', width: 150 },
          { text: 'Country3', width: 150 },
          { text: 'Country4', width: 150 },
          { text: 'Country5', width: 150 }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

When this property is true, the Grid adds an additional visual style to the grid cells in the sort column.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :sortable="true"
    :showsortcolumnbackground="false"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Determines whether to display the sort menu items.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :sortable="true"
    :showsortmenuitems="false"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Determines whether to display the group menu items.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :groupable="true"
    :showgroupmenuitems="false"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Shows an additional column with expand/collapse toggle buttons when the Row details feature is enabled.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :rowdetails="true"
    :showrowdetailscolumn="false"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Shows or hides the columns header.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :showheader="false"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Shows or hides the groups header area.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :groupable="true"
    :showgroupsheader="false"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Shows or hides the aggregates in the grid's statusbar.

<template>
  <JqxGrid ref="myGrid"
       :width="850" :source="source" :columns="columns" :autoheight="true" :showaggregates="true" :showstatusbar="true" :statusbarheight="50"/>
</template>

<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';

  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          {
            text: 'Contact Title', datafield: 'Title', aggregates: ['count', {
              'Owners': function (aggregatedValue, currentValue) {
                if (currentValue == 'Owner') {
                  return aggregatedValue + 1;
                }
                return aggregatedValue;
              }
            }]
          },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country', aggregates: ['count'] }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Shows or hides the aggregates in Grid groups.

<template>
  <JqxGrid ref="myGrid"
       :width="850" :source="source" :columns="columns" :autoheight="true" :groupable="true" 
       :showaggregates="true" :showgroupaggregates="true" :showstatusbar="true" :statusbarheight="50" />
</template>
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          {
            text: 'Contact Title', datafield: 'Title', aggregates: ['count', {
              'Owners': function (aggregatedValue, currentValue) {
                if (currentValue == 'Owner') {
                  return aggregatedValue + 1;
                }
                return aggregatedValue;
              }
            }]
          },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country', aggregates: ['count'] }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Shows or hides an additional row in jqxGrid which allows you to easily add new rows.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :showeverpresentrow="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Shows or hides the filter row.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :filterable="true"
    :showfilterrow="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Shows or hides the empty row label when the Grid has no records to display.

<template>
  <JqxGrid ref="myGrid"
       :width="850" :columns="columns" :autoheight="true" :showemptyrow="false" />
</template>

<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';

  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Shows or hides the grid's statusbar.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :showstatusbar="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets the statusbar's height.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :showstatusbar="true"
    :statusbarheight="50"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Shows or hides the grid's toolbar.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :showtoolbar="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the selection mode.

Possible Values:

'none'-disables the selection

'singlerow'- full row selection

'multiplerows' - each click selects a new row. Click on a selected row unselects it

'multiplerowsextended' - multiple rows selection with drag and drop. The selection behavior resembles the selection of icons on your desktop

'singlecell' - single cell selection

'multiplecells' - each click selects a new cell. Click on a selected cell unselects it

'multiplecellsextended' - in this mode, users can select multiple cells with a drag and drop. The selection behavior resembles the selection of icons on your desktop

'multiplecellsadvanced' - this mode is the most advanced cells selection mode. In this mode, users can select multiple cells with a drag and drop. The selection behavior resembles the selection of cells in a spreadsheet

'checkbox' - multiple rows selection through a checkbox.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :selectionmode="'multiplerows'"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

<template>
  <JqxGrid ref="myGrid" 
       :width="800" :source="source" :autoheight="true" :columns="columns" 
       :filterable="true" :autoshowfiltericon="true" :ready="ready"
       :updatefilterconditions="updatefilterconditions" :updatefilterpanel="updatefilterpanel">
  </JqxGrid>
</template>
<script>
  import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";

  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      addfilter: function () {
        let filtergroup = new jqx.filter();
        let filter_or_operator = 1;
        let filtervalue = 'Beate';
        let filtercondition = 'contains';
        let filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
        filtervalue = 'Andrew';
        filtercondition = 'contains';
        let filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
        filtergroup.addfilter(filter_or_operator, filter1);
        filtergroup.addfilter(filter_or_operator, filter2);
        // add the filters.
        this.$refs.myGrid.addfilter('firstname', filtergroup);
        // apply the filters.
        this.$refs.myGrid.applyfilters();
      },
      updatefilterconditions: function (type, defaultconditions) {
        let stringcomparisonoperators = ['CONTAINS', 'DOES_NOT_CONTAIN'];
        let numericcomparisonoperators = ['LESS_THAN', 'GREATER_THAN'];
        let datecomparisonoperators = ['LESS_THAN', 'GREATER_THAN'];
        let booleancomparisonoperators = ['EQUAL', 'NOT_EQUAL'];
        switch (type) {
          case 'stringfilter':
            return stringcomparisonoperators;
          case 'numericfilter':
            return numericcomparisonoperators;
          case 'datefilter':
            return datecomparisonoperators;
          case 'booleanfilter':
            return booleancomparisonoperators;
        }
      },
      updatefilterpanel: function (filtertypedropdown1, filtertypedropdown2, filteroperatordropdown, filterinputfield1,
        filterinputfield2, filterbutton, clearbutton, columnfilter, filtertype, filterconditions) {
        let index1 = 0;
        let index2 = 0;
        if (columnfilter != null) {
          let filter1 = columnfilter.getfilterat(0);
          let filter2 = columnfilter.getfilterat(1);
          if (filter1) {
            index1 = filterconditions.indexOf(filter1.comparisonoperator);
            let value1 = filter1.filtervalue;
            filterinputfield1.val(value1);
          }
          if (filter2) {
            index2 = filterconditions.indexOf(filter2.comparisonoperator);
            let value2 = filter2.filtervalue;
            filterinputfield2.val(value2);
          }
        }
        filtertypedropdown1.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index1 });
        filtertypedropdown2.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index2 });
      },
      ready: function () {
        this.addfilter();
        let localizationObject = {
          filterstringcomparisonoperators: ['contains', 'does not contain'],
          // filter numeric comparison operators.
          filternumericcomparisonoperators: ['less than', 'greater than'],
          // filter date comparison operators.
          filterdatecomparisonoperators: ['less than', 'greater than'],
          // filter bool comparison operators.
          filterbooleancomparisonoperators: ['equal', 'not equal']
        }
        this.$refs.myGrid.localizestrings(localizationObject);
      }
    }
  }
</script>

<template>
  <JqxGrid ref="myGrid" 
       :width="800" :source="source" :autoheight="true" :columns="columns" 
       :filterable="true" :autoshowfiltericon="true" :ready="ready"
       :updatefilterconditions="updatefilterconditions" :updatefilterpanel="updatefilterpanel">
  </JqxGrid>
</template>
<script>
  import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";

  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      addfilter: function () {
        let filtergroup = new jqx.filter();
        let filter_or_operator = 1;
        let filtervalue = 'Beate';
        let filtercondition = 'contains';
        let filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
        filtervalue = 'Andrew';
        filtercondition = 'contains';
        let filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
        filtergroup.addfilter(filter_or_operator, filter1);
        filtergroup.addfilter(filter_or_operator, filter2);
        // add the filters.
        this.$refs.myGrid.addfilter('firstname', filtergroup);
        // apply the filters.
        this.$refs.myGrid.applyfilters();
      },
      updatefilterconditions: function (type, defaultconditions) {
        let stringcomparisonoperators = ['CONTAINS', 'DOES_NOT_CONTAIN'];
        let numericcomparisonoperators = ['LESS_THAN', 'GREATER_THAN'];
        let datecomparisonoperators = ['LESS_THAN', 'GREATER_THAN'];
        let booleancomparisonoperators = ['EQUAL', 'NOT_EQUAL'];
        switch (type) {
          case 'stringfilter':
            return stringcomparisonoperators;
          case 'numericfilter':
            return numericcomparisonoperators;
          case 'datefilter':
            return datecomparisonoperators;
          case 'booleanfilter':
            return booleancomparisonoperators;
        }
      },
      updatefilterpanel: function (filtertypedropdown1, filtertypedropdown2, filteroperatordropdown, filterinputfield1,
        filterinputfield2, filterbutton, clearbutton, columnfilter, filtertype, filterconditions) {
        let index1 = 0;
        let index2 = 0;
        if (columnfilter != null) {
          let filter1 = columnfilter.getfilterat(0);
          let filter2 = columnfilter.getfilterat(1);
          if (filter1) {
            index1 = filterconditions.indexOf(filter1.comparisonoperator);
            let value1 = filter1.filtervalue;
            filterinputfield1.val(value1);
          }
          if (filter2) {
            index2 = filterconditions.indexOf(filter2.comparisonoperator);
            let value2 = filter2.filtervalue;
            filterinputfield2.val(value2);
          }
        }
        filtertypedropdown1.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index1 });
        filtertypedropdown2.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index2 });
      },
      ready: function () {
        this.addfilter();
        let localizationObject = {
          filterstringcomparisonoperators: ['contains', 'does not contain'],
          // filter numeric comparison operators.
          filternumericcomparisonoperators: ['less than', 'greater than'],
          // filter date comparison operators.
          filterdatecomparisonoperators: ['less than', 'greater than'],
          // filter bool comparison operators.
          filterbooleancomparisonoperators: ['equal', 'not equal']
        }
        this.$refs.myGrid.localizestrings(localizationObject);
      }
    }
  }
</script>

Sets the widget's theme.

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'material' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" />
  
  

• Set the widget's theme property to 'material' when you initialize it.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :theme="'material'"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the toolbar's height.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :showtoolbar="true"
    :toolbarheight="40"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the height of the grid to be equal to the summary height of the grid rows. This option should be set when the Grid is in paging mode.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

This property works along with the "autoheight" property. When it is set to true, the height of the Grid rows is dynamically changed depending on the cell values.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :autorowheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the columns height.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :columnsheight="40"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Determines the cell values displayed in a tooltip next to the scrollbar when the "scrollmode" is set to "deferred".

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="false" :height="100"
    :scrollmode="'deferred'" :deferreddatafields=" ['ContactName'] "
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the height of the Grid Groups Header.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :groupable="true"
    :groupsheaderheight="60"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the group indent size. This size is used when the grid is grouped. This is the size of the columns with expand/collapse toggle buttons.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :groupable="true"
    :groupindentwidth="40"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the Grid's height.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="false" :height="500"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the height of the Grid Pager.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :pageable="true"
    :pagerheight="50"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the height of the grid rows.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :rowsheight="30"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the scrollbars size.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="false" :height="100"
    :scrollbarsize="20"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Determines the scrolling mode.

Possible Values:

'default'

'logical'- the movement of the scrollbar thumb is by row, not by pixel

'deferred'-content is stationary when the user drags the Thumb of a ScrollBar

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="false" :height="100"
    :scrollmode="'logical'"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

When the "scrollmode" is set to "deferred", the "scrollfeedback" function may be used to display custom UI Tooltip next to the scrollbar.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="false" :height="100"
    :scrollmode="'deferred'" :scrollfeedback="scrollfeedback"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      scrollfeedback: function (row) {
        return 'row ' + row.uid;
      }
    }
  }
</script>

Sets or gets the Grid's width.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Determines whether the Grid automatically saves its current state.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :autoloadstate="true"
    :autosavestate="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Determines whether the Grid automatically loads its current state(if there's already saved one). The Grid's state is loaded when the page is refreshed.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :autoloadstate="true"
    :autosavestate="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets the Grid columns.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

• parentgroup - sets the column header's parent group name.
• name - sets the column header's name.
• align - sets the column header's alignment to 'left', 'center' or 'right'.

<template>
  <JqxGrid ref="myGrid"
       :width="850" :source="source" :columns="columns" :autoheight="true" :columngroups="columngroups" />
</template>

<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';

  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName', columngroup: 'ContactInfo' },
          { text: 'Contact Title', datafield: 'Title', columngroup: 'ContactInfo' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ],
        columngroups: [{ text: 'Contact Info', name: 'ContactInfo', align: 'center' }]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Enables or disables the columns dropdown menu.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :sortable="true"
    :columnsmenu="false"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Enables or disables the columns resizing.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :columnsresize="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Enables or disables the columns resizing when the column's border is double-clicked and columnsresize is set to true.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :columnsresize="true"
    :columnsautoresize="false"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Enables or disables the columns reordering.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :columnsreorder="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Enables or disables the Grid's plugin.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :disabled="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

The editable property enables or disables the Grid editing feature.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :editable="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

The editmode property specifies the action that the end-user should make to open an editor.

Possible Values:

'click' - Marks the clicked cell as selected and shows the editor. The editor’s value is equal to the cell’s value

'selectedcell' - Marks the cell as selected. A second click on the selected cell shows the editor. The editor’s value is equal to the cell’s value

'selectedrow' - A second click on a selected row shows the row editors.

'dblclick' - Marks the clicked cell as selected and shows the editor. The editor’s value is equal to the cell’s value

'programmatic' - Cell editors are activated and deactivated only through the API(see begincelledit and endcelledit methods)

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :editable="true"
    :editmode="'dblclick'"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Custom Filtering function. It overrides the built-in Filtering. When the user filters, the Grid calls this function, when it is implemented. The function is expected to return a boolean value or undefined.

• cellValue - current cell's value.
• rowData - JSON object which contains the current row's data.
• dataField - filter column's field.
• filterGroup - group of filters.
• defaultFilterResult - the default filter result.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :filterable="true"
    :filter="filter"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      filter: function (cellValue, rowData, dataField, filterGroup, defaultFilterResult) {
        // implements a custom filter for the "Contactname" field. 
        if (dataField === "ContactName") {
          var filters = filterGroup.getfilters();
          for (var i = 0; i < filters.length; i++) {
            var filter = filters[i];
            var filterValue = filter.value;
            var filterCondition = filter.condition;
            var filterType = filter.type;

            if (cellValue.indexOf("Ana") >= 0) {
              return true;
            }
          }

          return false;
        }
      }
    }
  }
</script>

Enables or disables the Grid Filtering feature. When the value of this property is true, the Grid displays a filtering panel in the columns popup menus.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :filterable="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

This property enables or disables the grouping feature.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :groupable="true"
    :groups=" ['ContactName'] "
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the Grid groups when the Grouping feature is enabled.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :groupable="true"
    :groups=" ['ContactName'] "
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the scrollbar's step when the user clicks the scroll arrows.

<template>
  <JqxGrid ref="myGrid"
       :width="400" :source="source" :columns="columns" :autoheight="true" :horizontalscrollbarstep="200" />
</template>

<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';

  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName', width: '100' },
          { text: 'Contact Title', datafield: 'Title', width: '100' },
          { text: 'City', datafield: 'City', width: '100' },
          { text: 'Country', datafield: 'Country', width: '100' },
          { text: 'Column5', width: '100' },
          { text: 'Column6', width: '100' },
          { text: 'Column7', width: '100' },
          { text: 'Column8', width: '100' },
          { text: 'Column9', width: '100' },
          { text: 'Column10', width: '100' },
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the scrollbar's large step. This property specifies the step with which the horizontal scrollbar's value is changed when the user clicks the area above or below the thumb.

<template>
  <JqxGrid ref="myGrid"
       :width="400" :source="source" :columns="columns" :autoheight="true" :horizontalscrollbarlargestep="600" />
</template>

<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';

  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName', width: '100' },
          { text: 'Contact Title', datafield: 'Title', width: '100' },
          { text: 'City', datafield: 'City', width: '100' },
          { text: 'Country', datafield: 'Country', width: '100' },
          { text: 'Column5', width: '100' },
          { text: 'Column6', width: '100' },
          { text: 'Column7', width: '100' },
          { text: 'Column8', width: '100' },
          { text: 'Column9', width: '100' },
          { text: 'Column10', width: '100' },
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

This function is called when the user expands the row details and the details are going to be rendered.

<template>
  <JqxGrid ref="myGrid"
       :width="850" :source="source" :columns="columns" :autoheight="true" 
       :rowdetails="true" :initrowdetails="initrowdetails" :rowdetailstemplate="rowdetailstemplate" />
</template>

<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';

  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ],
        rowdetailstemplate: {
          rowdetails: "<div style='margin: 10px;'>Row Details</div>",
          rowdetailsheight: 50
        }
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      initrowdetails: function(index, parentElement, gridElement, datarecord) {
        var details = $($(parentElement).children()[0]);
        details.html("Details: " + index);
      }      
    }
  }
</script>

Enables or disables the keyboard navigation.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :keyboardnavigation="false"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Localizes the Grid.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :pageable="true"
    :localization="localization"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        localization: getLocalization('de'),
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the number of visible rows per page when the Grid paging is enabled.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :pageable="true"
    :pagesize="2"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the available page size options.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :pageable="true"
    :pagesizeoptions=" ['15', '30', '50'] "
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the rendering mode of the pager. Available values - "simple" and "default".

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :pageable="true"
    :pagermode="'simple'"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the buttons displayed in the pager when the "pagermode" is set to "simple".

<template>
  <JqxGrid ref="myGrid"
       :width="850" :source="source" :columns="columns" :autoheight="true" :pageable="true"
       :pagermode="'simple'" :pagesize="1" :pagerbuttonscount="10" />
</template>

<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';

  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico'],
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Enables or disables the Grid Paging feature. When the value of this property is true, the Grid displays a pager below the rows.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :pageable="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Enables or disables the row details. When this option is enabled, the Grid can show additional information below each grid row.

<template>
  <JqxGrid ref="myGrid"
       :width="850" :source="source" :columns="columns" :autoheight="true" 
       :rowdetails="true" :initrowdetails="initrowdetails" :rowdetailstemplate="rowdetailstemplate" />
</template>

<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';

  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ],
        rowdetailstemplate: {
          rowdetails: "<div style='margin: 10px;'>Row Details</div>",
          rowdetailsheight: 50
        }
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      initrowdetails: function(index, parentElement, gridElement, datarecord) {
        var details = $($(parentElement).children()[0]);
        details.html("Details: " + index);
      }      
    }
  }
</script>

Determines the template of the row details. The rowdetails field specifies the HTML used for details. The rowdetailsheight specifies the height of the details.

<template>
  <JqxGrid ref="myGrid"
       :width="850" :source="source" :columns="columns" :autoheight="true" 
       :rowdetails="true" :initrowdetails="initrowdetails" :rowdetailstemplate="rowdetailstemplate" />
</template>

<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';

  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ],
        rowdetailstemplate: {
          rowdetails: "<div style='margin: 10px;'>Row Details</div>",
          rowdetailsheight: 50
        }
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      initrowdetails: function(index, parentElement, gridElement, datarecord) {
        var details = $($(parentElement).children()[0]);
        details.html("Details: " + index);
      }      
    }
  }
</script>

This function is called when the grid is initialized and the binding is complete.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :ready="ready"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      ready: function () {
        alert('ready!')
      }
    }
  }
</script>

Callback function which is called when the jqxGrid's render function is called either internally or not.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :rendered="rendered"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      rendered: function () {
        alert('rendered!')
      }
    }
  }
</script>

Callback function which allows you to customize the rendering of the Grid's statusbar.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :showstatusbar="true"
    :renderstatusbar="renderstatusbar"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      renderstatusbar: function (statusbar) {
        statusbar.append($("<span style='margin: 5px;'>Status Bar</span>"));
      }
    }
  }
</script>

Callback function which allows you to customize the rendering of the Grid's toolbar.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :showtoolbar="true"
    :rendertoolbar="rendertoolbar"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      rendertoolbar: function (toolbar) {
        toolbar.append($("<span style='margin: 5px;'>Tool Bar</span>"));
      }
    }
  }
</script>

This is a function called when the grid is used in virtual mode. The function should return an array of rows which will be rendered by the Grid.

<template>
  <div style="font-size: 13px; font-family: Verdana; float: left">
    <JqxGrid :width="800" :source="dataAdapter" :columns="columns"
         :autoheight="true" :virtualmode="true" :pageable="true"
         :rendergridrows="rendergridrows">
    </JqxGrid>
  </div>
</template>
<script>
  import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        dataAdapter: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Id', datafield: 'id', width: 50 },
          { text: 'First Name', datafield: 'firstname', width: 120 },
          { text: 'Last Name', datafield: 'lastname', width: 120 },
          { text: 'Product', datafield: 'productname', width: 180 },
          { text: 'Quantity', datafield: 'quantity', width: 100, cellsalign: 'right' },
          { text: 'Unit Price', datafield: 'price', width: 100, cellsalign: 'right', cellsformat: 'c2' },
          { text: 'Total', datafield: 'total', cellsrenderer: this.totalcolumnrenderer, cellsalign: 'right' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        datatype: 'array',
        localdata: {},
        totalrecords: 1000000
      }
      this.firstNames = [
        'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi', 'Antoni', 'Mayumi', 'Ian', 'Peter', 'Lars', 'Petra', 'Martin', 'Sven', 'Elio', 'Beate', 'Cheryl', 'Michael', 'Guylene'
      ];
      this.lastNames = [
        'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase', 'Saavedra', 'Ohno', 'Devling', 'Wilson', 'Peterson', 'Winkler', 'Bein', 'Petersen', 'Rossi', 'Vileid', 'Saylor', 'Bjorn', 'Nodier'
      ];
      this.productNames = [
        'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte', 'White Chocolate Mocha', 'Cramel Latte', 'Caffe Americano', 'Cappuccino', 'Espresso Truffle', 'Espresso con Panna', 'Peppermint Mocha Twist'
      ];
      this.priceValues = [
        '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
      ];
    },
    methods: {
      generateData: function(startindex, endindex) {
        let data = {};
        for (let i = startindex; i < endindex; i++) {
          let row = {};
          let productindex = Math.floor(Math.random() * this.productNames.length);
          let price = parseFloat(this.priceValues[productindex]);
          let quantity = 1 + Math.round(Math.random() * 10);
          row['id'] = i;
          row['firstname'] = this.firstNames[Math.floor(Math.random() * this.firstNames.length)];
          row['lastname'] = this.lastNames[Math.floor(Math.random() * this.lastNames.length)];
          row['productname'] = this.productNames[productindex];
          row['price'] = price;
          row['quantity'] = quantity;
          row['total'] = price * quantity;
          data[i] = row;
        }
        return data;
      },
      rendergridrows: function (params) {
        let data = this.generateData(params.startindex, params.endindex);
        return data;
      },
      totalcolumnrenderer: function (row, column, cellvalue) {
        let newCellValue = jqx.dataFormat.formatnumber(cellvalue, 'c2');
        return '<span style="margin: 6px 3px; font-size: 12px; float: right; font-weight: bold;">' + newCellValue + '</span>';
      }
    }
  }
</script>

The sortable property enables or disables the sorting feature.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :sortable="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

The sortmode property determines the Grid can sort by single or multiple columns.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :sortable="true"
    :sortmode="'many'"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Selects a row at a specified index.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :selectedrowindex="2"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Selects single or multiple rows.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :selectionmode="'multiplerows'"
    :selectedrowindexes=" [0, 2] "
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets and gets the source.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Possible Values:

'0'-disables toggling

'1'-enables togging. Click on a column toggles the sort direction

'2'-enables remove sorting option

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :sortable="true"
    :sorttogglestates="1"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the rendering update delay. This could be used for deferred scrolling scenarios.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :updatedelay="20"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Enables or disables the virtual data mode.

<template>
  <div style="font-size: 13px; font-family: Verdana; float: left">
    <JqxGrid :width="800" :source="dataAdapter" :columns="columns"
         :autoheight="true" :virtualmode="true" :pageable="true"
         :rendergridrows="rendergridrows">
    </JqxGrid>
  </div>
</template>
<script>
  import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        dataAdapter: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Id', datafield: 'id', width: 50 },
          { text: 'First Name', datafield: 'firstname', width: 120 },
          { text: 'Last Name', datafield: 'lastname', width: 120 },
          { text: 'Product', datafield: 'productname', width: 180 },
          { text: 'Quantity', datafield: 'quantity', width: 100, cellsalign: 'right' },
          { text: 'Unit Price', datafield: 'price', width: 100, cellsalign: 'right', cellsformat: 'c2' },
          { text: 'Total', datafield: 'total', cellsrenderer: this.totalcolumnrenderer, cellsalign: 'right' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        datatype: 'array',
        localdata: {},
        totalrecords: 1000000
      }
      this.firstNames = [
        'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi', 'Antoni', 'Mayumi', 'Ian', 'Peter', 'Lars', 'Petra', 'Martin', 'Sven', 'Elio', 'Beate', 'Cheryl', 'Michael', 'Guylene'
      ];
      this.lastNames = [
        'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase', 'Saavedra', 'Ohno', 'Devling', 'Wilson', 'Peterson', 'Winkler', 'Bein', 'Petersen', 'Rossi', 'Vileid', 'Saylor', 'Bjorn', 'Nodier'
      ];
      this.productNames = [
        'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte', 'White Chocolate Mocha', 'Cramel Latte', 'Caffe Americano', 'Cappuccino', 'Espresso Truffle', 'Espresso con Panna', 'Peppermint Mocha Twist'
      ];
      this.priceValues = [
        '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
      ];
    },
    methods: {
      generateData: function(startindex, endindex) {
        let data = {};
        for (let i = startindex; i < endindex; i++) {
          let row = {};
          let productindex = Math.floor(Math.random() * this.productNames.length);
          let price = parseFloat(this.priceValues[productindex]);
          let quantity = 1 + Math.round(Math.random() * 10);
          row['id'] = i;
          row['firstname'] = this.firstNames[Math.floor(Math.random() * this.firstNames.length)];
          row['lastname'] = this.lastNames[Math.floor(Math.random() * this.lastNames.length)];
          row['productname'] = this.productNames[productindex];
          row['price'] = price;
          row['quantity'] = quantity;
          row['total'] = price * quantity;
          data[i] = row;
        }
        return data;
      },
      rendergridrows: function (params) {
        let data = this.generateData(params.startindex, params.endindex);
        return data;
      },
      totalcolumnrenderer: function (row, column, cellvalue) {
        let newCellValue = jqx.dataFormat.formatnumber(cellvalue, 'c2');
        return '<span style="margin: 6px 3px; font-size: 12px; float: right; font-weight: bold;">' + newCellValue + '</span>';
      }
    }
  }
</script>

Sets or gets the scrollbar's step when the user clicks the scroll arrows.

<template>
  <JqxGrid :width="getWidth" :source="dataAdapter" :columns="columns" :columnsresize="true" :verticalscrollbarstep="200">
  </JqxGrid>
</template>
<script>
  import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        getWidth: getWidth('grid'),
        dataAdapter: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Name', datafield: 'firstname', width: 120 },
          { text: 'Last Name', datafield: 'lastname', width: 120 },
          { text: 'Product', datafield: 'productname', width: 180 },
          { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
          { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
          { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
        ]
      }
    },
    beforeCreate: function () {
      this.firstNames = [
        'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi', 'Antoni', 'Mayumi', 'Ian', 'Peter', 'Lars', 'Petra', 'Martin', 'Sven', 'Elio', 'Beate', 'Cheryl', 'Michael', 'Guylene'
      ];
      this.lastNames = [
        'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase', 'Saavedra', 'Ohno', 'Devling', 'Wilson', 'Peterson', 'Winkler', 'Bein', 'Petersen', 'Rossi', 'Vileid', 'Saylor', 'Bjorn', 'Nodier'
      ];
      this.productNames = [
        'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte', 'White Chocolate Mocha', 'Cramel Latte', 'Caffe Americano', 'Cappuccino', 'Espresso Truffle', 'Espresso con Panna', 'Peppermint Mocha Twist'
      ];
      this.priceValues = [
        '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
      ];

      let generateData = () => {
        let data = {};
        for (let i = 0; i < 200; i++) {
          let row = {};
          let productindex = Math.floor(Math.random() * this.productNames.length);
          let price = parseFloat(this.priceValues[productindex]);
          let quantity = 1 + Math.round(Math.random() * 10);
          row['id'] = i;
          row['firstname'] = this.firstNames[Math.floor(Math.random() * this.firstNames.length)];
          row['lastname'] = this.lastNames[Math.floor(Math.random() * this.lastNames.length)];
          row['productname'] = this.productNames[productindex];
          row['price'] = price;
          row['quantity'] = quantity;
          row['total'] = price * quantity;
          data[i] = row;
        }
        return data;
      };

      this.source = {
        localdata: generateData(),
        datatype: 'array',
        datafields:
          [
            { name: 'firstname', type: 'string' },
            { name: 'lastname', type: 'string' },
            { name: 'productname', type: 'string' },
            { name: 'quantity', type: 'number' },
            { name: 'price', type: 'number' },
            { name: 'total', type: 'number' }
          ]
      };
    }
  }
</script>

Sets or gets the scrollbar's large step. This property specifies the step with which the vertical scrollbar's value is changed when the user clicks the area above or below the thumb.

<template>
  <JqxGrid :width="getWidth" :source="dataAdapter" :columns="columns" :columnsresize="true" :verticalscrollbarlargestep="2000">
  </JqxGrid>
</template>
<script>
  import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        getWidth: getWidth('grid'),
        dataAdapter: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Name', datafield: 'firstname', width: 120 },
          { text: 'Last Name', datafield: 'lastname', width: 120 },
          { text: 'Product', datafield: 'productname', width: 180 },
          { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
          { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
          { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
        ]
      }
    },
    beforeCreate: function () {
      this.firstNames = [
        'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi', 'Antoni', 'Mayumi', 'Ian', 'Peter', 'Lars', 'Petra', 'Martin', 'Sven', 'Elio', 'Beate', 'Cheryl', 'Michael', 'Guylene'
      ];
      this.lastNames = [
        'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase', 'Saavedra', 'Ohno', 'Devling', 'Wilson', 'Peterson', 'Winkler', 'Bein', 'Petersen', 'Rossi', 'Vileid', 'Saylor', 'Bjorn', 'Nodier'
      ];
      this.productNames = [
        'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte', 'White Chocolate Mocha', 'Cramel Latte', 'Caffe Americano', 'Cappuccino', 'Espresso Truffle', 'Espresso con Panna', 'Peppermint Mocha Twist'
      ];
      this.priceValues = [
        '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
      ];

      let generateData = () => {
        let data = {};
        for (let i = 0; i < 200; i++) {
          let row = {};
          let productindex = Math.floor(Math.random() * this.productNames.length);
          let price = parseFloat(this.priceValues[productindex]);
          let quantity = 1 + Math.round(Math.random() * 10);
          row['id'] = i;
          row['firstname'] = this.firstNames[Math.floor(Math.random() * this.firstNames.length)];
          row['lastname'] = this.lastNames[Math.floor(Math.random() * this.lastNames.length)];
          row['productname'] = this.productNames[productindex];
          row['price'] = price;
          row['quantity'] = quantity;
          row['total'] = price * quantity;
          data[i] = row;
        }
        return data;
      };

      this.source = {
        localdata: generateData(),
        datatype: 'array',
        datafields:
          [
            { name: 'firstname', type: 'string' },
            { name: 'lastname', type: 'string' },
            { name: 'productname', type: 'string' },
            { name: 'quantity', type: 'number' },
            { name: 'price', type: 'number' },
            { name: 'total', type: 'number' }
          ]
      };
    }
  }
</script>

This event is triggered when the binding is completed. Note: Bind to that event before the Grid's initialization, because if you data bind the Grid to a local data source and bind to the "bindingcomplete" event after the initializaation, the data binding will be already completed.

Code examples

Bind to the bindingcomplete event of jqxGrid.

<template>
  <JqxGrid ref="myGrid" @bindingcomplete="onBindingcomplete($event)"
       :width="850" :columns="columns" :autoheight="true" />
</template>

<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';

  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.source = this.source;
    },
    methods: {
      onBindingcomplete: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when a Grid Column is resized.

Code examples

Bind to the columnresized event of jqxGrid.

<template>
  <JqxGrid ref="myGrid" @columnresized="onColumnresized($event)"
       :width="850" :source="source" :columns="columns" :columnsresize="true" :autoheight="true" />
</template>

<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';

  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      onColumnresized: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when a Grid Column is moved to a new position.

Code examples

Bind to the columnreordered event of jqxGrid.

<template>
  <JqxGrid ref="myGrid" @columnreordered="onColumnreordered($event)"
       :width="850" :source="source" :columns="columns" :columnsreorder="true" :autoheight="true" />
</template>

<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';

  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      onColumnreordered: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when a column is clicked.

Code examples

Bind to the columnclick event of jqxGrid.

<template>
  <JqxGrid ref="myGrid" @columnclick="onColumnclick($event)"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      onColumnclick: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when a cell is clicked.

Code examples

Bind to the cellclick event of jqxGrid.

<template>
  <JqxGrid ref="myGrid" @cellclick="onCellclick($event)"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      onCellclick: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when a cell is double-clicked.

Code examples

Bind to the celldoubleclick event of jqxGrid.

<template>
  <JqxGrid ref="myGrid" @celldoubleclick="onCelldoubleclick($event)"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      onCelldoubleclick: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when a cell is selected.

Code examples

Bind to the cellselect event of jqxGrid.

<template>
  <JqxGrid ref="myGrid" @cellselect="onCellselect($event)"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.selectionmode = 'singlecell';

    },
    methods: {
      onCellselect: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when a cell is unselected.

Code examples

Bind to the cellunselect event of jqxGrid.

<template>
  <JqxGrid ref="myGrid" @cellunselect="onCellunselect($event)"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.selectionmode = 'singlecell';

    },
    methods: {
      onCellunselect: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when a cell's value is changed.

Code examples

Bind to the cellvaluechanged event of jqxGrid.

<template>
  <JqxGrid ref="myGrid" @cellvaluechanged="onCellvaluechanged($event)"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.editable = true;

    },
    methods: {
      onCellvaluechanged: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when a cell's editor is displayed.

Code examples

Bind to the cellbeginedit event of jqxGrid.

<template>
  <JqxGrid ref="myGrid" @cellbeginedit="onCellbeginedit($event)"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.editable = true;

    },
    methods: {
      onCellbeginedit: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when a cell's edit operation has ended.

Code examples

Bind to the cellendedit event of jqxGrid.

<template>
  <JqxGrid ref="myGrid" @cellendedit="onCellendedit($event)"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.editable = true;

    },
    methods: {
      onCellendedit: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the Grid is filtered.

Code examples

Bind to the filter event of jqxGrid.

<template>
  <JqxGrid ref="myGrid" @filter="onFilter($event)"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.filterable = true;

    },
    methods: {
      onFilter: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when a group is added, inserted or removed.

Code examples

Bind to the groupschanged event of jqxGrid.

<template>
  <JqxGrid ref="myGrid" @groupschanged="onGroupschanged($event)"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.groupable = true;

    },
    methods: {
      onGroupschanged: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when a group is expanded.

Code examples

Bind to the groupexpand event of jqxGrid.

<template>
  <JqxGrid ref="myGrid" @groupexpand="onGroupexpand($event)"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.groupable = true;

    },
    methods: {
      onGroupexpand: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when a group is collapsed.

Code examples

Bind to the groupcollapse event of jqxGrid.

<template>
  <JqxGrid ref="myGrid" @groupcollapse="onGroupcollapse($event)"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.groupable = true;

    },
    methods: {
      onGroupcollapse: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the current page is changed.

Code examples

Bind to the pagechanged event of jqxGrid.

<template>
  <JqxGrid ref="myGrid" @pagechanged="onPagechanged($event)"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.pageable = true;
      this.$refs.myGrid.pagesize = 1;

    },
    methods: {
      onPagechanged: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the page size is changed.

Code examples

Bind to the pagesizechanged event of jqxGrid.

<template>
  <JqxGrid ref="myGrid" @pagesizechanged="onPagesizechanged($event)"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.pageable = true;

    },
    methods: {
      onPagesizechanged: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when a row is clicked.

Code examples

Bind to the rowclick event of jqxGrid.

<template>
  <JqxGrid ref="myGrid" @rowclick="onRowclick($event)"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      onRowclick: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when a row is double clicked.

Code examples

Bind to the rowdoubleclick event of jqxGrid.

<template>
  <JqxGrid ref="myGrid" @rowdoubleclick="onRowdoubleclick($event)"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      onRowdoubleclick: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when a row is selected.

Code examples

Bind to the rowselect event of jqxGrid.

<template>
  <JqxGrid ref="myGrid" @rowselect="onRowselect($event)"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      onRowselect: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when a row is unselected.

Code examples

Bind to the rowunselect event of jqxGrid.

<template>
  <JqxGrid ref="myGrid" @rowunselect="onRowunselect($event)"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      onRowunselect: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when a row with details is expanded.

Code examples

Bind to the rowexpand event of jqxGrid.

<template>
  <JqxGrid ref="myGrid" @rowexpand="onRowexpand($event)" :width="850" :source="source" :columns="columns" 
       :rowdetails="true" :initrowdetails="initrowdetails" :rowdetailstemplate="rowdetailstemplate" :autoheight="true" />
</template>

<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';

  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ],
        rowdetailstemplate: {
          rowdetails: "<div style='margin: 10px;'>Row Details</div>",
          rowdetailsheight: 50
        }
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      initrowdetails: function (index, parentElement, gridElement, datarecord) {
        var details = $($(parentElement).children()[0]);
        details.html("Details: " + index);
      },
      onRowexpand: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when a row with details is collapsed.

Code examples

Bind to the rowcollapse event of jqxGrid.

<template>
  <JqxGrid ref="myGrid" @rowcollapse="onRowcollapse($event)" :width="850" :source="source" :columns="columns" 
       :rowdetails="true" :initrowdetails="initrowdetails" :rowdetailstemplate="rowdetailstemplate" :autoheight="true" />
</template>

<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';

  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ],
        rowdetailstemplate: {
          rowdetails: "<div style='margin: 10px;'>Row Details</div>",
          rowdetailsheight: 50
        }
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      initrowdetails: function (index, parentElement, gridElement, datarecord) {
        var details = $($(parentElement).children()[0]);
        details.html("Details: " + index);
      },
      onRowcollapse: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the Grid is sorted.

Code examples

Bind to the sort event of jqxGrid.

<template>
  <JqxGrid ref="myGrid" @sort="onSort($event)"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.sortable = true;
      this.$refs.myGrid.showsortmenuitems = true;

    },
    methods: {
      onSort: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Auto-resizes all columns.

<template>
  <div>
    <JqxGrid ref="myGrid"
         :width="410" :source="source" :columns="columns" :autoheight="true" />
    <JqxButton style="margin-top: 20px;" :width="150" @click="resizeColumns()">Auto Resize Columns</JqxButton>
  </div>
</template>

<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';

  export default {
    components: {
      JqxGrid,
      JqxButton
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName', width: 50 },
          { text: 'Contact Title', datafield: 'Title', width: 50 },
          { text: 'City', datafield: 'City', width: 50 },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      resizeColumns: function () {
        this.$refs.myGrid.autoresizecolumns();
      }
    }
  }
</script>

Auto-resizes a column.

<template>
  <div>
    <JqxGrid ref="myGrid"
         :width="500" :source="source" :columns="columns" :autoheight="true" />
    <JqxButton style="margin-top: 20px;" :width="200" @click="resizeColumn()">Auto Resize Second Column</JqxButton>
  </div>
</template>
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxGrid,
      JqxButton
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName', width: 150 },
          { text: 'Contact Title', datafield: 'Title', width: 50 },
          { text: 'City', datafield: 'City', width: 100 },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      resizeColumn: function () {
        this.$refs.myGrid.autoresizecolumn('Title');
      }
    }
  }
</script>

Starts an update operation. This is appropriate when calling multiple methods or set multiple properties at once. Optional boolean parameter: suspendAllActions. When you call beginupdate with parameter equal to true, the jqxGrid stops all rendering processes and when you call "endupdate", it will call the "render" method. Otherwise, it will try to resume its state with minimial performance impact. Use the suspendAllActions when you make multiple changes which require full-rerender such as changing the Grid's source, columns, groups.

<template>
  <div>
    <JqxGrid ref="myGrid"
         :width="800" :source="source" :columns="columns" :sortable="true" :autoheight="true" />
    <JqxButton style="margin-right: 20px;" :width="100" @click="beginUpdate()">Begin Update</JqxButton>
    <JqxButton :width="100" @click="endUpdate()">End Update</JqxButton>
  </div>
</template>
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxGrid,
      JqxButton
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      beginUpdate: function () {
        this.$refs.myGrid.beginupdate();
      },
      endUpdate: function () {
        this.$refs.myGrid.endupdate();
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 20px;
  }
</style>

Clears the Grid contents.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.clear();
    }
  }
</script>

Removes the Grid from the document and releases its resources.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.destroy();
    }
  }
</script>

Ends the update operation.

<template>
  <div>
    <JqxGrid ref="myGrid"
         :width="800" :source="source" :columns="columns" :sortable="true" :autoheight="true" />
    <JqxButton style="margin-right: 20px;" :width="100" @click="beginUpdate()">Begin Update</JqxButton>
    <JqxButton :width="100" @click="endUpdate()">End Update</JqxButton>
  </div>
</template>
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxGrid,
      JqxButton
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      beginUpdate: function () {
        this.$refs.myGrid.beginupdate();
      },
      endUpdate: function () {
        this.$refs.myGrid.endupdate();
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 20px;
  }
</style>

Scrolls to a row. The parameter is a bound index.

<template>
  <JqxGrid ref="myGrid"
       :width="850" :source="source" :columns="columns" :height="70" />
</template>

<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';

  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.ensurerowvisible(2);
    }
  }
</script>

Sets the keyboard Focus to the jqxGrid widget.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.focus();
    }
  }
</script>

Gets the index of a column in the columns collection.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      const value = this.$refs.myGrid.getcolumnindex('Title');
    }
  }
</script>

Gets a column by datafield value.Column's fields:

• datafield - column's datafield. To get the cells labels and values from the data source, the Grid uses the "datafield" and "displayfield" properties. If the "displayfield" is not set, the "displayfield" is equal to the "datafield'.
• text - column's text.
• displayfield - column's displayfield. To get the cells labels and values from the data source, the Grid uses the "datafield" and "displayfield" properties. If the "displayfield" is not set, the "displayfield" is equal to the "datafield'.
• sortable - determines whether the column is sortable.
• filterable - determines whether the column is filterable.
• exportable - determines whether the column will be exported through the "exportdata" method.
• editable - determines whether the column is editable.
• groupable - determines whether the column is groupable.
• resizable - determines whether the column is resizable.
• draggable - determines whether the column is draggable.
• classname - determines the column's header classname.
• cellclassname - determines the column's cells classname.
• width - determines the column's width.
• menu - determines whether the column has an associated popup menu or not.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      const value = this.$refs.myGrid.getcolumn('Title');
    }
  }
</script>

Gets a property of a column. Possible property names: 'text', 'hidden', 'hideable', 'renderer', 'cellsrenderer', 'align', 'cellsalign', 'cellsformat', 'pinned', 'contenttype', 'resizable', 'filterable', 'editable', 'cellclassname', 'classname', 'width', 'minwidth', 'maxwidth'

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      const value = this.$refs.myGrid.getcolumnproperty('Title','text');
    }
  }
</script>

Gets the id of a row. The returned value is a 'string' or 'number' depending on the id's type. The parameter is the row's bound index.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      const value = this.$refs.myGrid.getrowid(0);
    }
  }
</script>

Gets the data of a row. The returned value is a JSON object. The parameter is the row's bound index. Note: If you pass a bound index of a row which is not visible in the Grid, the method returns null.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      const value = this.$refs.myGrid.getrowdata(0);
    }
  }
</script>

Gets the data of a row. The returned value is a JSON object. The parameter is the row's id.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      const value = this.$refs.myGrid.getrowdatabyid(0);
    }
  }
</script>

Gets the index of a row in the array returned by the getboundrows method.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      const value = this.$refs.myGrid.getrowboundindexbyid(0);
    }
  }
</script>

Gets the index of a row in the array returned by the getboundrows method.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      const value = this.$refs.myGrid.getrowboundindex(0);
    }
  }
</script>

Gets all rows. Returns an array of all rows loaded in the Grid. If the Grid is filtered, the returned value is an array of the filtered records.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      const value = this.$refs.myGrid.getrows();
    }
  }
</script>

Gets all rows loaded from the data source. The method returns an Array of all rows. The Grid's sorting, filtering, grouping and paging will not affect the result of this method. It will always return the rows collection loaded from the data source.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      const value = this.$refs.myGrid.getboundrows();
    }
  }
</script>

Gets all rows that are currently displayed in the Grid. The method returns an Array of the displayed rows. The Grid's sorting, filtering, grouping and paging will affect the result of this method.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      const value = this.$refs.myGrid.getdisplayrows();
    }
  }
</script>

Gets bound data information.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.pageable = true;
      this.$refs.myGrid.sortable = true;

      const value = this.$refs.myGrid.getdatainformation();
    }
  }
</script>

Gets the sort information.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.sortable = true;

      const value = this.$refs.myGrid.getsortinformation();
    }
  }
</script>

Gets the paging information.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.pageable = true;

      const value = this.$refs.myGrid.getpaginginformation();
    }
  }
</script>

Hides a column.

<template>
  <div>
    <JqxGrid ref="myGrid"
         :width="800" :source="source" :columns="columns" :autoheight="true" />
    <JqxButton style="margin-right: 20px;" :width="100" @click="showColumn()">Show Column</JqxButton>
    <JqxButton :width="100" @click="hideColumn()">Hide Column</JqxButton>
  </div>
</template>
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxGrid,
      JqxButton
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName'},
          { text: 'Contact Title', datafield: 'Title'},
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      showColumn: function () {
        this.$refs.myGrid.showcolumn('ContactName');
      },
      hideColumn: function () {
        this.$refs.myGrid.hidecolumn('ContactName');
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 20px;
  }
</style>

Hides the data loading image.

<template>
  <div>
    <JqxGrid ref="myGrid"
         :width="800" :source="source" :columns="columns" :autoheight="true" />
    <JqxButton style="margin-right: 20px;" :width="150" @click="showElement()">Show Load Element</JqxButton>
    <JqxButton :width="150" @click="hideElement()">Hide Load Element</JqxButton>
  </div>
</template>
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxGrid,
      JqxButton
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      showElement: function () {
        this.$refs.myGrid.showloadelement();
      },
      hideElement: function () {
        this.$refs.myGrid.hideloadelement();
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 20px;
  }
</style>

Hides the details of a row.

<template>
  <div>
    <JqxGrid ref="myGrid"
         :width="800" :source="source" :columns="columns" :autoheight="true"
         :rowdetails="true" :initrowdetails="initrowdetails" :rowdetailstemplate="rowdetailstemplate" />
    <JqxButton style="margin-right: 20px;" :width="150" @click="showDetails()">Show Row Details</JqxButton>
    <JqxButton :width="150" @click="hideDetails()">Hide Row Details</JqxButton>
  </div>
</template>
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxGrid,
      JqxButton
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ],
        rowdetailstemplate: {
          rowdetails: "<div style='margin: 10px;'>Row Details</div>",
          rowdetailsheight: 50
        }
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      initrowdetails: function (index, parentElement, gridElement, datarecord) {
        var details = $($(parentElement).children()[0]);
        details.html("Details: " + index);
      },
      showDetails: function () {
        this.$refs.myGrid.showrowdetails(0);
      },
      hideDetails: function () {
        this.$refs.myGrid.hiderowdetails(0);
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 20px;
  }
</style>

Gets whether a column is visible. Returns a boolean value.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      const value = this.$refs.myGrid.iscolumnvisible('ContactName');
    }
  }
</script>

Gets whether a column is pinned. Returns a boolean value.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      const value = this.$refs.myGrid.iscolumnpinned('ContactName');
    }
  }
</script>

Localizes the grid strings. This method allows you to change the valus of all Grid strings and also to change the cells formatting settings.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.pageable = true;

      this.$refs.myGrid.localizestrings(getLocalization('de'));
    }
  }
</script>

Pins the column.

<template>
  <div>
    <JqxGrid ref="myGrid"
         :width="800" :source="source" :columns="columns" :autoheight="true" />
    <JqxButton style="margin-right: 20px;" :width="100" @click="pinColumn()">Pin Column</JqxButton>
    <JqxButton :width="100" @click="unpinColumn()">Unpin Column</JqxButton>
  </div>
</template>
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxGrid,
      JqxButton
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      pinColumn: function () {
        this.$refs.myGrid.pincolumn('ContactName');
      },
      unpinColumn: function () {
        this.$refs.myGrid.unpincolumn('ContactName');
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 20px;
  }
</style>

Refreshes the data.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.refreshdata();
    }
  }
</script>

Repaints the Grid View.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.refresh();
    }
  }
</script>

Renders the Grid contents. This method completely refreshes the Grid cells, columns, layout and repaints the view.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.render();
    }
  }
</script>

Scrolls the grid contents.

<template>
  <JqxGrid ref="myGrid"
       :width="400" :source="source" :columns="columns" :autoheight="true" />
</template>

<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';

  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName', width: 150 },
          { text: 'Contact Title', datafield: 'Title', width: 150 },
          { text: 'City', datafield: 'City', width: 150 },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.scrolloffset(0, 100);
    }
  }
</script>

Returns the scrollbars position.

<template>
  <JqxGrid ref="myGrid"
       :width="400" :source="source" :columns="columns" :autoheight="true" />
</template>
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName', width: 150 },
          { text: 'Contact Title', datafield: 'Title', width: 150 },
          { text: 'City', datafield: 'City', width: 150 },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      let position = this.$refs.myGrid.scrollposition();
      let left = position.left;
      let top = position.top;
      alert('Left: ' + left + ", Top: " + top);
    }
  }
</script>

Shows the data loading image.

<template>
  <div>
    <JqxGrid ref="myGrid"
         :width="800" :source="source" :columns="columns" :autoheight="true" />
    <JqxButton style="margin-right: 20px;" :width="150" @click="showElement()">Show Load Element</JqxButton>
    <JqxButton :width="150" @click="hideElement()">Hide Load Element</JqxButton>
  </div>
</template>
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxGrid,
      JqxButton
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      showElement: function () {
        this.$refs.myGrid.showloadelement();
      },
      hideElement: function () {
        this.$refs.myGrid.hideloadelement();
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 20px;
  }
</style>

Shows the details of a row.

<template>
  <div>
    <JqxGrid ref="myGrid"
         :width="800" :source="source" :columns="columns" :autoheight="true"
         :rowdetails="true" :initrowdetails="initrowdetails" :rowdetailstemplate="rowdetailstemplate" />
    <JqxButton style="margin-right: 20px;" :width="150" @click="showDetails()">Show Row Details</JqxButton>
    <JqxButton :width="150" @click="hideDetails()">Hide Row Details</JqxButton>
  </div>
</template>
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxGrid,
      JqxButton
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ],
        rowdetailstemplate: {
          rowdetails: "<div style='margin: 10px;'>Row Details</div>",
          rowdetailsheight: 50
        }
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      initrowdetails: function (index, parentElement, gridElement, datarecord) {
        var details = $($(parentElement).children()[0]);
        details.html("Details: " + index);
      },
      showDetails: function () {
        this.$refs.myGrid.showrowdetails(0);
      },
      hideDetails: function () {
        this.$refs.myGrid.hiderowdetails(0);
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 20px;
  }
</style>

n

Sets the index of a column in the columns collection.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.setcolumnindex('Title',0);
    }
  }
</script>

Sets a property of a column.Possible property names: 'text', 'hidden', 'hideable', 'renderer', 'cellsrenderer', 'align', 'cellsalign', 'cellsformat', 'pinned', 'contenttype', 'resizable', 'filterable', 'editable', 'cellclassname', 'classname', 'width', 'minwidth', 'maxwidth'

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.setcolumnproperty('Title','text','New Name');
    }
  }
</script>

Shows a column.

<template>
  <div>
    <JqxGrid ref="myGrid"
         :width="800" :source="source" :columns="columns" :autoheight="true" />
    <JqxButton style="margin-right: 20px;" :width="100" @click="showColumn()">Show Column</JqxButton>
    <JqxButton :width="100" @click="hideColumn()">Hide Column</JqxButton>
  </div>
</template>
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxGrid,
      JqxButton
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName'},
          { text: 'Contact Title', datafield: 'Title'},
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      showColumn: function () {
        this.$refs.myGrid.showcolumn('ContactName');
      },
      hideColumn: function () {
        this.$refs.myGrid.hidecolumn('ContactName');
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 20px;
  }
</style>

Unpins the column.

<template>
  <div>
    <JqxGrid ref="myGrid"
         :width="800" :source="source" :columns="columns" :autoheight="true" />
    <JqxButton style="margin-right: 20px;" :width="100" @click="pinColumn()">Pin Column</JqxButton>
    <JqxButton :width="100" @click="unpinColumn()">Unpin Column</JqxButton>
  </div>
</template>
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxGrid,
      JqxButton
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      pinColumn: function () {
        this.$refs.myGrid.pincolumn('ContactName');
      },
      unpinColumn: function () {
        this.$refs.myGrid.unpincolumn('ContactName');
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 20px;
  }
</style>

Updates the bound data and refreshes the grid. You can pass 'filter' or 'sort' as parameter, if the update reason is change in 'filtering' or 'sorting'. To update only the data without the columns, use the 'data' parameter. To make a quick update of the cells, pass "cells" as parameter. Passing "cells" will refresh only the cells values when the new rows count is equal to the previous rows count. To make a full update, do not pass any parameter.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.updatebounddata();
    }
  }
</script>

Gets the updating operation state. Returns a boolean value.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      const value = this.$refs.myGrid.updating();
    }
  }
</script>

Gets the sort column. Returns the column's datafield or null, if sorting is not applied.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.sortable = true;

      const value = this.$refs.myGrid.getsortcolumn();
    }
  }
</script>

Removes the sorting.

<template>
  <div>
    <JqxGrid ref="myGrid"
         :width="850" :source="source" :columns="columns" :sortable="true" :autoheight="true" />
    <JqxButton style="margin-top: 20px;" :width="150" @click="removeSort()">Remove Sort</JqxButton>
  </div>
</template>

<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';

  export default {
    components: {
      JqxGrid,
      JqxButton
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      removeSort: function () {
        this.$refs.myGrid.removesort();
      }
    }
  }
</script>

Sorts the Grid data.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.sortable = true;

      this.$refs.myGrid.sortby('ContactName','asc');
    }
  }
</script>

Groups by a column.

<template>
  <div>
    <JqxGrid ref="myGrid"
         :width="800" :source="source" :columns="columns" :groupable="true" :autoheight="true" />
    <JqxButton style="margin-right: 20px;" :width="100" @click="addGroup()">Add Group</JqxButton>
    <JqxButton :width="100" @click="removeGroup()">Remove Group</JqxButton>
  </div>
</template>
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxGrid,
      JqxButton
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      addGroup: function () {
        this.$refs.myGrid.addgroup('ContactName');
      },
      removeGroup: function () {
        this.$refs.myGrid.removegroup('ContactName');
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 20px;
  }
</style>

Clears all groups.

<template>
  <div>
    <JqxGrid ref="myGrid"
         :width="800" :source="source" :columns="columns" :groupable="true" :autoheight="true" />
    <JqxButton style="margin-top: 20px;" :width="100" @click="clearGroups()">Clear Groups</JqxButton>
  </div>
</template>
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxGrid,
      JqxButton
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      clearGroups: function () {
        this.$refs.myGrid.cleargroups();
      }
    }
  }
</script>

Collapses a group.

<template>
  <div>
    <JqxGrid ref="myGrid"
         :width="800" :source="source" :columns="columns" :groupable="true" :groups=" ['ContactName'] " :autoheight="true" />
    <JqxButton style="margin-right: 20px;" :width="100" @click="expandGroup()">Expand Group</JqxButton>
    <JqxButton :width="100" @click="collapseGroup()">Collapse Group</JqxButton>
  </div>
</template>
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxGrid,
      JqxButton
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      expandGroup: function () {
        this.$refs.myGrid.expandgroup(0);
      },
      collapseGroup: function () {
        this.$refs.myGrid.collapsegroup(0);
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 20px;
  }
</style>

Collapses all groups.

<template>
  <div>
    <JqxGrid ref="myGrid"
         :width="800" :source="source" :columns="columns" :groupable="true" :groups=" ['ContactName'] " :autoheight="true" />
    <JqxButton style="margin-right: 20px;" :width="110" @click="expandGroup()">Expand Groups</JqxButton>
    <JqxButton :width="110" @click="collapseGroup()">Collapse Groups</JqxButton>
  </div>
</template>
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxGrid,
      JqxButton
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      expandGroup: function () {
        this.$refs.myGrid.expandallgroups();
      },
      collapseGroup: function () {
        this.$refs.myGrid.collapseallgroups();
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 20px;
  }
</style>

Expands all groups.

<template>
  <div>
    <JqxGrid ref="myGrid"
         :width="800" :source="source" :columns="columns" :groupable="true" :groups=" ['ContactName'] " :autoheight="true" />
    <JqxButton style="margin-right: 20px;" :width="110" @click="expandGroup()">Expand Groups</JqxButton>
    <JqxButton :width="110" @click="collapseGroup()">Collapse Groups</JqxButton>
  </div>
</template>
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxGrid,
      JqxButton
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      expandGroup: function () {
        this.$refs.myGrid.expandallgroups();
      },
      collapseGroup: function () {
        this.$refs.myGrid.collapseallgroups();
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 20px;
  }
</style>

Expands a group.

<template>
  <div>
    <JqxGrid ref="myGrid"
         :width="800" :source="source" :columns="columns" :groupable="true" :groups=" ['ContactName'] " :autoheight="true" />
    <JqxButton style="margin-right: 20px;" :width="100" @click="expandGroup()">Expand Group</JqxButton>
    <JqxButton :width="100" @click="collapseGroup()">Collapse Group</JqxButton>
  </div>
</template>
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxGrid,
      JqxButton
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      expandGroup: function () {
        this.$refs.myGrid.expandgroup(0);
      },
      collapseGroup: function () {
        this.$refs.myGrid.collapsegroup(0);
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 20px;
  }
</style>

Gets the number of root groups.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.groupable = true;
      this.$refs.myGrid.groups = ['ContactName'];

      const value = this.$refs.myGrid.getrootgroupscount();
    }
  }
</script>

Gets a group. The method returns an object with details about the Group. The object has the following fields:

• group - group's name.
• level - group's level in the group's hierarchy.
• expanded - group's expand state.
• subgroups - an array of sub groups or null.
• subrows - an array of rows or null.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.groupable = true;
      this.$refs.myGrid.groups = ['ContactName'];

      const value = this.$refs.myGrid.getgroup(0);
    }
  }
</script>

Groups by a column.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.groupable = true;
      this.$refs.myGrid.groups = ['ContactName'];

      this.$refs.myGrid.insertgroup(0,'Title');
    }
  }
</script>

Gets whether the user can group by a column. Returns a boolean value.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.groupable = true;

      const value = this.$refs.myGrid.iscolumngroupable('ContactName');
    }
  }
</script>

Removes a group at specific index.

<template>
  <div>
    <JqxGrid ref="myGrid"
         :width="800" :source="source" :columns="columns" :groupable="true" :autoheight="true" />
    <JqxButton style="margin-top: 20px;" :width="150" @click="removeGroupAt()">Remove First Group</JqxButton>
  </div>
</template>
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxGrid,
      JqxButton
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      removeGroupAt: function () {
        this.$refs.myGrid.removegroupat('0');
      }
    }
  }
</script>

Removes a group.

<template>
  <div>
    <JqxGrid ref="myGrid"
         :width="800" :source="source" :columns="columns" :groupable="true" :autoheight="true" />
    <JqxButton style="margin-right: 20px;" :width="100" @click="addGroup()">Add Group</JqxButton>
    <JqxButton :width="100" @click="removeGroup()">Remove Group</JqxButton>
  </div>
</template>
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxGrid,
      JqxButton
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      addGroup: function () {
        this.$refs.myGrid.addgroup('ContactName');
      },
      removeGroup: function () {
        this.$refs.myGrid.removegroup('ContactName');
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 20px;
  }
</style>

Adds a filter to the Grid.

<template>
  <JqxGrid ref="myGrid"
       :width="850" :source="source" :columns="columns" :filterable="true" :autoheight="true" />
</template>

<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';

  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      let filtergroup = new jqx.filter();
      let filter_or_operator = 1;
      let filtervalue = 'Maria';
      let filtercondition = 'contains';
      let filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
      filtergroup.addfilter(filter_or_operator, filter);
      this.$refs.myGrid.addfilter('ContactName', filtergroup);
      this.$refs.myGrid.applyfilters();
    }
  }
</script>

Applies all filters to the Grid.

<template>
  <JqxGrid ref="myGrid"
       :width="850" :source="source" :columns="columns" :filterable="true" :autoheight="true" />
</template>

<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';

  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      let filtergroup = new jqx.filter();
      let filter_or_operator = 1;
      let filtervalue = 'Maria';
      let filtercondition = 'contains';
      let filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
      filtergroup.addfilter(filter_or_operator, filter);
      this.$refs.myGrid.addfilter('ContactName', filtergroup);
      this.$refs.myGrid.applyfilters();
    }
  }
</script>

Clears all filters from the Grid. You can call the method with optional boolean parameter. If the parameter is "true" or you call the method without parameter, the Grid will clear the filters and refresh the Grid(default behavior). If the parameter is "false", the method will clear the filters without refreshing the Grid.

<template>
  <div>
    <JqxGrid ref="myGrid"
         :width="800" :source="source" :columns="columns" :filterable="true" :autoheight="true" />
    <JqxButton style="margin-top: 20px;" :width="100" @click="clearFilters()">Clear Filters</JqxButton>
  </div>
</template>
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxGrid,
      JqxButton
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      clearFilters: function () {
        this.$refs.myGrid.clearfilters();
      }
    }
  }
</script>

Gets the information about the Grid filters. The method returns an array of the applied filters. The returned information includes the filter objects and filter columns. Each filter in the Array has the following fields:

• filter - a filter object which may contain one or more filters.
  Properties and Methods of the filter object.
  • getfilters - returns an array of all filters in the filter object. Each filter in the Array has:
    • value - filter's value.
    • id - filter's id.
    • condition - filter's operator. For string filter the value could be: 'EMPTY', 'NOT_EMPTY', 'CONTAINS', 'CONTAINS_CASE_SENSITIVE', 'DOES_NOT_CONTAIN', 'DOES_NOT_CONTAIN_CASE_SENSITIVE', 'STARTS_WITH', 'STARTS_WITH_CASE_SENSITIVE', 'ENDS_WITH', 'ENDS_WITH_CASE_SENSITIVE', 'EQUAL', 'EQUAL_CASE_SENSITIVE', 'NULL', 'NOT_NULL. For Date and number filter the value could be: 'EQUAL', 'NOT_EQUAL', 'LESS_THAN', 'LESS_THAN_OR_EQUAL', 'GREATER_THAN', 'GREATER_THAN_OR_EQUAL', 'NULL', 'NOT_NULL'. For boolean filter, the value could be: 'EQUAL', 'NOT_EQUAL'
    • type - filter's type - 'stringfilter', 'numericfilter', 'booleanfilter' or 'datefilter'.
  • operator - 'and' or 'or'. Determines the connection between the filters in the group.
• datafield - the column's datafield.
• displayfield - the column's display field.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.filterable = true;

      const value = this.$refs.myGrid.getfilterinformation();
    }
  }
</script>

Method: getcolumnat

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      const value = this.$refs.myGrid.getcolumnat(3);
    }
  }
</script>

Removes a filter from the Grid.

<template>
  <div>
    <JqxGrid ref="myGrid"
         :width="800" :source="source" :columns="columns" :filterable="true" :autoheight="true" />
    <JqxButton style="margin-top: 20px;" :width="200" @click="removeFilter()">Remove Contact Name Filter</JqxButton>
  </div>
</template>
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxGrid,
      JqxButton
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      removeFilter: function () {
        this.$refs.myGrid.removefilter('ContactName');
      }
    }
  }
</script>

Refreshes the filter row and updates the filter widgets. The filter row's widgets are synchronized with the applied filters.

<template>
  <div>
    <JqxGrid ref="myGrid"
         :width="800" :source="source" :columns="columns" :filterable="true" :showfilterrow="true" :autoheight="true" />
    <JqxButton style="margin-top: 20px;" :width="200" @click="refresh()">Refresh filter row</JqxButton>
  </div>
</template>
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxGrid,
      JqxButton
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      addFilters: function() {
        let filtergroup = new jqx.filter();
        let filter_or_operator = 1;
        let filtervalue = 'Maria';
        let filtercondition = 'contains';
        let filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
        filtergroup.addfilter(filter_or_operator, filter);
        this.$refs.myGrid.addfilter('ContactName', filtergroup);
        this.$refs.myGrid.applyfilters();
      },
      refresh: function () {
        this.addFilters()
        this.$refs.myGrid.refreshfilterrow();
      }
    }
  }
</script>

Navigates to a page when the Grid paging is enabled i.e when the pageable property value is true.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.pageable = true;
      this.$refs.myGrid.pagesize = 1;

      this.$refs.myGrid.gotopage(2);
    }
  }
</script>

Navigates to a previous page when the Grid paging is enabled i.e when the pageable property value is true.

<template>
  <div>
    <JqxGrid ref="myGrid"
         :width="800" :source="source" :columns="columns" :pageable="true" :pagesize="1" :autoheight="true" />
    <JqxButton style="margin-right: 20px;margin-top: 20px;" :width="100" @click="prevPage()">Previous Page</JqxButton>
    <JqxButton style="margin-top: 20px;":width="100" @click="nextPage()">Next Page</JqxButton>
  </div>
</template>

<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';

  export default {
    components: {
      JqxGrid,
      JqxButton
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      prevPage: function () {
        this.$refs.myGrid.gotoprevpage();
      },
      nextPage: function () {
        this.$refs.myGrid.gotonextpage();
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
  }
</style>

Navigates to a next page when the Grid paging is enabled i.e when the pageable property value is true.

<template>
  <div>
    <JqxGrid ref="myGrid"
         :width="800" :source="source" :columns="columns" :pageable="true" :pagesize="1" :autoheight="true" />
    <JqxButton style="margin-right: 20px;margin-top: 20px;" :width="100" @click="prevPage()">Previous Page</JqxButton>
    <JqxButton style="margin-top: 20px;":width="100" @click="nextPage()">Next Page</JqxButton>
  </div>
</template>

<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';

  export default {
    components: {
      JqxGrid,
      JqxButton
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      prevPage: function () {
        this.$refs.myGrid.gotoprevpage();
      },
      nextPage: function () {
        this.$refs.myGrid.gotonextpage();
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
  }
</style>

Adds a new row or multiple rows.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.addrow(1,{});
    }
  }
</script>

Shows the cell's editor.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.begincelledit(1,'firstname');
    }
  }
</script>

Shows the cell editors for an entire row.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.beginrowedit(1);
    }
  }
</script>

Closes a column's menu.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.closemenu();
    }
  }
</script>

Deletes a row or multiple rows. Returns a boolean value.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.deleterow(1);
    }
  }
</script>

Hides the edit cell's editor and saves or cancels the changes.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.endcelledit(1,'firstname',true);
    }
  }
</script>

Hides the edited row's editors and saves or cancels the changes.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.endrowedit(1,true);
    }
  }
</script>

Gets a cell. Returns an object with the following fields:

• value - cell's value.
• row - cell's row number.
• column - column's datafield.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      const value = this.$refs.myGrid.getcell(1,'firstname');
    }
  }
</script>

Gets a cell at specific position. Returns an object with the following fields:

• value - cell's value.
• row - cell's row number.
• column - column's datafield.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      const value = this.$refs.myGrid.getcellatposition(10,100);
    }
  }
</script>

Gets the text of a cell.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      const value = this.$refs.myGrid.getcelltext(1,'firstname');
    }
  }
</script>

Gets the text of a cell.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      const value = this.$refs.myGrid.getcelltextbyid(1,'firstname');
    }
  }
</script>

Gets the value of a cell.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      const value = this.$refs.myGrid.getcellvaluebyid(1,'firstname');
    }
  }
</script>

Gets the value of a cell.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      const value = this.$refs.myGrid.getcellvalue(1,'firstname');
    }
  }
</script>

Returns whether the binding is completed and if the result is true, this means that you can invoke methods and set properties. Otherwise, if the binding is not completed and you try to set a property or invoke a method, the widget will throw an exception.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      const value = this.$refs.myGrid.isBindingCompleted();
    }
  }
</script>

Displays a column's menu.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.openmenu('firstname');
    }
  }
</script>

Sets a new value to a cell.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.setcellvalue(1,'firstname','New Name');
    }
  }
</script>

Sets a new value to a cell.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.setcellvaluebyid(1,'firstname','New Name');
    }
  }
</script>

Displays a validation popup below a Grid cell.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.showvalidationpopup(1,'firstname','Error message');
    }
  }
</script>

Updates a row or multiple rows.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.updaterow(1,{firstname: 'New Name'});
    }
  }
</script>

Clears the selection.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.clearselection();
    }
  }
</script>

The expected selection mode is 'singlerow', 'multiplerows' or 'multiplerowsextended'

Gets the bound index of the selected row. Returns -1, if there's no selection.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      const value = this.$refs.myGrid.getselectedrowindex();
    }
  }
</script>

The expected selection mode is 'singlerow', 'multiplerows' or 'multiplerowsextended'

Gets the indexes of the selected rows. Returns an array of the selected rows.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      const value = this.$refs.myGrid.getselectedrowindexes();
    }
  }
</script>

The expected selection mode is 'singlecell', 'multiplecells' or 'multiplecellsextended'

Gets the selected cell. The returned value is an object with two fields: 'rowindex' - the row's bound index and 'datafield' - the column's datafield.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      const value = this.$refs.myGrid.getselectedcell();
    }
  }
</script>

The expected selection mode is 'singlecell', 'multiplecells' or 'multiplecellsextended'

Gets all selected cells. Returns an array of all selected cells. Each cell in the array is an object with two fields: 'rowindex' - the row's bound index and 'datafield' - the column's datafield.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      const value = this.$refs.myGrid.getselectedcells();
    }
  }
</script>

The expected selection mode is 'singlecell', 'multiplecells' or 'multiplecellsextended'

Selects a cell.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.selectcell(1,'firstname');
    }
  }
</script>

The selection mode should be set to: 'multiplerows' or 'multiplerowsextended'

Selects all Grid rows.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.selectallrows();
    }
  }
</script>

The expected selection mode is 'singlerow', 'multiplerows' or 'multiplerowsextended'

Selects a row.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.selectrow(1);
    }
  }
</script>

The expected selection mode is 'singlerow', 'multiplerows' or 'multiplerowsextended'

Unselects a row.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.unselectrow(1);
    }
  }
</script>

The expected selection mode is 'singlecell', 'multiplecells' or 'multiplecellsextended'

Unselects a cell.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.unselectcell(1,'firstname');
    }
  }
</script>

Gets the aggregated data of a Grid column. Returns a JSON object. Each field name is the aggregate's type('min', 'max', 'sum', etc.).

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      const value = this.$refs.myGrid.getcolumnaggregateddata();
    }
  }
</script>

Refreshes the Aggregates in the Grid's status bar.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.refreshaggregates();
    }
  }
</script>

Renders the aggregates in the Grid's status bar.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.renderaggregates();
    }
  }
</script>

Exports all rows loaded within the Grid to Excel, XML, CSV, TSV, HTML or JSON.

var data = $("#jqxgrid").jqxGrid('exportdata', 'json');

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      const value = this.$refs.myGrid.exportdata('xls,'grid.xls');
    }
  }
</script>

Gets the Grid's state. the getstate method gets the following information: 'sort column, sort order, page number, page size, applied filters and filter row values, column widths and visibility, cells and rows selection and groups.

• width - the Grid's width.
• height - the Grid's height.
• pagenum - the Grid's page number.
• pagesize - the Grid's page size.
• pagesizeoptions - the Grid's page size options - an array of the available page sizes.
• sortcolumn - the Grid's sort column. The value is the column's datafield or null, if sorting is not applied.
• sortdirection - JSON object with two boolean fields: 'ascending' and 'descending'.
• filters - the applied filters. See the 'getfilterinformation' method.
• groups - the Grid's groups array which contains the grouped columns data fields.
• columns - an array of Columns. Each column in the array has the following fields:
  • width - column's width.
  • hidden - column's visible state.
  • pinned - column's pinned state.
  • groupable - column's groupable state.
  • resizable - column's resizable state.
  • draggable - column's draggable state.
  • text - column's text.
  • align - column's align.
  • cellsalign - column's cells align.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      const value = this.$refs.myGrid.getstate();
    }
  }
</script>

Loads the Grid's state. the loadstate method loads the following information: 'sort column, sort order, page number, page size, applied filters and filter row values, column widths and visibility, cells and rows selection and groups.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      this.$refs.myGrid.loadstate();
    }
  }
</script>

Saves the Grid's current state. the savestate method saves the following information: 'sort column, sort order, page number, page size, applied filters and filter row values, column widths and visibility, cells and rows selection and groups.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>

 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    mounted: function () {
      const value = this.$refs.myGrid.savestate();
    }
  }
</script>