Monday, May 23, 2016

Kendo ui


  1. windows example
  2. search box with image
  3. infinite scroll.
  4. Validation 
  5. Notification
  6. best practices 

Kendo ui windows Example

@{
    ViewBag.Title = "Index";
}


<br /><br />
<input type="button" id="btnOpenWindow" value="Open window 1"/>
<input type="button" id="btnOpenWindow2" value="Open window 2" />
<input type="button" id="btnOpenWindow3" value="Open window 3" />
<div id="dialog"  class="hidden"></div>


<div id="dialog2" class="hidden">
    <p><strong>This example will not work, unless you define a valid JSON service URL for `content.url`.</p>
    <p>
        The expected JSON response is:
        <pre>
        { username: "...my username here..." }
        </pre>
        </strong>
    </p>
</div>

<div id="dialog3" class="hidden">



</div>

<script>

    $(document).ready(function () {

        $('#btnOpenWindow').click(openWindow);
        $('#btnOpenWindow2').click(openWindow2);
        $('#btnOpenWindow3').click(openWindow3);
    });

 

    $("#dialog").kendoWindow({
        actions: ["Minimize", "Maximize", "Close"],
        iframe: true,
        content: "http://www.telerik.com/",
        height: 400,
        maxHeight: 500,
        maxWidth: 600,
        Width: 500,
        title: "This is janson example"

    });
    $("#dialog2").kendoWindow({
        actions: ["Minimize", "Maximize", "Close"],
        iframe: false,
        modal: true,
        position: {
            top: 100, // or "100px"
            left: "20%"
        }, title: "This is janson example"
    });
    $("#dialog3").kendoWindow({
        actions: ["Minimize", "Maximize", "Close"]
    });
    function openWindow() {

        $('#dialog').removeClass('hidden');
        $("#dialog").data("kendoWindow").open();
    }
    function openWindow2() {

        $('#dialog2').removeClass('hidden');
        var title = dia;
        $("#dialog2").data("kendoWindow").open();
    }
    function openWindow3() {
        alert();
        $('#dialog3').removeClass('hidden');
        $("#dialog3").data("kendoWindow").content("<h1>hi bugger</h1>");
    }

</script>

----------------------------------------------------------------------------------------

Kendo ui - search combobox with images 


csHtml file


@{
    ViewBag.Title = "Combobox";
}

<h2>Combobox</h2>

<div class="demo-section k-content">
    <h4>Customers</h4>
    <input id="customers" style="width: 101%;" />
    <p class="demo-hint">
        Open the DropDownList to see the customized appearance.
    </p>
</div>


<script src="~/assest/my/ComboboxWithImage.js"></script>
  <style>

                .dropdown-header {
                    border-width: 0 0 1px 0;
                    text-transform: uppercase;
                }

                .dropdown-header > span {
                    display: inline-block;
                    padding: 10px;
                }

                .dropdown-header > span:first-child {
                    width: 50px;
                }

                .selected-value {
                    display: inline-block;
                    vertical-align: middle;
                    width: 24px;
                    height: 24px;
                    background-size: 100%;
                    margin-right: 5px;
                    border-radius: 50%;
                }

                #customers-list .k-item {
                    line-height: 1em;
                    min-width: 300px;
                }
             
                /* Material Theme padding adjustment*/
             
                .k-material #customers-list .k-item,
                .k-material #customers-list .k-item.k-state-hover,
                .k-materialblack #customers-list .k-item,
                .k-materialblack #customers-list .k-item.k-state-hover {
                    padding-left: 5px;
                    border-left: 0;
                }

                #customers-list .k-item > span {
                    -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    box-sizing: border-box;
                    display: inline-block;
                    vertical-align: top;
                    margin: 20px 10px 10px 5px;
                }

                #customers-list .k-item > span:first-child {
                    -moz-box-shadow: inset 0 0 30px rgba(0,0,0,.3);
                    -webkit-box-shadow: inset 0 0 30px rgba(0,0,0,.3);
                    box-shadow: inset 0 0 30px rgba(0,0,0,.3);
                    margin: 10px;
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    background-size: 100%;
                    background-repeat: no-repeat;
                }

                #customers-list h3 {
                    font-size: 1.2em;
                    font-weight: normal;
                    margin: 0 0 1px 0;
                    padding: 0;
                }

                #customers-list p {
                    margin: 0;
                    padding: 0;
                    font-size: .8em;
                }

            </style>
