Commonly used telerik (kendoUI) controls, telerikkendoui

Commonly used telerik (kendoUI) controls, telerikkendoui

Recently, I used kendoUI to learn and use it in projects. For later use, I will make a note (here I use asp.net MVC, in fact, I think the js method is more flexible, but MVC is more concise)

1. The most common estimation isGrid. Find a representative project.

@ (Html. kendo (). grid <CustomsProjectEx. models. FL_File> (). name ("DocumentGrid "). columns (columns => {columns. bound (c => c. field name ). title ("file name "). headerHtmlAttributes (new {style = "text-align: center "}). htmlAttributes (new {style = "text-align: center"}); columns. bound (c => c. field name ). title ("Document Type "). headerHtmlAttributes (new {style = "text-align: center "}). htmlAttributes (new {style = "text-align: center "}); Columns. bound (c => c. field name ). title ("file version "). format ("{0: 0. 00 }"). headerHtmlAttributes (new {style = "text-align: center "}). htmlAttributes (new {style = "text-align: center"}); columns. bound (c => c. field name ). title ("release date "). format ("{0: yyyy-MM-dd }"). headerHtmlAttributes (new {style = "text-align: center "}). htmlAttributes (new {style = "text-align: center"}); columns. bound (""). clientTemplate ("# = load (ID )#"). title ("Document Download "). headerHtmlAttributes (new {style = "text-align: center "}). htmlAttributes (new {style = "text-align: center"}); columns. bound (""). clientTemplate ("# = BrowseHistory (ID )#"). title ("view previous versions "). headerHtmlAttributes (new {style = "text-align: center "}). htmlAttributes (new {style = "text-align: center"}); columns. bound (""). clientTemplate ("# = AddVersion (ID )#"). title ("new "). headerHtmlAttributes (new {styl E = "text-align: center "}). htmlAttributes (new {style = "text-align: center"}); columns. command (command => command. custom ("Show "). click ("edit "). text ("modify "). htmlAttributes (new {style = "height: 30px; width: 50px; valign: middle ;"})). width (80); columns. command (command => command. destroy (). text ("delete ")). width (90 );}). toolBar (c => {if (ViewBag. isSoftwareAdmin = "true") // The add role must be a software administrator or a system administrator. cust Om (). name ("new "). htmlAttributes (new {@ onClick = "add (); return false ;"});}}). editable (e => {e. displayDeleteConfirmation ("are you sure you want to delete? ");}). Sortable (sort => sort. enabled (false )). pageable (pageable => pageable. refresh (true ). pageSizes (true ). buttonCount (5 )). dataSource (dataSource => dataSource. ajax (). read (read => read. action ("<span style =" font-family: Arial, Helvetica, sans-serif; "> method name (that is, action name) </span> <span style = "font-family: Arial, Helvetica, sans-serif;"> "," Name of controller "). data ("here is the name of a js method used to query and transmit parameters for grid") </span>. destroy (update => update. action ("method name (that is, action name)", "Name of controller ")). model (model => model. id (m => m. ID ))))

Let's talk about some usage. Find the usage here for development to save time.

(1). Editable. Editable (e => {e. DisplayDeleteConfirmation ("are you sure you want to delete? ");}). If the built-in deletion method is applied, the message" English "is displayed during deletion. After modification, the prompt" Chinese "appears.

(2). ClientTemplate ("# = load (ID) #") Custom template. Sometimes you want to define your own representation style. For example, you want to change this column to a hyperlink.

You can use the method directly in the template, but I am used to writing only one method name, and then define the method in js:

 

// Format the function load (id) {return "<a href = 'javascript: void (0) 'onclick = 'loaddocument (\ "" + id + "\") '> download </a> ";}

(3) columns. command (command => command. custom ("Show "). click ("edit "). text ("modify "). htmlAttributes (new {style = "height: 30px; width: 50px; valign: middle ;"})). width (80 );

We are used to using js methods to implement some of our own processing, so we can customize buttons and set methods. For example, the edit method is used here,

(4) Format ("{0: yyyy-MM-dd}") defines the time display Format of class fields, just as we use easyui, I just put some of the display functions in farmat in easyui into the template. I am not using the Format here, but it is simple to Format.

(5) If the built-in addition, deletion, and modification methods are used, you can define these methods in datasource. For example, the deletion function :. destroy (update => update. action ("delete", "Document ")). model (model => model. id (m => m. ID ))

As explained above, update. Action corresponds to the controller and action. You can also use update. Url () to directly write the entire path of the action. Parameters in the Model.

In addition, after passing parameters to the background, you can use kendoui's own object [DataSourceRequest] DataSourceRequest request to receive parameters.

Next, let's talk about the usage of other controls.

(2)Button

@ (Html. kendo (). button (). name ("btnSearch "). content ("query <I class = 'fa fa-search'> </I> "). events (ev => ev. click ("queryGrid ")). htmlAttributes (new {@ class = "btn-sm blue", @ style = "font-size: 13px ;"}))

In general, you will know what it means. If you do not define an id in HtmlAttributes, the id will be the name by default.

@ Html. kendo (). button (). name ("SelectPerson "). content ("select... "). events (c => c. click ("addExpert ")). htmlAttributes (new {type = "button "}). enable (ViewBag. type! = "Show ")

In addition, this button also finds a feature. If the button type is not defined, it will be the sumit type by default, so it will be submitted every time you click the button, if you use multiple buttons in the form, you will encounter problems. Therefore, I have defined the type as "button", indicating that there is no submission concept.

(3) TextBox

@ Html. kendo (). textBoxFor (model => model. EPName ). htmlAttributes (new {placeholder = "please fill in the name", required = "required", validationmessage = "required field", style = "width: 120px ;"})

This is nothing to say. It is a textbox. After seeing the verification, the verification code is also attached.

Var container = $ ("# formExpertInfo"); // The Form id must be introduced to verify js kendo. init (container); container. kendoValidator ({rules :{}});

(4) ComboBox

@ (Html. kendo (). comboBox (). name ("ProjectSet "). filter ("contains "). placeholder ("select "). dataTextField ("Text "). dataValueField ("Value "). bindTo (ViewBag. XXXX ))

You can bind a value passed by the background, for example, the value passed by viewBag. It can also be read asynchronously.

(5) DropDownList

  @(Html.Kendo().DropDownListFor(model => model.FileType).Name("FileType").AutoBind(true).Filter("contains").DataTextField("Text").DataValueField("Value").BindTo(ViewBag.XXXX))

This control is basically the same as combobox.

(6) date Control DatePicker

   @(Html.Kendo().DatePicker().Name("XXXXXX").Format("yyyy-MM-dd").Value(Model.XXXXXX))

(7) numeric controls NumericTextBox

@ (Html. kendo (). numericTextBox <double> (). value (Model. version ). name ("Version "). step (0.01 ). min (0 ). format ("n2 "). htmlAttributes (new {required = "required", validationmessage = "required field "}))

Format controls two decimal places. Step refers to the Growth Interval

(8) Upload ControlUpload

 @(Html.Kendo().Upload().Name("files").Async(a => a.Save("Upload", "Document").Remove("Remove", "Document").AutoUpload(false)).Multiple(false).Events(e => e.Success("onSuccess").Upload(@<text>                            function(e) {                            e.data = { id:'@ViewBag.projectId',documentId:'@Model.ID' };                            }

This is the upload control. save and remove correspond to controller and action. Similarly, you can change it to a url, but you only need to use saveurl.

The AutoUpload attribute controls whether automatic upload is performed. Multiple indicates whether Multiple files can be uploaded.

There can be many events. Here the onSuccess event is used, and the Save path of the file returned after the upload is saved to the table. If you want to transmit parameters to the file storage method, you can use the Upload method.

(9) tree controlsTreeView

@( Html.Kendo().TreeView().Name("treeview").HtmlAttributes(new { @class = "demo-section" }).DataTextField("Name").LoadOnDemand(true) .DataSource(dataSource => dataSource.Read(read => read.Url("/xx/xx/xxx"))).Events(c => c.Select("SetSelectedValue")))

The tree here is simpler than easyui, and the front-end code is enough.

The background only needs to write a method to receive IDs.

Public JsonResult GetExpertList (string id) {// model that defines the tree structure, which generally includes fields such as id, type, parentid, and haschildren.

If (id = null) {// when id is null, It is the top-level menu} else {that is, it returns the subitem with this id as parentid. } Return Json (lstResult, JsonRequestBehavior. AllowGet );}

This is asynchronous loading. If it is all loaded, it recursively takes the subitem in else.

In fact, there will be such a problem in the project. This is just a few of the many controls that I want to help you.