EasyUI Forum
July 03, 2022, 02:37:26 PM *
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 3656 times)
don
Newbie
*
Posts: 21


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

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


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: 21


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

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


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
jarry
Administrator
Hero Member
*****
Posts: 2096


View Profile Email
« Reply #4 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.
Logged
don
Newbie
*
Posts: 21


View Profile
« Reply #5 on: December 01, 2021, 06:55:24 AM »

UPDATE2:
Success  Smiley ! I was able to resolve by adding the following line to my CSS:
Code:
.datagrid-header-inner {
  height: 32px !important;
}
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!