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 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 .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) : <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 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
|
|
|
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. <!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>
|
|
|
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) $('#first-name').textbox(); $('#first-name').textbox('textbox').attr('maxlength', $('#first-name').attr("maxlength"));
or you can take a generic approach like this: $(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
$("#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
|
|
|
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: $.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; } } });
|
|
|
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
|
|
|
|