How to add dropdown and button in Splunk table cells?

[Jitu]

I have a splunk table where there are few columns having dropdown (eg ddcol1, ddcol2 ) and at last there is a column having button(submit)

The functionality of the button is to mark all the dropdowns with a default value(ok)

I have written the below js , but the dropdown doesnt update on click of the button 

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
    // Add dropdown to table
    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return _(["ddcol1","ddcol2","submit"]).contains(cell.field);
        },
        render: function($td, cell) {
            console.log(cell.field);
            if (cell.field == "ddcol1" || cell.field == "ddcol2") {
                if(cell.value == "dd") {
                    var strHtmlInput = `
                        <select>
                            <option value="ok">ok</option>
                            <option value="not ok">Not Ok</option>
                        </select>
                        `;
                    $td.append(strHtmlInput).on("change", function(e) {
                        console.log(e.target.value)
                    });
                }
                else {
                    $td.append(cell.value);
                }
            }
            if (cell.field == "submit"){
                console.log(cell.field);
                var strHtmlInput1=`<input type='button' class='table-button' value='All Ok'></input>`;
                $td.append(strHtmlInput1);
            }
        }
});
   $(document).on("click",".table-button",function(){
           console.log("clicked");
           console.log($(this).parents("tr").find("td[data-cell-index='6'").find(":selected").text());
           $(this).parents("tr").find("td[data-cell-index='6']").find(":selected").value="ok";
           console.log('selected');
           console.log($(this).parents("tr").find("td[data-cell-index='6'").find(":selected").text());

   });

    var sh = mvc.Components.get("tbl1");
    if (typeof(sh) != "undefined") {
        sh.getVisualization(function(tableView) {
            // Add custom cell renderer and force re-render
            tableView.table.addCellRenderer(new CustomRangeRenderer());
            tableView.table.render();
        });
    }
});

 @niketn @kamlesh_vaghela 

[Jitu]

@kamlesh_vaghela if i need a button to upload the table result to summary along with dropdown selection , is it possible ?

[kamlesh_vaghela]

@Jitu 

Yes, you can. But for this, you have to create a custom endpoint that can process your table data sent through payload. Please check the below link for the custom endpoint. You need to call this endpoint from JavaScript using the Splunk MVC Service object.  

https://hurricanelabs.com/splunk-tutorials/splunk-custom-endpoints-part-1-the-basics/

Sample Code:

service.request("/services/my-api-path","POST", {}, {}, JSON.stringify(params), {'Content-Type': 'application/json'}, function(err, resp) {
         // Handle response    
         if(resp != null){
           if(resp.status == 200){  
             //do something
           } else {
             //do something with status !=200
           }
         }
         // Handle error
         if(err != null){
           //handle error
         }
       });

 I hope this will help you.

Thanks
KV
If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

[kamlesh_vaghela · Accepted solution]

@Jitu 

Update button onclick logic with below.

    $(document).on("click", ".table-button", function () {
        var parentElement = $(this).parents("tr");
        console.log(parentElement);
        var selectElements = parentElement.find('select');
        console.log(selectElements);
        selectElements.each(function () {
            $(this).val('ok');
        });

    });

Full Code:

XML

<dashboard script="my.js">
  <label>Table With Component</label>
  <row>
    <panel>
      <table id="tbl1">
        <search>
          <query>| makeresults count=10 | eval a=1 | accum a | eval ddcol1="dd" ,ddcol2="dd",submit="submit"</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">100</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
</dashboard>

my.js

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function (_, $, mvc, TableView) {
    // Add dropdown to table
    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function (cell) {
            return _(["ddcol1", "ddcol2", "submit"]).contains(cell.field);
        },
        render: function ($td, cell) {
            console.log(cell.field);
            if (cell.field == "ddcol1" || cell.field == "ddcol2") {
                if (cell.value == "dd") {
                    var strHtmlInput = `
                        <select>
                            <option value="ok">ok</option>
                            <option value="not ok">Not Ok</option>
                        </select>
                        `;
                    $td.append(strHtmlInput).on("change", function (e) {
                        console.log(e.target.value)
                    });
                }
                else {
                    $td.append(cell.value);
                }
            }
            if (cell.field == "submit") {
                console.log(cell.field);
                var strHtmlInput1 = `<input type='button' class='table-button' value='All Ok'></input>`;
                $td.append(strHtmlInput1);
            }
        }
    });
    $(document).on("click", ".table-button", function () {
        var parentElement = $(this).parents("tr");
        console.log(parentElement);
        var selectElements = parentElement.find('select');
        console.log(selectElements);
        selectElements.each(function () {
            $(this).val('ok');
        });

    });

    var sh = mvc.Components.get("tbl1");
    if (typeof (sh) != "undefined") {
        sh.getVisualization(function (tableView) {
            // Add custom cell renderer and force re-render
            tableView.table.addCellRenderer(new CustomRangeRenderer());
            tableView.table.render();
        });
    }
});

I hope this will help you.

Thanks
KV
If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.