تقييم الموضوع :
  • 0 أصوات - بمعدل 0
  • 1
  • 2
  • 3
  • 4
  • 5
Kendo UI Components
#1
Kendo UI Components
Grid /
 Basic usage


HTML5/JavaScript source


PHP كود :
<!DOCTYPE html>
<
html>
<
head>
 
   <title></title>
 
   <link rel="stylesheet" href="styles/kendo.common.min.css" />
 
   <link rel="stylesheet" href="styles/kendo.default.min.css" />

 
   <script src="js/jquery.min.js"></script>
 
   <script src="js/kendo.all.min.js"></script>
</
head>
<
body>

<
div id="example">
 
   <div id="grid"></div>
 
   <script>
 
       $(document).ready(function () {
 
           $("#grid").kendoGrid({
 
               dataSource: {
 
                   type"odata",
 
                   transport: {
 
                       read"//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
 
                   },
 
                   pageSize20
                
},
 
               height550,
 
               groupabletrue,
 
               sortabletrue,
 
               pageable: {
 
                   refreshtrue,
 
                   pageSizestrue,
 
                   buttonCount5
                
},
 
               columns: [{
 
                   template"<div class='customer-photo'" +
 
                                   "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
 
                               "<div class='customer-name'>#: ContactName #</div>",
 
                   field"ContactName",
 
                   title"Contact Name",
 
                   width240
                
}, {
 
                   field"ContactTitle",
 
                   title"Contact Title"
 
               }, {
 
                   field"CompanyName",
 
                   title"Company Name"
 
               }, {
 
                   field"Country",
 
                   width150
                
}]
 
           });
 
       });
 
   </script>
</
div>

<
style type="text/css">
 
   .customer-photo {
 
       displayinline-block;
 
       width32px;
 
       height32px;
 
       border-radius50%;
 
       background-size32px 35px;
 
       background-positioncenter center;
 
       vertical-alignmiddle;
 
       line-height32px;
 
       box-shadowinset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
 
       margin-left5px;
 
   }

 
   .customer-name {
 
       displayinline-block;
 
       vertical-alignmiddle;
 
       line-height32px;
 
       padding-left3px;
 
   }
</
style>


</
body>
</
html


TreeView / Basic usage

HTML5/JavaScript source

PHP كود :
<!DOCTYPE html>
<
html>
<
head>
 
   <title></title>
 
   <link rel="stylesheet" href="styles/kendo.common.min.css" />
 
   <link rel="stylesheet" href="styles/kendo.default.min.css" />

 
   <script src="js/jquery.min.js"></script>
 
   <script src="js/kendo.all.min.js"></script>
</
head>
<
body>

 
       <div id="example">
 
           <div class="demo-section k-header">
 
               <ul id="treeview">
 
                   <li data-expanded="true">
 
                       <span class="k-sprite folder"></span>
 
                       My Web Site
                        
<ul>
 
                           <li data-expanded="true">
 
                               <span class="k-sprite folder"></span>images
                                
<ul>
 
                                   <li><span class="k-sprite image"></span>logo.png</li>
 
                                   <li><span class="k-sprite image"></span>body-back.png</li>
 
                                   <li><span class="k-sprite image"></span>my-photo.jpg</li>
 
                               </ul>
 
                           </li>
 
                           <li data-expanded="true">
 
                               <span class="k-sprite folder"></span>resources
                                
<ul>
 
                                   <li data-expanded="true">
 
                                       <span class="k-sprite folder"></span>pdf
                                        
<ul>
 
                                           <li><span class="k-sprite pdf"></span>brochure.pdf</li>
 
                                           <li><span class="k-sprite pdf"></span>prices.pdf</li>
 
                                       </ul>
 
                                   </li>
 
                                   <li><span class="k-sprite folder"></span>zip</li>
 
                               </ul>
 
                           </li>
 
                           <li><span class="k-sprite html"></span>about.html</li>
 
                           <li><span class="k-sprite html"></span>contacts.html</li>
 
                           <li><span class="k-sprite html"></span>index.html</li>
 
                           <li><span class="k-sprite html"></span>portfolio.html</li>
 
                       </ul>
 
                   </li>
 
               </ul>
 
           </div>

 
           <script>
 
               $(document).ready(function() {
 
                   $("#treeview").kendoTreeView();
 
               });
 
           </script>

 
           <style>
 
               #treeview .k-sprite {
 
                   background-imageurl("../content/web/treeview/coloricons-sprite.png");
 
               }

 
               .rootfolder background-position0 0; }
 
               .folder background-position-16px; }
 
               .pdf background-position-32px; }
 
               .html background-position-48px; }
 
               .image background-position-64px; }

 
           </style>
 
       </div>


</
body>
</
html





ListView / Basic usage
HTML5/JavaScript source





