EasyUI Forum
March 28, 2024, 11:22:42 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: Set PropertyGrid (DataGrid) Cell Value to ReadOnly  (Read 4467 times)
don
Newbie
*
Posts: 28


View Profile
« on: February 07, 2022, 11:47:25 AM »

How do I make a specific property value readonly? For example, if I wanted email value to be readonly, but all other cell values editable.
« Last Edit: February 07, 2022, 11:49:11 AM by don » Logged
jarry
Administrator
Hero Member
*****
Posts: 2260


View Profile Email
« Reply #1 on: February 14, 2022, 06:58:39 PM »

Look at this example. The 'Address' row can't be edited while clicking it.
Code:
<DataGrid
  :data="data"
  :clickToEdit="true"
  groupField="group"
  editMode="row"
  style="width:500px;height:250px"
>
  <GridColumn align="center" cellCss="datagrid-td-rownumber" width="30">
    <template slot="body" slot-scope="scope">{{scope.rowIndex + 1}}</template>
  </GridColumn>
  <GridColumn field="name" title="Name"></GridColumn>
  <GridColumn field="value" title="Value" :editable="true">
    <template slot="edit" slot-scope="scope">
      <TextBox v-if="scope.row.editor=='textbox' && scope.row.name!='Address'" v-model="scope.row.value"></TextBox>
      <DateBox v-if="scope.row.editor=='datebox'" v-model="scope.row.value"></DateBox>
      <NumberBox v-if="scope.row.editor=='numberbox'" v-model="scope.row.value"></NumberBox>
    </template>
    <template slot="body" slot-scope="scope">
      <div v-if="scope.row.editor=='datebox'">{{scope.row.value | formatDate}}</div>
      <div v-if="scope.row.editor=='textbox'">{{scope.row.value}}</div>
      <div v-if="scope.row.editor=='numberbox'">{{scope.row.value}}</div>
    </template>
  </GridColumn>
</DataGrid>
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!