RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Vue/Demos/WidgetsGallery/Demo/DataGrid/CustomEditors/ below:

Custom Editors - Vue Data Grid

<template> <DxDataGrid :data-source="tasks" :show-borders="true" @row-inserted="onRowInserted" > <DxPaging :enabled="true" :page-size="15" /> <DxPager :visible="true"/> <DxHeaderFilter :visible="true"/> <DxSearchPanel :visible="true"/> <DxEditing :allow-updating="true" :allow-adding="true" mode="cell" /> <DxColumn :width="150" :allow-sorting="false" data-field="Owner" edit-cell-template="dropDownBoxEditor" > <DxLookup :data-source="employees" display-expr="FullName" value-expr="ID" /> <DxRequiredRule/> </DxColumn> <DxColumn :width="200" :allow-sorting="false" :cell-template="cellTemplate" :calculate-filter-expression="calculateFilterExpression" data-field="AssignedEmployee" caption="Assignees" edit-cell-template="tagBoxEditor" > <DxLookup :data-source="employees" value-expr="ID" display-expr="FullName" /> <DxRequiredRule/> </DxColumn> <DxColumn data-field="Subject"> <DxRequiredRule/> </DxColumn> <DxColumn :editor-options="{ itemTemplate: 'statusTemplate' }" data-field="Status" width="200" > <DxLookup :data-source="statuses" display-expr="name" value-expr="id" /> <DxRequiredRule/> </DxColumn> <template #statusTemplate="{ data }"> <span v-if="data == null">(All)</span> <div v-else> <img :src="'../../../../images/icons/status-' + data.id + '.svg'" class="status-icon middle" > <span class="middle">{{ data.name }}</span> </div> </template> <template #dropDownBoxEditor="{ data: cellInfo }"> <EmployeeDropDownBoxComponent :value="cellInfo.value" :on-value-changed="cellInfo.setValue" :data-source="employees" /> </template> <template #tagBoxEditor="{ data: cellInfo }"> <EmployeeTagBoxComponent :cell-info="cellInfo" :data-source="employees" :data-grid-component="cellInfo.component" /> </template> </DxDataGrid> </template> <script setup lang="ts"> import { DxDataGrid, DxPaging, DxHeaderFilter, DxSearchPanel, DxEditing, DxColumn, DxLookup, DxRequiredRule, type DxDataGridTypes, DxPager, } from 'devextreme-vue/data-grid'; import { createStore } from 'devextreme-aspnet-data-nojquery'; import EmployeeDropDownBoxComponent from './EmployeeDropDownBoxComponent.vue'; import EmployeeTagBoxComponent from './EmployeeTagBoxComponent.vue'; import { statuses, type Task } from './data.ts'; const url = 'https://js.devexpress.com/Demos/NetCore/api/DataGridCustomEditors'; const employees = createStore({ key: 'ID', loadUrl: `${url}/Employees`, onBeforeSend(method, ajaxOptions) { ajaxOptions.xhrFields = { withCredentials: true }; }, }); const tasks = createStore({ key: 'ID', loadUrl: `${url}/Tasks`, updateUrl: `${url}/UpdateTask`, insertUrl: `${url}/InsertTask`, onBeforeSend(method, ajaxOptions) { ajaxOptions.xhrFields = { withCredentials: true }; }, }); const cellTemplate = (container: HTMLElement, options: DxDataGridTypes.ColumnCellTemplateData) => { const noBreakSpace = '\u00A0'; const assignees = (options.value || []).map( (assigneeId: number) => options.column!.lookup!.calculateCellValue!(assigneeId), ); const text = assignees.join(', '); container.textContent = text || noBreakSpace; container.title = text; }; const onRowInserted = (e: DxDataGridTypes.RowInsertedEvent) => { e.component.navigateToRow(e.key); }; function calculateFilterExpression( this: DxDataGridTypes.Column, filterValue: any, selectedFilterOperations: string, target: string, ): any { if (target === 'search' && typeof filterValue === 'string') { return [this.dataField, 'contains', filterValue]; } return (rowData: Task) => (rowData.AssignedEmployee || []).includes(filterValue); } </script> <style> .status-icon { height: 16px; width: 16px; display: inline-block; margin-right: 8px; } .middle { vertical-align: middle; } </style>

