|
| 1 | +--- |
| 2 | +title: Customizing Grid Text Across the Whole Component |
| 3 | +description: Learn how customize Grid text in all tree editing modes - incell, inline, and popup. |
| 4 | +type: how-to |
| 5 | +page_title: Customizing Grid Text Across the Whole Component - Kendo UI Grid for jQuery |
| 6 | +slug: grid-customize-text |
| 7 | +tags: grid, customize, text, kendo |
| 8 | +res_type: kb |
| 9 | +--- |
| 10 | +## Environment |
| 11 | +| Product | Version | |
| 12 | +|-----------|----------------| |
| 13 | +| Grid for Progress® Kendo UI® | 2024.1.319 | |
| 14 | + |
| 15 | +## Description |
| 16 | + |
| 17 | +The Grid allows you to customize its command, toolbar and editing buttons text. It also allows customization of the delete confirmation popup text and the filter menu text. |
| 18 | + |
| 19 | +## Solution |
| 20 | + |
| 21 | +The following example demonstrates how to customize the Grid text. |
| 22 | + |
| 23 | +```dojo |
| 24 | + <h1>Incell editing mode</h1> |
| 25 | + <div id="grid"></div> |
| 26 | + <h1>Inline editing mode</h1> |
| 27 | + <div id="grid-inline-edit"></div> |
| 28 | + <h1>Popup editing mode</h1> |
| 29 | + <div id="grid-popup-edit"></div> |
| 30 | +
|
| 31 | + <script> |
| 32 | + $(document).ready(function() { |
| 33 | + $("#grid").kendoGrid({ |
| 34 | + dataSource: { |
| 35 | + data: createRandomData(80), |
| 36 | + schema: { |
| 37 | + model: { |
| 38 | + fields: { |
| 39 | + Id: { type: "number" }, |
| 40 | + FirstName: { type: "string" }, |
| 41 | + LastName: { type: "string" }, |
| 42 | + City: { type: "string" }, |
| 43 | + Title: { type: "string" }, |
| 44 | + IsCustomer: { type: "boolean" }, |
| 45 | + BirthDate: { type: "date" }, |
| 46 | + Age: { type: "number" } |
| 47 | + } |
| 48 | + } |
| 49 | + }, |
| 50 | + pageSize: 10 |
| 51 | + }, |
| 52 | + height: 400, |
| 53 | + scrollable: true, |
| 54 | + sortable: true, |
| 55 | + pageable: true, |
| 56 | + groupable: { |
| 57 | + messages: { |
| 58 | + empty: "Custom message text" |
| 59 | + } |
| 60 | + }, |
| 61 | + editable: { |
| 62 | + mode: "incell", |
| 63 | + update: true, |
| 64 | + destroy: true, |
| 65 | + confirmation: "Are you sure you want to remove this item?" //text for the confirmation message |
| 66 | + }, |
| 67 | + columns: [ |
| 68 | + { |
| 69 | + field: "Id", |
| 70 | + title: "ID", |
| 71 | + width: "60px" |
| 72 | + }, |
| 73 | + { |
| 74 | + field: "FirstName", |
| 75 | + title: "First Name" |
| 76 | + }, |
| 77 | + { |
| 78 | + field: "LastName", |
| 79 | + title: "Last Name" |
| 80 | + }, |
| 81 | + { |
| 82 | + field: "City" |
| 83 | + }, |
| 84 | + { |
| 85 | + field: "Title" |
| 86 | + }, |
| 87 | + { |
| 88 | + field: "IsCustomer", |
| 89 | + title: "Customer", |
| 90 | + width: "100px" |
| 91 | + }, |
| 92 | + { |
| 93 | + field: "BirthDate", |
| 94 | + title: "Birth Date", |
| 95 | + template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #' |
| 96 | + }, |
| 97 | + { |
| 98 | + field: "Age", |
| 99 | + width: "60px" |
| 100 | + }, |
| 101 | + // adding command in the columns, name - the command name, text - text to be set on the button |
| 102 | + { |
| 103 | + command: { name: "destroy", text: "Custom Delete" }, |
| 104 | + title: " ", |
| 105 | + width: "160px" |
| 106 | + } |
| 107 | + ], |
| 108 | + toolbar: [ |
| 109 | + //name - name of the available commands, text - text to be set on the button |
| 110 | + { name: "create", text: "Custom Create" }, |
| 111 | + { name: "save", text: "Custom Save" }, |
| 112 | + { name: "cancel", text: "Custom Cancel" } |
| 113 | + ], |
| 114 | + // filter menu settings |
| 115 | + filterable: { |
| 116 | + name: "FilterMenu", |
| 117 | + extra: true, // turns on/off the second filter option |
| 118 | + messages: { |
| 119 | + info: "Custom header text:", // sets the text on top of the filter menu |
| 120 | + filter: "CustomFilter", // sets the text for the "Filter" button |
| 121 | + clear: "CustomClear", // sets the text for the "Clear" button |
| 122 | +
|
| 123 | + // when filtering boolean numbers |
| 124 | + isTrue: "custom is true", // sets the text for "isTrue" radio button |
| 125 | + isFalse: "custom is false", // sets the text for "isFalse" radio button |
| 126 | +
|
| 127 | + //changes the text of the "And" and "Or" of the filter menu |
| 128 | + and: "CustomAnd", |
| 129 | + or: "CustomOr" |
| 130 | + }, |
| 131 | + operators: { |
| 132 | + //filter menu for "string" type columns |
| 133 | + string: { |
| 134 | + eq: "Custom Equal to", |
| 135 | + neq: "Custom Not equal to", |
| 136 | + startswith: "Custom Starts with", |
| 137 | + contains: "Custom Contains", |
| 138 | + endswith: "Custom Ends with" |
| 139 | + }, |
| 140 | + //filter menu for "number" type columns |
| 141 | + number: { |
| 142 | + eq: "Custom Equal to", |
| 143 | + neq: "Custom Not equal to", |
| 144 | + gte: "Custom Is greater than or equal to", |
| 145 | + gt: "Custom Is greater than", |
| 146 | + lte: "Custom Is less than or equal to", |
| 147 | + lt: "Custom Is less than" |
| 148 | + }, |
| 149 | + //filter menu for "date" type columns |
| 150 | + date: { |
| 151 | + eq: "Custom Equal to", |
| 152 | + neq: "Custom Not equal to", |
| 153 | + gte: "Custom Is after or equal to", |
| 154 | + gt: "Custom Is after", |
| 155 | + lte: "Custom Is before or equal to", |
| 156 | + lt: "Custom Is before" |
| 157 | + } |
| 158 | + } |
| 159 | + } |
| 160 | + }); |
| 161 | +
|
| 162 | + $("#grid-inline-edit").kendoGrid({ |
| 163 | + dataSource: { |
| 164 | + data: createRandomData(30), |
| 165 | + schema: { |
| 166 | + model: { |
| 167 | + fields: { |
| 168 | + Id: { type: "number" }, |
| 169 | + FirstName: { type: "string" }, |
| 170 | + LastName: { type: "string" }, |
| 171 | + City: { type: "string" }, |
| 172 | + BirthDate: { type: "date" } |
| 173 | + } |
| 174 | + } |
| 175 | + }, |
| 176 | + pageSize: 10 |
| 177 | + }, |
| 178 | + pageable: true, |
| 179 | + height: 400, |
| 180 | + toolbar: ["create"], |
| 181 | + columns: [ |
| 182 | + { field: "Id", width: "60px" }, |
| 183 | + { field: "FirstName", title: "First Name" }, |
| 184 | + { field: "LastName", title: "Last Name" }, |
| 185 | + { field: "City" }, |
| 186 | + { field: "BirthDate", template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #' }, |
| 187 | + { command: [ |
| 188 | + { |
| 189 | + name: "edit", |
| 190 | + text: { // sets the text of the "Edit", "Update" and "Cancel" buttons |
| 191 | + edit: "CustomEdit", |
| 192 | + update: "CustomUpdate", |
| 193 | + cancel: "CustomCancel" |
| 194 | + } |
| 195 | + }, |
| 196 | + { name: "destroy", text: "Destroy" } // sets the text of the "Delete" button |
| 197 | + ], |
| 198 | + // sets the title and the width of the commands column |
| 199 | + title: " ", |
| 200 | + width: "300px" |
| 201 | + } |
| 202 | + ], |
| 203 | + editable: "inline" |
| 204 | + }); |
| 205 | +
|
| 206 | + $("#grid-popup-edit").kendoGrid({ |
| 207 | + dataSource: { |
| 208 | + data: createRandomData(30), |
| 209 | + schema: { |
| 210 | + model: { |
| 211 | + fields: { |
| 212 | + Id: { type: "number" }, |
| 213 | + FirstName: { type: "string" }, |
| 214 | + LastName: { type: "string" }, |
| 215 | + City: { type: "string" }, |
| 216 | + BirthDate: { type: "date" } |
| 217 | + } |
| 218 | + } |
| 219 | + }, |
| 220 | + pageSize: 10 |
| 221 | + }, |
| 222 | + pageable: true, |
| 223 | + height: 400, |
| 224 | + toolbar: ["create"], |
| 225 | + columns: [ |
| 226 | + { field: "Id", width: "60px" }, |
| 227 | + { field: "FirstName", title: "First Name" }, |
| 228 | + { field: "LastName", title: "Last Name" }, |
| 229 | + { field: "City" }, |
| 230 | + { field: "BirthDate", template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #' }, |
| 231 | + { command: [ |
| 232 | + { |
| 233 | + name: "edit", |
| 234 | + text: { // sets the text of the "Edit", "Update" and "Cancel" buttons |
| 235 | + edit: "CustomEdit", |
| 236 | + update: "CustomUpdate", |
| 237 | + cancel: "CustomCancel" |
| 238 | + } |
| 239 | + }, |
| 240 | + { name: "destroy", text: "Destroy" } // sets the text of the "Delete" button |
| 241 | + ], |
| 242 | + // sets the title and the width of the commands column |
| 243 | + title: " ", |
| 244 | + width: "300px" |
| 245 | + } |
| 246 | + ], |
| 247 | + editable: "popup" |
| 248 | + }); |
| 249 | + }); |
| 250 | +
|
| 251 | + var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"], |
| 252 | + lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White"], |
| 253 | + cities = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "Philadelphia", "New York", "Seattle", "London", "Boston"], |
| 254 | + titles = ["Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer", |
| 255 | + "Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", "Chief Execute Officer"], |
| 256 | + birthDates = [new Date("1948/12/08"), new Date("1952/02/19"), new Date("1963/08/30"), new Date("1937/09/19"), new Date("1955/03/04"), new Date("1963/07/02"), new Date("1960/05/29"), new Date("1958/01/09"), new Date("1966/01/27"), new Date("1966/03/27")]; |
| 257 | +
|
| 258 | + function createRandomData(count) { |
| 259 | + var data = [], |
| 260 | + now = new Date(); |
| 261 | + for (var i = 0; i < count; i++) { |
| 262 | + var firstName = firstNames[Math.floor(Math.random() * firstNames.length)], |
| 263 | + lastName = lastNames[Math.floor(Math.random() * lastNames.length)], |
| 264 | + city = cities[Math.floor(Math.random() * cities.length)], |
| 265 | + title = titles[Math.floor(Math.random() * titles.length)], |
| 266 | + birthDate = birthDates[Math.floor(Math.random() * birthDates.length)], |
| 267 | + age = now.getFullYear() - birthDate.getFullYear(), |
| 268 | + isCustomer = ((i%3) == 0) ? true : false; |
| 269 | +
|
| 270 | + data.push({ |
| 271 | + Id: i + 1, |
| 272 | + FirstName: firstName, |
| 273 | + LastName: lastName, |
| 274 | + City: city, |
| 275 | + Title: title, |
| 276 | + BirthDate: birthDate, |
| 277 | + Age: age, |
| 278 | + IsCustomer: isCustomer |
| 279 | + }); |
| 280 | + } |
| 281 | + return data; |
| 282 | + } |
| 283 | + </script> |
| 284 | +``` |
| 285 | + |
| 286 | +## See Also |
| 287 | + |
| 288 | +* [Grid API Reference](/api/javascript/ui/grid) |
| 289 | +* [Grid Batch Editing (Demo)](https://demos.telerik.com/kendo-ui/grid/editing) |
| 290 | +* [Grid Inline Editing (Demo)](https://demos.telerik.com/kendo-ui/grid/editing-inline) |
| 291 | +* [Grid Popup Editing (Demo)](https://demos.telerik.com/kendo-ui/grid/editing-popup) |
0 commit comments