I'm not sure I understand what you are asking.

This is how I'm capturing data from my db based on a row click:

var attributeDefs;
var resourceDef;
var resources;
var attributeValues;
var attributeIds;

    $(function(){
      $('#RN').datagrid({
         onClickRow: function(index,row){
            editIndex = index;
            rowEdit = JSON.parse(JSON.stringify($('#RN').datagrid('getRows',editIndex)));
            var editResourceName =  rowEdit[editIndex].resourceName;
            var editResourceId =  rowEdit[editIndex].resourceId;

         $.ajax({
            url: baseUrl + '/clients/' .... /attributes',
            type: "GET",
         }).done(function(data) {
            attributeDefs = data.attributeDefs;
            resourceDef = data.resourceDef;
            resources = data.resources;
            attributeValues = data.attributes.values;
            attributeIds = data.attributes.ids;   
window.alert("resourceDef: " + resourceDef + " attributeValues: " + attributeValues);               
            });
         }
      });
   });

I was thinking there might be some way to use "Load Form Data" ( SEE: http://www.jeasyui.com/demo/main/index.php?plugin=Form&theme=default&dir=ltr&pitem= ) to populate a form when a user clicks a row in the grid. But I haven't had any luck.

Hello - I'm trying to click a name from a row in single column datagrid, located on the left side of my site, and then have it generate a form on the right side that loads several data items regarding the name clicked. The idea is to list all the account information about the name selected on the right side of the grid column. I can load and populate the data from the DB and display it and design the form, etc.,  but I just can't seem to get the form to appear when the name is clicked from the column.

Any ideas how I might do this? Do I need to move outside of onClickRow to generate the form?

Thanks.

I don't think that will work in my case. Consider two users; the first user selected value is dog, the second user has selected cat. Thus for each user the default selected value if different. If I store the current selected value as a cookie and the users reloads their browser, how would I then get use the cookie value to set dog as the default/last selected value for the first user and cat for the second user?

Thanks.

Corrected source: to clear up a copy/paste issue, it is the combobox generated with the url: '.../clients', that I'd to reload with the previous selection. Thanks.


<select id="client-select" class="easyui-combobox" style="width:250px;"
   data-options="{
      url: '.../clients',
      method: 'GET',
      editable: false,
      valueField: 'clientId',
      textField: 'clientName',
      onSelect: function(client) {
         document.cookie='client=' + client.clientId + '; PATH=/';
         clientCookie = client.clientId;
         $('#RD').edatagrid({'url': '..../clients/' + client.clientId + '/resourceDefs'});
         $('#RD').edatagrid('reload');
         $('#resourceDef-select').combobox({'url': '..../clients/' + client.clientId + '/resourceDefs'});
         $('#resourceDef-select').combobox('reload');
      },
   }"
>
</select>

Hello, I'd like to have my last selected combobox  option listed as the default/first displayed option on reload. From your examples I see how to do it if the combobox options are embedded in html but not if I'm loading from a Db, or external source. Can you help? Thanks.


