How to set toggle gridview in boilerplate razor page using javascript

@Jayraj Chhaya,

I added code you provided. currently i am getting message "databtable not initialized"

below is the code where i am setting the table
 

    var dataTableOne = $("#QueueTicketTable").DataTable({
        processing: true,
        serverSide: true, // You may need to set this to false if you're not handling server-side processing
        paging: true,
        searching: false,
        scrollX: true,
        autoWidth: true,
        scrollCollapse: true,
        order: [[0, "asc"]], // Set the default sort order, adjust as needed

        ajax: abp.libs.datatables.createAjax(queueService.getTicketsByQueueId, data.record.queue.id),
        columns: QueuedataTableColumns
    });

 

   var QueuedataTableColumns = [
       { data: "tickts.status" },
       { data: "tickts.TicketNumber" },
       { data: "tickts.SequenceNumber" }

   ];

Hi Jayraj,

this code is not working as expected

To implement the toggle functionality in your grid, you can follow these steps:

1. Add a toggle button or link in your rowAction items. This button will be used to toggle the grid.

   {
       text: "Toggle",
       action: function (data) {
           var queueId = data.record.queue.id;
           alert(queueId);
           if (dataTableOne) {
               //--- need to show toggle grid when click on this button
           } else {
               alert('DataTableOne is not initialized.');
           }
       }
   }
   

2. Create a new DataTable instance for the toggle grid. You can use the same configuration as the main grid or customize it according to your requirements.

   var dataTableOne = $("#ToggleGrid").DataTable({
       // Configuration options for the toggle grid
   });
   

3. In the toggle button's action function, check if the toggle grid is already initialized. If it is, show the toggle grid. If not, initialize it.

   if (dataTableOne) {
       //--- need to show toggle grid when click on this button
       $("#ToggleGrid").show();
   } else {
       // Initialize the toggle grid
       dataTableOne = $("#ToggleGrid").DataTable({
           // Configuration options for the toggle grid
       });
   }
   

4. Add the HTML markup for the toggle grid below the main grid.

5. By following these steps, you should be able to implement the toggle functionality in your grid. When the toggle button is clicked, the toggle grid will be shown or hidden based on its initialization status.

6. Note: Make sure to replace #ToggleGrid with the appropriate ID of your toggle grid element in the HTML markup and JavaScript code.