<style>
    .dropdown-header {
        border-width: 0 0 1px 0;
        text-transform: uppercase;
    }

        .dropdown-header > span {
            display: inline-block;
            padding: 10px;
        }

            .dropdown-header > span:first-child {
                width: 50px;
            }

    .selected-value {
        display: inline-block;
        vertical-align: middle;
        width: 24px;
        height: 24px;
        background-size: 100%;
        margin-right: 5px;
        border-radius: 50%;
    }

    #customers-list .k-item {
        line-height: 1em;
        min-width: 300px;
    }

    /* Material Theme padding adjustment*/

    .k-material #customers-list .k-item,
    .k-material #customers-list .k-item.k-state-hover,
    .k-materialblack #customers-list .k-item,
    .k-materialblack #customers-list .k-item.k-state-hover {
        padding-left: 5px;
        border-left: 0;
    }

    #customers-list .k-item > span {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: inline-block;
        vertical-align: top;
        margin: 20px 10px 10px 5px;
    }

        #customers-list .k-item > span:first-child {
            -moz-box-shadow: inset 0 0 30px rgba(0,0,0,.3);
            -webkit-box-shadow: inset 0 0 30px rgba(0,0,0,.3);
            box-shadow: inset 0 0 30px rgba(0,0,0,.3);
            margin: 10px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-size: 100%;
            background-repeat: no-repeat;
        }

    #customers-list h3 {
        font-size: 1.2em;
        font-weight: normal;
        margin: 0 0 1px 0;
        padding: 0;
    }

    #customers-list p {
        margin: 0;
        padding: 0;
        font-size: .8em;
    }
</style>


//////////////////

Ts file

/// <reference path="../jquery.d.ts" />
/// <reference path="../kendo.all.d.ts" />
/// <reference path="../tsmessage.ts" />

// [2016-05-17]
module EventDetailView {

    var dataLength = 0;
    var startPos = 0;

    $(document).ready(function () {
   
        $("#customers").kendoDropDownList({
            dataTextField: "PostName",
            dataValueField: "PostID",
            headerTemplate: '<div class="dropdown-header k-widget k-header">' +
            '<span>Photo</span>' +
            '<span>Contact info</span>' +
            '</div>',
            valueTemplate: '<span class="selected-value" style="background-image: url(\'#:Image#\')"></span><span>#:PostName#</span>',
            template: '<span class="k-state-default" style="background-image: url(\'#:Image#\')"></span>' +
            '<span class="k-state-default"><h3>#: PostName #</h3><p>#:PostName #</p></span>',
       
            height: 400
        });


        var dropdownlist = $("#customers").data("kendoDropDownList");
        var dataSource = new kendo.data.DataSource();

        new apiConnector().callservice('/TTT/GetPosts', { begin: 10 }).done(function (data) {
            console.log(data);
            dataSource.data(data);
            dropdownlist.setDataSource(dataSource);

        });


    });



      class apiConnector {

        callservice(url: string, data: any): JQueryDeferred<any> {
            var dfd = jQuery.Deferred();
            $.ajax({
                url: url,
                method: "GET",
                contentType: "application/json; charset=utf-8",
                data: data,
                dataType: "json",
                cache: false,
                success: function (data) {
                    var value = data;
                    dfd.resolve(value);
                },
                error: function (xhr, textStatus, errorThrown) {
                    console.log(textStatus);
                    dfd.reject();
                }
            });
            return dfd;
        }

    }

}

