From d6adf4f037dc38d811f588b490d70a50e1660f21 Mon Sep 17 00:00:00 2001
From: Osama Al-Rashed <61357303+OsamaAlRashed@users.noreply.github.com>
Date: Mon, 11 Nov 2024 19:08:47 +0400
Subject: [PATCH] Update README.md

---
 README.md | 58 ++++++++++++-------------------------------------------
 1 file changed, 12 insertions(+), 46 deletions(-)

diff --git a/README.md b/README.md
index 6e450f6..5d79511 100644
--- a/README.md
+++ b/README.md
@@ -47,37 +47,20 @@ public class Product
 
     [CellEditor("agLargeTextCellEditor")]
     public string? Description { get; set; }
-
-    [HeaderName("Category")]
-    public int CatId { get; set; }
-
-    [Required(true)]
-    [HeaderName("Image")]
-    public FileInput? Image { get; set; }
-}
-
-public class FileInput : IFileInput
-{
-    public IFormFile? File { get; set; }
-    public string? Name { get; set; }
-    public string? Path { get; set; }
 }
 ```
 
 ### Example Razor View
 
-- Download the required js/css files from here:  
-[Gridazor.zip](https://github.com/user-attachments/files/17090694/Gridazor.zip)
-
-- Import them in Layout.cshtml:
+- Import ag-grid library:
 ```csharp
-<link rel="stylesheet" href="~/lib/Gridazor/GridazorDropdown/GridazorDropdown.css" />
-<link rel="stylesheet" href="~/lib/Gridazor/GridazorFileInput/GridazorFileInput.css" />
-
 <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>
-<script src="~/lib/Gridazor/GridazorDropdown/GridazorDropdown.js"></script>
-<script src="~/lib/Gridazor/GridazorFileInput/GridazorFileInput.js"></script>
-<script src="~/lib/Gridazor/Gridazor.js"></script>
+```
+
+And Gridazor client-side:
+```csharp
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridazor@latest/dist/gridazor.css" />
+<script src="https://cdn.jsdelivr.net/npm/gridazor@latest/dist/gridazor.js"></script>
 ```
 
 ```csharp
@@ -91,6 +74,7 @@ public class FileInput : IFileInput
     }))
     {
         <div class="card-header">
+            <button id="add-button" type="button" class="btn btn-primary">Add</button>
             <button id="delete-button" type="button" class="btn btn-danger">Delete</button>
         </div>
         <div class="card-body">
@@ -107,30 +91,12 @@ public class FileInput : IFileInput
 ```js
 @section Scripts{
     <script>
-        const dropdownValues = @Html.Raw(Json.Serialize(ViewBag.Cats));
-        $("#myGrid").gridazor({
+         const gridazor = new Gridazor(gridElement, {
             propertyName: '@nameof(Model.Products)',
-            overrideColumnDefs: [
-                {
-                    field: "catId",
-                    cellEditor: GridazorDropdown,
-                    cellEditorParams: {
-                        values: dropdownValues.map(item => ({
-                            value: item.id,
-                            text: item.name
-                        }))
-                    },
-                    valueFormatter: (params) => gridazorDropdownHelper.valueFormatter(params)
-                },
-                {
-                    field: "image",
-                    cellEditor: GridazorFileInput,
-                    cellRenderer: (params) => gridazorFileInputHelper.cellRender(params)
-                }
-            ],
             enableDelete: true,
-            deleteButtonId: "delete-button"
-        });
+            deleteButtonId: "delete-button",
+            addByButton: true,
+            addButtonId: "add-button"
     </script>
 }
 ```