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

Showing content from https://js.devexpress.com/Vue/Documentation/Guide/UI_Components/Common/Templates/ below:

DevExtreme Vue - Templates | Vue Documentation

Templates are passed as properties that end with ...Template. Each template has access to the following parameters:

• data
  A data source object or an object with fields specific to a particular template. For information on the contents of data, refer to the Template Data section of the template's API reference article.

• index
  A zero-based index of the item in the collection. Can be available only in collection UI component templates.

• element
  A jQuery element that represents the UI component element being customized. Available only if you use jQuery.

The following code shows how to declare a template and use these parameters. This code declares an itemTemplate for the List UI component:

$(function() {
    $("#listContainer").dxList({
        items: [
            { itemProperty: "someValue" },
            // ...
        ],
        itemTemplate: function (data, index, element) {
            return index + " - " + data.itemProperty;

            // ===== or using the "element" parameter =====
            const $item = $("<div>").text(
                index + " - " + data.itemProperty
            );
            element.append($item);
        }
    });
});

Templates are passed as properties that end with ...Template. Each template has access to the following parameters:

• data
  A data source object or an object with fields specific to a particular template. For information on the contents of data, refer to the Template Data section of the template's API reference article.

• index
  A zero-based index of the item in the collection. Can be available only in collection UI component templates.

The following code shows how to declare a template and use these parameters. This code declares an itemTemplate for the List UI component:

<dx-list
    [items]="listData"
    itemTemplate="list-item">
    <div *dxTemplate="let data of 'list-item'; let index = index">
        {{index}} - {{data.itemProperty}}
    </div>
</dx-list>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    listData = [
        { itemProperty: "someValue" },
        // ...
    ]
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxListModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxListModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Templates are passed as properties that end with ...Template. Each template has access to the following parameters:

• data
  A data source object or an object with fields specific to a particular template. For information on the contents of data, refer to the Template Data section of the template's API reference article.

• index
  A zero-based index of the item in the collection. Can be available only in collection UI component templates.

The following code shows how to declare a template and use these parameters. This code declares an itemTemplate for the List UI component:

<template>
    <DxList
        :items="listData"
        item-template="list-item">
        <template #list-item="{ data, index }">
            {{ index }} - {{ data.itemProperty }}
        </template>
    </DxList>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxList from 'devextreme-vue/list';

export default {
    components: {
        DxList
    },
    data() {
        return {
            listData: [
                { itemProperty: 'someValue' },
                // ...
            ]
        }
    }
}
</script>

Templates are passed as properties that end with ...Render or ...Component. Each template has access to the following parameters:

• data
  A data source object or an object with fields specific to a particular template. For information on the contents of data, refer to the Template Data section of the template's API reference article.

• index
  A zero-based index of the item in the collection. Can be available only in collection UI component templates.

The following code shows how to declare a template and use these parameters. This code declares an itemRender for the List UI component:

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import List from 'devextreme-react/list';

const renderListItem = (data, index) => {
    return (
        <div>{index} - {data.itemProperty}</div>
    );
}

class App extends React.Component {
    listData = [
        { itemProperty: 'someValue' },
        // ...
    ];

    render() {
        return (
            <List
                items={this.listData}
                itemRender={renderListItem}
            />
        );
    }
}
export default App;

Collection UI components are components that include the items property. These components also support templates for individual items. Do not specify the UI component's dataSource property if you use individual templates.

$(function() {
    $("#listContainer").dxList({
        items: [{
            template: function () {
                return $("<i>").text("Item 1")
            }
        }, {
            template: function () {
                return $("<b>").text("Item 2")
            }
        },{
            template: function () {
                return $("<div>").append(
                    $("<span>").text("Item with nested component"),
                    $("<div>").dxButton({
                        text: "Click me"
                    })
                )
            }
        }]
    });
});

<dx-list>
    <dxi-item>
        <i>Item 1</i>
    </dxi-item>
    <dxi-item>
        <b>Item 2</b>
    </dxi-item>
    <dxi-item>
        <div *dxTemplate>
            Item with a nested component
            <dx-button text="Click me"></dx-button>
        </div>
    </dxi-item>
</dx-list>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxListModule, DxButtonModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxListModule,
        DxButtonModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Declare named templates within the component's markup but outside the templated element. Non-named templates should be declared inside the templated element.

<!-- Named template (the name is 'pictureCellTemplate'): -->
<dx-data-grid ... >
    <dxi-column
        dataField="Picture"
        [width]="100"
        [allowFiltering]="false"
        [allowSorting]="false"
        cellTemplate="pictureCellTemplate"
    ></dxi-column>
    <div *dxTemplate="let data of 'pictureCellTemplate'">
        <img [src]="data.value" />
    </div>
</dx-data-grid>

<!-- Non-named template -->
<dx-toolbar>
    <dxi-item location="center" locateInMenu="never">
        <div *dxTemplate>
            <div class="toolbar-label"><b>Tom's Club</b> Products</div>
        </div>
    </dxi-item>
</dx-toolbar>

<template>
    <DxList>
        <DxItem>
            <template #default>
                <i>Item 1</i>
            </template>
        </DxItem>
        <DxItem>
            <template #default>
                <i>Item 2</i>
            </template>
        </DxItem>
        <DxItem>
            <template #default>               
                <div>
                    Item with a nested component
                    <DxButton text="Click me" />
                </div>
            </template>
        </DxItem>
    </DxList>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxList, {
    DxItem
} from 'devextreme-vue/list';
import DxButton from 'devextreme-vue/button';

export default {
    components: {
        DxList,
        DxItem,
        DxButton
    }
}
</script>

Declare named templates within the component's markup but outside the templated element. Non-named templates should be declared inside the templated element.

<!-- Named template (the name is 'pictureCellTemplate'): -->
<template>
    <DxDataGrid ... >
        <DxColumn
            :width="100"
            :allow-sorting="false"
            data-field="Picture"
            cell-template="pictureCellTemplate"
        />
        <template #pictureCellTemplate="{ data }">
            <img :src="data.value" />
        </template>
    </DxDataGrid>
</template>

<!-- Non-named template -->
<template>
    <DxToolbar>
        <DxItem
            location="center"
            locate-in-menu="never"
        >
            <template #default>
                <div class="toolbar-label"><b>Tom's Club</b> Products</div>
            </template>
        </DxItem>
    </DxToolbar>
</template>

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import List, { Item } from 'devextreme-react/list';
import Button from 'devextreme-react/button';

class App extends React.Component {
    render() {
        return (
            <List>
                <Item>
                    <i>Item 1</i>
                </Item>
                <Item>
                    <i>Item 2</i>
                </Item>
                <Item>
                    Item with a nested component
                    <Button text="Click me" />
                </Item>
            </List>
        );
    }
}
export default App;

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