diff --git a/Readme.md b/Readme.md index 6a2e90a..5587c19 100644 --- a/Readme.md +++ b/Readme.md @@ -3,22 +3,54 @@ [![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/E4063) [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183) - -*Files to look at*: -* [HomeController.cs](./CS/AjaxSupport/Controllers/HomeController.cs) (VB: [HomeController.vb](./VB/AjaxSupport/Controllers/HomeController.vb)) -* [GridViewPartial.cshtml](./CS/AjaxSupport/Views/Home/GridViewPartial.cshtml) -* **[Index.cshtml](./CS/AjaxSupport/Views/Home/Index.cshtml)** - -# How to use the jQuery.ajax function with DevExpress MVC Extensions +# Grid View for MVC - How to Use the jQuery.ajax Function with DevExpress MVC Extensions + **[[Run Online]](https://codecentral.devexpress.com/e4063/)** -

This example demonstrates how you can use the jQuery.ajax function to load a GridView on a callback.
-Note that this feature has been implemented in the 12.1 version, so it is not available in earlier versions. For older versions, you can use a solution demonstrated in the How to load MVC extensions using the CallbackPanel extension example.

+This example demonstrates how to use the [jQuery.ajax](https://api.jquery.com/jquery.ajax/) function to load a GridView on a callback. + +![A sample grid](images/grid-created-on-callback.png) + +In this example, the grid is created when a user clicks the button on the page. Use the [ButtonSettings.ClientSideEvents](https://docs.devexpress.com/AspNetMvc/DevExpress.Web.Mvc.ButtonSettings.ClientSideEvents) property to handle button click events: + +```cshtml + +@Html.DevExpress().Button(settings => { + settings.Name = "MyButton"; + settings.Text = "Click Me!!!"; + settings.ClientSideEvents.Click = "OnClick"; +}).GetHtml() +``` + +**Note:** The *jQuery.ajax* function has been supported in v.12.1. For earlier versions, you can use a solution demonstrated in the following example: [How to load MVC extensions using the CallbackPanel extension](https://github.com/DevExpress-Examples/how-to-load-mvc-extensions-using-the-callbackpanel-extension-e2927). + +## Files to Look At + +* [Index.cshtml](./CS/AjaxSupport/Views/Home/Index.cshtml) +* [HomeController.cs](./CS/AjaxSupport/Controllers/HomeController.cs) (VB: [HomeController.vb](./VB/AjaxSupport/Controllers/HomeController.vb)) +* [GridViewPartial.cshtml](./CS/AjaxSupport/Views/Home/GridViewPartial.cshtml) + +## Documentation -
+* [GridViewExtension](https://docs.devexpress.com/AspNetMvc/DevExpress.Web.Mvc.GridViewExtension) +* [ButtonSettings.ClientSideEvents](https://docs.devexpress.com/AspNetMvc/DevExpress.Web.Mvc.ButtonSettings.ClientSideEvents) +## More Examples +* [How to use the GridView extension in Full Screen mode (100% browser Width and Height)](https://github.com/DevExpress-Examples/how-to-use-the-gridview-extension-in-a-full-screen-mode-100-browser-width-and-height-e3958) +* [GridView - How to edit in memory data source](https://github.com/DevExpress-Examples/gridview-how-to-edit-in-memory-data-source-e3983) +* [How to bind GridView to XPO in Server Mode](https://github.com/DevExpress-Examples/how-to-bind-gridview-to-xpo-in-server-mode-e2836) \ No newline at end of file diff --git a/images/grid-created-on-callback.png b/images/grid-created-on-callback.png new file mode 100644 index 0000000..aa3e08b Binary files /dev/null and b/images/grid-created-on-callback.png differ