EasyUI Forum
March 29, 2024, 06:58:38 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
  Home Help Search Login Register  
  Show Posts
Pages: [1]
1  General Category / EasyUI for jQuery / Re: Do we have anything that can help us create the "Show-password" functionality on: June 30, 2016, 06:52:06 AM
Meanwhile, until it is realeased,
I have done my own implementation  Wink

For those who are interested, this is how you could do it.

Step 1.
Create 2 icons, One for open-eye and other for the closed eye and place them in the icons folder
(I have attaced the icon images)

Step 2.
Go to the icons.css and add the icon class and point to the relevant icon images

Code:
.icon-eye-open{
background:url('icons/eye_open.png') no-repeat center center;
}
.icon-eye-closed{
background:url('icons/eye_closed.png') no-repeat center center;
}


Step 3.
my new password input looks like this (note the data-options) :

Code:
                                   <input name="oldPassword"
                                           id="oldPassword"
                                           class="easyui-textbox"
                                           type="password"
                                           maxlength="50"
                                           required="true"
                                           missingMessage="Please enter Existing Password"
                                           data-options="
                                           icons:[{
                                                iconCls:'icon-eye-open',
                                                handler: function(e){
                                                    handleShowHidePassword(e);
                                                }
                                            }]
                                           "

                                    >

Step 4.
the javascript function handleShowHidePassword

Code:
function handleShowHidePassword(e){
var currentInputType = $(e.data.target).textbox('textbox').attr('type');
var newInputType = '';
var theIcon = $(e.data.target).textbox('getIcon', 0);
var currentIconClassName =  theIcon[0].className;
var newIconClassName = "";

if(currentInputType == 'password'){
newInputType = 'text';
newIconClassName = "textbox-icon icon-eye-closed";
}else if(currentInputType == 'text'){
newInputType = 'password';
newIconClassName = "textbox-icon icon-eye-open";
}

if(newInputType=='text' || newInputType=='password'){
$(e.data.target).textbox('textbox').attr('type', newInputType);
theIcon[0].className = newIconClassName;

}
}

Hope this helps  Smiley
2  General Category / EasyUI for jQuery / Re: Do we have anything that can help us create the "Show-password" functionality on: June 29, 2016, 04:33:21 AM
That looks very good  Smiley

When would it be released ?
3  General Category / EasyUI for jQuery / Do we have anything that can help us create the "Show-password" functionality on: June 28, 2016, 03:11:08 AM
Do we have anything that can help us create the "Show-password" functionality ?
4  General Category / Bug Report / Re: When you have Tree and combotree on page, combotree is not functionaling well on: December 29, 2015, 01:39:48 AM
loading data using the other 'loadData' method works fine  Smiley Thankyou so much !!!
5  General Category / Bug Report / Re: When you have Tree and combotree on page, combotree is not functionaling well on: December 28, 2015, 10:41:26 PM
Created a simple html demo page.
Attaching the file gave a 'disk full' error, so pasting the code here.

Code:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tree - Combotree on same page Issue Demo</title>
    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="themes/icon.css">

<link rel="stylesheet" type="text/css" href="themes/color.css">

    <script type="text/javascript" src="jquery.min.js"></script>

    <script type="text/javascript" src="jquery.easyui.min.js"></script>
</head>
<body>

<h2>Tree + Combotree on same page Issue Demo </h2>
Having a Tree and a Combotree on the same page seems to cause malfunction of the combotree.
<br/>Try selecting something in the combotree. That fails ...
<br/>If you comment out the loadData for Tree, then the combotree works fine.
<br/> <br/>

<table width="50%">
  <tr>
    <td width="25%">
Tree
<hr/>
<ul id="my_tree" class="easyui-tree"></ul>
</td>

    <td valign="top">
Combotree
<hr/>
<input
id="my_combo_tree"
class="easyui-combotree"
/>
</td>
  </tr>
</table>

<script>
var hierarchichalData = [ {
    "id" : 50,
    "text" : "categ-1",
    "children" : [ {
      "id" : 52,
      "text" : "categ-1-1",
      "children" : null
    }, {
      "id" : 54,
      "text" : "categ-1-2",
      "children" : null
    } ]
  }, {
    "id" : 51,
    "text" : "categ-2",
    "children" : [ {
      "id" : 53,
      "text" : "categ-2-1",
      "children" : null
    } ]
  } ];
 

$(function(){

// load the combo-tree
$("#" + "my_combo_tree").combotree(
        'loadData', hierarchichalData
    );

// load the tree
// (combo-tree works fine if you comment out below loadData for the tree)
$("#" + "my_tree").tree(
        'loadData', hierarchichalData
    );

});

</script>

