Kendoui free part of development experience.

Kendo has multiple versions. The core UI free version is. net, Java, and PHP.

 

The open UI of the basic free version is tested in multiple ways, which is no different from the paid UI. The paid version provides the back-end code and front-end encapsulation syntax, so that JavaScript front-end can be easily developed without understanding.

 

There is a huge gap between the basic free version and the Professional version of the demo. The basic version of the demo only provides the most basic demo sample, such as page flip on the listview server, the sample on the official website is not involved, the first time a complete data front-end is loaded, the page is displayed.

 

In actual development, backend developers are reluctant to buy professional packages in different languages, or want to write pure JS, or require in-depth customization and expansion, you can get the API Information in the paid demo.

 

From the demo of the development version, we can see the JS Code data sample generated by the front end. Then we can look at the data submitted, processed, and returned by the backend. You can operate and customize expansion functions in pure JS mode.

 

Actual work is not complicated

 

The following are some of the functions and Code implemented in my work in this way.

 

The Chat History statistics display function implemented by the Kendo UI listview (not completed yet)

 

 

 

    <script>        function getdatestring(dt) {            var s = dt.indexOf(‘(‘);            var e = dt.indexOf(‘)‘);            var strdate = dt.substring(s + 1, e);            //return  strdate;            return new Number(strdate);        }        //1000    创建未接入会话        //1001    接入会话        //1002    主动发起会话        //1004    关闭会话        //1005    抢接会话        //2001    公众号收到消息        //2002    客服发送消息        //2003    客服收到消息        function isUserSendInfo(ope) {            if (ope == 2003 || ope == 2001) {                return "in";            }            if (ope == 2002) return "out";            return "";        }        function gethidden1(ope)        {            if (ope == 2003 || ope == 2001) return "none";            else return "";        }        //当是客服发信息时        function gethidden2(ope) {            if (ope == 2002) return "none";            else return "";        }    </script>        <script type="text/x-kendo-template" id="template2">         <li class="#:isUserSendInfo(opercode)#">            <div class="message">                <span class="arrow"></span>                <a class="name" style="display: #:gethidden2(opercode)#; ">#:nickname#</a>                <span class="datetime">#:kendo.toString(new Date(getdatestring(date)),"yyyy-MM-dd")# #:kendo.toString(new Date(time),"HH:mm")#</span>                <a class="name" style="display:#:gethidden1(opercode)#; ">#:worker#</a>                <span class="body">#:text#</span>            </div>        </li>           </script>    <div class="demo-section">        <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 600px;">            <div id="listView" class="scroller" data-height="600px" data-always-visible="1" data-rail-visible1="1" style="overflow: hidden; width: auto; height: 600px;">                <ul class="chats" id="ullist">                </ul></div>        </div>            <div id="pager" class="k-pager-wrap"></div>        </div>    <script>        $(function() {            var dataSource = new kendo.data.DataSource({                "transport":                {                    "prefix": "",                    "read": { "url": "/Admin/MpCustomerService/MpCustomerServiceConfig_Read_List?mpaccountid=112" }                },                "pageSize": 10,                "page": 1,                "total": 0,                "serverPaging": true,                //"serverSorting": true,                //"serverFiltering": true,                //"serverGrouping": true,                //"serverAggregates": true,                "type": "aspnetmvc-ajax",                "filter": [],                "schema": {                    "data": "Data",                    "total": "Total",                    "errors": "Errors",                }            });            $("#pager").kendoPager({                dataSource: dataSource            });            $("#ullist").kendoListView({                dataSource: dataSource,                template: kendo.template($("#template2").html())            });        });    </script>

 

Obtain the API information from the front-end and back-end demos supported by the paid version, and then use it for application development in the free version.

Kendoui free part of development experience.