|
| 1 | +{ |
| 2 | + List<object> filterColumns = new List<object>(); |
| 3 | + filterColumns.Add(new { field = "CustomerName", matchCase = false, @operator = "startswith", predicate = "and", value = "Maria" }); |
| 4 | + List<object> sortOptions = new List<object>(); |
| 5 | + sortOptions.Add(new { field = "ProductID", direction = "Descending" }); |
| 6 | +} |
| 7 | + |
| 8 | +@Html.EJS().Grid("grid").Height("348px").Columns(col => |
| 9 | +{ |
| 10 | + col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add(); |
| 11 | + col.Field("CustomerName").HeaderText("Customer Name").Width("150").Add(); |
| 12 | + col.Field("ProductID").HeaderText("Product ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add(); |
| 13 | + col.Field("ProductName").HeaderText("Product Name").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add(); |
| 14 | +}).DataSourceChanged("dataSourceChanged").SortSettings(sort => sort.Columns(sortOptions)).FilterSettings(filter => filter.Columns(filterColumns)).GroupSettings(group => { group.EnableLazyLoading(true).ShowGroupedColumn(true).Columns(new string[] { "ProductName" }); }).AllowPaging().AllowFiltering().AllowSorting().AllowGrouping().DataStateChange("dataStateChange").Created("created").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel", "Search" }).Render() |
| 15 | +<script> |
| 16 | + const baseUrl = "https://localhost:****/Home";// Here xxxx denotes the port number. |
| 17 | + var gridData; |
| 18 | + var state = { |
| 19 | + skip: 0, |
| 20 | + take: 12, |
| 21 | + group: { |
| 22 | + enableLazyLoading: true, |
| 23 | + columns: ["ProductName"], |
| 24 | + showGroupedColumn: true |
| 25 | + }, |
| 26 | + sort: { columns: [{ field: 'ProductID', direction: 'Descending' }] }, |
| 27 | + filter: { columns: [{ field: 'CustomerName', matchCase: false, operator: 'startswith', predicate: 'and', value: 'Maria' }] } |
| 28 | + }; |
| 29 | + function created() { |
| 30 | + dataStateChange(state) |
| 31 | + } |
| 32 | + function dataStateChange (state) { |
| 33 | + const grid = document.getElementById("grid").ej2_instances[0]; |
| 34 | + const query = grid.getDataModule().generateQuery(); |
| 35 | + getOrders(state, query).then(gridData => { |
| 36 | + grid.dataSource = gridData.result; |
| 37 | + }); |
| 38 | + } |
| 39 | + function getOrders(state, action) { |
| 40 | + const query = new ej.data.Query(); |
| 41 | + // filter |
| 42 | + if (state.where) { |
| 43 | + applyFiltering(query, action.queries); |
| 44 | + } |
| 45 | + // search |
| 46 | + if (state.search) { |
| 47 | + applySearching(query, state.search); |
| 48 | + }; |
| 49 | + // sort |
| 50 | + if (state.sorted) { |
| 51 | + state.sorted.length ? applySorting(query, state.sorted) : |
| 52 | + // initial sorting |
| 53 | + state.sorted.columns.length ? applySorting(query, state.sorted.columns) : null |
| 54 | + } |
| 55 | + // grouping |
| 56 | + if (state.group) { |
| 57 | + state.group.length ? applyGrouping(query, state.group) : |
| 58 | + // initial grouping |
| 59 | + state.group.columns.length ? applyGrouping(query, state.group.columns) : null |
| 60 | + } |
| 61 | + // lazy load grouping |
| 62 | + if (state.group) { |
| 63 | + if (state.isLazyLoad) { |
| 64 | + applyLazyLoad(query, state) |
| 65 | + } |
| 66 | + if (state.group.enableLazyLoading) { |
| 67 | + query.lazyLoad.push({ key: 'isLazyLoad', value: true }) |
| 68 | + } |
| 69 | + } |
| 70 | + // page |
| 71 | + applyPaging(query, state) |
| 72 | + query.isCountRequired = true |
| 73 | + var fetchRequest = new ej.base.Fetch({ |
| 74 | + url: `${baseUrl}/GetOrderData`, |
| 75 | + type: 'POST', |
| 76 | + }) |
| 77 | + return fetchRequest.send() |
| 78 | + .then(data => { |
| 79 | + // Create a DataManager instance with your fetched data |
| 80 | + gridData = new ej.data.DataManager(data.result); |
| 81 | + // Execute local data operations using the provided query |
| 82 | + const result = gridData.executeLocal(query); |
| 83 | + // Return the result along with the count of total records |
| 84 | + return { |
| 85 | + result: result, // Result of the data |
| 86 | + count: result.count // Total record count based on fetched data length |
| 87 | + }; |
| 88 | + }); |
| 89 | + } |
| 90 | + function dataSourceChanged(state) { |
| 91 | + if (state.action === 'add') { |
| 92 | + addRecord(state.data, state).then(() => { |
| 93 | + state.endEdit(); |
| 94 | + }); |
| 95 | + } else if (state.action === 'edit') { |
| 96 | + updateRecord(state.data, state).then(() => { |
| 97 | + state.endEdit(); |
| 98 | + }); |
| 99 | + } else if (state.requestType === 'delete') { |
| 100 | + deleteRecord(state.data[0].OrderID, state).then(() => { |
| 101 | + state.endEdit(); |
| 102 | + }); |
| 103 | + } |
| 104 | + } |
| 105 | + const applyFiltering = (query, filter) => { |
| 106 | + // Check if filter columns are specified |
| 107 | + if (filter.columns && filter.columns.length) { |
| 108 | + // Apply filtering for each specified column |
| 109 | + for (let i = 0; i < filter.columns.length; i++) { |
| 110 | + const field = filter.columns[i].field; |
| 111 | + const operator = filter.columns[i].operator; |
| 112 | + const value = filter.columns[i].value; |
| 113 | + query.where(field, operator, value); |
| 114 | + } |
| 115 | + } |
| 116 | + else { |
| 117 | + // Apply filtering based on direct filter conditions |
| 118 | + for (let i = 0; i < filter.length; i++) { |
| 119 | + const { fn, e } = filter[i]; |
| 120 | + if (fn === 'onWhere') { |
| 121 | + query.where(e); |
| 122 | + } |
| 123 | + } |
| 124 | + } |
| 125 | + } |
| 126 | + // Apply searching |
| 127 | + const applySearching = (query, search) => { |
| 128 | + // Check if a search operation is requested |
| 129 | + if (search && search.length > 0) { |
| 130 | + // Extract the search key and fields from the search array |
| 131 | + const { fields, key } = search[0]; |
| 132 | + // perform search operation using the field and key on the query |
| 133 | + query.search(key, fields); |
| 134 | + } |
| 135 | + } |
| 136 | + // Apply sorting |
| 137 | + const applySorting = (query, sorted) => { |
| 138 | + // Check if sorting data is available |
| 139 | + if (sorted && sorted.length > 0) { |
| 140 | + // Iterate through each sorting info |
| 141 | + sorted.forEach(sort => { |
| 142 | + // Get the sort field name either by name or field |
| 143 | + const sortField = sort.name || sort.field; |
| 144 | + // Perform sort operation using the query based on the field name and direction |
| 145 | + query.sortBy(sortField, sort.direction); |
| 146 | + }); |
| 147 | + } |
| 148 | + } |
| 149 | + // Apply grouping |
| 150 | + const applyGrouping = (query, group) => { |
| 151 | + // Check if sorting data is available |
| 152 | + if (group.length > 0) { |
| 153 | + // Iterate through each group info |
| 154 | + group.forEach((column) => { |
| 155 | + // perform group operation using the column on the query |
| 156 | + query.group(column); |
| 157 | + }); |
| 158 | + } |
| 159 | + } |
| 160 | + // Apply lazy load grouping |
| 161 | + const applyLazyLoad = (query, payload) => { |
| 162 | + // Configure lazy loading for the main data |
| 163 | + if (payload.isLazyLoad) { |
| 164 | + query.lazyLoad.push({ key: 'isLazyLoad', value: true }); |
| 165 | + // If on-demand group loading is enabled, configure lazy loading for grouped data |
| 166 | + if (payload.onDemandGroupInfo) { |
| 167 | + query.lazyLoad.push({ |
| 168 | + key: 'onDemandGroupInfo', |
| 169 | + value: payload.action.lazyLoadQuery, |
| 170 | + }); |
| 171 | + } |
| 172 | + } |
| 173 | + } |
| 174 | + const applyPaging = (query, state) => { |
| 175 | + // Check if both 'take' and 'skip' values are available |
| 176 | + if (state.take && state.skip) { |
| 177 | + // Calculate pageSkip and pageTake values to get pageIndex and pageSize |
| 178 | + const pageSkip = state.skip / state.take + 1; |
| 179 | + const pageTake = state.take; |
| 180 | + query.page(pageSkip, pageTake); |
| 181 | + } |
| 182 | + // If if only 'take' is available and 'skip' is 0, apply paging for the first page. |
| 183 | + else if (state.skip === 0 && state.take) { |
| 184 | + query.page(1, state.take); |
| 185 | + } |
| 186 | + } |
| 187 | + function addRecord(order) { |
| 188 | + var fetchRequest = new ej.base.Fetch({ |
| 189 | + url: `${baseUrl}/AddOrder`, |
| 190 | + type: 'POST', |
| 191 | + contentType: 'application/json; charset=utf-8', |
| 192 | + data: JSON.stringify(order) |
| 193 | + }) |
| 194 | + return fetchRequest.send(); |
| 195 | + } |
| 196 | + |
| 197 | + function updateRecord(order,state) { |
| 198 | + var fetchRequest = new ej.base.Fetch({ |
| 199 | + url: `${baseUrl}/UpdateOrder/${order.OrderID}`, |
| 200 | + type: 'POST', |
| 201 | + contentType: 'application/json; charset=utf-8', |
| 202 | + data: JSON.stringify(order) |
| 203 | + }) |
| 204 | + return fetchRequest.send(); |
| 205 | + } |
| 206 | + // delete |
| 207 | + function deleteRecord(primaryKey) { |
| 208 | + var fetchRequest = new ej.base.Fetch({ |
| 209 | + url: `${baseUrl}/DeleteOrder/${primaryKey}`, |
| 210 | + type: 'POST', |
| 211 | + contentType: 'application/json; charset=utf-8', |
| 212 | + body: JSON.stringify({ |
| 213 | + key: primaryKey |
| 214 | + }) |
| 215 | + }) |
| 216 | + return fetchRequest.send(); |
| 217 | + } |
| 218 | +</script> |
0 commit comments