www.dntips.ir
مطالب	۳۶۹۴
نویسندگان	۲۷۶
گروه‌های مطالب	۱۰۲۴
نقشه‌های راه	۱۱۹
دوره‌ها	۱۴
اشتراک‌ها	۱۷۹۱۴

عنوان:

‫کار با Kendo UI DataSource

نویسنده: وحید نصیری
تاریخ: ۱۳۹۳/۰۸/۱۵ ۲۲:۵
آدرس: www.dntips.ir

Kendo UI DataSource جهت تامین داده‌های سمت کلاینت ویجت‌های مختلف KendoUI طراحی شده‌است و به عنوان یک اینترفیس استاندارد قابل استفاده توسط تمام کنترل‌های داده‌ای Kendo UI کاربرد دارد. Kendo UI DataSource امکان کار با منابع داده محلی، مانند اشیاء و آرایه‌های جاوا اسکریپتی و همچنین منابع تامین شده از راه دور، مانند JSON، JSONP و XML را دارد. به علاوه توسط آن می‌توان اعمال ثبت، ویرایش و حذف اطلاعات، به همراه صفحه بندی، گروه بندی و مرتب سازی داده‌ها را کنترل کرد.

استفاده از منابع داده محلی
در ادامه مثالی را از نحوه‌ی استفاده از یک منبع داده محلی جاوا اسکریپتی، مشاهده می‌کنید:

    <script type="text/javascript">
        $(function () {
            var cars = [
                { "Year": 2000, "Make": "Hyundai", "Model": "Elantra" },
                { "Year": 2001, "Make": "Hyundai", "Model": "Sonata" },
                { "Year": 2002, "Make": "Toyota", "Model": "Corolla" },
                { "Year": 2003, "Make": "Toyota", "Model": "Yaris" },
                { "Year": 2004, "Make": "Honda", "Model": "CRV" },
                { "Year": 2005, "Make": "Honda", "Model": "Accord" },
                { "Year": 2000, "Make": "Honda", "Model": "Accord" },
                { "Year": 2002, "Make": "Kia", "Model": "Sedona" },
                { "Year": 2004, "Make": "Fiat", "Model": "One" },
                { "Year": 2005, "Make": "BMW", "Model": "M3" },
                { "Year": 2008, "Make": "BMW", "Model": "X5" }
            ];

            var carsDataSource = new kendo.data.DataSource({
                data: cars
            });

            carsDataSource.read();
            alert(carsDataSource.total());
        });
    </script>

در اینجا cars آرایه‌ای از اشیاء جاوا اسکریپتی بیانگر ساختار یک خودرو است. سپس برای معرفی آن به Kendo UI، کار با مقدار دهی خاصیت data مربوط به new kendo.data.DataSource شروع می‌شود.
ذکر new kendo.data.DataSource به تنهایی به معنای مقدار دهی اولیه است و در این حالت منبع داده مورد نظر، استفاده نخواهد شد. برای مثال اگر متد total آن‌را جهت یافتن تعداد عناصر موجود در آن فراخوانی کنید، صفر را بازگشت می‌دهد. برای شروع به کار با آن، نیاز است ابتدا متد read را بر روی این منبع داده مقدار دهی شده، فراخوانی کرد.

استفاده از منابع داده راه دور

در برنامه‌های کاربردی، عموما نیاز است تا منبع داده را از یک وب سرور تامین کرد. در اینجا نحوه‌ی خواندن اطلاعات JSON بازگشت داده شده از جستجوی توئیتر را مشاهده می‌کنید:

    <script type="text/javascript">
        $(function () {
            var twitterDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "http://search.twitter.com/search.json",
                        dataType: "jsonp",
                        contentType: 'application/json; charset=utf-8',
                        type: 'GET',
                        data: { q: "#kendoui" }
                    },
                    schema: { data: "results" }
                },
                error: function (e) {
                    alert(e.errorThrown.stack);
                }
            });
        });
    </script>

