Skip to content

Latest commit

 

History

History
84 lines (63 loc) · 3.8 KB

client-side-with-jquery.md

File metadata and controls

84 lines (63 loc) · 3.8 KB
Raw

Client Side with jQuery

Installation

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

  • Using npm.

    Run the following command in the command line:

      npm install devextreme-aspnet-data

  • Using bower.

    Run the following command in the command line...

      bower install devextreme-aspnet-data

    ... or add devextreme-aspnet-data to the bower.json file into the 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 in 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 to be performed by the request. Can be "load", "update", "insert" or "delete".
    • jQueryAjaxSettings: object
      Settings configuring the request. For details, refer to the jQuery.ajax() description.

You can find an example with jQuery here.

DevExtreme ASP.NET MVC Controls call the DevExpress.data.AspNet.createStore method internally. To configure the parameters, use the lambda expression of the DataSource() method.

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

See Also