در این مقاله، اصول اولیه نحوه اتصال داده به Kendo Grid در MVC را با استفاده از چند روش به صورت کاملا گام به گام و عملی خواهیم آموخت.

مقدمه

این اتفاق زیاد رخ می دهد که وقتی در حال کار با Grid هستیم، لازم شود که نتایج داخل GridView را بتوانیم به روش های مختلفی نمایش دهیم.

Kendo Grid چیست؟

Kendo UI Grid یک ابزارک بسیار مفید با قابلیت های زیاد است که به ما اجازه نمایش و ویرایش داده ها را می دهد. این ابزارک دارای ویژگی های زیادی از جمله صفحه بندی، مرتب سازی، فیلتر کردن، گروه بندی و ویرایش است که با این ویژگی ها می توانیم نحوه نمایش داده ها را با توجه به خواسته هایمان تغییر دهیم.

جداول ما، به کمک کامپوننت Kendo UI DataSource، قابلیت اتصال به یک مرکزمحلی یا مرکز راه دور برای دریافت داده ها را، خواهند داشت.

سناریو اول

دریافت داده ها در Kendo Grid با استفاده از AJAX

سناریو دوم

تغییر داده های داخل Kendo Grid با استفاده از رویداد های عناصر HTML

سناریو اول

در حالت عادی یک برنامه نویس می تواند به راحتی داده ها را با روش AJAX به Grid ارسال کند. برای اینکار یک متد برای خواندن داده ها نیاز است که خروجی این متد باید از نوع JSON باشد و این خروجی مستقیما در داخل Grid استفاده خواهد شد تا Grid بتواند داده ها را نمایش دهد.

نکته:

همچنین، برنامه نویس می تواند به این متد، پارامتر هم ارسال نماید. برای مثال متد خواندن ما به شکل زیر است.

    Read(read => read.Action("BindGrid", "Home").Data("SortByCompanyId"))  

در قطعه کد بالا، نام تابع جاوا اسکریپتی ما، SortByCompanyId است که در خروجی، کد کمپانی را برمی گرداند. با توجه به این موارد، ما توانایی ارسال پارامتر به اکشن متد های موجود در داخل کنترلر را داریم.

    public ActionResult BindGrid([DataSourceRequest]DataSourceRequest request, string companyId)  
           {  
          // bind json data result here          
        }  

تابع جاوا اسکریپتی مورد نیازمان به شکل زیر خواهد بود.

    <script type="text/javascript">  
            function SortByCompanyId() {  
                var cId = 25;  
                return {  
                    companyId: cId  
                }  
            }  
        </script>  

مرحله 1

ابتدا باید یک Model بسازیم. نام Model مورد نظرمان را Company قرار می دهیم و property های قطعه کد زیر را به این کلاس اضافه می نماییم.

    public class Company  
        {  
            public int Id { get; set; }  
            public string Name { get; set; }  
            public int? CompanyId { get; set; }  
        }  

مرحله 2

حالا یک کنترلر با نام HomeController می سازیم. در داخل این کنترلر، یک اکشن متد با نام Index می سازیم که در خروجی یک View بر می گرداند. در داخل View مربوط به این اکشن متد، کدهای مربوط به نمایش دادن داده ها در داخل  Grid View را قرار می دهیم. در این View از همان Model که در مرحله قبل ساخته شد، استفاده می شود.

    @model Grid.Models.Company  
    @using System.Web.Optimization  
    @using Kendo.Mvc.UI  
    @using Kendo.Mvc.Extensions  
    @{  
       Layout = "~/Views/Shared/_Layout.cshtml";  
    }  
    <div style="width:60%;height:100%">  
        @(Html.Kendo().Grid<Grid.Models.Company>()  
            .Name("BindGridUsingRead")  
            .Columns(columns =>  
            {  
                columns.Bound(p => p.Id).Width(15).Title("Sr. No.").Filterable(false);  
                columns.Bound(p => p.Name).Title("Name").Width(30).Filterable(false);  
                columns.Bound(p => p.CompanyId).Title("Company Id").Width(15).Filterable(false);  
                })  
               .Scrollable()  
               .Pageable(x => x.PageSizes(new List<object> { 10, 20, 100, 200, 500, "all" }).Refresh(true))  
                .Filterable(ftp => ftp.Mode(GridFilterMode.Row))  
                .Resizable(resize => resize.Columns(true))  
                .HtmlAttributes(new { style = "height: 100%" })  
                .Selectable()  
                .DataSource(dataSource => dataSource  
                .Ajax()  
                .Model(model => model.Id(p => p.Id))  
                .ServerOperation(false)  
                .Read(read => read.Action("BindGrid", "Home"))  
         )  
        )  
    </div>  