<select id="client-select" class="easyui-combobox" style="width:250px;"
   data-options="{
      url: '/.../clients',
      method: 'GET',
      editable: false,
      valueField: 'clientId',
      textField: 'clientName',
      onSelect: function(client) {
         document.cookie='client=' + client.clientId + '; PATH=/';
         $('#RD').combobox({'url': '/.../clients/' + client.clientId + '/resourceDefs'});
         $('#RD').combobox('reload');
         $('#resourceDef-select').combobox({'url': /.../clients/' + client.clientId + '/resourceDefs'});
         $('#resourceDef-select').combobox('reload');
      },
   }"
>
</select>

I use the following to create a editable datagrid:
            var attributeDefs;
            var resources;
            var resourceDef;
            var attributeValues;
            var attributeIds;

            $(function() {
                $.ajax({
                    url: '../rest/...../attributes',
                    type: "GET",
                }).done(function(data) {
                    attributeDefs = data.attributeDefs;
                    resourceDef = data.resourceDef;
                    resources = data.resources;
                    attributeValues = data.attributes.values;
                    attributeIds = data.attributes.ids;
                    var frozenColumns = [];
                    frozenColumns.push({
                        field: '0',
                        title: 'Name',
                        align: 'left',
                        width: 100,
                        resizable: true,
                  editable: true,
                        fixed: false,
                    });
                    var columns = [];
                    columns.push({
                        field: '0',
                        title: 'Name',
                        align: 'left',
                        width: 100,
                        resizable: true,
                  editable: true,
                        fixed: false
                    });
               for (var i = 0; i < attributeDefs.length; i++) {
                        columns.push({
                            field: (i + 1).toString(),
                            title: attributeDefs.name,
                            align: 'left',
                            width: 100,
                            resizable: true,
                            fixed: false,
                     editable: true,
                     editor: 'text',
                        });
                    }
                    var rows = [];
                    for (var i = 0; i < resources.length; i++) {
                        var attributeObject = {'0' : resources.name};
                        for (var j = 0; j < attributeDefs.length; j++) {
                            attributeObject[(j + 1).toString()] = attributeValues[j];
                        }
                        rows.push(attributeObject);
                    }
                    $('#ClientData').edatagrid({
                        columns: [columns],
                        data: rows,
                        editable: true,
                        fitColumns: true,
                        singleSelect: true,
                        nowrap: true,
                        striped: true,
         onDblClickCell: function(row, field, value) {

                        }
                    });
                });
            });

<table id="ClientData" title="Attributes" class="edatagrid" style="width:1200px;height:600px" toolbar="#toolbar" fitColumns="true" editable="true" ></table>


I need to capture the value of the changed cell after the onDblClickCell line as soon as the user clicks anywhere else in the grid or out of it. Any ideas how this might be done?

Thanks.

I understand your example, and have employed it in other features. But this datagrid is generated in javascript and passed to edatagrid essentially bypassing the <thead> <tr> <th field="... method. There must be a way to activate the editor when the table is generated with the javascript I copied earlier and only the following:

<table id="ClientData" title="Attributes" class="edatagrid" style="width:1200px;height:600px" toolbar="#toolbar" fitColumns="true" editable="true" ></table>

Thanks.

We are trying to edit data that is loaded in an  edatagrid - this is how we are generating the grid - all data loads fine.

<table id="ClientData" title="Attributes" class="edatagrid" style="width:1200px;height:600px" toolbar="#toolbar" fitColumns="true" editable="true"></table>
<div id="toolbar">
<a href="etc...">New</a>
</div>

Javascript code:

            var attributeDefs;
            var resources;
            var resourceDef;
            var attributeValues;
            var attributeIds;

            $(function() {
                $.ajax({
                    url: '../rest/...../attributes',
                    type: "GET",
                }).done(function(data) {
                    attributeDefs = data.attributeDefs;
                    resourceDef = data.resourceDef;
                    resources = data.resources;
                    attributeValues = data.attributes.values;
                    attributeIds = data.attributes.ids;
                    var frozenColumns = [];
                    frozenColumns.push({
                        field: '0',
                        title: 'Name',
                        align: 'left',
                        width: 100,
                        resizable: true,
                  editable: true,
                        fixed: false
                    });
                    var columns = [];
                    columns.push({
                        field: '0',
                        title: 'Name',
                        align: 'left',
                        width: 100,
                        resizable: true,
                  editable: true,
                        fixed: false
                    });
               for (var i = 0; i < attributeDefs.length; i++) {
                        columns.push({
                            field: (i + 1).toString(),
                            title: attributeDefs.name,
                            align: 'left',
                            width: 100,
                            resizable: true,
                            fixed: false,
                     editable: true,
                        });
                    }
                    var rows = [];
                    for (var i = 0; i < resources.length; i++) {
                        var attributeObject = {'0' : resources.name};
                        for (var j = 0; j < attributeDefs.length; j++) {
                            attributeObject[(j + 1).toString()] = attributeValues[j];
                        }
                        rows.push(attributeObject);
                    }
                    $('#ClientData').edatagrid({
//                        frozenColumns: [frozenColumns],
                        columns: [columns],
                        data: rows,
                        editable: true,
                        fitColumns: true,
                        singleSelect: true,
                        nowrap: true,
                        striped: true,
                  onDblClickCell: function(index,field,value){
                     $(this).edatagrid('beginEdit', index);
                     var ed = $(this).edatagrid('getEditor', {index:index,field:field});
                     //$(ed.target).focus();
                     

window.alert('INDEX:' + index + ' FIELD:' + field );
                  }
                    });
                });
            });



When I click on a cell the window.alert lists the index and field numbers. However var ed is null, and thus ed.target is null as well. The grid also never makes the grid cell editable, either. It appears that getEditor is never interpreting the index and field.

Any ideas?

Thank you.

Ok, I was able to load all the column headers and, after a change in the DB, reload the grid and see the new column header appear. However, I have no data loading into the grid columns at all:

$(function() {
      $.ajax({
         url: '../rest/.../attributeDefs',
         type: "GET"
      }).done(function(data) {
          var columns = [];
          $.each(data, function(i, attributeDefs) {
            columns.push({
                  field: 'attributeDefs.attributeDefId',
                  title: attributeDefs.attributeDefName,
                  width: 90               
               });
            });
          $('#AD').edatagrid({columns:[columns]});
        });
});
</script>

   <table id="AD" title="Resources" class="edatagrid" style="width:1000px;height:auto"
                data-options="{
                  url: '../rest/.../attributes',
                  method: 'GET',
                  editable: 'true',
                  singleSelect:'true',
                  striped:'true',
                  loadFilter: function(data){
                        data.rows = data.attributes.values;
                        return data;
                     }
               }"
            toolbar="#toolbar"
            fitColumns="true">

   </table>