PHP كود :
<!DOCTYPE html>
<
html>
<
head>
 
   <title></title>
 
   <link rel="stylesheet" href="styles/kendo.common.min.css" />
 
   <link rel="stylesheet" href="styles/kendo.default.min.css" />

 
   <script src="js/jquery.min.js"></script>
 
   <script src="js/kendo.all.min.js"></script>
</
head>
<
body>
<
div id="example">

 
   <script src="../content/shared/js/products.js"></script>

 
   <div class="demo-section k-header wide">
 
       <div id="listView"></div>
 
       <div id="pager" class="k-pager-wrap"></div>
 
   </div>

 
   <script type="text/x-kendo-template" id="template">
 
       <div class="product">
 
           <img src="../content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" />
 
           <h3>#:ProductName#</h3>
 
           <p>#:kendo.toString(UnitPrice, "c")#</p>
 
       </div>
 
   </script>

 
   <script>
 
       $(function() {
 
           var dataSource = new kendo.data.DataSource({
 
               dataproducts,
 
               pageSize21
            
});

 
           $("#pager").kendoPager({
 
               dataSourcedataSource
            
});

 
           $("#listView").kendoListView({
 
               dataSourcedataSource,
 
               templatekendo.template($("#template").html())
 
           });
 
       });
 
   </script>

 
   <style>
 
       #listView {
 
           padding10px 5px;
 
           margin-bottom: -1px;
 
           min-height510px;
 
       }
 
       .product {
 
           floatleft;
 
           positionrelative;
 
           width111px;
 
           height170px;
 
           margin0 5px;
 
           padding0;
 
       }
 
       .product img {
 
           width110px;
 
           height110px;
 
       }
 
       .product h3 {
 
           margin0;
 
           padding3px 5px 0 0;
 
           max-width96px;
 
           overflowhidden;
 
           line-height1.1em;
 
           font-size.9em;
 
           font-weightnormal;
 
           text-transformuppercase;
 
           color#999;
 
       }
 
       .product p {
 
           visibilityhidden;
 
       }
 
       .product:hover p {
 
           visibilityvisible;
 
           positionabsolute;
 
           width110px;
 
           height110px;
 
           top0;
 
           margin0;
 
           padding0;
 
           line-height110px;
 
           vertical-alignmiddle;
 
           text-aligncenter;
 
           color#fff;
 
           background-colorrgba(0,0,0,0.75);
 
           transitionbackground .2s linearcolor .2s linear;
 
           -moz-transitionbackground .2s linearcolor .2s linear;
 
           -webkit-transitionbackground .2s linearcolor .2s linear;
 
           -o-transitionbackground .2s linearcolor .2s linear;
 
       }
 
       .k-listview:after {
 
           content".";
 
           displayblock;
 
           height0;
 
           clearboth;
 
           visibilityhidden;
 
       }
 
   </style>
</
div>


</
body>
</
html



أنا عارف ومتأكد انه ما احد بيدخل هنا ويقرأ .. لكن بحب اخلص ضميري وانشر العلم ..
Abu Ehab : Microsoft Partner  & Systems Developer
 Youtube   Facebook    Twitter   
الرد }}}
#2
جزاك الله كل خير
الرد }}}
تم الشكر بواسطة:
#3
جزاك الله خيراً
نعم نحن لا نتعلم إلا اذا احتجنا بحثنا.
فنحن أمّة لا تقرأ وإذا قرأنا لا نفهم وإذا فهمنا لا نستوعب وإذا استوعبنا كتمنا وإن بذلنا تمننا !!!!
للأسف هكذا نحن !!!
بارك الله فيك ونفعك ونفع بك استاذنا.
سبحان الله والحمدلله ولا إله إلا الله والله أكبر
 اللهم اغْفِرْ لِلمؤمنين والمؤمنات والمسلمين والمسلمات الأحياء منهم والأموات
الرد }}}
تم الشكر بواسطة: Amir_Alzubidy
#4
Thank you abu ehab
الرد }}}
تم الشكر بواسطة: Abu Ehab
#5
Not at all
Abu Ehab : Microsoft Partner  & Systems Developer
 Youtube   Facebook    Twitter   
الرد }}}
تم الشكر بواسطة: صبري زينوبي


المواضيع المحتمل أن تكون متشابهة .
الموضوع : الكاتب الردود : المشاهدات : آخر رد
  Telerik UI For Asp.Net MVC Components Abu Ehab 0 2,608 07-08-17, 03:54 AM
آخر رد: Abu Ehab
  Kendo UI Grid Scaffolding in ASP NET MVC Abu Ehab 0 2,238 08-03-17, 02:21 AM
آخر رد: Abu Ehab
  Telerik UI Kendo for ASP.NET MVC Abu Ehab 1 2,514 16-02-17, 06:10 PM
آخر رد: Abu Ehab

التنقل السريع :


يقوم بقرائة الموضوع: بالاضافة الى ( 1 ) ضيف كريم