مرحله 3

در داخل کنترلر، باید یک متد بنویسم که بتوانیم با استفاده از روش Ajax داده ها را از این متد دریافت کنیم و در Grid نمایش دهیم. حالا یک اکشن متد با نام BindGrid می سازیم تا Json مورد نیاز Grid را تولید نماید. در این قسمت برای اینکه مجبور به استفاده از دیتابیس نشویم، یک متد با نام GetGridData می سازیم که تعدادی داده ساختگی برای نمایش در برنامه برای ما ایجاد کند، این متد داده های خروجی را به شکل IEnumerable List برمی گرداند.

    public ActionResult Index()  
           {  
               return View();  
           }  
      
           public ActionResult BindGrid([DataSourceRequest]DataSourceRequest request)  
           {  
               try  
               {  
                   decimal companyId = 0;  
                   List<Models.Company> lst = new List<Models.Company>();  
                   lst = GetGridData(Convert.ToInt32(companyId)).ToList();  
                   DataSourceResult result = lst.ToDataSourceResult(request, p => new Models.Company  
                   {  
                       Id = p.Id,  
                       Name = p.Name,  
                       CompanyId = p.CompanyId,  
                   });  
                   return Json(result, JsonRequestBehavior.AllowGet);  
               }  
               catch (Exception ex)  
               {  
                   var errorMsg = ex.Message.ToString();  
                   return Json(errorMsg, JsonRequestBehavior.AllowGet);  
               }  
           }  
          public IEnumerable<Models.Company> GetGridData(decimal companyId)  
           {  
               List<Models.Company> objCmp = new List<Models.Company>();  
               List<Models.Company> listCompany = new List<Models.Company>();  objCmp.Add(new Models.Company() { Id = 1, Name = "محمود رضایی", CompanyId = 20 });
            objCmp.Add(new Models.Company() { Id = 2, Name = "رضا اکبری", CompanyId = 40 });
            objCmp.Add(new Models.Company() { Id = 3, Name = "اکبر احمدی", CompanyId = 30 });
            objCmp.Add(new Models.Company() { Id = 4, Name = "احمد جوادی", CompanyId = 15 });
            objCmp.Add(new Models.Company() { Id = 5, Name = "جواد جعفری", CompanyId = 18 });
            objCmp.Add(new Models.Company() { Id = 6, Name = "جعفر جوادی", CompanyId = 22 });  
               if(companyId > 0)  
               {  
                   listCompany = objCmp.ToList().Where(a => a.CompanyId <= companyId).ToList();  
                   return listCompany.AsEnumerable();  
               }            
               return objCmp.ToList().AsEnumerable();  
           }  

مرحله 4

اگر برنامه را اجرا کنید، خروجی به شکل زیر خواهد بود.

سناریو 2

وقتی از عناصر یا فرم های HTML استفاده می نماییم، گاهی اوقات شرایطی ایجاد می شود که باید داده های داخل Grid را دوبار دریافت نماییم. مثلا اگر در تکست باکس فیلتر ها تغییری ایجاد شود یا روی کلید سرچ، کلیک شود و ... ما باید این تغییرات را در داده ها اعمال کنیم و نتیجه جدید را به کاربر نمایش دهیم.

نکته
در داخل Grid یک سری عملکردهای از پیش آماده برای فیلتر داده ها وجود دارد ولی ما در اینجا از یک روش دیگر برای فیلتر کردن داده ها استفاده می کنیم.

در نظر بگیرید که کاربر یک عدد در داخل input وارد کند و ما باید با توجه به این عدد، کمپانی هایی که دارای کد(id) کمتر از این عدد هستند را به کاربر نمایش دهیم. پس ما باید یک textbox به برنامه اضافه کنیم و رویداد onchange این تکست باکس را با استفاده از متد transport.options.read، پیاده سازی نماییم. ما آدرس Url متد و مقدار input را به اکشن متد ارسال می نماییم.

مرحله 1

همانطور که در سناریو توضیح داده بودیم، ما یک textbox و یک فایل جاوا اسکریپتی به برنامه اضافه می کنیم. این فایل جاوا اسکریپتی شامل تابعی برای رویداد change در داخل صفحه است. قطعه کد جاوا اسکریپتی زیر را در بالا grid اضافه می نماییم.