</body>
6  General Category / Bug Report / When you have Tree and combotree on page, combotree is not functionaling well on: December 28, 2015, 08:42:44 AM
When you have Tree and combotree on page, combotree is malfunctionling.
Selecting a node on combotree is working.
Does anyone know how i can get this working?
7  General Category / EasyUI for jQuery / Re: Show form as MenuItem on: November 02, 2015, 02:10:11 PM
Thank you very much.
That works !!!

and I was also able to retain the form even when I moved away the mouse by adding "hideOnUnhover: false" to the corresponding menu-content.
 Smiley Smiley
8  General Category / EasyUI for jQuery / Show form as MenuItem on: October 28, 2015, 08:24:56 AM
I am struggling to show a login form as a Menu-Item.

This is the form I wanted to show as menu-item

http://www.jeasyui.com/demo/main/index.php?plugin=TextBox&theme=default&dir=ltr&pitem=


The issue issue is that the width of the text-boxes somehow automatically becomes zero or something, effectively destroying the look of the form.

If anybody has the solution to this, please help me.
9  General Category / EasyUI for jQuery / Re: maxlength for textbox on: February 05, 2015, 11:08:09 AM
This solution actually gets the textbox to behave as per the 'maxlength' standards (not allowing to key-in more characters)

Code:
$('#first-name').textbox();
$('#first-name').textbox('textbox').attr('maxlength', $('#first-name').attr("maxlength"));

or you can take a generic approach like this:

Code:
$(function(){
$("input[class*='easyui-textbox'][maxlength][id]").each(function (i, elt) { // iterate all jeasyui textboxes having maxlength attribute and id attribute
// alert("found : " + elt.id );
$('#' + elt.id).textbox();
$('#' + elt.id).textbox('textbox').attr('maxlength', $('#' + elt.id).attr("maxlength"));

});
});
10  General Category / Bug Report / Datagrid Row Filter does-not work well with columns having formatter on: January 03, 2015, 09:44:55 AM
if you enabled filter on a datagrid using  $("#my-dg").datagrid('enableFilter');   and if your datagrid has a column with a formatter eg:
<th field="state" width="100px" sortable="true" formatter="cityMaster.showStateInGrid" ></th>
Then filtering won't work on that column.
Meaning typing into the filter-box will fail and blank-out the grid.

But I managed to fix this.
Attached is the filter plugin with the fix. I took the latest-code and applied my fix on this.
Features:
  • Automatically uses the formatter specified in the datagrid for that column and no need to write any extra code. Compares value with the formatted data.

    Works well with a combo-box setup in your filter. eg: as below

Code:
   $("#city-dg").datagrid('enableFilter', [
        {
            field:'state',
            type:'combobox',
            options:{
                panelHeight:'auto',
                data: filterStateComboboxData,  // my data for the combo-filter
                onChange:function(value){
                    if (value == null || value == ''){
                        $("#city-dg").datagrid('removeFilterRule', 'state');
                    } else {
                            $("#city-dg").datagrid('addFilterRule', {
                            field: 'state',
                            formatter: showStateInGrid,             // point to the formatter
                            op: 'equal',
                            value: value
                        });
                    }
                    $("#city-dg").datagrid('doFilter');
                }
            }
        }
    ]);


This works well !!

But I feel that the JEasy-UI developers should take a look at it and 'optimize' the code as per their coding standards.
Incase you choose to apply this as a patch, please let me know, so that I can download the latest filter-plugin then.

cheers,
Ram
11  General Category / Bug Report / Re: Datagrid+loadFilter in combination with dataGrid Row filter is not working well on: January 03, 2015, 09:19:31 AM
That looks Fantstic, I shall try that and let you know.
12  General Category / EasyUI for jQuery / Re: Customize datagrid filter row on: December 30, 2014, 12:51:29 PM
sorry "beginwith" and "endwith" are already provided ...
13  General Category / EasyUI for jQuery / Re: Customize datagrid filter row on: December 30, 2014, 12:17:35 PM
I have developed these for my use. Sharing it Just in case somebody needs it:

Code:
$.extend($.fn.datagrid.defaults.operators, {
    startsWith: {
        text: 'Starts With',
        isMatch: function(source, value){
            source = String(source);
            value = String(value);
            return source.toLowerCase().indexOf(value.toLowerCase()) == 0;
        }
    }
});

$.extend($.fn.datagrid.defaults.operators, {
    endsWith: {
        text: 'Ends With',
        isMatch: function(source, value){
            source = String(source);
            value = String(value);
            return source.indexOf(value, source.length - value.length) !== -1;
        }
    }
});
14  General Category / EasyUI for jQuery / Re: Pagination doesn't work with DataGrid Filter on: December 30, 2014, 11:39:00 AM
Probably this could help you :