//////////

Json 

[{"PostID":10,"PostName":"post name 10","Image":"http://srilankanspuwath.co.uk/web/wp-content/uploads/2013/01/Sri-Lanka-logo.jpg"},{"PostID":11,"PostName":"post name 11","Image":"http://srilankanspuwath.co.uk/web/wp-content/uploads/2013/01/Sri-Lanka-logo.jpg"},{"PostID":12,"PostName":"post name 12","Image":"http://srilankanspuwath.co.uk/web/wp-content/uploads/2013/01/Sri-Lanka-logo.jpg"},{"PostID":13,"PostName":"post name 13","Image":"http://srilankanspuwath.co.uk/web/wp-content/uploads/2013/01/Sri-Lanka-logo.jpg"},{"PostID":14,"PostName":"post name 14","Image":"http://srilankanspuwath.co.uk/web/wp-content/uploads/2013/01/Sri-Lanka-logo.jpg"},{"PostID":15,"PostName":"post name 15","Image":"http://srilankanspuwath.co.uk/web/wp-content/uploads/2013/01/Sri-Lanka-logo.jpg"},{"PostID":16,"PostName":"post name 16","Image":"http://srilankanspuwath.co.uk/web/wp-content/uploads/2013/01/Sri-Lanka-logo.jpg"},{"PostID":17,"PostName":"post name 17","Image":"http://srilankanspuwath.co.uk/web/wp-content/uploads/2013/01/Sri-Lanka-logo.jpg"},{"PostID":18,"PostName":"post name 18","Image":"http://srilankanspuwath.co.uk/web/wp-content/uploads/2013/01/Sri-Lanka-logo.jpg"}]

/////////////////////////////////////////////////////////////////////


kendo - Infinite scroll 





ts file

module EventDetailView {

    var dataLength = 0;
    var startPos = 0;

    $(document).ready(function () {
        $("#userGroup").before("yahoo");
        let _apiConnector = new apiConnector();
        let _form = new form();
        _form.bindValues(0);
        infiniteLoad();
        function infiniteLoad() {
            $(window).on('scroll', () => {
                var h1 = $(document).height() - $(window).height();
                var h2 = $(window).scrollTop() + 350;
                if (h2 >= h1 && dataLength > 0) {
                    startPos = startPos + 6 - 1;
                    new form().bindValues(startPos);
                }
            });
        }
     
    });

    export class form {

        bindValues(val) {

            var f = new form();
         
            new apiConnector().callservice('/TTT/GetPosts', { begin: val})
                .done(function (data) {

                    // bind users
                    var template = kendo.template($("#lstSubAccounts").html());
                    var dataSource = new kendo.data.DataSource();

                    dataSource.data(data);
                    $.each(dataSource.data(), function (i, d) {
                        console.log(template(d));
                        $("#userGroup").before(template(d));
                    });
                    dataSource.read();
                    dataLength = data.length;

                }).fail(function () {
                    console.log('error');
                });
        }


    }

    export class apiConnector {

        callservice(url: string, data: any): JQueryDeferred<any> {
            var dfd = jQuery.Deferred();
            $.ajax({
                url: url,
                method: "GET",
                contentType: "application/json; charset=utf-8",
                data: data,
                dataType: "json",
                cache: false,
                success: function (data) {
                    var value = data;
                    dfd.resolve(value);
                },
                error: function (xhr, textStatus, errorThrown) {
                    console.log(textStatus);
                    dfd.reject();
                }
            });
            return dfd;
        }
    }
}

//////////////////////////////////////

CSHtml File


<div height="100%" class="row" id="userGroup"></div>

 <!-- START list group item-->
