Find Sha 1 Examples and Templates

Use this online sha-1 playground to view and fork sha-1 example apps and templates on CodeSandbox. Click any example below to run it instantly or find templates that can be used as a pre-built solution!

devetreme-grid-arrray (forked)

devetreme-grid-arrray (forked)You can use the DataGrid component to display and edit data from an array of objects. Use the dataSource and keyExpr properties to specify the bound array and its key field. For more information, refer to the following help topic: Local Array. Use the columns property to specify a list of data fields you want to display within the DataGrid as columns. If the columns property is not specified, the component creates columns for all data fields available in objects from the bound array.

jolly-hypatia-5c56qt

jolly-hypatia-5c56qt DevExtreme Angular Data Grid is a responsive grid control with a vast assortment of capabilities, including data editing and validation, searching and filtering, layout customization. It supports native Angular features too: AOT compilation, declarative configuration, TypeScript compile-time checking, and more. To get started with the DevExtreme DataGrid component, refer to the following tutorial for step-by-step instructions: Getting Started with DataGrid.

1243-validation-dxhelp

1243-validation-dxhelp The RadioGroup component contains a set of radio buttons and allows users to select one item from it. This demo illustrates how to bind the component to data, change the component layout, define a custom template, and handle the value change event. Bind RadioGroup to Data You can display RadioGroup items from the items array or a dataSource. If your data is an array of objects, use the displayExpr and valueExpr properties. displayExpr specifies a data source field that contains button captions. valueExpr specifies a data source field that supplies values to the value property when users select a button. Leave valueExpr unspecified if you need to supply the entire data object to the value property. Configure the Layout The RadioGroup supports horizontal (default for tablets) and vertical (default for other devices) layouts. To change the layout for all device types, specify the layout property. Customize the Item Appearance Define the itemTemplate to customize the item appearance. To customize an individual item, specify its template property. Handle the Value Change Event You can set the value property to one of the data source items to specify a predefined selection. Implement the onValueChanged function to handle value changes.

data grid - custom date parse and format

data grid - custom date parse and format You can use batch edit mode to defer saving multiple cell changes. Changes are stored in a buffer and can be discarded before a user clicks the Save button. To enable batch edit mode, configure the following properties: Set editing.mode to "batch". Assign true to the editing object's allowUpdating, allowAdding, and allowDeleting properties. The startEditAction property specifies whether cells enter the editing state on a single or double click. Cell edit also selects the cells' text because the selectTextOnEditStart property is set to true. You can use the controls below the DataGrid to change these properties at runtime.

Dx Bar Chart Test

Dx Bar Chart Test If you do not need to populate the Chart with data from a remote server, and the data does not change frequently, then bind the component to a local JavaScript array. Pass the array to the Chart's dataSource property. Once you assign the data source, specify the series type and its nested options: argumentField and valueField. If you specify these properties, the component can determine the object fields that indicate Chart arguments and values in the array. The default values for these properties are arg and val, respectively. You can use these data field names to structure your array as shown in this demo.

dxDateBox setting pickerType at runtime

dxDateBox setting pickerType at runtime The DateBox editor helps users enter or modify date and time values. This demo illustrates the following DateBox properties: value A value the DateBox displays. type Specifies whether the DateBox allows users to select one of the following types: "date" Users can select the date from the calendar, or they can type in their own date value (in the required format). "time" Users can select a time from a range between 12:00 AM and 11:30 PM at 30-minute intervals, or they can type in their own time value (in the required format). Specify the interval property to set the time interval. "datetime" Users can select the date from the calendar and the time from the spin and dropdown editors. They can also choose the Today button. displayFormat A date/time display format. You can use one of the predefined formats or specify a custom format. This demo illustrates the latter. pickerType Specifies the type of UI used to select a date or time. This demo shows how to change a calendar to a roller date picker. showClearButton Specifies whether to display the button that clears the DateBox value. disabled Specifies whether the DateBox responds to user interaction. disabledDates Dates that are not available for selection. applyValueMode Defines whether the selected value applies instantly or after a user clicks the Apply button. To get started with the DevExtreme DateBox component, refer to the following tutorial for step-by-step instructions: Getting Started with DateBox.

