Skip to content

Latest commit

 

History

History
92 lines (71 loc) · 4.64 KB

client-side-with-jquery.md

File metadata and controls

92 lines (71 loc) · 4.64 KB

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.

    Run the following command in the command line:

      npm install devextreme-aspnet-data

  • Use bower.

    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": "^1"
}

After installation, link the dx.aspnet.data.js script after the DevExtreme scripts on your page.

<!-- if you have used npm -->
<script src="/node_modules/devextreme-aspnet-data/js/dx.aspnet.data.js"></script>
<!-- if you have used bower -->
<script src="/bower_components/devextreme-aspnet-data/js/dx.aspnet.data.js"></script>

See Also

API Reference

The client-side API consists of a single method, DevExpress.data.AspNet.createStore, that creates a CustomStore, configures it to reach the controller from the client side, and returns its instance. When calling this method, pass an object with the following properties:

  • key - the key property;
  • loadUrl - the URL used to load data;
  • loadParams - additional parameters that should be passed to loadUrl;
  • updateUrl - the URL used to update data;
  • insertUrl - the URL used to insert data;
  • deleteUrl - the URL used to delete data;
  • loadMethod - the HTTP method for load requests; "GET" by default;
  • updateMethod - the HTTP method for update requests; "PUT" by default;
  • insertMethod - the HTTP method for insert requests; "POST" by default;
  • deleteMethod - the HTTP method for delete requests; "DELETE" by default;
  • onBeforeSend - a function that customizes the request before it is sent; accepts the following parameters:
    • operation: string
      The operation the request should perform. Can be "load", "update", "insert" or "delete".
    • jQueryAjaxSettings: object
      Settings configuring the request. Refer to the jQuery.ajax() description for more information.
  • onAjaxError - a function to be called when an Ajax request fails; accepts the following parameter:
    • e: object
      Information about the event; contains the following properties:
      • xhr: jqXHR when using jQuery; XMLHttpRequest otherwise
        The request object.
      • error: string | Error
        The error message. You can assign a custom error message or JavaScript Error object to this property.
  • errorHandler - a function to be executed when the store throws an error; accepts a JavaScript Error object as the parameter.

You can find a jQuery example here.

DevExtreme ASP.NET MVC 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