در قسمت transport، جزئیات تبادل اطلاعات با سرور راه دور مشخص می‌شود؛ برای مثال url ارائه دهنده‌ی سرویس، dataType بیانگر نوع داده مورد انتظار و data کار مقدار دهی پارامتر مورد انتظار توسط سرویس توئیتر را انجام می‌دهد. در اینجا چون صرفا عملیات خواندن اطلاعات صورت می‌گیرد، خاصیت read مقدار دهی شده‌است.
در قسمت schema مشخص می‌کنیم که اطلاعات JSON بازگشت داده شده توسط توئیتر، در فیلد results آن قرار دارد.

کار با منابع داده OData

علاوه بر فرمت‌های یاد شده، Kendo UI DataSource امکان کار با اطلاعاتی از نوع OData را نیز دارا است که تنظیمات ابتدایی آن به صورت ذیل است:

    <script type="text/javascript">
            var moviesDataSource = new kendo.data.DataSource({
                type: "odata",
                transport: {
                    read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
                },
                error: function (e) {
                    alert(e.errorThrown.stack);
                }
            });
        });
    </script>

همانطور که ملاحظه می‌کنید، تنظیمات ابتدایی آن اندکی با حالت remote data پیشین متفاوت است. در اینجا ابتدا نوع داده‌ی بازگشتی مشخص می‌شود و در قسمت transport، خاصیت read آن، آدرس سرویس را دریافت می‌کند.

یک مثال: دریافت اطلاعات از ASP.NET Web API

یک پروژه‌ی جدید ASP.NET را آغاز کنید. تفاوتی نمی‌کند که Web forms باشد یا MVC؛ از این جهت که مباحث Web API در هر دو یکسان است.
سپس یک کنترلر جدید Web API را به نام ProductsController با محتوای زیر ایجاد کنید:

using System.Collections.Generic;
using System.Web.Http;

namespace KendoUI02
{
    public class Product
    {
        public int Id { set; get; }
        public string Name { set; get; }
    }

    public class ProductsController : ApiController
    {
        public IEnumerable<Product> Get()
        {
            var products = new List<Product>();
            for (var i = 1; i <= 100; i++)
            {
                products.Add(new Product { Id = i, Name = "Product " + i });
            }
            return products;
        }
    }
}

در این مثال، هدف صرفا ارائه یک خروجی ساده JSON از طرف سرور است.
در ادامه نیاز است تعریف مسیریابی ذیل نیز به فایل Global.asax.cs برنامه اضافه شود تا بتوان به آدرس api/products در سایت، دسترسی یافت:

using System;
using System.Web.Http;
using System.Web.Routing;

namespace KendoUI02
{
    public class Global : System.Web.HttpApplication
    {
        protected void Application_Start(object sender, EventArgs e)
        {
            RouteTable.Routes.MapHttpRoute(
               name: "DefaultApi",
               routeTemplate: "api/{controller}/{id}",
               defaults: new { id = RouteParameter.Optional }
               );
        }
    }
}

در ادامه فایلی را به نام Index.html (یا در یک View و یا یک فایل aspx دلخواه)، محتوای ذیل را اضافه کنید:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Kendo UI: Implemeting the Grid</title>

    <link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/kendo.all.min.js" type="text/javascript"></script>
</head>
<body>

    <div id="report-grid"></div>
    <script type="text/javascript">
        $(function () {
            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.stack);
                },
                pageSize: 5,
                sort: { field: "Id", dir: "desc" }
            });

            $("#report-grid").kendoGrid({
                dataSource: productsDataSource,
                autoBind: true,
                scrollable: false,
                pageable: true,
                sortable: true,
                columns: [
                    { field: "Id", title: "#" },
                    { field: "Name", title: "Product" }
                ]
            });
        });
    </script>
</body>
</html>

