Telerik Kendo UI [2]

On csdn, there is a blog about the web hosting software, which contains the common usage of the Kendo UI. I will not repeat it here.

Due to the framework design requirements, the background uses spring and the foreground uses Kendo UI to build the page. In order to speed up fast sending and the underlying compatibility, it is incumbent upon us to continue to use hibernate as a bridge for database communication. There are more examples of spring over the Internet, mainly using spring annotation MVC configuration and JSON data Cer.

After preliminary use, it is found that the design of the Kendo UI is extremely powerful. Its mvvm features are combined with the MVC features of spring, such as list presentation when used in conjunction with the hibernate development system, almost no query code is required.

In addition, the culture has been hosted on GitHub and can be used directly after configuration. For date formatting, I tried multiple times and used simple settings in the Chinese file to solve the global date setting problem.

The following describes in detail how to achieve the above results:

I. Culture

My habit is to get the control no matter where it is. The first is to check whether the demo is dazzling or the amount of code. The second is to check the international support and whether the Chinese-language dictionary files and other features can be supported, if you cannot directly set Chinese as a global feature, but must change its usage, you can leave it alone. The Kendo UI has passed both of my customs. The following describes the specific practices.

Go to the following URL and download the Kendo. Messages. zh-CN.js file, which is the Chinese internationalization file of the Kendo UI.

Https://github.com/telerik/kendo-ui-core/tree/master/src/messages

The content is as follows:

/* Flatcolorpicker messages */If (Kendo. UI. flatcolorpicker) {Kendo. UI. flatcolorpicker. prototype. options. messages = $. extend (true, Kendo. UI. flatcolorpicker. prototype. options. messages, {"Apply": "OK", "cancel": "cancel"});}/* colorpicker messages */If (Kendo. UI. colorpicker) {Kendo. UI. colorpicker. prototype. options. messages = $. extend (true, Kendo. UI. colorpicker. prototype. options. messages, {"Apply": "OK", "ca Ncel ":" cancel "});}/* columnmenu messages */If (Kendo. UI. columnmenu) {Kendo. UI. columnmenu. prototype. options. messages = $. extend (true, Kendo. UI. columnmenu. prototype. options. messages, {"sortascending": "ASCENDING", "sortdescending": "descending", "filter": "filter", "columns": "column ", "Done": "complete", "Settings": "column Settings", "Lock": "Lock", "unlock": "unlock "});} /* Editor messages */If (Kendo. UI. editor) {Kendo. UI. editor. prototype. options. Messages = $. extend (true, Kendo. UI. editor. prototype. options. messages, {"bold": "bold", "italic": "italic", "underline": "underline", "strikethrough": "strikethrough", "superscript ": "superscript", "subscript": "subscript", "justifycenter": "center", "justifyleft": "Left alignment", "justifyright": "right alignment ", "justifyfull": "alignment at both ends", "insertunorderedlist": "insert unordered list", "insertorderedlist": "insert ordered list", "indent": "add indent ", "outdent": "reduce indentation", "CreateLink": "insert link "," Unlink ":" Remove link "," insertimage ":" insert image "," insertfile ":" insert file "," inserthtml ":" insert HTML "," viewhtml ": "view HTML", "fontname": "select font", "fontnameinherit": "(inherited font)", "fontsize": "select font size", "fontsizeinherit ": "(inherited font size)", "formatblock": "formatblock", "formatting": "formatting", "forecolor": "color", "backcolor ": "background color", "style": "style", "emptyfolder": "empty folder", "uploadfile": "Upload", "orderby": "sorting condition :", "orderbysize": "size", "orderb Yname ":" name "," invalidfiletype ":" The selected file \ "{0} \" is invalid. The Supported file type is {1 }. "," Deletefile ": 'Are you sure you want to delete \" {0 }\"? ', "Overwritefile":' The current folder already has a file named \ "{0} \". Are you sure you want to overwrite it? ', "Directorynotfound": "This folder cannot be found", "imagewebaddress": "image address", "imagealttext": "Alternative text", "imagewidth": "width (PX) "," imageheight ":" height (PX) "," filewebaddress ":" file address "," filetitle ":" title "," linkwebaddress ":" link address ", "linktext": "link text", "linktooltip": "link prompt", "linkopeninnewwindow": "Open in new window", "dialogupdate": "Upload ", "dialoginsert": "insert", "dialogbuttonseparator": "or", "dialogcancel": "cancel", "createtable": "CREATE TABLE "," Addcolumnleft ":" add column on the left "," addcolumnright ":" add column on the right "," addrowabve ":" add row above "," addrowbelow ": "Add row below", "deleterow": "Delete row", "deletecolumn": "delete column"}) ;}/ * filebrowser messages */If (Kendo. UI. filebrowser) {Kendo. UI. filebrowser. prototype. options. messages = $. extend (true, Kendo. UI. filebrowser. prototype. options. messages, {"uploadfile": "Upload", "orderby": "sorting condition", "orderbyname": "name", "orderbysize": "size", "Di Rectorynotfound ":" This folder is not found "," emptyfolder ":" folder is empty "," deletefile ": 'Are you sure you want to delete \" {0 }\"? ', "Invalidfiletype": "The selected file \" {0} \ "is invalid. The Supported file type is {1 }. "," Overwritefile ":" The current folder already has a file named \ "{0} \". Are you sure you want to overwrite it? "," Dropfileshere ":" drag the file to be uploaded here "," Search ":" Search "});}/* filtermenu messages */If (Kendo. UI. filtermenu) {Kendo. UI. filtermenu. prototype. options. messages = $. extend (true, Kendo. UI. filtermenu. prototype. options. messages, {"info": "display rows that meet the following conditions", "istrue": "true", "isfalse": "false", "filter ": "filter", "clear": "clear", "and": "and", "or": "or", "selectvalue": "-select -", "operator": "operator", "value": "value", "cancel": "cancel "});}/ * Filter menu operator messages */If (Kendo. UI. filtermenu) {Kendo. UI. filtermenu. prototype. options. operators = $. extend (true, Kendo. UI. filtermenu. prototype. options. operators, {"string": {"EQ": "equal to", "NEQ": "not equal to", "startswith": "starting with", "contains ": "include", "doesnotcontain": "does not contain", "endswith": "ends with"}, "Number": {"EQ": "equal to", "NEQ ": "not equal to", "GTE": "greater than or equal to", "GT": "greater than", "LTE": "less than or equal to", "lt": "less "}, "date ":{ "EQ": "equal to", "NEQ": "not equal to", "GTE": "greater than or equal to", "GT": "greater than", "LTE ": "less than or equal to", "lt": "less than"}, "Enum": {"EQ": "equal to", "NEQ": "not equal "}});} /* Gantt messages */If (Kendo. UI. gantt) {Kendo. UI. gantt. prototype. options. messages = $. extend (true, Kendo. UI. gantt. prototype. options. messages, {"views": {"day": "day", "Week": "Week", "month": "month"}, "actions ": {"APPEND": "add task", "addchild": "add subtask", "insertbefore": "add to front", "inse Rtafter ":" add to back "});}/* grid messages */If (Kendo. UI. grid) {Kendo. UI. grid. prototype. options. messages = $. extend (true, Kendo. UI. grid. prototype. options. messages, {"commands": {"cancel": "cancel", "canceledit": "cancel", "CREATE": "add", "Destroy": "delete ", "edit": "edit", "save": "save", "select": "select", "Update": "Update"}, "editable ": {"canceldelete": "cancel", "Confirmation": "Are you sure you want to delete it? "," Confirmdelete ":" delete "});}/* groupable messages */If (Kendo. UI. groupable) {Kendo. UI. groupable. prototype. options. messages = $. extend (true, Kendo. UI. groupable. prototype. options. messages, {"empty": "The drag column title is displayed here by column combination"});}/* numerictextbox messages */If (Kendo. UI. numerictextbox) {Kendo. UI. numerictextbox. prototype. options = $. extend (true, Kendo. UI. numerictextbox. prototype. options, {"uparrowtext": "add "," Downarrowtext ":" "});}/* pager messages */If (Kendo. UI. PAGER) {Kendo. UI. pager. prototype. options. messages = $. extend (true, Kendo. UI. pager. prototype. options. messages, {"display": "display entries {0}-{1} total {2}", "EMPTY": "No record to display. "," Page ":" page "," of ":" {0} "," itemsperpage ":" Every page "," first ":" Homepage ", "last": "last page", "Next": "Next page", "previous": "Previous Page", "refresh": "refresh", "morepages ": "More... "});}/* specify tgrid messages */If (Kendo. UI. extends tgrid) {Kendo. UI. required tgrid. prototype. options. messages = $. extend (true, Kendo. UI. required tgrid. prototype. options. messages, {"measurefields": "Drag and Drop data fields here", "columnfields": "Drag and Drop column fields here", "rowfields": "Drag and Drop row fields here "});} /* recurrenceeditor messages */If (Kendo. UI. recurrenceeditor) {Kendo. UI. recurrenceeditor. prototype. options. messages = $. extend (true, Kendo. UI. recurrenceeditor. prototype. options. messages, {"frequencies": {"never": "never", "hourly": "Every hour", "Daily": "Every Day", "Weekly ": "Weekly", "Monthly": "Monthly", "yearly": "annual"}, "hourly": {"repeatevery": "recurrence:", "interval ": "Hour"}, "Daily": {"repeatevery": "Repetition Period:", "interval": "day"}, "Weekly": {"interval ": "Week", "repeatevery": "repetition cycle:", "repeaton": "repetition at:"}, "Monthly": {"repeatevery": "repetition cycle :", "repeaton": "repetition:", "interval": "month", "day": "date"}, "yearly": {"repeatevery": "repetition cycle: "," repeaton ":" repetition: "," interval ":" year "," of ":" month: "}," end ": {" label ": "Deadline:", "cancelabel": "Deadline", "never": "never", "after": "repeat", "occurrence": "after ", "On": "stops at"}, "offsetpositions": {"first": "first", "second": "second", "third": "third ", "Fourth": "fourth", "last": "last"}, "weekdays": {"day": "day", "weekday": "workday ", "Weekend": "Weekend"});}/* scheduler messages */If (Kendo. UI. schedo) {Kendo. UI. scheduler. prototype. options. messages = $. extend (true, Kendo. UI. scheduler. prototype. options. messages, {"today": "Today", "save": "save", "cancel": "cancel", "Destroy": "delete", "deletewindowtitle ": "Delete event", "ariaslotlabel": "select from {0: t} to {1: t}", "ariaeventlabel": "{0} on {1: d} At {2: t} "," views ": {" day ":" day "," Week ":" Week "," workweek ":" workday ", "agenda": "calendar", "month": "month"}, "recurrencemessages": {"deletewindowtitle": "delete cycle entries", "deletewindowoccurrence ": "Delete current event", "deletewindowseries": "delete sequence", "editwindowtitle": "Modify cycle entry", "edit1_woccurrence": "modify current event", "editwindowseries ": "Modify sequence"}, "Editor": {"title": "title", "Start": "Start", "end": "end", "alldayevent ": "all-day events", "Description": "Description", "repeat": "DUPLICATE", "timezone": "", "starttimezone": "Start Time Zone ", "endtimezone": "End Time Zone", "separatetimezones": "Use an independent start time and End Time Zone", "timezoneeditortitle": "Time Zone", "timezoneeditorbutton": "Time Zone ", "timezonetitle": "Select time zone", "notimezone": "NONE", "editortitle": "Event" }});}/* slider messages */If (Kendo. UI. slider) {Kendo. UI. slider. prototype. options = $. extend (true, Kendo. UI. slider. prototype. options, {"increasebuttontitle": "added", "decreasebuttontitle": "reduced"}) ;}/ * Treeview messages */If (Kendo. UI. treeview) {Kendo. UI. treeview. prototype. options. messages = $. extend (true, Kendo. UI. treeview. prototype. options. messages, {"loading": "loading... "," requestfailed ":" loading failed "," retry ":" retry "});}/* upload messages */If (Kendo. UI. upload) {Kendo. UI. upload. prototype. options. localization = $. extend (true, Kendo. UI. upload. prototype. options. localization, {"select": "select... "," cancel ":" cancel "," retry ":" retry "," Remove ":" Remove "," uploadselectedfiles ":" upload files "," dropfileshere ": "drag the file to be uploaded here", "statusuploading": "uploading", "statusuploaded": "uploaded", "statuswarning": "warning", "statusfailed ": "failed", "headerstatusuploading": "upload... "," headerstatusuploaded ":" finished "});}/* validator messages */If (Kendo. UI. validator) {Kendo. UI. validator. prototype. options. messages = $. extend (true, Kendo. UI. validator. prototype. options. messages, {"required": "{0} is required", "pattern": "{0} illegal", "min ": "{0} should be greater than or equal to {1}", "Max": "{0} should be less than or equal to {1}", "Step ": "{0} illegal", "email": "{0} is not a legal email address", "url": "{0} is not a legal URL", "date ": "{0} is not a valid date"});} If (date) {date. prototype. toisostring = function () {return Kendo. tostring (this, "yyyy-mm-dd hh: mm: SS ");};}

Note that the last if (date) is added by myself. The main purpose is to solve the serialization problem of the time date object obtained by the date control. When the date object communicates to the background, because the background is spring MVC Framework, the parameters are all transmitted through Kendo. stringify (XX) method, or JSON. to serialize the stringify (XX) method, the toisostring method of the date object is called by default to format the date object. By Rewriting the toisostring of the date object in the cultural file, it is compatible with spring background MVC and transmits the date object. The format is consistent with the date format of the spring background mvc json view er. In this way, the date type object can be ensured, and the frontend and backend transmission is normal. The original file downloaded from GitHub does not contain this content.

How can I use an international file? Very simple. Just introduce it directly in the page header!

<%@ page language="java" pageEncoding="UTF-8"%><%@ page contentType="text/html;charset=UTF-8"%><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><!DOCTYPE html >


Note that the last three lines of the 



The gridview effect after the Chinese version is shown in the preceding two figures. It works very well and is global and carefree! Please use it!
Let's take a look at the combined use of the calendar control and the gridview, and configure the filter effect:
 
Chinese culture is so simple!






Telerik Kendo UI [2]