<script type="text/x-kendo-template" id="lstSubAccounts">

        <div class="col-lg-4 col-md-6 col-sm-12">

            <div md-ink-ripple="md-ink-ripple" class="card animated fadeInDown anim-delay-15">
                <div class="card-item">
                    <a href="/facility/info?facilityId=#=PostID#" style="color:inherit;">
                        <img alt="MaterialImg" class="img-responsive" src="#:Image#" style="width:513px; height:342px;" />
                    </a>
               
                </div>
                <div class="card-offset pull-right">
               
                </div>
                <div class="card-body">
                     #:PostName#
                </div>
            </div>
        </div>


</script>

<script src="~/assest/my/InfiniteScorall.js"></script>
------------------------------------

Controller file


public ActionResult Posts() {

            return View();
 }



        [HttpGet]
        public JsonResult GetPosts(int begin) {

            return Json(new Posts().GetPostsPaging(begin), JsonRequestBehavior.AllowGet);
        }


  public class Posts {

        List<Post> LstPosts = new List<Post>();

        public List<Post> GetPostsPaging(int begin,int index=9) {

            return GetPosts().Skip(begin).Take(index).ToList();
        }

        public List<Post> GetPosts() {

            for (int i = 0; i < 100; i++)
            {
                LstPosts.Add(new Post {
                     Image = "http://srilankanspuwath.co.uk/web/wp-content/uploads/2013/01/Sri-Lanka-logo.jpg",
                     PostID  = i,
                     PostName = $"post name {i}"
                });

            }
            return LstPosts;
        }
    }

    public class Post {

        public int PostID { get; set; }
        public string PostName { get; set; }
        public string Image { get; set; }
    }


/////////////////////////////////////////////

Kendo value binding



// call page refresh
initLookups();

var initLookups = () => {
  // code what you want when page init
};

// assign fields what are they 

  $(".ui-text-area").kendoEditor({ resizable: { content: true, toolbar: true } });
            $('input[name="reservationDeposit"]').kendoNumericTextBox({ format: "c2", min: 0 });
            $('input[name="dailyRate"]').kendoNumericTextBox({ format: "c2", min: 0 });
            $('input[name="hourlyRate"]').kendoNumericTextBox({ format: "c2", min: 0 });
            $('input[name="standingCapacity"]').kendoNumericTextBox({ format: "#", min: 0 });
            $('input[name="seatingCapacity"]').kendoNumericTextBox({ format: "#", min: 0 });
            $('input[name="length"]').kendoNumericTextBox({ format: "n", min: 0 });
            $('input[name="height"]').kendoNumericTextBox({ format: "n", min: 0 });
            $('input[name="width"]').kendoNumericTextBox({ format: "n", min: 0 });
            $('input[name="bumpInMinutes"]').kendoNumericTextBox({ format: "n", min: 0 });
            $('input[name="bumpOutMinutes"]').kendoNumericTextBox({ format: "n", min: 0 });
            $('input[name="phoneNumber"]').kendoMaskedTextBox({ mask: "(999) 000-0000" });
            $('input[name="mobileNumber"]').kendoMaskedTextBox({ mask: "(999) 000-0000" });

            $('#operatingStartTime').kendoTimePicker();
            $('#operatingEndTime').kendoTimePicker();

            $('input[name="recurreFrom"]').kendoTimePicker();
            $('input[name="recurreTo"]').kendoTimePicker();
            $('input[name="occureFrom"]').kendoDatePicker();
            $('input[name="occureTo"]').kendoDatePicker();

 <div class="row">
                                            <div class="col col-lg-4 col-md-12">
                                                <div class="form-group">
                                                    <label>Deposite</label>
                                                    <input type="number" id="reservationDeposit" name="reservationDeposit" style="width: 100%" />
                                                    <label for="reservationDeposit"></label>
                                                </div>
                                            </div>
                                            <div class="col col-lg-4 col-md-12">
                                                <div class="form-group">
                                                    <label>Daily Rate</label>
                                                    <input type="number" name="dailyRate" style="width: 100%" />
                                                </div>
                                            </div>
                                            <div class="col col-lg-4 col-md-12">
                                                <div class="form-group">
                                                    <label>Hourly Rate</label>
                                                    <input type="number" name="hourlyRate" style="width: 100%" />
                                                </div>
                                            </div>