- ابتدا فایل‌های اسکریپت و CSS مورد نیاز Kendo UI اضافه شده‌اند.
- گرید صفحه، در محل div ایی با id مساوی report-grid تشکیل خواهد شد.
- سپس DataSource ایی که به آدرس api/products اشاره می‌کند، تعریف شده و در آخر productsDataSource را توسط یک kendoGrid نمایش داده‌ایم.
- نحوه‌ی تعریف productsDataSource، در قسمت استفاده از منابع داده راه دور ابتدای بحث توضیح داده شد. در اینجا فقط دو خاصیت pageSize و sort نیز به آن اضافه شده‌اند. این دو خاصیت بر روی نحوه‌ی نمایش گرید نهایی تاثیر گذار هستند. pageSize تعداد رکورد هر صفحه را مشخص می‌کند و sort نحوه‌ی مرتب سازی را بر اساس فیلد Id و در حالت نزولی قرار می‌دهد.
- در ادامه، ابتدایی‌ترین حالت کار با kendoGrid را ملاحظه می‌کنید.
- تنظیم dataSource و autoBind: true (حالت پیش فرض)، سبب خواهند شد تا به صورت خودکار، اطلاعات JSON از مسیر api/products خوانده شوند.
- سه خاصیت بعدی صفحه بندی و مرتب سازی خودکار ستون‌ها را فعال می‌کنند.
- در آخر هم دو ستون گرید، بر اساس نام‌های خواص کلاس Product تعریف شده‌اند.

سورس کامل این قسمت را از اینجا می‌توانید دریافت کنید:
KendoUI02.zip

مطالب مشابه

مطالبصفحه بندی، مرتب سازی و جستجوی پویای اطلاعات به کمک Kendo UI Grid

مطالبرسم نمودار توسط Kendo Chart

مطالباستفاده از Kendo UI templates

مطالبفعال سازی عملیات CRUD در Kendo UI Grid

مطالبایجاد Drop Down List های آبشاری توسط Kendo UI

مطالبKendo UI MVVM

مطالباستفاده از Kendo UI TreeView به همراه یک منبع داده راه دور

مطالبفرمت کردن اطلاعات نمایش داده شده به کمک Kendo UI Grid

نظرات مطالبکار با Kendo UI DataSource

نظرات

ژوپیتر در ۱۳۹۳/۱۱/۰۹ ۱۰:۲۷

سلام
چرا زمان اجرا به جای نمایش اطلاعات گرید، پیام undefined داده می‌شود؟ بنده از MVC استفاده کردم و کاملا مطابق مقاله مسیریابی و ... را اعمال کردم.
- وحید نصیری در ۱۳۹۳/۱۱/۰۹ ۱۱:۱۰
  
  روی چه سطری پیام خطا دریافت کردید؟
  حین کار با کتابخانه‌های جاوا اسکریپتی باید مدام کنسول developer مرورگر را باز نگه دارید تا بتوانید خطاها را بهتر بررسی و دیباگ کنید.
  - ژوپیتر در ۱۳۹۳/۱۱/۱۱ ۹:۳
    
    خطا توسط error handler، گرفته می‌شود وقتی این بخش نیز حذف می‌شود مرورگر فقط منتظر دریافت اطلاعات از api/products می‌ماند و خطایی از کد گرفته نمی‌شود.
    - وحید نصیری در ۱۳۹۳/۱۱/۱۱ ۱۰:۳
      
      خطای 404 به معنای یافتن نشدن مسیر تنظیمی "url: "api/products در برنامه شما است.
      مطابق تصویر، مسیر home/api/product در حال جستجو است که به ریشه‌ی سایت اشاره نمی‌کند.
      - آیا در ASP.NET MVC از یک اکشن متد برای بازگرداندن لیست جی‌سون محصولات استفاده کرده‌اید؟ اگر بله، از مطلب «نحوه صحیح تولید Url در ASP.NET MVC» کمک بگیرید؛ مثلا آدرس آن چنین شکلی را پیدا خواهد کرد:
      
      @Url.Action("method_name", "Home")
      
      - اگر وب API است در یک برنامه‌ی MVC، از روش زیر استفاده کنید:
      
      '@Url.RouteUrl("DefaultApi", new { httproute = "", controller = "products" })'
      
      و البته فرض بر این است که مسیریابی DefaultApi پیشتر در برنامه‌ی شما ثبت شده‌است:
      
      routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } );
      - ژوپیتر در ۱۳۹۳/۱۱/۱۱ ۱۱:۸
        
        - ممنون؛ از وب API استفاده شده بود که با راهنمایی شما حل شد. ولی استفاده از خروجی Json کنترلر به‌نظرم بهتر و ساده‌تر اومد. آیا تفاوتی محسوسی بین این دو روش وجود داره؟
        - آیا امکان استفاده مستقیم اشیا Strongly Typed هم در توابع این کتابخانه وجود داره؟ (منظورم همون model@ به صورت مستقیم یا با واسطه است).
        
        وحید نصیری در ۱۳۹۳/۱۱/۱۱ ۱۱:۲۰
        
        - خیر. اگر هدف صرفا بازگشت جی‌سون است، تفاوت خاصی ندارند. فقط Web API به صورت پیش فرض از JSON.NET استفاده می‌کند؛ اطلاعات بیشتر و همچنین با وب فرم‌ها هم سازگار است.
        - بله: استفاده ازExpressionها جهت ایجاد Strongly typed view در ASP.NET MVC

