 <Window
    ...
    Title="Доеду Сам">
<Window
    MinHeight="400" MinWidth="700"
    Title="Доеду Сам" Height="450" Width="800">
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="150"/>
        <ColumnDefinition Width="1*"/>
    </Grid.ColumnDefinitions>

    <DataGrid Grid.Column="1" ItemsSource="{Binding MyProducts}"/>
</Grid>
<DataGrid 
    Grid.Column="1" 
    ItemsSource="{Binding MyProducts}"
    AutoGenerateColumns="False">

    <!-- а это раскраска строк в зависимости от активности товара -->
    <DataGrid.RowStyle>
        <Style TargetType="DataGridRow">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Active}" Value="0">
                    <Setter Property="Background" Value="LightGray"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </DataGrid.RowStyle>

    <DataGrid.Columns>
        <DataGridTextColumn 
            Header="Название"
            Binding="{Binding Name}"/>
        <DataGridTextColumn 
            Header="Цена" 
            Binding="{Binding Price}"/>
        <DataGridTextColumn 
            Header="Активен" 
            Binding="{Binding ActiveStr}"/>
    </DataGrid.Columns>
</DataGrid>
<StackPanel 
    VerticalAlignment="Bottom" 
    Orientation="Vertical">
    <Button 
        x:Name="CreateProductButton"
        Click="CreateProductButton_Click"
        Content="Добавить товар"/>
</StackPanel>
Title="{Binding WindowTitle}" Height="450" Width="800">
    <Grid>
        <StackPanel>
            <Label Content="Название товара"/>
            <TextBox Text="{Binding CurrentProduct.Name}"/>
            <Label Content="Название главного изображения"/>
            <TextBox Text="{Binding CurrentProduct.Image}"/>
            <Label Content="Производитель"/>
            <ComboBox 
                ItemsSource="{Binding ManufacturersList}"
                SelectedItem="{Binding CurrentProduct.Manufacturers}">
                <ComboBox.ItemTemplate>
                    <DataTemplate>
                        <Label Content="{Binding Name}"/>
                    </DataTemplate>
                </ComboBox.ItemTemplate>
            </ComboBox>
            <Label Content="Активен"/>
            <TextBox Text="{Binding CurrentProduct.Active}"/>
            <Label Content="Цена"/>
            <TextBox Text="{Binding CurrentProduct.Price}"/>
            <Button x:Name="SaveButton" Content="Сохранить" Click="SaveButton_Click"/>
        </StackPanel>
<StackPanel 
    Orientation="Horizontal" 
    Visibility="{Binding CurrentProduct.ExistingProduct}">
    <Label 
        Content="Идентификатор товара: "/>
    <Label 
        Content="{Binding CurrentProduct.Id}"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Row="0">
    <Label Content="Фильтр по производителям: "/>
    <ComboBox
        Name="ManufacturersFilter"
        SelectedIndex="0"
        SelectionChanged="ComboBox_Selected"
        ItemsSource="{Binding ManufacturersList}">
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <Label Content="{Binding Name}"/>
            </DataTemplate>
        </ComboBox.ItemTemplate>
    </ComboBox>
</StackPanel>
<Label Content="Поиск по названию товара: "/>
<TextBox 
    x:Name="SearchTextBox" 
    MinWidth="100"
    KeyUp="SearchTextBox_KeyUp"/>
<Button 
    Content="История" 
    Name="HistoryButton" 
    Click="HistoryButton_Click"/>
Title="История продаж" Height="442" Width="569">
<Grid>
    <StackPanel 
        Orientation="Vertical" 
        Margin="5">

        <!-- список товаров, по ТЗ мы должны обеспечить в этом окне выбор товара -->
        <ComboBox
            Name="ProductsComboBox"
            SelectionChanged="ProductsComboBox_SelectionChanged"
            SelectedIndex="{Binding SelectedProductIndex}"
            ItemsSource="{Binding ProductsList}">
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <Label Content="{Binding Name}"/>
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>

        <!-- опять же по ТЗ мы должны показать информацию о товаре, но не написано какую - я показываю цену -->
        <StackPanel Orientation="Horizontal">
            <Label Content="Цена товара: "/>
            <Label Content="{Binding SelectedProduct.Price}"/>
        </StackPanel>

        <!-- список истории продаж -->
        <DataGrid 
            Name="HistoryDataGrid"
            CanUserAddRows="False"
            ItemsSource="{Binding HistoryList}"
            AutoGenerateColumns="False">
            <DataGrid.Columns>
                <DataGridTextColumn 
                    Header="Дата продажи"
                    Binding="{Binding DateSale}"/>
                <DataGridTextColumn 
                    Header="Количество"
                    Binding="{Binding Kolichestvo}"/>
            </DataGrid.Columns>
        </DataGrid>
    </StackPanel>
</Grid>

created 2 years ago

EJS online compiler

Write, Run & Share EJS templates online using OneCompiler’s EJS online compiler for free. It’s a minimal yet powerful online playground for rendering dynamic HTML using Embedded JavaScript (EJS). Getting started with OneCompiler’s EJS editor is quick and easy. You get a sample boilerplate EJS code with every new session.

About EJS

EJS (Embedded JavaScript templating) is a simple templating language that lets you generate HTML markup with plain JavaScript. It is commonly used in Node.js applications, especially with Express, to render views on the server side.

EJS syntax allows embedding JavaScript logic directly within HTML using <% %> delimiters.

Sample Code

The following is a sample EJS template that displays a personalized greeting:

<%
 let message = 'Hello, World!'
%>
<%= message %>

Syntax Basics

Output Data

<%= %> — Outputs the value into the template (escaped)
<%- %> — Outputs unescaped HTML

<p>Hello, <%= user.name %>!</p>
<%- include('footer') %>

Control Flow

<% %> — Executes JavaScript logic without output

<% if (user.isLoggedIn) { %>
  <p>Welcome, <%= user.name %>!</p>
<% } else { %>
  <p>Please log in.</p>
<% } %>

Loops

<ul>
<% items.forEach(function(item) { %>
  <li><%= item %></li>
<% }); %>
</ul>

Partials (Includes)

<%- include('header') %>
<main>
  Content goes here
</main>
<%- include('footer') %>

This guide provides a quick reference to EJS templating syntax and usage. Start writing and rendering EJS code with OneCompiler’s EJS online compiler today!