<script type="text/javascript">  
    var gridObject;  
    var readURL = new Array();  
    readURL[0] = "/Home/BindGrid";  
    readURL[1] = "/Home/BindGridOnSearch?companyId=";  
</script> 

کدهای داخل View page ما به شکل زیر خواهد بود.

    @model Grid.Models.Company  
    @using System.Web.Optimization  
    @using Kendo.Mvc.UI  
    @using Kendo.Mvc.Extensions  
    @{  
       Layout = "~/Views/Shared/_Layout.cshtml";  
    }  
    <script type="text/javascript">  
        var gridObject;  
        var readURL = new Array();  
        readURL[0] = "/Home/BindGrid";  
        readURL[1] = "/Home/BindGridOnSearch?companyId=";  
    </script>  
    <div>  
        <div class="box-header with-border">  
            <div class="col-xs-12">  
                <div class="col-xs-4 martop" style="text-align:right;width:22%">  
                    @(Html.Kendo().TextBoxFor(model => model.CompanyId)  
                        .Name("CompanyId")  
                        .HtmlAttributes(new { placeholder = "Search By Company Id", @autocomplete = "off", @class = "col-sm-12", style = "width:100%", maxlength = 200 })  
                    )  
                </div>               
            </div>  
        </div>  
    </div>  
    <br />  
      
    <div style="width:60%;height:100%">  
        @(Html.Kendo().Grid<Grid.Models.Company>()  
            .Name("BindGridUsingRead")  
            .Columns(columns =>  
            {  
                columns.Bound(p => p.Id).Width(15).Title("Sr. No.").Filterable(false);  
                columns.Bound(p => p.Name).Title("Name").Width(30).Filterable(false);  
                columns.Bound(p => p.CompanyId).Title("Company Id").Width(15).Filterable(false);  
                })  
               .Scrollable()  
               .Pageable(x => x.PageSizes(new List<object> { 10, 20, 100, 200, 500, "all" }).Refresh(true))  
                .Filterable(ftp => ftp.Mode(GridFilterMode.Row))  
                .Resizable(resize => resize.Columns(true))  
                .HtmlAttributes(new { style = "height: 100%" })  
                .Selectable()  
                .DataSource(dataSource => dataSource  
                .Ajax()  
                .Model(model => model.Id(p => p.Id))  
                .ServerOperation(false)  
                .Read(read => read.Action("BindGrid", "Home"))  
         )  
        )  
    </div>  
    <script src="~/Scripts/Custom/Home.js"></script>  

مرحله 2

حالا، در داخل رویداد change مربوط به تکست باکس CompanyId، کدهای زیر را اضافه می نماییم. این کدها را در داخل فایل جاوا اسکریپتی Home.js قرار می دهیم. با استفاده از این کدها، پس از بارگزاری کامل صفحه، داده ها به Grid ارسال می شوند. در داخل این فایل با استفاده از متد windows.load، می توانیم داده های Grid را دریافت نماییم و در داخل یک متغییر global قرار دهیم.

    $(window).load(function () {  
        gridObject = $("#BindGridUsingRead").data("kendoGrid");  
    });  
      
    $(document).ready(function () {     
        $('#CompanyId').on('change', function () {     
            //debugger;  
            var cmpId = $("input[id='CompanyId']").val();  
            gridObject.dataSource.transport.options.read.url = readURL[1] + cmpId;  
            gridObject.dataSource.read();  
        });  
    });  

مرحله 3

کدهای زیر را به کنترلر اضافه می نماییم.

    public ActionResult BindGridOnSearch([DataSourceRequest]DataSourceRequest request, string companyId)  
            {  
                try  
                {  
                    List<Models.Company> list = new List<Models.Company>();  
                    list = GetGridData(Convert.ToInt32(companyId)).ToList();  
                    DataSourceResult result = list.ToDataSourceResult(request, p => new Models.Company  
                    {  
                        Id = p.Id,  
                        Name = p.Name,  
                        CompanyId = p.CompanyId,  
                    });  
                    return Json(result, JsonRequestBehavior.AllowGet);  
                }  
                catch (Exception ex)  
                {  
                    var errorMsg = ex.Message.ToString();  
                    return Json(errorMsg, JsonRequestBehavior.AllowGet);  
                }  
            }  

مرحله 4

اگر برنامه نوشته شده را اجرا کنیم، خروجی زیر را خواهیم دید( اگر در قسمت سرچ کد 20 را بزنیم).

آموزش asp.net mvc