Basic Component Setup

• Jun 28, 2024
• 4 minutes to read

Note

Read the Getting Started guide for a beginner-friendly overview of the DevExtreme workflow.

• Important: Code Compilation
• Add a Control
• Options
• Methods
• Learn more

Important: Code Compilation

Important

DevExtreme helper methods for ASP.NET Core insert jQuery DevExtreme Components into your client-side code.

The DevExtreme for jQuery documentation is the primary authoritative source of information on API and capabilities of these components.

Add a Control

1. Call the DevExtreme() HtmlHelper extension method:

   @(Html.DevExtreme())
   

2. Insert the builder method with the name of the component:

   @(Html.DevExtreme()
       .Button() // Adds the Button control
   )
   

   If you’re adding a control to a code block, end the configuration with a Render() method call.

   @{
       Html.DevExtreme().Button()
           // ...
           // Other Button control options go here
           // ...
           .Render()
   }
   

Options

Every DevExtreme component has its own set of options. View the component’s API page for a full list of available configuration options.

In accordance with established naming conventions, JavaScript option names start with a lowercase letter, while C# method names start with a capital letter:

JavaScript Option	C# Method
dataSource	DataSource
tooltip	Tooltip
showColumnHeaders	ShowColumnHeaders

If you use Visual Studio or Visual Studio Code, you can rely on IntelliSense for auto-completion. It receives information about available DevExtreme methods, as well as their accepted values.

Set options

Append option methods to the builder method. You can chain option methods:

@(Html.DevExtreme().Button()
    .ID("submitButton") // Sets the container's "ID" attribute
    .Text("submit") // Specifies button content
    .Width(100) // Sets the width
)

Note

Specify a unique, HTML5-compliant ID value to access the component API at runtime. You need to reference this ID when you call methods.

If you use partial views or templates, you need to set unique IDs for each component instance. Read the Advanced Option Techniques guide for more information.

Pass JavaScript to option methods

Use the new JS() expression to evaluate JavaScript expressions in option method calls. This technique allows you to reference client-side variables in your component setup code.

<script>
    var myText = "Submit";
</script>

@(Html.DevExtreme().Button()
    .Text(new JS("myText")) // Returns "Submit"
)

This technique is useful when a component receives parameters from its parent template. For example, when you set up a Master-Detail DataGrid and need to pass the row key parameter from the master grid to a detail grid.

See Bind a Nested Control to Template Parameters, Use Templates to Nest DevExtreme Controls, and Pass Additional Load Parameters for more information.

Use .NET Enums

Some options accept a limited set of values. To ensure type compliance, you should bind these options to .NET enums (data types). The DevExtreme.AspNet.Mvc namespace includes ENUM members for these options. Most of the time, such member names end with the word “Type” (SchedulerViewType, SummaryType, etc.). Browse the Server-side API section for a complete list of available enums.

@(Html.DevExtreme().DateBox()
    .Type(DateBoxType.DateTime) // Sets the type to the DateBoxType .NET enum
)

Update Options

Call the client-side option method to update options at runtime:

@(Html.DevExtreme().Popup()
    .ID("popup")
    .Visible(true)
)

var popupInstance = $("#popup").dxPopup("instance");
popupInstance.option('visible', false);

Methods

Note

To invoke component methods, assign the component a unique, HTML5-compliant ID.

Each component has its own set of methods. Refer to the component’s client-side API page for a full list of available methods.

1. Use the $() jQuery Selector to locate the component.
2. Call the dxComponentName method (dxPopup, dxDataGrid, etc.) to access the component instance.
3. Pass the name of the method and additional arguments (if any) to the dxComponentName method.

@(Html.DevExtreme().Popup()
    .ID("popup")
)
<script>
    $("#popup").dxPopup("show"); // The "show" method changes the visibility of the "Popup" component.
    $("#popup").dxPopup("toggle", true); // Includes additional arguments
</script>

You can create a JavaScript function with the method, and run this function in response to an event:

@* ... *@
@(Html.DevExtreme().Button()
    .OnClick("showPopup")
)
<script>
    function showPopup() {
        $("#popup").dxPopup("show");
    }
</script>

Learn More

• Events and Callbacks
• Advanced Option Techniques
• Bind Controls to Models
• Working with Data