jQuery UI Widgets Forums Grid The grid does not appear properly on the mobile screen.

This topic contains 6 replies, has 3 voices, and was last updated by  coni 8 years, 11 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author

  • coni
    Participant

    hi

    The grid does not appear properly on the mobile screen.

    my iPhone Screen

    my iPad Screen

    
    <script type="text/javascript">
    $(document).ready(function () {  
        var shirts = ["예","아니오"];
        var user = ["김영민","이민호","장현석"];
        var countries = new Array("Afghanistan", "Albania");
        var ch = ["2014-11-05"];
        var jugi = ["VoIP 청구(25일납기)","전화부가(매월1일))"];
        var data = [ {
             'UserId' : 'coni',
             'UserName' : '김영민',
             'UserGroup' : '000_Developer',
             'Email' : 'ymk@tnctec.co.kr',
             'Phone' : '010-3919-1404'
           }, {
             'UserId' : 'jhkim',
             'UserName' : '김주한',
             'UserGroup' : '999_Admin',
             'Email' : 'jhkim@tnctec.co.kr',
             'Phone' : '010-3374-4549'
           }, {
             'UserId' : 'episode09',
             'UserName' : '권영구',
             'UserGroup' : '888_Server',
             'Email' : 'episode09@tnctec.co.kr',
             'Phone' : '010-3356-4901'
           }, {
             'UserId' : 'shjeong',
             'UserName' : '정수환',
             'UserGroup' : '777_System',
             'Email' : 'shjeong@tnctec.co.kr',
             'Phone' : '010-7709-0915'
           }, {
             'UserId' : 'mino8301',
             'UserName' : '이민호',
             'UserGroup' : '000_Developer',
             'Email' : 'mino8301@tnctec.co.kr',
             'Phone' : '011-877-1595'
           }, {
             'UserId' : 'jhs',
             'UserName' : '장현석',
             'UserGroup' : '000_Developer',
             'Email' : 'jhs@tnctec.co.kr',
             'Phone' : '010-4424-5134'
           } ];
        var source = {
               localdata : data,
               datatype : "json",
               datafields : [ {
                 name : 'UserId',
                 type : 'string'
               }, {
                 name : 'UserName',
                 type : 'string'
               }, {
                 name : 'UserGroup',
                 type : 'string'
               }, {
                 name : 'Email',
                 type : 'string' 
               }, {
                 name : 'Phone',
                 type : 'string'
               } ]
             };
        var dataAdapter = new $.jqx.dataAdapter(source); 
       $("#input").jqxInput({placeHolder: "청구계정명", height: 23, minLength: 1 ,  source: countries });
         $('#useYn').jqxDropDownList({
             filterable: true, selectedIndex: 0, source: shirts, height: 24, width: '91%'
         });
         $('#user').jqxDropDownList({
             filterable: true, selectedIndex: 0, source: user, height: 24, width: '91%'
         });
         $('#ch').jqxDropDownList({
             filterable: true, selectedIndex: 0, source: ch, height: 24, width: '91%'
         });
         $('#jugi').jqxDropDownList({
             filterable: true, selectedIndex: 0, source: jugi, height: 24, width: '91%'
         });
         $("#fromDt").jqxDateTimeInput({width: '90%', height: '25px',formatString: "yyyy-MM-dd"});
         $("#toDt").jqxDateTimeInput({width: '83%', height: '25px',formatString: "yyyy-MM-dd"});
         
         $("#search").jqxButton({ width: '120', height: '35px'});
         $("#download").jqxButton({ width: '120', height: '35px'});
         
         
         
       //접기 셋팅
         $("#jqxExpander").jqxExpander({
           width : '100%',
           expanded : true,
           initContent : function() {
             
             //그리드셋팅
             $("#jqxGrid").jqxGrid({
               width : '100%',
               source : dataAdapter,
               showfilterrow : true,
               filterable : true,
               sortable : true,
               scrollbarsize: 10,
               pageable : true,
               autoheight : true,
               autoshowfiltericon:false,
               columnsresize : true,
               toolbarHeight : 35,
               showToolbar : true,
               selectionmode : 'singlerow',
               renderToolbar : function(toolBar) {
                 var toTheme = function(className) {
                   return className;
                 }
                 var container = $("<div style='overflow: hidden; position: relative; height: 100%; width: 100%;'></div>");
                 var buttonTemplate = "<div style='float: left; padding: 3px; margin: 2px;'><div style='margin: 4px; width: 16px; height: 16px;'></div></div>";
                 var addButton = $(buttonTemplate);
                 var editButton = $(buttonTemplate);
                 var deleteButton = $(buttonTemplate);
                 container.append(addButton);
                 container.append(editButton);
                 container.append(deleteButton);
                 toolBar.append(container);
                 addButton.jqxButton({
                   cursor : "pointer",
                   enableDefault : false,
                   disabled : false,
                   height : 25,
                   width : 25
                 });
                 addButton.find('div:first').addClass(toTheme('jqx-icon-plus'));
                 addButton.jqxTooltip({
                   position : 'bottom',
                   content : "추가"
                 });
                 editButton.jqxButton({
                   cursor : "pointer",
                   disabled : true,
                   enableDefault : false,
                   height : 25,
                   width : 25
                 });
                 editButton.find('div:first').addClass(toTheme('jqx-icon-edit'));
                 editButton.jqxTooltip({
                   position : 'bottom',
                   content : "수정"
                 });
                 deleteButton.jqxButton({
                   cursor : "pointer",
                   disabled : true,
                   enableDefault : false,
                   height : 25,
                   width : 25
                 });
                 deleteButton.find('div:first').addClass(toTheme('jqx-icon-delete'));
                 deleteButton.jqxTooltip({
                   position : 'bottom',
                   content : "삭제"
                 });
                 //이벤트에 따른 버튼 상태 설정
                 var updateButtons = function(action) {
                   switch (action) {
                   case "Select":
                     addButton.jqxButton({
                       disabled : false
                     });
                     deleteButton.jqxButton({
                       disabled : false
                     });
                     editButton.jqxButton({
                       disabled : false
                     });
                     break;
                   case "Unselect":
                     addButton.jqxButton({
                       disabled : false
                     });
                     deleteButton.jqxButton({
                       disabled : true
                     });
                     editButton.jqxButton({
                       disabled : true
                     });
                     break;
                   }
                 }
                 var rowKey = null;
                 var args = null;
                 var selectRow = -1;
                 $("#UMjqxGrid").on('rowselect', function(event) {
                   args = event.args;
                   rowKey = args.key;
                   selectRow = event.args.row.uid;
                   updateButtons('Select');
                 });                 
               },//renderToolbar
               //컬럼설정
               columns : [ {
                 text : '사용자ID',
                 columntype : 'textbox',
                 filtercondition : 'starts_with',
                 align : 'center',
                 cellsalign : 'center',
                 datafield : 'UserId',
                 width : '20%',
                 minwidth : '100'
               }, {
                 text : '사용자명',
                 columntype : 'textbox',
                 filtercondition : 'starts_with',
                 align : 'center',
                 cellsalign : 'center',
                 datafield : 'UserName',
                 width : '20%',
                 minwidth : '100'
               }, {
                 text : '사용자그룹',
                 filtertype : 'checkedlist',
                 columntype : 'textbox',
                 filtercondition : 'starts_with',
                 align : 'center',
                 cellsalign : 'center',
                 datafield : 'UserGroup',
                 width : '20%',
                 minwidth : '100'
               }, {
                 text : '이메일',
                 columntype : 'textbox',
                 filtercondition : 'starts_with',
                 align : 'center',
                 cellsalign : 'center',
                 datafield : 'Email',
                 width : '20%',
                 minwidth : '100'
               }, {
                 text : '전화번호',
                 columntype : 'textbox',
                 filtercondition : 'starts_with',
                 align : 'center',
                 cellsalign : 'center',
                 datafield : 'Phone',
                 width : '20%',
                 minwidth : '100'
               } ]
             });//Grid Set
           }//function
         });//expander
     });
        </script>
    </head>
    <body>
      <ul class="breadcrumb">
        <li>청구/수납</li>
        <li>청구</li>
        <li>조정등록</li>
      </ul>
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-6 borderall">
              <div class="row">
                <div class="col-xs-3 searchtitle">청구계정</div>
                <div class="col-xs-9" style="padding:3px 0 0 3px;"><input type="text" id="input" class="form-control" /></div>
              </div>
            </div>
            <div class="col-md-6 borderall">
              <div class="row">
                <div class="col-xs-3 searchtitle">적용여부</div>
                <div class="col-xs-9" style="padding:3px;"><div id="useYn"></div></div>            
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6 borderall">
              <div class="row">
                <div class="col-xs-3 searchtitle">작업일시</div>
                <div class="col-xs-4"><div id="fromDt" style="margin:3px 0 0 3px;"></div></div>
                <div class="col-xs-5"><div id="toDt" style="margin-top:3px;"></div></div>
              </div>
            </div>
            <div class="col-md-6 borderall">
              <div class="row">
                <div class="col-xs-3 searchtitle">작업자</div>
                <div class="col-xs-9" style="padding:3px;"><div id="user"></div></div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6 borderall">
              <div class="row">
                <div class="col-xs-3 searchtitle">청구주기</div>
                <div class="col-xs-9" style="padding:3px;"><div id="jugi"></div></div>
              </div>
            </div>
            <div class="col-md-6 borderall">
              <div class="row">
                <div class="col-xs-3 searchtitle">청구기준일</div>
                <div class="col-xs-9" style="padding:3px;"><div id="ch"></div></div>
              </div>
            </div>
          </div>
        </div>
        <div style="padding:6px 6px 20px 0;float:right;">
            <!--<button class="btn btn-danger" value="조회" id='search'>조회</button>&nbsp;&nbsp;
            <button class="btn" value="다운로드" id='download'>다운로드</button> -->
            <input class="btn-info" type="button" value="조회" id='search' /> <input class="btn-warning" type="button" value="다운로드" id='download' />
        </div>
        
        
        <div id='jqxExpander'>
          <div>사용자 관리</div>
          <div>
            <div id="jqxGrid"></div>
          </div>
        </div>
        
    </body>
    </html>
    
    • This topic was modified 8 years, 11 months ago by  coni.
    • This topic was modified 8 years, 11 months ago by  coni.

    Dimitar
    Participant

    Hi coni,

    To test your example we also need to know what styles you have applied with CSS and what external libraries you have included. Please share a JS Editor or JSFiddle example with your project. We will then test it on an iPhone to see if we can reproduce the issue.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    coni
    Participant

    hi

    Thank you for responding to.

    I will send you a link JS Editor or JSfiddle example.

    JSFIDDLE Share Link
    full screen result

    • This reply was modified 8 years, 11 months ago by  coni.

    Dimitar
    Participant

    Hi coni,

    We tested the full screen version of your fiddle on an iPhone and everything works fine. However, the fiddle does not look exactly like your first image.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    coni
    Participant

    hi Dimitar,

    Reduce the window sized.

    Then, the image looks like a link.

    Image Link

    • This reply was modified 8 years, 11 months ago by  coni.

    Peter Stoev
    Keymaster

    Hi coni,

    The problem are your minwidth settings. Don’t set minwidth to ‘100’ if you want your columns to be fully displayed on Small Screen. In addition, you should set it to Number i.e to 100, not to String like ‘100’.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    coni
    Participant

    Thank you.

    It has been resolved.^^

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.