EasyUI Forum
November 28, 2021, 09:53:31 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: PropertyGrid  (Read 270 times)
don
Newbie
*
Posts: 15


View Profile
« on: November 17, 2021, 01:07:49 PM »

Any chance of a PropertyGrid for Vue?
Logged
jarry
Administrator
Hero Member
*****
Posts: 2016


View Profile Email
« Reply #1 on: November 18, 2021, 12:36:54 AM »

Please refer to this example.
Code:
<template>
  <div>
    <DataGrid
      style="width:300px;height:250px"
      :data="data"
      :clickToEdit="true"
      groupField="group"
      selectionMode="cell"
      editMode="cell"
      @editBegin="onEditBegin($event)"
    >
      <GridColumn :cellCss="headerStyle" width="30"></GridColumn>
      <GridColumn field="name" title="Name"></GridColumn>
      <GridColumn field="value" title="Value" :editable="true" :editRules="rules">
        <template slot="edit" slot-scope="scope">
          <TextBox v-if="scope.row.editor=='TextBox'" v-model="scope.row.value"></TextBox>
          <NumberBox v-if="scope.row.editor=='NumberBox'" v-model="scope.row.value"></NumberBox>
          <CheckBox
            v-if="scope.row.editor=='CheckBox'"
            v-model="scope.row.value"
            style="margin:5px 0 0 5px"
          ></CheckBox>
          <DateBox
            v-if="scope.row.editor=='DateBox'"
            v-model="scope.row.value"
            :panelStyle="{width:'250px',height:'250px'}"
          ></DateBox>
        </template>
        <template slot="body" slot-scope="scope">
          <div v-if="scope.row.editor=='DateBox'">{{formatDate(scope.row.value)}}</div>
          <div v-if="scope.row.editor!='DateBox'">{{scope.row.value}}</div>
        </template>
      </GridColumn>
      <template slot="group" slot-scope="scope">
        <span style="font-weight:bold">
          {{scope.value}} -
          <span style="color:red">{{scope.rows.length}}</span> Item(s)
        </span>
      </template>
    </DataGrid>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      rules: [],
      headerStyle: {
        background: "#fafafa"
      }
    };
  },
  methods: {
    onEditBegin({ row, column }) {
      this.rules = row.rules;
    },
    formatDate(date) {
      return (
        date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate()
      );
    }
  },
  created() {
    this.data = [
      {
        name: "Name",
        value: "Bill Smith",
        group: "ID Settings",
        editor: "TextBox",
        rules: ["required"]
      },
      { name: "Address", value: "", group: "ID Settings", editor: "TextBox" },
      { name: "Age", value: 40, group: "ID Settings", editor: "NumberBox" },
      {
        name: "Birthday",
        value: new Date(2012, 1, 2),
        group: "ID Settings",
        editor: "DateBox"
      },
      {
        name: "SSN",
        value: "123-456-7890",
        group: "ID Settings",
        editor: "TextBox"
      },
      {
        name: "Email",
        value: "bill@gmail.com",
        group: "Marketing Settings",
        editor: "TextBox",
        rules: ["email"]
      },
      {
        name: "FrequentBuyer",
        value: true,
        group: "Marketing Settings",
        editor: "CheckBox"
      }
    ];
  }
};
</script>
Logged
don
Newbie
*
Posts: 15


View Profile
« Reply #2 on: November 18, 2021, 04:38:35 AM »

Perfect, thanks Jarry! Wink
Logged
don
Newbie
*
Posts: 15


View Profile
« Reply #3 on: November 25, 2021, 11:14:36 AM »

UPDATE:
The column headers (e.g. "Name" and "Value") are not appearing at the top of the datagrid columns (pic attached). Oddly, if I edit and save my code I can see them temporarily, but as soon as I reload/refresh my web page they disappear. It seems like as soon as the data[] array is updated/changed it causes the gridcolumn headers to disappear?
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!