///////////////////
value binding from api to the controller

javascript


         $.ajax({
                url: '/admin/facility/getlookup',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                method: "GET",
                success: (data) => {
                    $('select[name="facilityManagerId"]').kendoDropDownList({ dataSource: data.lookups.facilityManagers, dataTextField: "text", dataValueField: "value", optionLabel: { text: "Select Facility Manager", value: 0 } });
                    $('select[name="facilityCategoryId"]').kendoDropDownList({ dataSource: data.lookups.facilityCategories, dataTextField: "text", dataValueField: "value", optionLabel: { text: "Select Facility Category", value: 0 } });
                    $('select[name="venueId"]').kendoDropDownList({ dataSource: data.lookups.facilityVeneus, dataTextField: "text", dataValueField: "value", optionLabel: { text: "Select Venue", value: 0 } });
                    $('select[name="facilityTypeId"]').kendoDropDownList({ dataSource: data.lookups.facilityTypes, dataTextField: "text", dataValueField: "value", optionLabel: { text: "Select Facility Type", value: 0 } });
                    $('select[name="configurationTypeId"]').kendoDropDownList({ dataSource: data.lookups.configType, dataTextField: "text", dataValueField: "value", optionLabel: { text: "Select Configuration Type", value: 0 } });
                    $('select[name="configurationCategoryId"]').kendoDropDownList({ dataSource: data.lookups.configCategory, dataTextField: "text", dataValueField: "value", optionLabel: { text: "Select Configuration Category", value: 0 } });
                    $('select[name="metricUnitId"]').kendoDropDownList({ dataSource: data.lookups.metrics, dataTextField: "text", dataValueField: "value", optionLabel: { text: "Select Metric Type", value: 0 } });
                }
            });

html
<div class="row">
                                            <div class="col col-lg-6">
                                                <div class="form-group">
                                                    <label>Facility Manager</label>
                                                    <div>
                                                        <select id="facilityManagerId" name="facilityManagerId" style="width: 100%"></select>
                                                    </div>
                                                    <label for="facilityManagerId"></label>
                                                </div>
                                            </div>
                                            <div class="col col-lg-6">
                                                <div class="form-group">
                                                    <label>Venue</label>
                                                    <div>
                                                        <select id="venueId" name="venueId" style="width: 100%"></select>
                                                    </div>
                                                    <label for="venueId"></label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col col-lg-6 col-md-6">
                                                <div class="form-group">
                                                    <label>Facility Type</label>
                                                    <div>
                                                        <select id="facilityTypeId" name="facilityTypeId" style="width: 100%"></select>
                                                    </div>
                                                    <label for="facilityTypeId"></label>
                                                </div>
                                            </div>
                                            <div class="col col-lg-6 col-md-6">
                                                <div class="form-group">
                                                    <label>Facility Category</label>
                                                    <div>
                                                        <select name="facilityCategoryId" style="width: 100%"></select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <br />
                                        <div class="row">
                                            <div class="col col-lg-4 col-md-12">
                                                <div class="form-group">
                                                    <label>Deposite</label>
                                                    <input type="number" id="reservationDeposit" name="reservationDeposit" style="width: 100%" />
                                                    <label for="reservationDeposit"></label>
                                                </div>
                                            </div>

json example
http://www.jsoneditoronline.org/?id=ec8d18e01ec128abb8f985285979550f

///////////////////////////////////
Trigger drop down change event


onRecuurentChange(e) {
            if (parseInt($(e.target).val()) !== 2) { $('#weekSelection').addClass('hidden'); $("#ddl-weekdays").data('kendoMultiSelect').value(''); }
            else { $('#weekSelection').animateTo('fadeInDown'); }
        }
