Button Column / Row Editing / Modal Population

bdubose

I'm wanting to populate a bootstrap modal with data from a row. I have used the render capability to render a button column, and can access each of the values within the 'data' object. However, when I place an onclick handler on the button, I cannot access any functions within my jQuery 'ready' section. I can only access functions that I've defined within the head section of my document. I'd like to pass the whole data object, but it seems to fail as I can only seem to pass specific properties of it.

Does anyone have an example of a simple button column that opens and populates a modal. I was going to go the Editor route, but a requirement of the project is to use OData, and I've not seen anything within Editor that is compatible with OData. I really like this control, even after having to dig to figure out how to use the OData connector with it. I'd hate to go look for something else, but this last part has been a snag in my project.

bdubose

Also, getting the buttons that come with DataTables to show fails as well for me.
I cannot get them to show up at all. I don't see anything on the OData connectors GitHub page that shows how to implement them, so I implemented them the same as documented here. Here's my code snip-it... you'll notice that I'm having to use the parameters that are used when consuming OData, which are quite a bit different from the standard params.

$('#SubVendorTable').DataTable( {
"oDataUrl": 'http://localhost:54424/odata/subvendor',
"oDataViaJsonp": false,
"oDataAbort": false, // set to true to cancel previous on-going request
"ajax": ajaxOData,
"serverSide": false,
"columns": [
{ data: 'SubVendorId' },
{ data: 'MarketId' },
{ data: 'CompanyName' },
{ data: 'LegalName' },
{ data: 'Address1' },
{ data: 'Address2' },
{ data: 'Address3' },
{ data: 'City' },
{ data: 'StateProvince' },
{ data: 'PostalCode' },
{ data: 'CreatedBy' },
{ data: 'CreatedUtcDate', type: "date" },
{ data: 'LastModifiedBy' },
{ data: 'LastModifiedUtcDate', type: "date" },
{
data: null,
render: function ( data, type, row ) {
return '<button type="button" class="btn btn-primary subedit" data-toggle="modal" data-target="#addSubVendorModal" onclick="console.log(\''+ data.CompanyName +'\'); loadSubVendorModal(\''+ data.CompanyName +'\');">Edit '+ data.LastModifiedUtcDate +'</button>';
}
}
],
select: true,
buttons: [
'colvis',
'excel',
'print'
]
} );

bdubose

If anyone wants to reference the OData connector for DataTables... it's here https://github.com/michele-b/Datatables-OData-v4-plugin