رضا نادری در ۱۳۹۳/۱۲/۲۶ ۲۲:۳۵

سلام؛ من میخوام در متد read ,خواندنم همراه با پارامتر باشد. به این معنا که آن رکوردهایی را بخوان که فرضا Id=12 هست. چگونه میتوانم این کار را بکنم؟

وحید نصیری در ۱۳۹۳/۱۲/۲۷ ۰:۸

- مثال بحث جاری جهت اضافه شدن پارامترهای سفارشی به روز شد. با این View و این کنترلر.
- مقایسه‌ی تغییرات انجام شده با نمونه‌ی قبلی در اینجا.

رضا نادری در ۱۳۹۳/۱۲/۲۷ ۰:۳۱

من از mvc استفاده میکنم و فرمایشات شما را هم انجام دادم ولی پارامتر‌ها null هستند. آیا در mvc نحوه کار متفاوت است.
- وحید نصیری در ۱۳۹۳/۱۲/۲۷ ۱:۱۰
  
  خیر متفاوت نیست. متد Get در ASP.NET Web API معادل متد دارای ویژگی HttpGet در ASP.NET MVC است. این Get هم بر اساس 'type: 'GET سمت کلاینت مشخص می‌شود. اگر مقدار آن به Post تنظیم شده، باید به متد Post سمت سرور یا اکشن متد HttpPost دار ارسال شود.

رضا نادری در ۱۳۹۴/۰۱/۰۴ ۱۵:۱۵

سلام من پروژه شما را دانلود کردم و هنگام تست وقتی پارامتر داشته باشد پیغام undefined می‌دهد ولی هنگامی که پارامتر نداشته باشد درست جواب می‌دهد.
می‌خواستم بدونم که آیا نیاز به افزونه ویا ... چیز دیگری هست که رو سیستم من نصب باشه؟

وحید نصیری در ۱۳۹۴/۰۱/۰۴ ۱۶:۴۷

نسخه‌ی تکمیلی ASP.NET MVC بحث جاری (^ ):

نسخه‌ی تکمیلی ASP.NET Web API بحث جاری (^):

هر دو مورد پارامترهای ارسالی را بدون مشکل دریافت می‌کنند.

رضا نادری در ۱۳۹۴/۰۱/۰۴ ۲۱:۸

