EasyUI Forum

General Category => EasyUI for Vue => Topic started by: don on November 17, 2021, 01:07:49 PM



Title: PropertyGrid
Post by: don on November 17, 2021, 01:07:49 PM
Any chance of a PropertyGrid for Vue?


Title: Re: PropertyGrid
Post by: jarry 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>


Title: Re: PropertyGrid
Post by: don on November 18, 2021, 04:38:35 AM
Perfect, thanks Jarry! ;)


Title: Re: PropertyGrid
Post by: don 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?


Title: Re: PropertyGrid
Post by: jarry on November 28, 2021, 07:19:02 PM
Please prevent from refreshing the whole page. You can reload the data instead.
The header don't disappear in the prior example. Please show some code snippets to demostrate where you put the DataGrid to.


Title: Re: PropertyGrid
Post by: don on December 01, 2021, 06:55:24 AM
UPDATE2:
Success  :) ! I was able to resolve by adding the following line to my CSS:
Code:
.datagrid-header-inner {
  height: 32px !important;
}