استفاده از Kendo UI templates
نویسنده: وحید نصیری
تاریخ: ۱۳۹۳/۰۸/۱۸ ۸:۵
آدرس: www.dntips.ir
| مطالب | ۳۶۹۴ |
| نویسندگان | ۲۷۶ |
| گروههای مطالب | ۱۰۲۴ |
| نقشههای راه | ۱۱۹ |
| دورهها | ۱۴ |
| اشتراکها | ۱۷۹۱۴ |
columns: [
{
field: "IsAvailable", title: "موجود است",
template: '<input type="checkbox" #= IsAvailable ? checked="checked" : "" # disabled="disabled" ></input>'
}
] <!--دریافت اطلاعات از منبع محلی-->
<script id="javascriptTemplate" type="text/x-kendo-template">
<ul>
# for (var i = 0; i < data.length; i++) { #
<li>#= data[i] #</li>
# } #
</ul>
</script>
<div id="container1"></div>
<script type="text/javascript">
$(function () {
var data = ['User 1', 'User 2', 'User 3'];
var template = kendo.template($("#javascriptTemplate").html());
var result = template(data); //Execute the template
$("#container1").html(result); //Append the result
});
</script> namespace KendoUI04.Models
{
public class Product
{
public int Id { set; get; }
public string Name { set; get; }
public decimal Price { set; get; }
public bool IsAvailable { set; get; }
}
} using System.Collections.Generic;
using System.Linq;
using System.Web.Http;
using KendoUI04.Models;
namespace KendoUI04.Controllers
{
public class ProductsController : ApiController
{
public IEnumerable<Product> Get()
{
return ProductDataSource.LatestProducts.Take(10);
}
}
} <!--دریافت اطلاعات از سرور-->
<div>
<div id="container2"><ul></ul></div>
</div>
<script id="template1" type="text/x-kendo-template">
<li> #=Id# - #:Name# - #=kendo.toString(Price, "c")#</li>
</script>
<script type="text/javascript">
$(function () {
var producatsTemplate1 = kendo.template($("#template1").html());
var productsDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "api/products",
dataType: "json",
contentType: 'application/json; charset=utf-8',
type: 'GET'
}
},
error: function (e) {
alert(e.errorThrown);
},
change: function () {
$("#container2 > ul").html(kendo.render(producatsTemplate1, this.view()));
}
});
productsDataSource.read();
});
</script> /// <reference path="jquery.min.js" /> /// <reference path="kendo.all.min.js" />
Tools menu –> Options -> Text Editor –> JavaScript –> Intellisense –> References
Template:
@Html.ActionLink("#=Name #", "Index", "Home").ToHtmlString(), #= productDetails(data) #
<script>
function productDetails(product) {
var action = '@Url.Action("ProductDetails", "Product")';
var html = kendo.format("<a href='{0}/{1}'>Show Product Details</a>",
action,
product.ProductID
);
return html;
}
</script> @Html.ActionLink("#=Name #", "Index", "Home").ToHtmlString(), columns: [
{ field: "Id", title: "id" },
{
field: "Name", title: "Product Name",
template: "<a href='@Url.Action("test", "Home")/#=Id#'>#= Name #</a>"
}, <a href="/">Test</a>