سلام؛ من در حل این مشکل به یک نکته برخوردم و آن اینه که وقتی view من دقیقا مشابه آن چیزی هست که شما در جواب فوق آدرس دادید من موفق به دریافت پارامتر‌ها میگردم. اما اگر ویو من به شکل زیر باشد پارامتر‌ها را نال بر میگرداند.

   <script type="text/javascript">
        $(function () {
            //            var r = "12";
            var productsDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "@Url.Action("GetProducts", "Home")",
                        dataType: "json",
                        contentType: 'application/json; charset=utf-8',
                        type: 'GET',
                        data: { param1: "dfvdf", param2: "val2" } // ارسال اطلاعات اضافی و سفارشی به سرور در حین درخواست
                    },
                    create: {
                        url: "@Url.Action("PostProduct","Home")",
                        contentType: 'application/json; charset=utf-8',
                        type: "POST"
                    },
                    update: {
                        url:// function (product) {
                             "@Url.Action("UpdateProduct","Home")",//, +product.Id;
                        //},
                        contentType: 'application/json; charset=utf-8',
                        type: "PUT"
                    },
                    destroy: {
                        url: function (p) {
                            return "@Url.Action("DeleteProduct","Home")/" + p.Id;
                        },
                        contentType: 'application/json; charset=utf-8',
                        type: "DELETE"
                    },
                    parameterMap: function (options) {
                        return kendo.stringify(options);
                    }
                },
                schema: {
                    parse: function (data) {
                        return data;
                    },
                    data: "Data",
                    total: "Total",
                    model: {
                        id: "Id", // define the model of the data source. Required for validation and property types.
                        fields: {
                            "Id": { type: "number", editable: false }, //تعیین نوع فیلد برای جستجوی پویا مهم است
                            "Name": { type: "string", validation: { required: true }, editable: true },
                            "Discription": { type: "string", },
                            "Title": { type: "string", editable: false },
                            "GroupName": { type: "string", },
                            "Link": { type: "string" }

                        }

                    },
                    batch: false,


                },
                error: function (e) {
                    alert(e.errorThrown.stack);
                },
                pageSize: 5,
                sort: { field: "Id", dir: "desc" }

            });
            $("#report-grid").kendoGrid({
                dataSource: productsDataSource,
                autoBind: true,
                scrollable: false,
                pageable: true,
                sortable: true,
                columns: [
                { field: "Id", title: "#" },
                { field: "Name", title: "Product" }
                ]
            });
        });
    </script>

وحید نصیری در ۱۳۹۴/۰۱/۰۴ ۲۲:۲۷
کدهای ASP.NET MVC مطلب «فعال سازی عملیات CRUD در Kendo UI Grid» را جهت دریافت پارامتر سفارشی به روز کردم.
زمانیکه صفحه بندی فعال است، تمام پارامترها داخل یک کوئری استرینگ با فرمت جی‌سون قرار می‌گیرند. به این شکل:
```
{"param1":"val1","param2":"val2","take":10,"skip":0,"page":1,"pageSize":10,"sort":[{"field":"Id","dir":"desc"}]}
```
برای خواندن آن‌ها فقط کافی است یک کلاس سفارشی ایجاد کرد:
```
 // با ارث بری، خواص اضافی و سفارشی را به کلاس پایه اضافه می‌کنیم
public class CustomDataSourceRequest : DataSourceRequest
{
    public string Param1 { set; get; }
    public string Param2 { set; get; }
}
```
بعد بجای DataSourceRequest اصلی، از کلاس سفارشی حاوی پارامترهای اضافی استفاده خواهیم کرد:
```
 var request = JsonConvert.DeserializeObject<CustomDataSourceRequest>(queryString);
```

امیر نوروزیان در ۱۳۹۴/۰۲/۰۷ ۱۱:۳۴

با سلام؛ من از api استفاده نمیکنم دقیقا روش شما رو استفاده کردم برنامه رو هم دیباگ کردم اطلاعات درست به سمت سرور میره بر میگرده ولی نمیدونم چرا نشون نمیده و هیچ خطاییم نشون نمیده
- وحید نصیری در ۱۳۹۴/۰۲/۰۷ ۱۲:۳۲
  
  کدهای کامل بحث جاری را با فرمت ASP.NET MVC، از اینجا دریافت کنید و با کدهای خودتان انطباق دهید؛ با این کنترلر و با این View
  - امیر نوروزیان در ۱۳۹۴/۰۲/۰۷ ۱۲:۵۷
    
    ممنون
    مشکلم حل شد فراموش کردن <body> بود
محمد رحیم پورابراهیم در ۱۳۹۴/۰۳/۰۷ ۱۴:۳۸
سلام
من طبق مقاله یه پروژه MVC رو ساختم اما زمانی که پروژه رو اجرا میکنم در خطی که
$("#report-grid").kendoGrid
رو تعریف کردم خطای زیر رو دریافت میکنم
$(...).kendoGrid is not a function
در layout به فایلهای css و js ارجاع داده شده و view که ساخته ام از lyout استفاده میکنه.
- وحید نصیری در ۱۳۹۴/۰۳/۰۷ ۱۵:۳۴
  
  همین سؤال در نظرات مطلب معرفی Kendo Ui بحث شده.
منصور ج در ۱۳۹۴/۱۲/۲۳ ۹:۵
باسلام و خسته نباشید

