For some reason, I'm getting this error using the DataGridView and DataGrid together. This works perfectly in anotehr application. Using jQuery v2.2.2

Code:

jquery.min.js:3 Uncaught TypeError: ((n.event.special[g.origType] || (intermediate value)).handle || g.handler).apply is not a function

This happens when I clicking the Save button after editing the record in the DataGridView.

Any ideas?

I believe we'd need to see a URL so that we could examine the CSS. I do not see that in my grids.

I am creating a grid based on this tutorial: http://www.jeasyui.com/tutorial/datagrid/datagrid21_demo.html
I want a different detail view for 2 different options.
Each row will have 2 check columns. When one is checked, I want to show one detail view and when the other is checked, I want to show a different one.

How would this be done?

stworthy,
Could you help out on this one?

See this tutorial:

http://www.jeasyui.com/tutorial/datagrid/datagrid16_demo.html

If I have more than one, how would I set the header title to the one for the corresponding column title?

Thanks. That did it...

I am having issues loading a jQuery EasyUI Datagrid at this URL:
http://www.scic.com/files/event_attendance

Enter the event code 20150731TXAO and click the Load Attendees button.

This is the raised Exception and Call Stack:

Code:

Uncaught TypeError: Cannot read property 'length' of undefined

_745.renderTable @ jquery.easyui.min.js:10102
_745.render @ jquery.easyui.min.js:10079
_612 @ jquery.easyui.min.js:9032
(anonymous function) @ jquery.easyui.min.js:9682
st.extend.each @ jquery.js:642
st.fn.st.each @ jquery.js:263
$.fn.datagrid @ jquery.easyui.min.js:9657
(anonymous function) @ (index):169
st.Callbacks.f @ jquery.js:1026
st.Callbacks.p.fireWith @ jquery.js:1138
r @ jquery.js:8021
st.ajaxTransport.send.r @ jquery.js:8558
    XMLHttpRequest.send (async)
st.ajaxTransport.send @ jquery.js:8475
st.extend.ajax @ jquery.js:7930
st.each.st.(anonymous function) @ jquery.js:7569
loadAttendees @ (index):163
(anonymous function) @ (index):143
st.event.dispatch @ jquery.js:3045
st.event.add.y.handle @ jquery.js:2721

The data is loaded in the loadAttendees function in a jQuery $.get. It is stored in the variable window.data and then the datagrid is initialized.

Code:

function loadAttendees(EventCode) {
    $.get('getEventAttendees.php?event_code='+EventCode, function(data) {
        window.data = data;
        $("#upload").hide();
        $("#grid_area").show();
        
        $('#dg').datagrid({
            title:'Event Attendees',
            width:'100%',
            height:600,
            remoteSort:false,
            nowrap:false,
            fitColumns:true,
            striped: true,
            border:true,
            collapsible:true,
            data: window.data,
            toolbar:"#tb",
            columns:[[
                {field:'event_code',   visible:false},
                {field:'participantid',title:'Alliance#',      width:60,  sortable:true},
                {field:'full_name',    title:'Full Name',      width:100, editor:'text', sortable:true},
                {field:'lic_num',      title:'License Number', width:60,  editor:'text'},
                {field:'lic_state',    title:'License State',  width:40, editor:'text'},
                {field:'want_ce',      title:'CE',             width:10,  editor:'checkbox'},
                {field:'attended',     title:'AT',             width:10,  editor:'checkbox'}
            ]]
        });
    });
};

I can't understand why it doesn't load any data.
This is the data it is trying to load:

Code:

"{"total":2,"rows":[{"event_code":"20150731TXAO","participantid":1158341,"full_name":"Eddie Shipman","lic_num":110987,"lic_state":"TX"},{"event_code":"20150731TXAO","participantid":1079745,"full_name":"Dustin Payne","lic_num":231896,"lic_state":"TX"}]}"

I used another jQuery plugin called jQuery-ScrollTo, http://balupton.github.io/jquery-scrollto/ to do this.

In case you are wondering how. I did this in the onLoad for the ddv.panel:

Code:

var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv');
ddv.panel({
    border:false,
    cache:true,
    href:'show_form.php?index='+index,
    onLoad:function(){
        $('#dg').datagrid('fixDetailRowHeight',index);
        $('#dg').datagrid('selectRow',index);
        $('#dg').datagrid('getRowDetail',index).find('form').form('load',row);
        ddv.ScrollTo({duration: 0,easing: 'linear',offsetTop: 26}); // This scrolls the current row to the top of the view.
    }
});

If someone has an answer on how to do this without the other plugin, let me know, otherwise, I'm marking this as solved.

I'm using the crud example. Is there a way to make the row scroll to the top of the view when expanding the row to edit it?

As shown in my other post, scrollTo() doesn't work for me at all, no matter where I put it.

Code:

columns:[[
   ..
  {field:'type',title:'Course Type',
  width:80,align:'right',
  formatter:function(val,row,index){
      return (val==0?"OL":(val==1?"Classroom":"WB"));
  },
  editor:{type:'combobox',
      options:{name:       'type',
                   valueField: 'val',
                   textField:  'txt',
                   data:       [{txt:'OL',val:'0'},{txt:'Classroom',val:'1'},{txt:'WB',val:'2'}]
                   }
              }
           }
]];

URL: http://www.scic.com/files/website_gatekeeper/

Can't seem to have the Course Type show the same as when the record is in edit mode. I would like to show
OL for val 0
Classroom for val 1
Webinar for val 2

I found the problem. The form was incorrect.

101 views and no one knows?

I believe that is where I got the code from. However...

In the saveItem() function, line 4, I cannot access anything in the form and nothing gets sent to either save_gatekeeper or update_gatekeeper.

Let me also point out that the form's method is POST, yet when you send to update_user you use a GET URL: 'update_user.php?id='+row.id