twilight-platform-373dkl

twilight-platform-373dkl Column templates allow you to display custom content in column cells. Use the cellTemplate property (cellRender in React) to configure these templates. In this demo, a custom column template is configured to display employee photos in the Picture column.

Menu-Submenu-MarginLeft

Menu-Submenu-MarginLeft Populate Menu with Data and Configure the Access to It You can display Menu items from the items array or a dataSource. This demo contains an example of a data structure. If you use a dataSource, specify the displayExpr property. To access the clicked item, use the onItemClick event handler function. Configure the Menu Use the orientation property to specify whether the Menu has horizontal or vertical orientation. Use the animation property to specify the type, delay, duration, and other options of show and hide menu actions. Configure the Submenus Clicking or a hovering a Menu item opens a drop-down menu that can contain several submenus. To specify the drop-down menu mode ("onClick" or "onHover"), use the showSubmenuMode property. If you need only to specify the first level of drop-down menus, use the showFirstSubmenuMode property. If you want to hide the submenu when the mouse pointer leaves it, set the hideSubmenuOnMouseLeave property to true. Customize Item Appearance You can define specific fields in the item data objects to change the appearance of an item. For example, use the icon property to supply items with icons. Define an itemTemplate to customize item appearance.

peaceful-moser-d2s8dc

peaceful-moser-d2s8dc The NumberBox is a component that displays a number. Users can change this number (for example, type a new value or use the spin buttons, keyboard arrows, or mouse wheel to increment/decrement it). Use the value property to specify the number displayed in the NumberBox. If you do not specify the value property, the NumberBox displays 0 (the default value). You can use the min and max properties to set the value range. Specify the onValueChanged function to handle the value change. In this demo, the value of the "Stock" NumberBox depends on the "This month sales" NumberBox. Change the value in the "This month sales" NumberBox to see how it affects the other value. If users should not interact with a NumberBox, set its disabled or readOnly property to true. The main difference between these properties is that users can submit a read-only NumberBox in an HTML form, while they cannot submit a disabled NumberBox.

AlisherAmonulloev

example

example The Toolbar contains items that manage the page content. In this demo, the Toolbar manages the List. Configure Toolbar Items You can display Toolbar items from an items array or a dataSource. A Toolbar item may be plain text or a UI component. You should specify the text or the widget property depending on the item. If the item is a UI component, declare its options. Specify Item Location You can set the dataSource with location fields or specify the location property for each item. The location value can be one of the following: "center" Places the item in the center of the toolbar. "before" Places the item before the central element(s). "after" Places the item after the central element(s). Additionally, the Toolbar can render its items in the overflow menu. Specify the locateInMenu property for each item with one of the following values: "always" Always places the item in the overflow menu. "never" Places the item outside of the overflow menu. "auto" Places the item outside of the overflow menu. If all items cannot fit within the width of the Toolbar, it renders this item in the overflow menu. Note that you cannot specify the order of the items with locateinMenu="auto" placed in the overflow menu. Customize Item Appearance You can define the itemTemplate to customize item appearance. To customize the items in the overflow menu, use the menuItemTemplate.

scroll master detail

scroll master detail The Master-Detail View allows users to expand a row ('master') and display the related content ('details') in the expanded section. To configure this feature, set the the masterDetail object's enabled property to true and use a template to specify detail section content. In this demo, the detail section displays another DataGrid.

mathilde_bremaud

check select

check select If the DataGrid component is bound to a large dataset, you can enable infinite scroll mode to optimize data load times and improve user navigation. The component initially displays one page of rows. When users scroll to the end of the view, the DataGrid loads an additional page. Users can only load pages sequentially and cannot skip to arbitrary positions within the dataset. To enable infinite scroll mode, set the scrolling.mode to "infinite". In this demo, the DataGrid is bound to a dataset of 100,000 records. Scroll to the last record to load the next page of records.