زمانی که میخوام داخل web api اطلاعات رو از داخل دیتابیس ارسال کنم بدون مشکل تمامی اطلاعات رو میاره مثلا به این شکل
```
DatabaseContext db = new DatabaseContext();
        [HttpGet]
        public IEnumerable<News> Get()
        {
            db.Configuration.ProxyCreationEnabled = false;

            var lst = db.Newses.ToList();
            return lst;

        }
```
اما چطور باید جدول رابطه ای رو بفرستم و اون طرف در ویوو دریافت کنم مثلا زمانی که اینطور می‌فرستم خطا میگیره
```
DatabaseContext db = new DatabaseContext();
        [HttpGet]
        public IEnumerable<News> Get()
        {
            db.Configuration.ProxyCreationEnabled = false;

            var lst = db.Newses.Include("Types").ToList();
            return lst;

        }
```
ممنون میشم راهنمایی کنید.
- وحید نصیری در ۱۳۹۴/۱۲/۲۳ ۱۰:۱۵
  - «خطا می‌گیره» برای بررسی کافی نیست. اطلاعات بیشتر
  دفعه‌ی قبل هم همین رویه را تکرار کردی و پاسخی نگرفتی. چون برای رفع مشکل، اگر نتوان شرایط شما را خیلی «سریع»، «تکرار» کرد، امکان دیباگ و رفع اشکال آن هم نیست. بنابراین اگر قسمتی از یک پروژه‌ی بزرگ را اینجا عنوان کنید که کار نمی‌کند، هیچ کسی کمکی به شما نخواهد کرد (چون امکان بررسی و شبیه سازی جزئیات آن از راه دور میسر نیست).
  بنابراین قبل از اینکه سؤالی را مطرح کنید، این سؤال را خودتان بپرسید:
  - آیا طرف مقابل می‌تواند به «سرعت» مشکل من را شبیه سازی و «تکرار» کند؟
  اگر پاسخ آن خیر است، احتمال اینکه پاسخ مناسبی را دریافت کنید، خیلی کم است.
  
  - نیازی به تنظیم ProxyCreationEnabled = false در این قسمت از کد نیست و روش بهتری برای آن وجود دارد. اطلاعات بیشتر
  - اگر قسمتی از اسکیمای JSON شما چنین شکلی را دارد:
  "address":{ "street":"test 59", "city":"City test", "post_number":"25050" },
  معادل Kendo UI Data source آن به صورت زیر خواهد بود:
  columns : [ { field: "address.street", title: "Street" }, { field: "address.city", title: "City" }, { field: "address.post_number", title: "Post#" } ]
  یک مثال کامل
وحید نصیری در ۱۳۹۶/۰۶/۱۷ ۱۵:۳۶

جهت اطلاع

تمام مثال‌های این سری به ASP.NET Core منتقل شدند. کدهای نهایی آن‌ها را از مخزن کد KendoUI.Core.Samples می‌توانید دریافت کنید.
این مثال‌ها بر اساس Kendo UI Professional R2 2017 SP1 تهیه شده‌اند (فایل‌های مورد نیاز هم پیوست شده‌اند).

کیان سبزی در ۱۳۹۸/۰۶/۰۲ ۱۱:۲۷

سلام؛ من درخواست رو کامل این طرف دریافت میکنم. یعنی اطلاعات درست میره سمت سرور و پاسخ برمیگرده؛ ولی چیزی نشون داده نمیشه و خطایی هم در کنسول یا برنامه دریافت نمیکنم.

وحید نصیری در ۱۳۹۸/۰۶/۰۲ ۱۱:۴۳

سورس کامل این سری را برای ASP.NET Core در اینجا KendoUI.Core.Samples می‌توانید مشاهده کنید. برای نمونه، مثال مرتبط با این قسمت، کنترلر 2 و view 2 است. تصویری که ارسال کردید شبیه به کنترلر 3 و view 3 است. مطمئن شوید که view متناظری را درحال استفاده هستید و فیلدهای data source آن درست تعریف شده و همچنین تعریف قسمت ستون‌های گرید، با آن متناظر است. به علاوه به بزرگی و کوچکی ابتدای نام فیلدهای تعریف شده دقت داشته باشید. سمت سرور، نام به صورت Name و در سمت کلاینت (به علت نوع serialization و تنظیمات آن)، باید name تعریف شود.

