SharePoint 2010, Rest, Ajax - Returning Selected Rows, Rendering Multi Choice Fields

gregjss

Hi,

I’m new to DataTables and Rest calls so please forgive me if this is an obvious fix. I’m at a loss.

To start my source data is a SharePoint 2010 list and I used the following tutorial to get things started. I then added in code from the example Row selection (multiple rows). and modified the code to suite my needs to generated the table below.

Below is the code I’m using:

<script type="text/javascript">

    $(document).ready(function(){
       
        var table = $('#results').DataTable();

        $('#results tbody').on('click', 'tr', function(){           
            $(this).toggleClass('selected');
            
            alert(table.rows('.selected').data().length + ' row(s) selected');      
        });    
    });

    function getResults(){
        var callResults = $.ajax({
            url: "https://intra.xxxxxxx/_vti_bin/listdata.svc/ListName?$filter=substringof('12345',Case)
                        &$select=Id,Title,DateReceivedMDYYYY,ContactMethod,Case,ClientLastName,StatusValue
                        &$expand=ContactMethod",
            type: "GET",
            dataType: "json",
            headers: {
                Accept: "application/json;odata=verbose"
            }
        }); 

        callResults.done(function (data, textStatus, jqXHR){
            $('#results').DataTable({
                "bDestroy": true,
                "bProcessing": true,
                "aaData": data.d.results,
                "aoColumns": [
                    { "mData": "Case" },
                    { "mData": "Id" },
                    { "mData": "Title" },
                    { "mData": "ClientLastName"},
                    { "mData": "ContactMethod"},
                    { "mData": "DateReceivedMDYYYY"},
                    { "mData": "StatusValue"}
                ],
                "columnDefs": [
                    { "width": "30%", "targets": 2 },
                    { "render" : function (data, type, row) {
                            return moment.utc(data, "x").format("M/D/YYYY");
                        },
                        "targets": 5
                    }

                ],
                "order": [[ 5, "desc" ]]                            
            });
        });

        callResults.fail(function (jqXHR, textStatus, errorThrown){
            alert("Error retrieving Inquiries: " + jqXHR.responseText);
        });
    }

    window.onload = getResults();
</script>

The Div tag I’m using for the table is:

<div class="ms-rte-layoutszone-inner">
<h3 style="text-align:justify;" class="ms-standardheader ms-WPTitle"><nobr><span>Results</span></nobr></h3>
    <table id="results" width="100%" cellpadding="0" cellspacing="0" border="0" class="compact cell-border" >
        <thead>
            <tr>
                <th>Case #</th>
                <th>ID</th>
                <th>Title</th>
                <th>Client Last Name</th>
                <th>Contact Method</td>
                <th>Date Received (M/D/YYYY)</th>
                <th>Status</th>
            </tr>
        </thead>
    </table>
</div>

A sample of the results returned to the Network > Response Tab from Developer Tools is:

{
"d" : {
"results": [
{
"__metadata": {
"uri": "https://intra.xxxxxxx/_vti_bin/listdata.svc/ListName(1)", "etag": "W/\"64\"", "type": "Microsoft.SharePoint.DataService.ListNameItem"
}, "Title": "Test Item 1", "DateReceivedMDYYYY": "\/Date(1460246400000)\/", "ContactMethod": {
"results": [
{
"__metadata": {
"uri": "https://intra.xxxxxxx/_vti_bin/listdata.svc/ListNameContactMethod('Email')", "type": "Microsoft.SharePoint.DataService.ListNameContactMethodValue"
}, "Value": "Email"
}, {
"__metadata": {
"uri": "https://intra.xxxxxxx/_vti_bin/listdata.svc/ListNameContactMethod('Feedback')", "type": "Microsoft.SharePoint.DataService.ListNameContactMethodValue"
}, "Value": "Feedback"
}
]
}, "Case": "1234567", "ClientLastName": null, "StatusValue": "Created", "Id": 1
}, 

I'm having problems in two areas:

The first is expanding my SharePoint multi choice field which shows in “Contact Method” column as [object Object]. I would like to have the selected choices displayed, separated by a coma. For example “Phone, Email, Web Site” or “Email, Feedback”. Nothing I have tried has worked.

The second is with returning the number of selected rows. No matter how many rows I have selected the alert always displays “0 row(s) selected”, which is not the behavior exhibited in the example. I have recreated the Row selection (multiple rows) example in jsfiddle with no issues.

Any help would be much appreciated.

Thanks

ktilcock

Were you able to fix this issue?

allan

I missed this back in August last year, but the answer is to use columns.data set to be ContactMethod.results[, ].Value.

The columns.data documentation goes into more detail, but basically use [] to indicate that the information needs to be read from an array.

Allan

mogreer

Thank You