در این مقاله چگونگی اتصال از راه دور و مدیریت رویدادهای Combo Box در Kendo UI توسط سرویس REST را خواهید آموخت.

می خواهیم با استفاده از سرویس REST چگونگی Remote Binding (اتصال از راه دور) در Combo Box کندو را شرح دهیم.

نقطه پایانی سرویس REST :

api/Products

برای نحوه ساخت یک سرویس WEB API بهتر است ابتدا به این مقاله رجوع کنید.

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

USE [master]
GO
/****** Object:  Database [TestKendo]    Script Date: 10/25/2015 09:38:39 ******/
CREATE DATABASE [TestKendo] ON  PRIMARY 
( NAME = N'TestKendo', FILENAME = N'C:\Program Files\Microsoft SQL Server\MSSQL10_50.MSSQLSERVER\MSSQL\DATA\TestKendo.mdf' , SIZE = 2304KB , MAXSIZE = UNLIMITED, FILEGROWTH = 1024KB )
 LOG ON 
( NAME = N'TestKendo_log', FILENAME = N'C:\Program Files\Microsoft SQL Server\MSSQL10_50.MSSQLSERVER\MSSQL\DATA\TestKendo_log.LDF' , SIZE = 504KB , MAXSIZE = 2048GB , FILEGROWTH = 10%)
GO
ALTER DATABASE [TestKendo] SET COMPATIBILITY_LEVEL = 100
GO
IF (1 = FULLTEXTSERVICEPROPERTY('IsFullTextInstalled'))
begin
EXEC [TestKendo].[dbo].[sp_fulltext_database] @action = 'enable'
end
GO
ALTER DATABASE [TestKendo] SET ANSI_NULL_DEFAULT OFF
GO
ALTER DATABASE [TestKendo] SET ANSI_NULLS OFF
GO
ALTER DATABASE [TestKendo] SET ANSI_PADDING OFF
GO
ALTER DATABASE [TestKendo] SET ANSI_WARNINGS OFF
GO
ALTER DATABASE [TestKendo] SET ARITHABORT OFF
GO
ALTER DATABASE [TestKendo] SET AUTO_CLOSE OFF
GO
ALTER DATABASE [TestKendo] SET AUTO_CREATE_STATISTICS ON
GO
ALTER DATABASE [TestKendo] SET AUTO_SHRINK OFF
GO
ALTER DATABASE [TestKendo] SET AUTO_UPDATE_STATISTICS ON
GO
ALTER DATABASE [TestKendo] SET CURSOR_CLOSE_ON_COMMIT OFF
GO
ALTER DATABASE [TestKendo] SET CURSOR_DEFAULT  GLOBAL
GO
ALTER DATABASE [TestKendo] SET CONCAT_NULL_YIELDS_NULL OFF
GO
ALTER DATABASE [TestKendo] SET NUMERIC_ROUNDABORT OFF
GO
ALTER DATABASE [TestKendo] SET QUOTED_IDENTIFIER OFF
GO
ALTER DATABASE [TestKendo] SET RECURSIVE_TRIGGERS OFF
GO
ALTER DATABASE [TestKendo] SET  ENABLE_BROKER
GO
ALTER DATABASE [TestKendo] SET AUTO_UPDATE_STATISTICS_ASYNC OFF
GO
ALTER DATABASE [TestKendo] SET DATE_CORRELATION_OPTIMIZATION OFF
GO
ALTER DATABASE [TestKendo] SET TRUSTWORTHY OFF
GO
ALTER DATABASE [TestKendo] SET ALLOW_SNAPSHOT_ISOLATION OFF
GO
ALTER DATABASE [TestKendo] SET PARAMETERIZATION SIMPLE
GO
ALTER DATABASE [TestKendo] SET READ_COMMITTED_SNAPSHOT ON
GO
ALTER DATABASE [TestKendo] SET HONOR_BROKER_PRIORITY OFF
GO
ALTER DATABASE [TestKendo] SET  READ_WRITE
GO
ALTER DATABASE [TestKendo] SET RECOVERY FULL
GO
ALTER DATABASE [TestKendo] SET  MULTI_USER
GO
ALTER DATABASE [TestKendo] SET PAGE_VERIFY CHECKSUM
GO
ALTER DATABASE [TestKendo] SET DB_CHAINING OFF
GO
EXEC sys.sp_db_vardecimal_storage_format N'TestKendo', N'ON'
GO
USE [TestKendo]
GO
/****** Object:  Table [dbo].[Products]    Script Date: 10/25/2015 09:38:39 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Products](
	[ProductID] [int] IDENTITY(1,1) NOT NULL,
	[ProductName] [nvarchar](max) NOT NULL,
	[UnitPrice] [nvarchar](max) NOT NULL,
 CONSTRAINT [PK_dbo.Products] PRIMARY KEY CLUSTERED 
(
	[ProductID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
SET IDENTITY_INSERT [dbo].[Products] ON
INSERT [dbo].[Products] ([ProductID], [ProductName], [UnitPrice]) VALUES (1, N'کفش', N'200')
INSERT [dbo].[Products] ([ProductID], [ProductName], [UnitPrice]) VALUES (2, N'صندلی', N'90')
SET IDENTITY_INSERT [dbo].[Products] OFF
/****** Object:  Table [dbo].[__MigrationHistory]    Script Date: 10/25/2015 09:38:39 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[__MigrationHistory](
	[MigrationId] [nvarchar](150) NOT NULL,
	[ContextKey] [nvarchar](300) NOT NULL,
	[Model] [varbinary](max) NOT NULL,
	[ProductVersion] [nvarchar](32) NOT NULL,
 CONSTRAINT [PK_dbo.__MigrationHistory] PRIMARY KEY CLUSTERED 
(
	[MigrationId] ASC,
	[ContextKey] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
SET ANSI_PADDING OFF
GO
INSERT [dbo].[__MigrationHistory] ([MigrationId], [ContextKey], [Model], [ProductVersion]) VALUES (N'201510130800346_InitialCreate', N'KendoListView.Models.ProductContext', 0x1F8B0800000000000400CD57CB6EE33614DD17E83F105CB540C6CC63330DA419A47652181327C128933D2D5D3B44F950492AB5BF6D16FDA4FE42AFAC97F5B06367A668E18D45DD7B78EEE17D507F7FFD2BF8B85292BC8075C2E8909E8D4E29011D9B44E8654833BF78F79E7EFCF0E30FC175A256E4A9B2BBC8EDD053BB903E7B9F5E32E6E26750DC8D9488AD7166E147B1518C27869D9F9EFEC2CECE182004452C4282CF99F642C1E6011FC746C790FA8CCB994940BA721DDF441B5472C715B894C710D24FA013732B9C7F12F0E7A8B0A7E44A0A8E5C22900B4AB8D6C6738F4C2FBF3888BC357A19A5B8C0E5E33A05B45B70E9A08CE0B2313F3498D3F33C18D638565071E6BC5147029E5D94EAB0AEFB9B34A6B57AA8DF35EAECD779D41B0D43FA604D92C59E92EE5E97636973BB618547A5DF0969BD3DA953023327FF9D9071267D6621D49079CBE50979C8E652C49F60FD687E071DEA4CCA6D8A4812DFB5167009B74BC1FAF56758B4894F2794B0B63BEBFAD7DE7DD722C2A9F617E794DC21153E9750E7C3961A9137167E030D967B481EB8F760F138A7096C14ED9118DE327FA836C53CC4A2A264C657B7A097FE39A4F897921BB182A45A29897CD1026B109DBCCD6080E8FECDD1DB3F5811FFEB5B07ACC9AF7ED661557B2E50C1B626F932AC8632108BB54C42576EDF0EB3808DC0B701B1FC1B1A450F18D5693E44B726D6F41956349AAA21B11D1D2998F1344529B73A54B942A2A23D8DDF45C757AD2A3058EC068AB7665BEF84A9C997D0798B5B23D31B619D9F70CFE73C3FAC71A27A669D63D82171B55947E96E9D36C2570EF9FFC2695F1FE9023542DE606C0A8B6C1326D47C9ACED5F3DC8C092EB9DD5DF6632333A55F6924076015F53C8056BC381C6FAB44B7D1B696FB5801EB48D43D0CD63B8D4EA3EC9EEEBEDAE89AD4BBD735D2A985A0CCCBD747782F510B134A50A41791E4491AAD9D0735CA0D46D11F722C05C6DB18CCB8160B70BE182914EBE87DE70EF0FF99C7CCB9441E3694FFE3B12872895F1D7C470EA38149A85FB88D9FB9FD49F1D5CFDF3EDD8E813B6E62F53BEA410369DF3C2A523DA4C9DC20FF826733C7DE38ADFA9517B0ED2B76300127960D447EE1D610E729DD80563653BD3095E418DA36A3CAA4732233F03C4185AEAC170B1EE3E998189CDB5C399EB8CCD0E45ACD2199EAFBCCA799BF720ED45CB62E5101DBBFFF6624B73907F769FEE4BE47084853600870AF7FCD844C6ADE370329B403224F96B26E90155EB9106EB9AE91EE8C3E10A8946F02290E50ACBA4750A9443077AF23FE026FE18637AB5B58F2785D35D0DD20AF1F445BF66022F8D272E54A8CC63FFF6C64F977E3877F003902BFEE690E0000, N'6.1.3-40302')

حال زمان استفاده از سرویس REST در کندو می باشد.

استفاده از ComboBox کندو با Remote Binding (اتصال از راه دور)

یک صفحه HTML با نام KendoCombo.html می سازیم. کدهای زیر را برای آن می نویسیم.

<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />  
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />  
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />  
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />  
    <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>  
    <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>  
    <script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>  
    <title></title>  
</head>  
<body>  
    <div class="container" id="example">  
        <div class="row">  
  
            <input data-role="combobox"  
                   data-placeholder="Type a product"  
                   data-text-field="ProductName"  
                   data-value-primitive="true"  
                   data-value-field="ProductID"  
                   data-bind="value: selectedProduct,source: products”  
                              }"  
                   style="width: 50%" />  
        </div>  
     </div>  
 </body>  
</html>

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

var viewModel = kendo.observable({    
    selectedProduct: null,    
    isPrimitive: false,    
    isVisible: true,    
    isEnabled: true,                        
    products: new kendo.data.DataSource({    
        transport: {    
            read: {    
                url: "api/Products",    
                dataType: "json"    
            }    
        }    
    })    
});    
kendo.bind($("#example"), viewModel); 

خروجی در مرورگر به صورت زیر خواهد شد.

رویدادها در Combo Box کندو

رویدادهای اصلی در Combo Box کندو در زیر لیست شده اند.

 Change (تغییر یافتن)

 Open (باز شدن)

Close (بسته شدن)

رویداد  Change (تغییر یافتن) در Combo box کندو

همیشه این رویداد هنگام تغییر مقدار های Combo Box  توسط کاربر اتفاق می افتد.

KendoCombo.html

<input data-role="combobox"    
     data-placeholder="Type a product"    
     data-text-field="ProductName"    
     data-value-primitive="true"    
     data-value-field="ProductID"    
     data-bind="value: selectedProduct,source: products,events: {    
                  change: onChange,    
                }"    
     style="width: 50%" />

جاوااسکریپت

var viewModel = kendo.observable({    
    selectedProduct: null,    
    isPrimitive: false,    
    isVisible: true,    
    isEnabled: true,    
    onChange: function () {    
        alert("Change Event");    
    },    
    products: new kendo.data.DataSource({    
        transport: {    
            read: {    
                url: "api/Products",    
                dataType: "json"    
            }    
        }    
    })    
});    
kendo.bind($("#example"), viewModel);

خروجی در مرورگر به صورت زیر خواهد بود :

مدیریت رویداد open در Combo Box کندو

این رویداد هنگام باز شدن نوار Combo Box کندو توسط کاربر اتفاق می افتد.

KendoCombo.html

<input data-role="combobox"    
    data-placeholder="Type a product"    
    data-text-field="ProductName"    
    data-value-primitive="true"    
    data-value-field="ProductID"    
    data-bind="value: selectedProduct,source: products,events: {    
                                                 open: onOpen,    
                                               }"    
    style="width: 50%" />

جاوااسکریپت

var viewModel = kendo.observable({    
    selectedProduct: null,    
    isPrimitive: false,    
    isVisible: true,    
    isEnabled: true,    
        
  
    onOpen: function () {    
       alert("Open");    
    },    
        
    products: new kendo.data.DataSource({    
        transport: {    
            read: {    
                url: "api/Products",    
                dataType: "json"    
            }    
        }    
    })    
});    
kendo.bind($("#example"), viewModel);

خروجی در مرورگر

مدیریت رویداد Close در Combo Box کندو

این رویداد هنگام بسته شدن نوار Combo Box کندو اتفاق می افتد.

KendoCombo.html

<input data-role="combobox"    
      data-placeholder="Type a product"    
      data-text-field="ProductName"    
      data-value-primitive="true"    
      data-value-field="ProductID"    
      data-bind="value: selectedProduct,source: products,events: {    
                   close: onClose    
                 }"    
      style="width: 50%" />

جاوااسکریپت

var viewModel = kendo.observable({    
      selectedProduct: null,    
      isPrimitive: false,    
      isVisible: true,    
      isEnabled: true,    
      onClose: function () {    
          alert("Close");    
      },    
      products: new kendo.data.DataSource({    
          transport: {    
              read: {    
                  url: "api/Products",    
                  dataType: "json"    
              }    
          }    
      })    
  });    
  kendo.bind($("#example"), viewModel);

خروجی در مرورگر به شکل زیر خواهد بود :