Skip to content

Latest commit

 

History

History
144 lines (105 loc) · 7.46 KB

client-side-with-jquery.md

File metadata and controls

144 lines (105 loc) · 7.46 KB
Raw

Client Side with jQuery

Installation

The dx.aspnet.data.js script is the client-side part. You can install it in one of the following ways.

  • Use npm.

    1. Run the following command in the command line:

      npm install devextreme-aspnet-data

    2. Link the dx.aspnet.data.js script on your page:

      <script src="/node_modules/devextreme-aspnet-data/js/dx.aspnet.data.js"></script>

  • Use unpkg.

    Link the dx.aspnet.data.js script on your page in the following way:

    <script src="https://unpkg.com/devextreme-aspnet-data/js/dx.aspnet.data.js"></script>

  • Use bower.

    NOTE: Since Bower is deprecated we do not recommend you use this approach.

    1. Run the following command in the command line:

      bower install devextreme-aspnet-data

      ... or add devextreme-aspnet-data to the bower.json file's dependencies section.

      "dependencies": {
    ...
    "devextreme-aspnet-data": "^2"
}

    2. Link the dx.aspnet.data.js script on your page:

      <script src="/bower_components/devextreme-aspnet-data/js/dx.aspnet.data.js"></script>

See Also

API Reference

The client-side API consists of the DevExpress.data.AspNet.createStore method that returns a CustomStore's instance. This instance is configured to access a controller.

Configuration

When you call the DevExpress.data.AspNet.createStore method, pass an object with the properties described below.

  • cacheRawData - refer to CustomStore.cacheRawData.

  • deleteMethod - the HTTP method for delete requests; "DELETE" by default.

  • deleteUrl - the URL used to delete data.

  • errorHandler - refer to CustomStore.errorHandler.

  • insertMethod - the HTTP method for insert requests; "POST" by default.

  • insertUrl - the URL used to insert data.

  • key- refer to CustomStore.key.

  • loadMethod - the HTTP method for load requests; "GET" by default.

  • loadMode - refer to CustomStore.loadMode.

  • loadParams - additional parameters that should be passed to loadUrl.

  • loadUrl - the URL used to load data.

  • onAjaxError - a function to be called when an AJAX request fails.

    onAjaxError: (e: { xhr, error }) => void

    The e object has the following properties:

    Property Type Description
    xhr jqXHR for jQuery; XMLHttpRequest otherwise The request object.
    error string or Error The error object. You can assign a custom error message or a JavaScript Error object.

  • onBeforeSend - a function that customizes the request before it is sent.

    onBeforeSend: (operation, ajaxSettings) => void
    Parameter Type Description
    operation string The operation to be performed by the request: "load", "update", "insert", or "delete".
    ajaxSettings object Request settings. Refer to jQuery.ajax().

  • onInserted - refer to CustomStore.onInserted.

  • onInserting - refer to CustomStore.onInserting.

  • onLoaded - refer to CustomStore.onLoaded.

  • onLoading - refer to CustomStore.onLoading.

  • onModified - refer to CustomStore.onModified.

  • onModifying - refer to CustomStore.onModifying.

  • onPush - refer to CustomStore.onPush.

  • onRemoved - refer to CustomStore.onRemoved.

  • onRemoving - refer to CustomStore.onRemoving.

  • onUpdated - refer to CustomStore.onUpdated.

  • onUpdating - refer to CustomStore.onUpdating.

  • updateMethod - the HTTP method for update requests; "PUT" by default.

  • updateUrl - the URL used to update data.

Methods and Events

Refer to the CustomStore methods and events for a list of available methods and events.

Example

You can find a jQuery example here.

DevExtreme-based ASP.NET Core and DevExtreme ASP.NET MVC 5 controls call the DevExpress.data.AspNet.createStore method internally. To configure its parameters, use the DataSource() method's lambda expression.

@(Html.DevExtreme().DataGrid()
    .DataSource(ds => ds.WebApi()
        .Controller("NorthwindContext")
        .Key("OrderID")
        .LoadAction("GetAllOrders")
        .InsertAction("InsertOrder")
        .UpdateAction("UpdateOrder")
        .DeleteAction("RemoveOrder")
    )
)

See Also