Title: Set PropertyGrid (DataGrid) Cell Value to ReadOnly
Post by: don 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.
Title: Re: Set PropertyGrid (DataGrid) Cell Value to ReadOnly
Post by: jarry on February 14, 2022, 06:58:39 PM
Look at this example. The 'Address' row can't be edited while clicking it. <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>
|