Any ideas?

I'm able to display the data without processing it through javascript. So, the data has no issues. FYI, the data is being returned in json format.

I'm getting the following error from your edits:

TypeError: col.field.replace is not a function jquery.easyui.min.js:7960

I'm also seeing only 1 column header of 7 that it should display, and 5 of 7 column values displayed. Very odd.

I have the following which functions great:

<div title="Clients" style="padding:10px">
   <table id="AD" title="Names" class="edatagrid" style="width:1200px;height:auto"
                data-options="{
                  url: '../rest/etc...',
                  method: 'GET',
                  editable: 'true',
                  singleSelect:'true',
                  striped:'true',
                  loadFilter: function(data){
                        data.rows = data.attributes.values;
                        return data;
                     }
               }"
            toolbar="#toolbar"
            fitColumns="true">
      <thead>
         <tr>
            <th data-options="field:'1',width:100">First Name</th>
            <th data-options="field:'2',width:100">Last Name</th>
         </tr>
      </thead>
   </table>
</div>


However, what I want to do is use javascript to generate the table header lines on the fly based on new columns added into the database. So, I created this:

<script>
   $(function() {
         $.ajax({
            url: '../rest/etc...',
            type: "GET"
         }).done(function(data) {
            var options = [];
            $.each(data, function(i, attributes) {
               $("#clientData").append('<th data-options="field:\'' +attributes.Id+ '\',width:100">' +attributes.Name+ '</th>')
            });
         });
   });
</script>

<div title="Clients" style="padding:10px">
   <table id="AD" title="Names" class="edatagrid" style="width:1200px;height:auto"
                data-options="{
                  url: '../rest/etc...',
                  method: 'GET',
                  editable: 'true',
                  singleSelect:'true',
                  striped:'true',
                  loadFilter: function(data){
                        data.rows = data.attributes.values;
                        return data;
                     }
               }"
            toolbar="#toolbar"
            fitColumns="true">
      <thead>
         <tr id="clientData"></tr>
      </thead>
   </table>
</div>

The <tr... <th html are being generated without syntax error and can be viewed as such, but none of the table headers, let alone data, are displayed in the datagrid. Do you have any idea what I'm doing wrong?

Thanks.

I want to create column titles from the values returned from my database. Right now a have a single column similar to this:

Attributes
=======
First Name
Last Name
Address
Phone

I'd like to have those values appear as the column titles and thus the values beneath those titles be populated with member data.

First Name | Last Name | Address | Phone

The idea would be if I enter a new attribute, for example "Pet Name", in the database a new empty column would appear entitled "Pet Name" .

First Name | Last Name | Address | Phone | Pet Name

Do you have any ideas on how I might do this?

I can't use that process because we are using javascript to talk to a server side REST process. So, I need to capture the edited cell index and the edited values and then pass the changes to our established REST process.

I think if I can capture the cell index as soon as editing starts, I'm guessing when a cell is double-clicked I can then capture the changes made to the cell.

Thanks.

This is what I did to get the value I needed when adding a new row:

$('#dg').edatagrid('endEdit',newRowIndex);
rowAdd = JSON.parse(JSON.stringify($('#dg').edatagrid('getRows',newRowIndex)));
var newValue =  rowAdd[newRowIndex].columnNameWhatever;

However, when trying something similar for editing an existing row I can't seem to capture the edited row index, let alone any of the changed values. It almost seems that when I click my save feature, which for testing purposes just generates an alert pop-up, it isn't recognizing that I'm ending the edit.

When I first double click a row to edit, I probably I need to capture the row number at that time, and when I'm done editing signal the end edit process and capture the values. Do you have any ideas?

Thanks.