Telerik (Kendoui) Common controls use

Recently contacted the use of Kendoui, in the project side learning side use, in order to be able to use it later to small remember (here is used for ASP. NET MVC, in fact, I think with JS method more flexible, but MVC more concise)

1. The most commonly used estimate is the use of the grid . From the project to find a more representative.

@ (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 ("Publish Time"). 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 historical version"). Headerhtmlattributes (New {style = "text-align:center"}).                       Htmlattributes (New {style = "text-align:center"}); Columns. Bound (""). Clienttemplate ("#=addversion (ID) #"). Title ("new"). Headerhtmlattributes (New {style = "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")//plus the role must be a software administrator or a system administrator to process {C.custom ( ). Name ("new"). Htmlattributes (New {@onClick = "add (); return false; "}"); }        })        . Editable (E = {e.displaydeleteconfirmation ("OK 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 (i.e. action name) </span><span style= "font-family:arial, Helvetica, Sans-serif;" > "," Put the controller's name Here "). Data ("Here is a JS-put name used to query the grid for parameters") </span>. Destroy (update = update. Action ("Method name (i.e. action name)", "Place Controller's name here"). Model (model = model). Id (M = m.id))))

Here are some usage, save time for development to find the usage here

(1). In the editable. Editable (E = {e.displaydeleteconfirmation ("OK to delete? "), if the deletion method is applied, the prompt is in English when it is deleted, and changed to Chinese prompt

(2). Clienttemplate ("#=load (ID) #") Custom template. Sometimes you want to define your own presentation style, for example, to make the column a hyperlink.

Using the method, you can spell directly in the template, but I am accustomed to write only a method name, and then in JS to define the method:

Document download column item format    function load (ID) {        return "<a href= ' javascript:void (0) ' onclick= ' loaddocument (\" "+ ID +" \ ") ' & gt; Download </a> ";    }

(3) columns.command (Command = command). Custom ("Show"). Click ("Edit"). Text ("Modify"). Htmlattributes (New {style = "height:30px; width:50px; Valign:middle; "})). Width (80);

For we are accustomed to use the JS method with Ajax to achieve some of their own processing, then we can customize the button and set the method. For example, the Edit method is used here,

(4) format ("{0:YYYY-MM-DD}") Defines the class field time display formats, nothing to say, as we use Easyui, just the Easyui in the Farmat part of the display function is placed in the template. I don't really use format here, just simple formatting.

(5) If the use of the added additions and deletions to the method, then you can define these methods in DataSource, such as delete function:. Destroy (update = update. Action ("delete", "Document"). Model (model = model). Id (M = m.id))

There's an explanation, here's the update. Action corresponds to find the Controller and action, or you can use update. The URL () writes the entire path of the action directly. The parameters are passed in the following model.

In addition, if you pass parameters to the background, you can use Kendoui's own object [Datasourcerequest]datasourcerequest request to receive parameters.

Next, let's talk about the use 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 btn-sm blue", @style = "font-size:13px;"}))

In general, you'll know what that means. If you do not define an ID in Htmlattributes, then 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")

And this button also found a feature, if you do not define the type of button, then the default will be Sumit type, so each click on the button will be submitted again, if you have more than one of these buttons in the form table, then you will encounter problems, so here I define the type of button , which means there is no commit concept.

(3) TextBox

  @Html. Kendo (). Textboxfor (model = model). Epname). Htmlattributes (New {placeholder = "Please fill in name", required = "required", Validationmessage = "required field", style = "width:120px;"})

This is nothing to say, it's a textbox. The verification code is also attached after seeing the verification.

var container = $ ("#formExpertInfo");//form ID note to introduce validation JS        kendo.init (container);        Container.kendovalidator ({            rules: {            }        });

(4) ComboBox

@ (Html.kendo (). ComboBox (). Name ("Projectset"). Filter ("contains"). Placeholder ("Please select"). DataTextField ("Text"). DataValueField ("Value"). BindTo (VIEWBAG.XXXX))

You can bind the values passed in the background, such as the value of the viewbag used here. 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 a ComboBox.

(6) Date control DatePicker

   @ (Html.kendo (). DatePicker (). Name ("XXXXXX"). Format ("Yyyy-mm-dd"). Value (MODEL.XXXXXX))

(7) Numeric control 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 is the control of two decimal places. Step refers to the growth interval

(8) Upload control Upload

@ (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 in the corresponding controller and action, the same can be changed here to URL, just to use Saveurl.

The Autoupload property is to control whether the automatic upload. Multiple represents whether multiple file uploads are supported.

It can take a lot of events, where the Onsuccess event is used, and the save path to return the file after uploading is saved to the table. If you want to pass parameters to the file Save method, you can use the Upload method.

(9) Tree control TreeView

@ (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 trees here are simpler than the Easyui, and the front-desk code will do the same.

The background is only used to write a method to receive the ID.

Public Jsonresult getexpertlist (string id)        {//defines the model of the tree structure, which generally includes several fields such as Id,type,parentid,haschildren

            if (id = = null)            {              //When the ID is empty, the top-level menu            }            else            {               is to return a subkey with the ID of ParentID.            }            Return Json (Lstresult, jsonrequestbehavior.allowget);        }

Here is the asynchronous load, and if it's all loaded, recursively take the subkey in else.

in fact, in the project will also encounter such a problem, this is only a few more controls, I hope to help you.

Telerik (Kendoui) Common controls use