How do i select dropdown values which is outside from easyui datagrid table

65
July 25, 2021, at 8:40 PM

I'm working on the Codeigniter web application where I have used the jquery easyui Datagrid table, I have created the dropdown which is outside from the easyui Datagrid table, now how do I select dropdown value when Datagrid table is loaded?

Problem is that function is working but function selected all values from together from the dropdown, I need to select single dropdown value which is equal status value?

Datagrid Table

<table
                id="tt"
                class="easyui-datagrid"
                url="<?php echo base_url()."contacts/contacts_list_data"; ?>"
                pagination="true"
                rownumbers="true"
                toolbar="#tb"
                pageSize="10"
                pageList="[5,10,20,50,100]"
                fit= "true"
                fitColumns= "true"
                nowrap= "true"
                view= "detailview"
                idField="id"
                >
            <thead>
            <tr>
                <th field="id"  checkbox="true"></th>
                <th field="status"  sortable="true"><?php echo $this->lang->line('Status'); ?></th>
                <th field="status_type"  formatter='status_column'><?php echo $this->lang->line('Status'); ?></th>
                 </tr>
            </thead>
        </table>

Dropdown which is outside datagrid table

  <script>
    function status_column(value,row,index)
    {
        var inputVal = document.getElementById("status_column").innerHTML;
        return inputVal;
    }
    </script>
    <div id="status_column" style="display:none">
    
       <select name="stat_column" id="stat_column"  class="form_control stat_column">
            <option value="">Select Status</option>
            <option value='All'>All</option>
            <option value='Open'>Open</option>
            <option value='Closed'>Closed</option>
            <option value='Won'>Won</option>
            <option value='Lost Price is High'>Lost Price is High</option>
            <option value='Lost Not Enough Features'>Lost Not Enough Features</option>
            <option value='Lost Other'>Lost Other</option>
            <option value='Never Replied Back'>Never Replied Back</option>
            <option value='Bad Email'>Bad Email</option>
            <option value='Bad Number'>Bad Number</option>
            <option value='Do Not Disturb'>Do Not Disturb</option>
       </select>
    </div>

function to get dropdown values select based on the datagrid table column values

<script>
    var selected=[];
    $(function () {
        $('#tt').datagrid({
            onLoadSuccess:function(index, row ){
                var rows = $('#tt').datagrid('getRows');
                if(rows){
                    $.each(rows, function( index, row ) {
                        console.log(row+index)
                        selected.push(row.status)
                    })
                    console.log(userstatus);
                    $('#stat_column option[value="' + selected + '"]', row).attr('selected', 'selected');
                }
            }
        });
    })
</script>

Here the screenshots of the table and console

Answer 1

You can use index value to get the tr where you need to set selected value then use .find() to find your select-box inside that tr and use .prop to set selected option.

Demo Code :

 var selected=[];
$(function() {
  $('#tt').datagrid({
    onLoadSuccess: function(index, row) {
      var rows = $('#tt').datagrid('getRows');
      if (rows) {
        $.each(rows, function(index, row) {
          //get the tr with index same ..and then use .find to get select and set slected there ...
          $('.datagrid-body tr[datagrid-row-index =' + index + ']').find('select option[value="' + row.status.trim() + '"]').prop('selected', true);
           selected.push(row.status)
        })
      }
    }
  });
})
function status_column(value, row, index) {
  var inputVal = document.getElementById("status_column").innerHTML;
  return inputVal;
}
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<!--i have remove `url=".."` just for demo-->
<table id="tt" class="easyui-datagrid" pagination="true" rownumbers="true" toolbar="#tb" pageSize="10" pageList="[5,10,20,50,100]" fit="true" fitColumns="true" nowrap="true" view="detailview" idField="id">
  <thead>
    <tr>
      <th data-options="field:'id',width:80" checkbox="true"></th>
      <th data-options="field:'status',width:90" sortable="true">
        Status
      </th>
      <th data-options="field:'status_type',width:80" formatter='status_column'>
        Status
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
      </td>
      <td>
        Open
      </td>
    </tr>
    <tr>
      <td>
      </td>
      <td>
        Closed
      </td>
    </tr>
    <tr>
      <td>
      </td>
      <td>
        Do Not Disturb
      </td>
    </tr>
  </tbody>
</table>
<div id="status_column" style="display:none">
  <select name="stat_column" class="form_control stat_column">
    <option value="">Select Status</option>
    <option value='All'>All</option>
    <option value='Open'>Open</option>
    <option value='Closed'>Closed</option>
    <option value='Won'>Won</option>
    <option value='Lost Price is High'>Lost Price is High</option>
    <option value='Lost Not Enough Features'>Lost Not Enough Features</option>
    <option value='Lost Other'>Lost Other</option>
    <option value='Never Replied Back'>Never Replied Back</option>
    <option value='Bad Email'>Bad Email</option>
    <option value='Bad Number'>Bad Number</option>
    <option value='Do Not Disturb'>Do Not Disturb</option>
  </select>
</div>

READ ALSO
How to keep page content from scrolling without disabling scrolling?

How to keep page content from scrolling without disabling scrolling?

Alright so I'm really stumped by this oneHow can I lock the page's scroll position to a specific value? I can't use overflow: hidden; on the body, because that prevents scroll events from firing entirely

46
Game Maker Studio - Creating Login System Issue Stuck

Game Maker Studio - Creating Login System Issue Stuck

I've run into a major issue with one of my projects (which is currently in early access on Google Playstore) and I'm hoping for a bit of helpSo I'm using Microsoft PlayFab for my player accounts and made an option to use device ID's as a custom identifier

53
react-router-dom Link doesn&#39;t go to page content

react-router-dom Link doesn't go to page content

React router dom doesn't work when I use in NavLink (Reactstrap)

74