Advanced Option Techniques

• Jun 17, 2024
• 3 minutes to read

• Set Custom Options
• Set Unique IDs for Partial View Controls
• Set Unique IDs for Nested Controls
• Configure Nested Options and Collections

Set Custom Options

The Option method defines custom options. You can use custom options to share data (for example, masterKey) between nested controls and their parents.

@(Html.DevExtreme().Button()
    .Text("submit")
    .Width(100)
    .Option("test-id", "primary-button")
)

See the Advanced Master-Detail View demo and the Multi-Nested Controls topic for more information.

Set Unique IDs for Partial View Controls

When you use partial views, a single page can include multiple instances of the same DevExtreme component.

If you specify a hard-coded ID inside the partial view, the application renders multiple elements with the same ID. This will break HTML5 compliance, and you will be unable to call methods for any particular instance. Make sure that each component instance has a unique ID.

Use a model variable to specify a unique ID when you invoke the partial view:

page.cshtml

@(await Html.PartialAsync("_MyPartial", new { ID = 1 }))

@(await Html.PartialAsync("_MyPartial", new { ID = 2 }))

Shared/_MyPartial.cshtml

@(Html.DevExtreme().Button()
    .ID("button" + Model.ID)
)

Set Unique IDs for Nested Controls

Components inside a template cannot use a hard-coded ID. Otherwise, the page may render multiple elements with the same ID. Use the new JS() expression to set a unique ID for each instance:

Data Source

object[] DataSource = new[] {
    new { ID = 1, Name = "John" },
    new { ID = 2, Name = "Jane" }
};

page.cshtml

@(Html.DevExtreme().List()
    .DataSource(DataSource)
    .ItemTemplate(@<text>
        @(Html.DevExtreme().Button()
            .ID(new JS("'list_button_' + ID"))
        )
    </text>)
)

If you omit the ID option, DevExtreme automatically generates unique IDs for nested controls.

Configure Nested Options and Collections

You can use lambda expressions to configure nested options. Each lambda parameter starts a new option method chain.

@(Html.DevExtreme().Chart()
    .Legend(l => l // Configures the chart legend (l - lambda parameter)
        .Visible(false) // Hides the legend in the chart
    )
    .Tooltip(t => t // Configures the tooltip (t - lambda parameter)
        .Enabled(true) // Enables the tooltip
        .Font(f => f // Configures the tooltip's text (f - lambda parameter)
            .Color("blue") // Paints the tooltip's text blue
        )
    )
)

You can apply the same technique to item collection configuration. In this case, the lambda parameter functions as an item factory. Use the Add() method to add a new item to the collection.

@(Html.DevExtreme().DataGrid()
    .Columns(columns => { // Specifies a collection of columns
        columns.Add() // Adds the "CustomerID" column
            .DataField("CustomerID");

        columns.Add() // Adds the "OrderDate" column
            .DataField("OrderDate")
            .DataType(GridColumnDataType.Date);
    })
)