<template> <DxDropDownBox ref="dropDownBoxRef" :drop-down-options="dropDownOptions" :input-attr="{ 'aria-label': 'Owner' }" :data-source="dataSource" v-model:value="currentValue" display-expr="FullName" value-expr="ID" content-template="contentTemplate" > <template #contentTemplate="{}"> <DxDataGrid :data-source="dataSource" :remote-operations="true" :height="250" :selected-row-keys="getSelectedRowKeys(currentValue)" :hover-state-enabled="true" :on-context-menu-preparing="onContextMenuPreparing" :on-selection-changed="onSelectionChanged" :focused-row-enabled="true" :focused-row-key="currentValue" > <DxColumn data-field="FullName"/> <DxColumn data-field="Title"/> <DxColumn data-field="Department"/> <DxPaging :enabled="true" :page-size="10" /> <DxScrolling mode="virtual"/> <DxSelection mode="single"/> </DxDataGrid> </template> </DxDropDownBox> </template> <script setup lang="ts"> import { ref } from 'vue'; import { DxDataGrid, DxPaging, DxSelection, DxScrolling, DxColumn, type DxDataGridTypes, } from 'devextreme-vue/data-grid'; import DxDropDownBox, { type DxDropDownBoxTypes } from 'devextreme-vue/drop-down-box'; import { CustomStore } from 'devextreme-vue/common/data'; const props = defineProps<{ value: number, // eslint-disable-next-line no-unused-vars onValueChanged(value: number): void, dataSource: CustomStore, }>(); const currentValue = ref(props.value); const dropDownBoxRef = ref<DxDropDownBox | null>(null); const dropDownOptions: DxDropDownBoxTypes.Properties['dropDownOptions'] = { width: 500 }; function getSelectedRowKeys<T>(value: T | null): T[] { return value !== null && value !== undefined ? [value] : []; } const onContextMenuPreparing = (e: DxDataGridTypes.ContextMenuPreparingEvent) => { e.items = []; }; const onSelectionChanged = (e: DxDataGridTypes.SelectionChangedEvent) => { currentValue.value = e.selectedRowKeys[0]; props.onValueChanged(currentValue.value); if (e.selectedRowKeys.length > 0) { dropDownBoxRef.value!.instance!.close(); } }; </script>

<template> <DxTagBox :data-source="dataSource" v-model:value="currentValue" :show-selection-controls="true" :input-attr="{ 'aria-label': 'Name' }" :max-displayed-tags="3" :show-multi-tag-only="false" :on-value-changed="onValueChanged" :on-selection-changed="onSelectionChanged" :search-enabled="true" value-expr="ID" display-expr="FullName" apply-value-mode="useButtons" /> </template> <script setup lang="ts"> import { ref } from 'vue'; import { DxDataGrid, type DxDataGridTypes } from 'devextreme-vue/data-grid'; import DxTagBox, { type DxTagBoxTypes } from 'devextreme-vue/tag-box'; import { CustomStore } from 'devextreme-vue/common/data'; const props = defineProps<{ cellInfo: DxDataGridTypes.ColumnEditCellTemplateData, dataSource: CustomStore, dataGridComponent: DxDataGrid['instance'], }>(); const currentValue = ref(props.cellInfo.value); const onSelectionChanged = () => { props.dataGridComponent.updateDimensions(); }; const onValueChanged = (e: DxTagBoxTypes.ValueChangedEvent) => { props.cellInfo.setValue(e.value); }; </script>

export type Task = { ID: number; Subject: string; Status: number; Owner: number; AssignedEmployee: number[]; OrderIndex: number; Priority: number; }; export type Employee = { ID: number; FullName: string; Department: string; Title: string; }; export type Status = { id: number; name: string; }; export const statuses: Status[] = [{ id: 1, name: 'Not Started', }, { id: 2, name: 'In Progress', }, { id: 3, name: 'Deferred', }, { id: 4, name: 'Need Assistance', }, { id: 5, name: 'Completed', }];

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.4/css/dx.light.css" /> <script type="module"> import * as vueCompilerSFC from "https://cdn.jsdelivr.net/npm/@vue/compiler-sfc@3.4.27/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://cdn.jsdelivr.net/npm/typescript@5.4.5/lib/typescript.js"></script> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app" /> </div> </body> </html>

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4