mathilde_bremaud

devetreme-grid-arrray-dev-version

devetreme-grid-arrray-dev-version You can use the DataGrid component to display and edit data from an array of objects. Use the dataSource and keyExpr properties to specify the bound array and its key field. For more information, refer to the following help topic: Local Array. Use the columns property to specify a list of data fields you want to display within the DataGrid as columns. If the columns property is not specified, the component creates columns for all data fields available in objects from the bound array.

ticket-T1211409

ticket-T1211409 To access a Web API service from the client, use the createStore method which is part of the DevExtreme.AspNet.Data extension. This extension also allows you to process data for DevExtreme components on the server. The server-side implementation is available under the DataGridWebApiController.cs tab in the ASP.NET MVC version of this demo. To notify the DataGrid that data is processed on the server, set the remoteOperations property to true. A 1-Click Solution for CRUD Web API Services with Role-based Access Control via EF Core If you target .NET for your backend API, be sure to check out Web API Service and register your free copy today. The Solution Wizard scaffolds an OData v4 Web API Service (.NET 6+) with integrated authorization & CRUD operations powered by EF Core ORM. You can use OAuth2, JWT or custom authentication strategies alongside tools like Postman or Swagger (OpenAPI) for API testing. The built-in Web API Service also filters out secured server data based on permissions granted to users. Advanced/enterprise functions include audit trail, endpoints to download reports, file attachments, check validation, obtain localized captions, etc. To use the free Solution Wizard (which creates the Web API Service), run the Universal Component Installer from the DevExpress Download Manager and use our predefined template in Visual Studio 2022+. Read Tutorial | View Examples: JavaScript (DevExtreme) & JavaScript (Svelte) | Watch Videos

zen-bash-v2rqfl

zen-bash-v2rqfl The DateRangeBox component allows users to select a date range with ease. The component includes input boxes for start/end dates and a drop-down date picker. This demo illustrates how to apply the following DateRangeBox settings: value An array where you can specify the selected range (start/end dates). The DateRangeBox also allows you to define start/end dates separately. For this purpose, use the startDate and endDate properties instead. displayFormat Date display format. You can use one of our predefined formats or specify a custom format as needs dictate. This demo illustrates the latter. disabled Specifies whether the DateRangeBox responds to user interaction. showClearButton Displays a button that clears DateRangeBox values. multiView Switches between our single-month and two-month dropdown calendar. applyValueMode Defines whether the selected value is applied instantly or after a user clicks the Apply button. To get started with the DevExtreme DateRangeBox component, refer to the Getting Started with DateRangeBox tutorial.

cool-dew-p7x5zr

cool-dew-p7x5zr You can use the DataGrid component to display and edit data from an array of objects. Use the dataSource and keyExpr properties to specify the bound array and its key field. For more information, refer to the following help topic: Local Array. Use the columns property to specify a list of data fields you want to display within the DataGrid as columns. If the columns property is not specified, the component creates columns for all data fields available in objects from the bound array.

treelist with datagrid cell

treelist with datagrid cell If you want users to change column visibility at runtime, enable the Column Chooser. Set the columnChooser.enabled property to true. Note that you can make sure that certain columns always stay visible. To do so, set the columns[].allowHiding property to false. To open the column chooser, users should click the button in the toolbar above the TreeList. The way users show and hide columns depends on the columnChooser.mode: "dragAndDrop" Users drag and drop column headers to and from the column chooser. "select" Users select and deselect check boxes with column names. In "select" mode, you can choose whether parent element selection affects child/nested elements. Use the selection.recursive property. If the column chooser contains many hidden columns, you can enable the column search UI. Assign true to the search.enabled property. In this demo, use the check boxes below the TreeList to toggle the selection and search features. To hide a column in code, set the columns[].visible property to false.

DxTreeList click to deselect

DxTreeList click to deselect In this demo, the TreeList allows you to select only one row at a time. To enable this mode, set the selection.mode property to "single".

Find more examples or templates