1. What is Kendo UI

Kendo UI is a comprehensive framework which comes with a library of 70+ UI widgets, an abundance of data-visualization gadgets, client-side data source, and a built-in MVVM (Model-View-ViewModel) library. It provides AngularJS and Bootstrap integration and is also distributed as part of several product units that you can choose from depending on your project requirements.
Install kendo ui core for jsp anh html application:


Example:
 <!DOCTYPE html>
<html>
<head>
    <title>Welcome to Kendo UI!</title>
    <!-- Common Kendo UI CSS for web widgets and widgets for data visualization. -->
    <link href="assets/styles/kendo.common.min.css" rel="stylesheet" />
    
    <!-- Default Kendo UI theme CSS for web widgets and widgets for data visualization. -->
    <link href="assets/styles/kendo.default.min.css" rel="stylesheet" />
    
    <!-- Optional -->
    <link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />

    <!-- jQuery JavaScript -->
    <script src="assets/js/jquery.min.js"></script>

     <!-- Kendo UI combined JavaScript -->
    <script src="assets/js/kendo.all.min.js"></script>
</head>
<body>
    <div class="demo-section k-content" style="width:800px;">
        <h4>Show e-mails from:</h4>
        <input id="datepicker" value="10/10/2011" title="datepicker" style="width: 100%" />

         <h4 style="margin-top: 2em;">Add to archive mail from:</h4>
        <input id="monthpicker" value="November 2011" title="monthpicker" style="width: 100%" />
    </div>
    <script>
        $(document).ready(function() {
            // create DatePicker from input HTML element
            $("#datepicker").kendoDatePicker();

             $("#monthpicker").kendoDatePicker({
                // defines the start view
                start: "year",

                 // defines when the calendar should return date
                depth: "year",

                 // display month and year in the input
                format: "MMMM yyyy",

                 // specifies that DateInput is used for masking the input element
                dateInput: true
            });
        });
    </script>
</body>
</html>

2. Kendo UI validator in popup

There are folling steps to use validator using kendo-ui
  • form is place inside selector that has class="kendo_popup"
    <div id="setup_chkpaper">
      <div id="setup_chkpaper_1" class="kendo_popup">
       <form name="setupChkpaperForm" id="setupChkpaperForm" class="form-horizontal row" role="form" method="post" kendo-validator="vm.validator" >
          <div class="ct_view_kcs" id="setup_chkpaper_2">
        ...
          </div>
        </form>
       </div>
     </div>
  • In AngularJS controller
    // validate
    vm.validatorOptions = kendoConfig.get('validatorOptions');

    function submit() {
        if (!vm.validator.validate()) {
            //kendo will validate inside here
           
        } else {
           // validate in true cases
        }

    }
  • In form, use kendo-validator="vm.validator" property
    For example:
    <form name="setupChkpaperForm" id="setupChkpaperForm" class="form-horizontal row" role="form" method="post" kendo-validator="vm.validator" >
    ...
    </form>

3. Kendo Grid

4. Setting up the Angular project and add the KendoUI styles

ng new my-first-angular-project --style=scss
cd my-first-angular-project
npm install --save @progress/kendo-angular-buttons @progress/kendo-angular-l10n
npm install --save @progress/kendo-theme-default
Now, import the SCSS file from the package in src/styles.scss:
/* You can add global styles to this file, and also import other style files */

@import "~@progress/kendo-theme-default/scss/all";


$ ng serve



5. Kendo Upload file


From Remove Files with Confirmation Dialog
<script>
     $(document).ready(function() {
             var fileUidToRemove = "";
              $("#attachments_doc").kendoUpload({
                  localization: {
                 select: "Choose file..."
             },
             async: {
                 //removeUrl: "Home/Remove",
                 removeUrl: "remove",
                 autoUpload: false,
             },
             remove: function(e) {
                fileUidToRemove = e.files[0].uid;
                //removeSetupReportAttachFileCli(e.files[0].name);
                e.preventDefault();
                $("#attachments_doc").data("kendoUpload").removeFileByUid(fileUidToRemove);
                kendo.confirm("Remove the file?").then(function(){
                  $("#attachments_doc").data("kendoUpload").removeFileByUid(fileUidToRemove);
                });
              }
             /////
                });
             
      });
</script>

6. Kendo Popup

var myWindow = $("#setup_chkreport_1"),
        undo = $("#setup_chkreport_2");
       
        undo.click(function() {
            //myWindow.data("kendoWindow").open();
            //undo.fadeOut();
        });

        function onClose() {
            //$("html, body").css("overflow", "");
            undo.fadeIn();
        }
       
        $("#btnRemoveSetupChkReportForm").click(function() {
            $("#setup_chkreport_1").data("kendoWindow").close();
        });
       
        $(document).on('click','#btnRemoveSetupChkReportForm',function(){
            $("#lap_bbkt_1").data("kendoWindow").close();
        });
      
        myWindow.kendoWindow({
            width: "1100px",
            height: "450px",
            title: "Create report",
            visible: false,
            position: {
                top: 50, // or "100px"
                left: "20%"
            },
            modal: true,
            open: function(e) {
                this.wrapper.css({ top: 25 });
                $("html, body").css("overflow", "hidden!important");
            },
            actions: [
                "Close"
            ],
            close: onClose
        }).data("kendoWindow").center().open();

var myWindow = $("#setup_chkreport_1");
myWindow.data("kendoWindow").close();

=> when popup not close, we can update it's content, for example:
var dialog = $("#setup_chkreport_1").data("kendoWindow");                           dialog.title(vm.setupChkreportDTO.title);