TabStrip and DropDownList ***Urgent

1 posts, 0 answers
  1. Rocio
    Rocio avatar
    28 posts
    Member since:
    Dec 2015

    Posted 11 Jan Link to this post

    Thank you in advance for any information you may provide:

    I got the following code, which is also found on http://dojo.telerik.com/@rbordavol/OdUDE

    I am trying to have a tabstrip with a dropdownlist on it.  This is the way it was coded and was working fine with older versions of Telerik; unfortunately between changes on Chrome and newer versions of Chrome this is not longer working; and we are in big trouble because our sites have a lot of dropdownlists within a tabstrip. 

     

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>Untitled</title>

      <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">
      <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">
      <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
      <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/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/2015.3.1111/js/angular.min.js"></script>
      <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>
      <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script></head>
    <body>
      
      <div id="divSysInfoArea" >
        <div id="divSystemInfo" style="display:none">    
        </div>
      </div>
      
      
      <div id="tabStrip" style="clear:both">
        <ul>
            <li id="liGeneralInfo" class="k-state-active">General Info</li>
            <li id="liContacts">Privacy</li>
        </ul>
        <div id="tabGeneralInfo">
            <br />
            <table style="width:100%" id="tblGeneralInfo">
                <tr>
                    <td style="width:20%"><label>System Name: </label></td>
                    <td style="width:80%"><label id="lblSysName" style="font-weight:bold;width:320px"></label></td>
                </tr>
                <tr>
                    <td style="width:20%"><label>Version: </label></td>
                    <td style="width:80%"><label id="lblSysVersion" style="font-weight:bold;width:320px"></label></td>
                </tr>
                <tr>
                    <td style="width:20%"><label>System Description: </label></td>
                    <td style="width:80%">
                        <input id="txtSysDescription" maxlength="200" style="width:550px" />
                    </td>
                </tr>
                <tr>
                    <td>Operated By:</td>
                    <td><input class="dd-hover" id="kdlOperatedBy" style="width:110px;" /></td>
                </tr>
                <tr>
                    <td>Hosted: </td>
                    <td><input id="kdlHostedPlace" style="width:100px" /></td>
                </tr>
                <tr>
                    <td>System Status:</td>
                </tr>
            </table>
            <br />
        </div>
        <div id="second">
          <input id="kdlSecondTab" type="text" />
        </div>
      </div>
      
      <script>   
        
        //constructor, members initialization
    var    sysInfoId = 13001; 
    var InventorySystemInfoEditor = function (sysInfoId) {
        this.sysInfoId = sysInfoId;
        this.sysInfo = null;
        this.lnk = null;
    };
        
        
    InventorySystemInfoEditor.prototype = function(){
       var sysOwnerGrid;
        var contactGrid;
        var offices = [], vmOffices;
        var sysCategories = [], vmSysCategories;
        var sysPurposes = [], vmSysPurposes;
        var sysStatus = [], vmSysStatus;
        var vmSysInfo;
        var wndSysOwnerEditor;
        var vmPII;
        var stageGrid;
        var
        initialize = function () {

        }
        ,
        load = function () {

            lnk = $("#lnkSystem");

            var file = "zSysInfo.html";
            var sie = this;

            $('#divSystemInfo').html("");
            $('#divSystemInfo').load(file, function () {
                    $('#tabStrip').kendoTabStrip();
                   // sie.tabStrip = $('#tabStrip').kendoTabStrip().data("kendoTabStrip");
                    //sie.tabStrip.select(0);

                    var id = 130001
                    if (id > 0) {
                      $('#divSystemInfo').show();
                      
                      loadDDL.call(sie);
                    }
          });
        }
          ,
          loadDDL = function() {
            var sf = this.sysInfo;
            $('#kdlOperatedBy').kendoDropDownList({
                dataTextField: "text",
                dataValueField: "value",
                dataSource: [{ text: "Accounting", value: "Acct" }, { text: "Finance", value: "Fin" }]
                , value: sf.OperatedBy
                , change: function (e) {
                    updateSysInfoStringField(sf.SystemInfoId, "OperatedBy", this.value());
                }
            });          
              
          }
          ;
          
          return {
            load: load
             , initialize: initialize
          };
        }();
        
      
        $(document).ready(function() {
      inventorySysInfoEditor.load();
    }
      </script>  
      
    </body>
    </html>

Back to Top