hello I'm trying to capture the event focus and blur for texteditor but not good so far

what I want is make promp function for texteditor

Code:

$(function() {
var default_promp = "Texto detallado de su solicitud...";
		$('#te').on('blur', function () {
			var promp = $.trim($('#te').texteditor('getValue'));
			if(promp == ''){
				$('#te').texteditor('setValue',default_promp);
			}
		}).on('focus', function () {
			var promp = $.trim($('#te').texteditor('getValue'));
			if(promp == default_promp){
				$('#te').texteditor('setValue','');
			}
		});
});

[how to combine master detail + group rows on datalist?]

hello jarry,


I saw your example, thank you

But is just how I have now, my issue is that before I implement the master detail (datagrid), the rows were agrup with the Group DataList, after, the agrupment not showing anymore

the question here was, how I show the group functionality of datalist and keeping the master detail view?

or how to combine master detail + group rows on datalist?

hello again, to continue with my current proyect wich is a  contacts book, I came up with this:

I have a datalist of contacts and I group the contacts with their first letter of their last name, looks like this (example):

| A                       |
| Aquaman             |
| B                       |
| Batman               |
| C                       |
| Captain America   |

then I want to be able to open a contact, and see his details like number, email, ...
so I added the master detail for the datagrid and totally works, but the formatter take away the agrupation fo datalist, and now look like this:

| + Aquaman             |
| + Batman               |
| + Captain America   |

I just need the agrupment returns, please, this my code:

Code:

<div id="dt" class="easyui-datalist" style="height:450px;" data-options="
                            url: 'retrieve/get_list_contactos.php',
                            method: 'get',
                            lines: true,
                            groupField: 'group',
                            view: detailview,
                            detailFormatter: dtFormatter,
                            onExpandRow: getDetails
                       	">
<script type="text/javascript">
function dtFormatter(index,row){
		return '<div class="ddv" style="padding:5px 0"></div>';
	}
	function getDetails(index,row){
		var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv');
		ddv.panel({
			height:80,
			border:false,
			cache:false,
			href:'retrieve/get_details_view.php?id_contacto='+row.id_contacto,
			onLoad:function(){
				$('#dt').datagrid('fixDetailRowHeight',index);
			}
		});
		$('#dt').datagrid('fixDetailRowHeight',index);
	}
	</script>

there is a way to return the agrupment?
I dont want to use the Group Rows in DataGrid
I want to keep te group for datalist

thanks

hello jarry

the code you put works perfect, I'm very greatful

Hello all

I have a searchbox and datalist

I want to when you type on searchbox the datalist fill with the matches records

I have this code:

Code:

<input class="easyui-searchbox" style="width:95%;" data-options="
  prompt:'Buscar',
  searcher:doSearch,
  onChange:function(newValue,oldValue){
      	doSearch(newValue);
  }">
<div id="dt" class="easyui-datalist" style="height:450px;" data-options="
                            url: 'retrieve/get.php',
                            method: 'get',
                            lines: true,
                            groupField: 'group'
                       	">

<script type="text/javascript">
function doSearch(value){
		$('#dt').datagrid('load',{
			q: value
		});
	}
	</script>

But when I type a word I expect the event trigger and no happens, I have to click the icon search to the function trigger

I want the event onChange be like onMouse**

when I type some in mode automatic  the results ben shown in the datalist

+1

 

thanks as always stworthy

hello all,

need the same as this post http://www.jeasyui.com/forum/index.php?topic=2204.msg4894#msg4894

need the pagination only say Displaying {from} to {to} of {total} ítems

but in datagrid

thank you

hi stworthy thank you it all done

the picker now is showed nice

the only thing is that when I highlight some text and I choose a color font, pink for example, the text not get the color, even in the demo page not work properly

I used the code you put me

thank you

hey stworthy!!!

I've use the execCommand method like

Code:

{
					title:'Parrafo',
					dir:'v',
					tools:[{
						type:'toolbar',
						tools:[{
							name:'justifyleft',
							iconCls:'icon-align-left',
							toggle:true,
							group:'p1',
							onClick: function(){
								$('#editor').texteditor('getEditor').texteditor('execCommand','justifyleft');
							}
						},{
							name:'justifycenter',
							iconCls:'icon-align-center',
							toggle:true,
							group:'p1',
							onClick: function(){
								$('#editor').texteditor('getEditor').texteditor('execCommand','justifycenter');
							}
						},{
							name:'justifyright',
							iconCls:'icon-align-right',
							toggle:true,
							group:'p1',
							onClick: function(){
								$('#editor').texteditor('getEditor').texteditor('execCommand','justifyright');
							}
						},{
							name:'justifyfull',
							iconCls:'icon-align-justify',
							toggle:true,
							group:'p1',
							onClick: function(){
								$('#editor').texteditor('getEditor').texteditor('execCommand','justifyfull');
							}
						}]
					}

 

Almost all icons works, I just dont know how make these buttons works:

Code:

{
						type:'toolbar',
						style:{clear:'both'},
						tools:[{
							name:'forecolor',
							iconCls:'icon-forecolor',
							onClick: function(){
								$('#editor').texteditor('getEditor').texteditor('execCommand','forecolor');
							}
						},{
							name:'backcolor',
							iconCls:'icon-backcolor',
							onClick: function(){
								$('#editor').texteditor('getEditor').texteditor('execCommand','backcolor');
							}
						}]
					}

when I click the picker of font color or background color doesnt show anythink

how can make those works properly, please

hi stworthy thank you, its awsome the extended method

Im trying to integrated it to my current code

I have a ribbon with two tabs, the first has tools custom by me, where there are options that let me trigger a query to the data base

And the second tab there is the area the tools for the editor, my code:

Code:

var data = {
		selected:0,
		tabs:[{
			title:'Selector',
			groups:[
			{
				title:'first group',
				tools:[ /*tools like comboboxes dependients*/ ]
			},{
				title:'second group',
				tools:[ /*tools like linkbuttons*/ ]
			},{
				title:'third',
				tools:[ /*tools like linkbuttons*/ ]
			},{
				title:'send',
				tools:[ /*linkbutton to search in data base*/ ]
			}]
		},{
			title:'Editor',
			groups:[
				{
					title:'Portapapeles',
					tools:[{
						name:'paste',
						text:'Pegar',
						iconCls:'icon-paste-large',
						iconAlign:'top',
						size:'large'
					},{
						type:'toolbar',
						dir:'v',
						tools:[{
							name:'cut',
							text:'Cut',
							iconCls:'icon-cut'
						},{
							name:'copy',
							text:'Copy',
							iconCls:'icon-copy'
						}]
					}]
				},{
					title:'Fuente',
					tools:[{
						type:'toolbar',
						tools:[{
							type:'combobox',
							valueField:'text',
							textField:'text',
							data:[{text:'Arial',selected:true},{text:'Century'},{text:'Tahoma'}],
							width:116,
							panelHeight:'auto',
							editable:false
						},{
							type:'combobox',
							valueField:'text',
							textField:'text',
							data:[{text:'8'},{text:'12',selected:true},{text:'14'}],
							width:50,
							panelHeight:'auto',
							editable:false
						}]
					},{
						type:'toolbar',
						style:{clear:'both',marginTop:'2px'},
						tools:[{
							name:'bold',
							iconCls:'icon-bold',
							toggle:true
						},{
							name:'italic',
							iconCls:'icon-italic',
							toggle:true
						},{
							name:'underline',
							iconCls:'icon-underline',
							toggle:true
						},{
							name:'strikethrough',
							iconCls:'icon-strikethrough',
							toggle:true
						}]
					},{
						type:'toolbar',
						style:{clear:'both'},
						tools:[{
							name:'forecolor',
							iconCls:'icon-forecolor'
						},{
							name:'backcolor',
							iconCls:'icon-backcolor'
						}]
					}]
				},{
					title:'Parrafo',
					dir:'v',
					tools:[{
						type:'toolbar',
						tools:[{
							name:'justifyleft',
							iconCls:'icon-align-left',
							toggle:true,
							group:'p1'
						},{
							name:'justifycenter',
							iconCls:'icon-align-center',
							toggle:true,
							group:'p1'
						},{
							name:'justifyright',
							iconCls:'icon-align-right',
							toggle:true,
							group:'p1'
						},{
							name:'justifyfull',
							iconCls:'icon-align-justify',
							toggle:true,
							group:'p1'
						}]
					},{
						type:'toolbar',
						style:{marginTop:'2px'},
						tools:[{
							name:'insertunorderedlist',
							iconCls:'icon-bullets'
						},{
							name:'insertorderedlist',
							iconCls:'icon-numbers'
						}]
					},{
						type:'toolbar',
						style:{marginTop:'2px'},
						tools:[{
							name:'outdent',
							iconCls:'icon-outdent'
						},{
							name:'indent',
							iconCls:'icon-indent'
						}]
					}]
				},{
					title:'Anexos',
					tools:[{
						name:'imagen',
						text:'Imagen',
						iconCls:'icon-picture-large',
						iconAlign:'top',
						size:'large'
					}]
				}]
			}]
	};
$(function(){
		$('#rr').ribbon({
			data:data
		});
		$('#editor').texteditor({
			toolbar: []
		});
		$('#dg').datagrid({
			/*options for the datagrid*/
		});
	});

the html is

Code:

<div id="rr" style="width:100%"></div> <!--the ribbon -->
<div id="dg" style="width:99%; height:500px"></div> <!-- the datagrid where set the response of the query (tools of first tab) -->
<div id="editor" style="width:99%;height:500px;padding:20px"></div> <!--the editor box-->

so for the outcome I want, I should add all my first tab to the extended method 'buildRibbonBar' and I think that will be more dificult to handle than if I tell to my #editor that the text tools are on the second tab

What do you recommend me?

Hi all,

maybe is much to ask, but I working with ribbon extension and I want to take advantage of it, using it like editor since already has the text tools

but Im wondering how programing the icons to set the css on the box text.

So I look the text editor extension but, how can I declare it and keep using the icons of ribbon??

I cant up with this, please, give me some light

Indeed. The updated version works correctly

Thank you jarry

hi


Im using ribbon extension http://www.jeasyui.com/extension/ribbon.php

I have severals combobox and want to make them dependens

so I defined an id for each one. example code:

Code:

{
						type:'combobox',
						id:'cmb1',
						valueField:'name',
						textField:'name',
						url:'retrieve/get_cmb1.php',
						width:45,
						panelHeight:'auto',
						editable:false,
						onSelect: function(rec){
							var url = 'retrieve/get_cmb2.php?name='+rec.name; alert(url);
							$('#cmb2').combobox('reload', url);
						}//,
						//onLoadSuccess:function(data){alert(JSON.stringify(data));},
						//onLoadError:function(data){alert(JSON.stringify(data));}
					},{
						type:'combobox',
						id:'cmb2',
						valueField:'name',
						textField:'name',
						width:40,
						panelHeight:'auto',
						editable:false
					}

but when Im trying getValue or reload one of them I get this:

Uncaught TypeError: Cannot read property 'nodeName' of undefined
    at Function.m.acceptData (jquery.min.js:2)
    at Q (jquery.min.js:4)
    at Function.data (jquery.min.js:4)
    at _a1a (jquery.easyui.min.js:13433)
    at _a29 (jquery.easyui.min.js:13495)
    at getValue (jquery.easyui.min.js:13593)
    at m.fn.init.$.fn.combo (jquery.easyui.min.js:13517)
    at m.fn.init.$.fn.combobox (jquery.easyui.min.js:13959)
    at HTMLAnchorElement.onSelect ((index):81)
    at _a4c (jquery.easyui.min.js:13734)

so I think that there is not able to read the id of the combobox element inside ribbon extension

Its that so?

I just realized that

I did what you said, but Im still get all rows not just what I have changed

Code:
$('#tg-areas').treegrid({
   onAfterEdit: function(row){
      alert(JSON.stringify(row));
   }
});

not returned all rows, return the row changed and his childrens

so the question is, how I get the only the row data I changed?

thanks

---------------- Edit

hi again, I understand now, not returned all rows, it return the childrens as subarray

thanks I think the issue is resolved