-----------------------------------------------------------------------
 init(e?) {
            util.clearStorage('exclusion-facility');
            this.exclusionDates = arguments.length === 0 ? util.store('exclusion-facility') : util.store('exclusion-facility', e);
            this.tmpl = kendo.template($('#tmpl_exclusions').html());
            this.render();
            this.bindEvents();
        },
        bindEvents() {
            $('#addExclusions').on('click', this.create.bind(this));
            $('#dateTableGrid thead').off('click', 'a[data-action="exdelete"]').on('click', 'a[data-action="exdelete"]', this.deleteExclusion.bind(this));
            $('input[name="isFullDay"').on('click', this.toggleTime.bind(this));
            $('select#recurrentType').on('change', this.onRecuurentChange.bind(this));
            $("#ddl-weekdays").kendoMultiSelect({ autoClose: false });
        },

//////////////////////////

Kendo UI API

Give specific function to the element

<!-- HTML element from which the DatePicker would be initialized --> <input id="datepicker" /> <script> $(function() { // Initialize the Kendo UI DatePicker by calling the kendoDatePicker jQuery plugin $("#datepicker").kendoDatePicker(); }); </script>

// now datePicker is DatePicker


Grid view

01) Basic value binding

// define the HTML div that will contain the Grid <div id="grid"></div> // initialize the Grid <script> $(document).ready(function(){ $("#grid").kendoGrid({
groupable: true, //set propoerties scrollable: true, sortable: true, pageable: true, columns: [{ // init coloms field: "FirstName", title: "First Name" }, { field: "LastName", title: "Last Name" }], dataSource: { //Json value data: [{ FirstName: "Joe", LastName: "Smith" }, { FirstName: "Jane", LastName: "Smith" }] } }); }); </script>

///////////////


Kendo ui Validation 


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.504/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.504/styles/kendo.rtl.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.504/styles/kendo.silver.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.504/styles/kendo.mobile.all.min.css" />

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>
</head>
<body>

    <div id="myform">
        <table>
            <tr>
                <td> user name </td>
                <td> <input name="username" />  </td>
            </tr>
            <tr>
                <td> Town </td>
                <td> <input name="town" />  </td>
            </tr>
            <tr>
                <td> password </td>
                <td> <input name="password123"  type="password"/>  </td>
            </tr>
            <tr>
                <td> confirm password </td>
                <td> <input name="confirmPassword" type="password" />  </td>
            </tr>
            <tr>
                <td> select gender </td>
                <td>  <select name="gender" id="g" >
                        <option value="0">Select Gender</option>
                        <option value="1">Male</option>
                        <option value="2">Female</option>
                    </select>
                 </td>
            </tr>
            <tr>
                <td> agreement </td>
                <td>
                    <input type="checkbox" id="chkAgreenent" name="agreement" value="" />
                </td>
            </tr>
        </table>

        <br />
         <br /><br />
        <br />

        <button>Validate</button>
        <input type="button" name="name" value="xxx" id="btnXXX" />
    </div>

    <script>


        $('#btnXXX').click(function () {

            if ($("#myform").data("kendoValidator").validate()) {

                alert('validated');
            } else { alert('not valiedated');}
        });

    $("#myform").kendoValidator({
      rules: {
          customRule1: function (input) {
             if (input.is("[name=username]")) {
                  return $.trim(input.val()) !== "";
             }
             return true;
        },
          customRule2: function (input) {
              if (input.is("[name=town]")) {
                  return $.trim(input.val()) !== "";
              } return true;
              return true;
          },
          customRule3: function (input) {
              if (input.is("[name=password123]")) {
                if (input.val().length < 5) { return false; }
            } return true;
        },
          customRule4: function (input) {
              if (input.is("[name=confirmPassword]")) {
                  if ($('[name=password123]').val() != $('[name=confirmPassword]').val()) {
                      return false;
                  }
              } return true;
          },
          customRule5: function (input) {
              if (input.is("#g")) {
                  if ($("#g option:selected").val() == "0") {
                      return false;
                  }
              } return true;
          },
          customRule6: function (input) {
              if (input.is("#chkAgreenent")) {
                  if (!$('[name=agreement]').is(":checked")) {
                      return false;
                  }
              } return true;
          }
      },
      messages: {
          customRule1: "User name requred",
          customRule2: "Town is requred",
          customRule3: "password must be @ least 5 chars",
          customRule4: "password and confirm password must be same",
          customRule5: "please select your gender",
          customRule6 : "please agree our conditions"
      }
    });
    </script>
</body>
</html>



Use template

attribute


 errorTemplate: "<span class='field-validation-error alert alert-danger'>#=message#</span>",





//////////////////////////////////////////////////

Kendo ui notification


<!DOCTYPE html>
<html>
<head>
    <title></title>
     <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.material.min.css" />

    <script src="//kendo.cdn.telerik.com/2016.1.412/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>
</head>
<body>

        <div id="example">
<span id="notification" style="display:none;"></span>
  <input type='button'  value='success' id='aaa'/>
<script id="successTemplate" type="text/x-kendo-template">
                <div class="upload-success">
                    <img src="http://demos.telerik.com/kendo-ui/content/web/notification/success-icon.png" />
                    <h3>#= message #</h3>
                </div>
            </script>
 <script>

$(document).ready(function(){

var notification = $("#notification").kendoNotification({
                        position: {
                            pinned: true,
                            top: 30,
                            right: 30
                        },
                        autoHideAfter: 0,
                        stacking: "down",
                        templates: [  {
                            type: "upload-success",
                            template: $("#successTemplate").html()
                        }]

                    }).data("kendoNotification");

$('#aaa').click(function(){
   notification.show({message: "Upload Successful"}, "upload-success");
});


});



</script>

            <style>
       
                /* Success template */
                .k-notification-upload-success.k-group {
                    background: rgba(0%,60%,0%,.7);
                    color: #fff;
                }
                .upload-success {
                    width: 240px;
                    height: 100px;
                    padding: 0 30px;
                    line-height: 100px;
                }
                .upload-success h3 {
                    font-size: 12px;
                    font-weight: normal;
                    display: inline-block;
                    vertical-align: middle;
                }
                .upload-success img {
                    display: inline-block;
                    vertical-align: middle;
                    margin-right: 10px;
                }
            </style>
        </div>


</body>
</html>

/////////////////////////////////////////////

best practices 

this.occureFrom = $('input[name="occureFrom"]').kendoDatePicker({ value: new Date(), change: this.occureFromChange.bind(this) })
               .data("kendoDatePicker");

this.occureFrom.value(open);
                    this.occureFrom.min(open);
                    this.occureFrom.max(closed);
                    this.occureTo.value(open);
                    this.occureTo.min(open);
                    this.occureTo.max(closed);

occureFromChange(e) {
       var startDate = this.occureFrom.value(),
           endDate = this.occureTo.value();
       if (startDate) {
           startDate = new Date(startDate);
           startDate.setDate(startDate.getDate());
           this.occureTo.min(startDate);
           this.occureTo.value(startDate);
       }
       else if (endDate) {
           this.occureFrom.max(new Date(endDate));
       }
       else {
           endDate = new Date();
           this.occureFrom.max(endDate);
           this.occureTo.min(endDate);
       }
   }


at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Sql server row level policy

  • Drapper
    Dapper - a simple object mapper for .Net https://github.com/StackExchange/dapper-dot-net/blob/master/Readme.md Install-Package Dappe...
  • Kendo ui - search combobox with images
    csHtml file @{     ViewBag.Title = "Combobox"; } <h2>Combobox</h2> <div class="demo-section k-conten...
  • IIS
    Using Custom Domains With IIS Express   For Visual Studio 2015 the steps in the above answers apply but the applicationhost.config ...