تقييم الموضوع :
  • 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"
                    },
                    pageSize: 20
                },
                height: 550,
                groupable: true,
                sortable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
                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",
                    width: 240
                }, {
                    field: "ContactTitle",
                    title: "Contact Title"
                }, {
                    field: "CompanyName",
                    title: "Company Name"
                }, {
                    field: "Country",
                    width: 150
                }]
            });
        });
    </script>
</div>

<style type="text/css">
    .customer-photo {
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-size: 32px 35px;
        background-position: center center;
        vertical-align: middle;
        line-height: 32px;
        box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
        margin-left: 5px;
    }

    .customer-name {
        display: inline-block;
        vertical-align: middle;
        line-height: 32px;
        padding-left: 3px;
    }
</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-image: url("../content/web/treeview/coloricons-sprite.png");
                }

                .rootfolder { background-position: 0 0; }
                .folder { background-position: 0 -16px; }
                .pdf { background-position: 0 -32px; }
                .html { background-position: 0 -48px; }
                .image { background-position: 0 -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({
                data: products,
                pageSize: 21
            });

            $("#pager").kendoPager({
                dataSource: dataSource
            });

            $("#listView").kendoListView({
                dataSource: dataSource,
                template: kendo.template($("#template").html())
            });
        });
    </script>

    <style>
        #listView {
            padding: 10px 5px;
            margin-bottom: -1px;
            min-height: 510px;
        }
        .product {
            float: left;
            position: relative;
            width: 111px;
            height: 170px;
            margin: 0 5px;
            padding: 0;
        }
        .product img {
            width: 110px;
            height: 110px;
        }
        .product h3 {
            margin: 0;
            padding: 3px 5px 0 0;
            max-width: 96px;
            overflow: hidden;
            line-height: 1.1em;
            font-size: .9em;
            font-weight: normal;
            text-transform: uppercase;
            color: #999;
        }
        .product p {
            visibility: hidden;
        }
        .product:hover p {
            visibility: visible;
            position: absolute;
            width: 110px;
            height: 110px;
            top: 0;
            margin: 0;
            padding: 0;
            line-height: 110px;
            vertical-align: middle;
            text-align: center;
            color: #fff;
            background-color: rgba(0,0,0,0.75);
            transition: background .2s linear, color .2s linear;
            -moz-transition: background .2s linear, color .2s linear;
            -webkit-transition: background .2s linear, color .2s linear;
            -o-transition: background .2s linear, color .2s linear;
        }
        .k-listview:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
    </style>
</div>


</body>
</html> 



أنا عارف ومتأكد انه ما احد بيدخل هنا ويقرأ .. لكن بحب اخلص ضميري وانشر العلم ..
Abu Ehab : Microsoft Partner  & Systems Developer
 Youtube   Facebook    Twitter   
الرد }}}}
#2
جزاك الله كل خير
الرد }}}}
تم الشكر بواسطة:
#3
جزاك الله خيراً
نعم نحن لا نتعلم إلا اذا احتجنا بحثنا.
فنحن أمّة لا تقرأ وإذا قرأنا لا نفهم وإذا فهمنا لا نستوعب وإذا استوعبنا كتمنا وإن بذلنا تمننا !!!!
للأسف هكذا نحن !!!
بارك الله فيك ونفعك ونفع بك استاذنا.
سبحان الله والحمدلله ولا إله إلا الله والله أكبر
 رَبِّ اغْفِرْ لِي وَلِوَالِدَيَّ
Heart
الرد }}}}
تم الشكر بواسطة: 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 77 07-08-17, 03:54 AM
آخر رد: Abu Ehab
  Kendo UI Grid Scaffolding in ASP NET MVC Abu Ehab 0 192 08-03-17, 02:21 AM
آخر رد: Abu Ehab
  Telerik UI Kendo for ASP.NET MVC Abu Ehab 1 206 16-02-17, 06:10 PM
آخر رد: Abu Ehab

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


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