Hello,

The first time I click a cell in a property grid I always see the following error pop up in the console:
Uncaught TypeError: Cannot read property 'target' of undefined jquery.easyui.min.js:9152
  $.datagrid.$.extend.onClickRow jquery.easyui.min.js:9152
     jquery.easyui.min.js:7504
  x.event.dispatch   jquery-1.10.2.min.js:5
  x.event.add.v.handle   jquery-1.10.2.min.js:5

The line of code it is referencing in Jquery that is popping up the error is:
$(this).datagrid("getEditors",_6c5)[0].target.focus();


The problem is that $(this).datagrid("getEditors",_6c5) returns an empty array and thus generates an error when trying to access the '0' element.

Just in case it helps the following is my code for the propertygrid:

 $('#PropertyGrid').propertygrid(
        {
            onClickCell:function(rowIndex, field, value)
            {
               var rows = $('#PropertyGrid').propertygrid('getData').rows;
               var rowMap = new HashMap();
                for(var i=0;i<rows.length;i++)
                {
                    rowMap.add(rows.name, rows.value);
                }
                //allow user to change the name of certain nodes
                if( rows[rowIndex]['name'] == "name" && (rowMap.get("type") == "Int" || rowMap.get("type") == "Float" || rowMap.get("type") == "String"))
                {
                    if(rows[rowIndex]['editor'] == null)
                        rows[rowIndex]['editor'] = rows[rowIndex]['editor1'];
                    $('#PropertyGrid').propertygrid('beginEdit',rowIndex);
                }
                else if( rows[rowIndex]['name'] == "value" )
                {
                    
                        if(rows[rowIndex]['editor'] == null)
                            rows[rowIndex]['editor'] = rows[rowIndex]['editor1'];
                        $('#PropertyGrid').propertygrid('beginEdit',rowIndex);
                    
                }
            },
            onBeforeEdit:function(index,row){
                row.editing = true;
                updateActionsProperty(index);
            },
            onCancelEdit:function(index,row){
                row.editing = false;
                updateActionsProperty(index);
            }

        });
    function updateActionsProperty(index){
        $('#PropertyGrid').datagrid('updateRow',{
            index: index,
            row:{}
        });
    }


I find it bad form to modify the jquery code for any reason, so does anyone have any clue as to why jquery would throw and error on first time clicking of a cell in a propertygrid? Is this isolated to me or is it an error that others experience?

Lastly, for some unknown reason on the first click I see a movement crosshair when I click. Its only for a second but then it goes away. I only mention it because there may be some kind of movement event that is happening that I am no aware of that could be causing my error.

Thanks!

How do I save the changes I make to a treeview? I can add new folders and files but I have no way to save the new treeview structure.

Thanks!

How do I get the JSON data from a treeview. I want the whole tree.

Here is what I have so far :

$('#Tree').tree('getData',$('#Tree').tree('getRoot').target)

That command will get all of the data for the root node but I am not sure how to take what I have at that point and turn it into JSON.

Thanks!

Hello,

I am trying to edit an item in a treeview at runtime, however the textbox generated for editing the item is half the size of the text. Anyone know how I can make the textbox a little bigger.

Anyone?

Here is the example shows how to set 'headerCls' property.

Code:

<style>
	.hc{
		background:#ccc;
	}
</style>
<div class="easyui-panel" title="title" headerCls="hc" style="width:400px;height:100px">
	<p>panel content.</p>
</div>

Thanks again stworthy! This was perfect!

I see the property headerCls but anything I try seems to do nothing.

Thanks!

I was able to use this post to help me position a panel on the right side of the screen. Thanks for this answer stworthy!

How do I create a comboBox in a datagrid at runtime and add initial values to that combobox?

Thanks for your time!
Codeguy

If anyone needs to know how to do this I have found a solution. You can capture the click event for a cell in a property grid with the following code.

 $('#myPropertyGrid').propertygrid({

        onSelect: function (rowIndex, rowData)
        {

            alert (''
                +'You clicked the following HTML element: \n'
                +rowData.name
            );
        }
    });

Hello,

How do I capture the click event when clicking a cell in the easyui-propertygrid? Here are some of the things i have tried:

    $( '#myPropertyGrid').propertygrid().click(function( event ) {
        $( "#log" ).html( "clicked: " + event.target.nodeName );
    });
    $(document).click(function() {
        $( "#log" ).html( "clicked: " + event.target.nodeName );
    });
    $( "body" ).click(function( event ) {
        $( "#log" ).html( "clicked: " + event.target.nodeName );
    });

    $( "myPropertyGrid" ).click(function( event ) {
        $( "#log" ).html( "clicked: " + event.target.nodeName );
    });

    $( "*" ).click(function( event ) {
        $( "#log" ).html( "clicked: " + event.target.nodeName );
    });

    $( "propertiesPanel" ).click(function( event ) {
        $( "#log" ).html( "clicked: " + event.target.nodeName );
    });

    $( "#propertiesPanel" ).click(function( event ) {
        $( "#log" ).html( "clicked: " + event.target.nodeName );
    });
//////////////////////////////////////////////////////////////////////////// 
  function clickHandler(e){

        var elem, evt = e ? e:event;
        if (evt.srcElement)  elem = evt.srcElement;
        else if (evt.target) elem = evt.target;

        alert (''
            +'You clicked the following HTML element: \n <'
            +elem.tagName.toUpperCase()
            +'>'
        )
        return true;
    }
   

   document.onclick=clickHandler;

This is related to another question i have about opening a dialog window when clicking a cell in the easyui-propertygrid. I am pretty sure i can use javascript to open the dialog but I would need to know how to capture the click event first.

Thanks again stworthy!

I would like to add an event to a cell in a easyui-propertygrid that opens a dialog window when it is clicked. Is this possible and if so how would I do it?

Hello,

How do I remove the ability for the user to be able to edit the columns in the easyui-propertygrid?

Thanks!

All the properties of propertygrid and its dependent properties can be declared in 'data-options' attribute. To add a new row to propertygrid, call 'appendRow' or 'insertRow' methods. If the 'showGroup' property is set to true, be sure to re-group rows again. The code below shows how to append a new row to a specified group.

Code:

var pg = $('#pg');
pg.propertygrid('appendRow',{name:'n11',value:'v12',editor:'text',group:'ID Settings'});
var data = pg.propertygrid('getData');
pg.propertygrid('loadData', data);

This was perfect! Thanks for the help stworthy!

Hello all,

I have two questions about the property grid.

I would like to know how to add data to easyui-propertygrid at runtime. I also need to know the available data-options for the easyui-propertygrid.

Thanks for the help!,

Codeguyross