کیان سبزی در ۱۳۹۸/۰۶/۰۳ ۲۰:۴۱

بله مشکل از نام ستون‌های متناظر بود توی بخش column و تعریف template فراموش کرده بودم اونجا رو هم باید دو تا فیلدی که دارم رو همه حروفشون کوچک باشه. ممنون از دقت نظر شما. فقط یه مساله ای که دارم این هستش که تاریخ رو من به شکل Datetime دارم میخونم داخل مدل هام ولی اینجا نشون نمیده داخل جدول. به این شکل تعریف شده داخل viewModel :

 [DisplayName("تاریخ درج")]
 public DateTime CreateDate { get; set; }
 [DisplayName("تاریخ انتشار")]
 public DateTime PublishDate { get; set; }

حتی الان یه پراپرتی دیگه از مدل رو نگاه کردم که از نوع string هستش(blogtype) و اون هم از سمت سرور برمی گرده ولی تو جدول خالی نشون میده :

[DisplayName("نوع مطلب")]
public string BlogType { get; set; }

ولی بقیه پراپرتی‌ها درست کار میکنند.

این هم کد داخل View بنده :

 <script type="text/javascript">

            $(function () {
                var blogDataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "@Url.Action("GetLastBlogs", "Admin")",
                            dataType: "json",
                            contentType: 'application/json; charset=utf-8',
                            type: 'GET'
                        },
                        parameterMap: function (options) {
                            return kendo.stringify(options);
                        }
                    },
                    schema: {
                        data: "data",
                        total: "total",
                        model: {
                            fields: {
                                "id": { type: "number" }, //تعیین نوع فیلد برای جستجوی پویا مهم است
                                "title": { type: "string" },
                                "content": { type: "string" },
                                "imagepath": { type: "string" },
                                "attachmentid": { type: "number" },
                                "createdate": { type: "string" },
                                "publishdate": { type: "date" },
                                "blogtype": { type: "string" },
                                "lastmodified": { type: "date" },
                                "visitcount": { type: "number" },
                                "isarchived": { type: "boolean" },
                                "ispublished": { type: "boolean" },
                                "isdeleted": { type: "boolean" },
                                "tags": { type: "string" }


                            }
                        }
                    },
                    error: function (e) {
                        alert(e.errorThrown);
                    },
                    pageSize: 10,
                    sort: { field: "id", dir: "desc" },
                    serverPaging: true,
                    serverFiltering: true,
                    serverSorting: true
                });

                $("#report-grid").kendoGrid({
                    dataSource: blogDataSource,
                    autoBind: true,
                    scrollable: false,
                    pageable: true,
                    sortable: true,
                    filterable: true,
                    reorderable: true,
                    columnMenu: true,
                    columns: [
                        { field: "id", title: "شماره", width: "130px" },
                        { field: "title", title: "عنوان مطلب" },
                        { field: "createdate", title: "تاریخ درج" },
                        { field: "publishdate", title: "تاریخ انتشار" },
                        { field: "content", title: "خلاصه مطلب" },
                        { field: "blogtype", title: "نوع" },
                        { field: "lastmodified", title: "آخرین ویرایش" },
                        { field: "visitcount", title: "تعداد بازدید" },
                        {
                            field: "isarchived", title: "آرشیو شده",
                            template: '<input type="checkbox" #= isarchived ? checked="checked" : "" # disabled="disabled" ></input>'
                        },
                        {
                            field: "ispublished", title: "منتشر شده",
                            template: '<input type="checkbox" #= ispublished ? checked="checked" : "" # disabled="disabled" ></input>'
                        }

                    ]
                });
            });
            </script>

وحید نصیری در ۱۳۹۸/۰۶/۰۳ ۲۰:۵۶

حالت پیش‌فرض serialization نام خواص در ASP.NET Core به صورت camelCase است:

در این‌حالت نام BlogType می‌شود blogType و نه blogtype. اگر خواستید Pascal Case (شبیه به syntax خواص در #C) شود، از این نکته استفاده کنید.