http://www.jeasyui.com/forum/index.php?topic=4303.0

15  General Category / Bug Report / Datagrid+loadFilter in combination with dataGrid Row filter is not working well on: December 30, 2014, 10:59:00 AM
Say I have a datagrid and I have a loadFilter method to handle the custom data format coming from the remote, and I also want to have filters on my columns in the datagrid then there are some serious issues.

I shall mention the problems and also finally how I got it working (just in-case anyone else also needs this combination to work)

Issues are:

1. Problem: Soon after you define the datagrid along with the url and then immediately if you enable the by dg.datagrid('enableFilter'); then even if the call to the url is done, the data won't be rendered in the data-grid.

However this works if you have a preloaded data which you assign eg: "data: {total: xxx, rows: [{id:'1', name:'abc'},{id:'1', name:'abc'}] }". This is probably because the rendering of the filter is interfering with the rendering of the data.

So "dg.datagrid('enableFilter');" cannot come right after the datagrid definition in your javscript

2. But if you want the datagrid to load using the url attribute then you should place the filter enabling code "$(this).datagrid('enableFilter');" in the "onLoadSuccess" function. Then both the data in the data-grid is also loaded and the filter is also renders.
Problem: But then the filter won't work and the grid sort of hangs when you try to type-in and invoke the filtering... I don't know why this happens.

3. You can somewhat solve this by putting your  "$(this).datagrid('enableFilter');" in the " "loadFilter" function just before you return;
Then the filtering works fine.
Problem: Now when you invoke 'reload' on the datagrid after some record update, then the grid will fail to render the fresh data on the grid.



How I got this working



1. I defined a separate function (say: "loadAndSetGridData()") to load my data for the grid using "$.ajax"
2. Removed the 'url' attribute and also removed these functions: onLoadSuccess, loadFilter. These are not relevant now as we don't have the 'url' attribute.
3. Enable the filter right after the datagrid definition using "dg.datagrid('enableFilter');"
4. Manually set the data on the datagrid using 'loadData' method of the datagrid. I do this after I get response of my ajax call
5. All those places where you were reloading the datagrid data (i.e. "dg.datagrid('reload')" ) after your updates, replace that with call to your new method i.e. "loadAndSetGridData()"
6. And finally for the refresh-icon on the pagination-bar to work, call "loadAndSetGridData()" again in the "onBeforeLoad" of the grid definition.



Sample code (the logical code):

// ------------------------------
// the data-grid definition section ( this assumes that you already have the relevant html table with id "my-dg" ) without the 'url' of-course
// ------------------------------

   var dg = $("#my-dg").datagrid({
      loadMsg: "Loading data",
      onDblClickRow: function(index, row){
         // custom code
      },
      onSelect: function(index, row){
         // custom code
      }
      ,onBeforeLoad: function(){
         loadAndSetGridData(); // this will take care of loading the data via ajax separately and setting it to the datagrid
      }

   });

   dg.datagrid('enableFilter'); // Okay to enable the filter here now
         
         

// ------------------------------
// the data loader function
// ------------------------------
var loadAndSetGridData = function(dg){
            var listUrl = "my data-url url";
            $("my-dg").datagrid('loading');  // show the loading msg
            $.ajax({
                url:     listUrl,
                type:    'POST',
                dataType: 'json',
                contentType: 'application/json',
                error: function(xhr,status,err){
                    $("my-dg").datagrid('loaded');  // close the loading msg
                    // showWarningMessage("status : " + status + "<br/>" + "Error:" + err);

                    $("my-dg").datagrid('loadData',
                        {
                            total : 0
                            , rows: []
                        }
                    );

                },
                success: function(response){
                    $("my-dg").datagrid('loaded');
               // this is custom code on what you do after you get back the response
                    if (response.success){

                        $("my-dg").datagrid('loadData',
                            {
                                total: (response.dataList!=null)?response.dataList.length:0
                                , rows: (response.dataList!=null)?response.dataList:[]
                            }
                        );

                    } else {
                        // showWarningMessage(response.message); // custom code

                        $("my-dg").datagrid('loadData',
                            {
                                total : 0
                                , rows: []
                            }
                        );

                    }
                }
            });


        };

      
// ------------------------------
// replace with this in all places where you were dong $("my-dg").datagrid('reload'); or  $("my-dg").datagrid('load');
// ------------------------------
loadAndSetGridData();



This works !! But I belive the original problem has to be fixed. Until then this is the work-around.

Hope I have provided sufficient information to JEasy-UI developers for them to understand the underlying problem and fix it.

cheers,
Ram
Pages: [1]
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!