DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Using Multi Select Check BOx Column In Grid with hidden columns and retrieving selected records

Using Multi Select Check BOx Column In Grid with hidden columns and retrieving selected records

inguva_vamsiinguva_vamsi Posts: 8Questions: 3Answers: 0
in Free community support

Hi All,

Can anyone send me example code where i have multiple columns with hidden columns and also a multi select check box column and after i do select those rows i need to retrieve hidden column values in , seperated form on a button click .Please help

Thanks,
Vamsi

Replies

  • kthorngrenkthorngren Posts: 21,550Questions: 26Answers: 4,990

    This example shows how to get the selected rows. All you need to do is change the count() to the data() to get the selected row data, including hidden columns. You may also be interested in using the toArray() API to get just the data. Once you have the array of data you can process it in anyway you need using Javascript statements.

    Kevin

  • inguva_vamsiinguva_vamsi Posts: 8Questions: 3Answers: 0
    edited June 2019

    Hi kthorngren,

    I am using the following code to display datatable which is working fine. Now i want multi select check box column in grid. Could you please help.

    function table() { 
$('#customdatatable').DataTable( {
   
        data: arrData,  // My Data is coming  in this array 
    

        columns: [
           { title: "subscriptionid" } ,// Primary Key id 
 { title: "SKU" },  
   { title: " Category" },
      { title: " Product Name" },
            { title: "Product Rate Plan:ID" },
               { title: "Option Code" },
               { title: "Rate ID Name" },
                  { title: "Charge" },
        
         
        ]
    } );
}

    I am confused betwen columndefs and columns in datatable declarations

    Could you please help

    Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    Hi @inguva_vamsi ,

    You need to define columns if you're using object based data, and all columns need to be defined, so DataTables knows where to put the data. columnDefs can set similar configuration options, but is more selective, you only set properties for specific columns that need a certain configuration option.

    As Kevin said, use Select extension for column selection, here's another example with checkboxes.

    Cheers,

    Colin

  • inguva_vamsiinguva_vamsi Posts: 8Questions: 3Answers: 0

    Hi @colin,

    I am succesfully getting data in the datatable. My Only Challenge is how to change this code so that i will get check box column in the datatable. Please note that the below code is placed in ms dynamics CRM and there are some restrictions to directly pass api to the source so i am using the following code

    <html><head>
    <title>Account Subscriptions</title>
  
    <script src="ClientGlobalContext.js.aspx" type="text/javascript"></script> 
 <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
 <link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.5/css/select.dataTables.min.css">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <meta><meta><meta></head><body style="word-wrap: break-word;" onfocusout="parent.setEmailRange();"><script src="https://code.jquery.com/jquery-1.12.4.js"> </script>
 <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"> </script>
 <link type="text/css" href="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.11/css/dataTables.checkboxes.css" rel="stylesheet">
<script type="text/javascript" src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.11/js/dataTables.checkboxes.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>



   
<script>

  var dataSet;
  var arrData = [];

$(document).ready(function() { 
 // Get the data in Json format, Change the URL as per your need.
    var entityName ="fcs_subscription";    // This is the Entity name of Case.
  var  url = window.parent.Xrm.Page.context.getClientUrl() + "/api/data/v9.1/" + entityName +"s?$select=subscriptionid,productsku,category,name,plantype,productrateplanid,optioncode,customertype,charge,schargemodel";
    var myData = []; 
  var req = new XMLHttpRequest();
  req.open("GET",url, false);
  req.setRequestHeader("OData-MaxVersion", "4.0");
  req.setRequestHeader("OData-Version", "4.0");
  req.setRequestHeader("Accept", "application/json");
  req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
  req.setRequestHeader("Prefer", "odata.include-annotations=\"*\"");
  req.onreadystatechange = function() {
   if (this.readyState === 4) {
    req.onreadystatechange = null;
    if (this.status === 200) {    
       myData = JSON.parse(this.response); 
       dataSet=myData.value;     
    } else {
     Xrm.Utility.alertDialog(this.statusText);
    }
   }
  };
  req.send();
  
     
   // Convert Json data into 2-d Array
    arrItems = [];    
  $.each(dataSet, function (index, value) {  
        arrItems.push(value.subscriptionid);
   arrItems.push(value.productsku);
      arrItems.push(String(value["category@OData.Community.Display.V1.FormattedValue"]) );
   arrItems.push(value.name);
    arrItems.push(String(value["plantype@OData.Community.Display.V1.FormattedValue"]) );
       arrItems.push(value.productrateplanid);
       arrItems.push(value.optioncode);
           arrItems.push(String(value["customertype@OData.Community.Display.V1.FormattedValue"]) );
                   arrItems.push(String(value["charge@OData.Community.Display.V1.FormattedValue"]) );
                      arrItems.push(String(value["schargemodel@OData.Community.Display.V1.FormattedValue"]) );
 
    arrData.push(arrItems);   // Push The Values Inside the Array to Create 2-D Array
   arrItems = [];          
  });
        
  table(); // Call a table function to create table.  
});
 
function table() { 
$('#customdatatable').DataTable( {
   
        data: arrData,
    

        columns: [
           { title: "subscriptionid" } ,
 { title: "SKU" },  
   { title: "Category" },
      { title: "Product Name" },
         { title: "Charge Plan Type" },
            { title: "Product Rate Plan:ID" },
               { title: "Option Code" },
               { title: "Rate ID Name" },
                  { title: "Charge" },
                  { title: "UOM" },
         
        ]
    } );
    
    
    
    
}
   
</script>
<meta>


   
 <table id="customdatatable" class="display" width="100%"></table>
 

</body></html>
  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    @inguva_vamsi isn't this the same as this other thread - you've posted three times the same question...

    first
    second
    third

  • inguva_vamsiinguva_vamsi Posts: 8Questions: 3Answers: 0

    There is some problem here i submitted three times sorry for this

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.