Select with jquery checkboxdropdownlist

[bsolteam]

Hi,
  Am trying to put checkbox in dropdown. I refered this link. http://paramquery.com/forum/index.php?topic=516.msg3423#msg3423. Dropdown is coming without checkbox. Followings are the code snippet I used.

Code: [Select]

$(function () {

    var data = [
        { rank: 1, company: 'Exxon Mobil', revenues: '339938.0', profits: '36130.0' },
        { rank: 2, company: 'Wal-Mart Stores', revenues: '315654.0', profits: '11231.0' },
        { rank: 3, company: 'Royal Dutch Shell', revenues: '306731.0', profits: '25311.0' },
        { rank: 4, company: 'BP', revenues: '267600.0', profits: '22341.0' },
        { rank: 5, company: 'General Motors', revenues: '192604.0', profits: '-10567.0' },
        { rank: 6, company: 'Chevron', revenues: '189481.0', profits: '14099.0' },
        { rank: 7, company: 'DaimlerChrysler', revenues: '186106.3', profits: '3536.3' },
        { rank: 8, company: 'Toyota Motor', revenues: '185805.0', profits: '12119.6' },
        { rank: 9, company: 'Ford Motor', revenues: '177210.0', profits: '2024.0' },
        { rank: 10, company: 'ConocoPhillips', revenues: '166683.0', profits: '13529.0' },
    ];
    var obj = {
        numberCell:{resizable:true,title:"#",width:30,minWidth:30},
editor: {type: 'textbox'},
        title: "ParamQuery Grid with JSON Data",
        resizable:true,
        scrollModel:{autoFit:true, theme:true},
toolbar: {
                items: [ 
            {
                    type: 'select', style:"width:150px;",cls: "ddClass",
                    options: function (ui) {
                        var CM = ui.colModel;
                        var opts = [{'Special1':'Spec1','Special2':'Spec2','Special3':'Spec3'}];
                                                                 return opts;
                    },
                },]},
    };
    obj.colModel = [
        { title: "Rank", width: 100, dataType: "integer", dataIndx: "rank" },
        { title: "Company", width: 200, dataType: "string", dataIndx: "company"},
        { title: "Revenues ($ millions)", width: 150, dataType: "float", align: "right", dataIndx: "revenues" },
        { title: "Profits ($ millions)", width: 150, dataType: "float", align: "right", dataIndx: "profits" }
    ];
    obj.dataModel = { data: data };
    var $grid=$("#grid_json").pqGrid(obj);
$toolbar = $grid.find('.pq-toolbar-search');
$toolbar.find(".ddClass").multipleSelect().multipleSelect("checkAll");
$grid.pqGrid("refresh");
  dataIndxs = $toolbar.find(".ddClass").multipleSelect("getSelects");
  console.log(dataIndxs);
}); If I added the following code dropdown is coming with checkbox, but it's pushing the grid down [Image Attached]. Also unable to get the selected value properly.

Code: [Select]

$('.ddClass').change(function() {
            console.log($(this).val());
        }).multipleSelect({
            width: '17%'
        }); Please Correct me what am doing wrong.

[paramvir]

Could you put up a jsfiddle.

Please take this as starting point.

http://jsfiddle.net/paramquery/b6b710mz/

[bsolteam]

Hi, I have tried in jsfiddle. Jsfiddle not supporting the multiselect. Anyway I have updated my codes here. Have a look at it. 
http://jsfiddle.net/b6b710mz/2/  What am trying is, what are all the columns checked in dropdown checkbox that should be open other columns should be hidden. 

[bsolteam]

Hi,
Please give some suggestions for this.

[paramvir]

Please check this demo:

http://paramquery.com/pro/demos/showhide_columns

[bsolteam]

Thanks for giving nice demo. Now it's working fine. The thing I missed is css style. And also Please correct the css for internet explorer. In internet explorer drop-down was truncated.

[paramvir]

Fixed version of multipleSelect for IE is available here:

https://github.com/paramquery/multiple-select

[bsolteam]

Hi,
I tried drop down check box in my toolbar. Followings are the code I have used. If ajax call return a data then only this code will run. Here already select option is there with single select. If am using multiple select in same toolbar the drop down is not working properly. If I remove  attr: "multiple='multiple'"  from my code it is working like single select. In other grid I have this multiple select alone that is working fine please correct me what I am doing wrong.

Code: [Select]

$.ajax({
  url : "getDraftCutDate",
  success : function(response)
  { 
function_two(response); 
var toolbar = {
items : [
{
type : "<span style='margin:5px;width:90px;'>Draft Date</span>"
},
{
type : 'select',
size:'4',
cls : "cutdate",
listeners : [ {
'change' : pqFilter.search
} ],
options : function(ui) {
var opts = [];
var cjson = eval('(' + response + ')');
for (var i = 0; i < cjson.length; ++i) {
opts.push(cjson[i].draftCutdate);
}
return opts;
}
},

{type:"<span style='margin:3px;'>SELECT COLUMNS TO BE VISIBLE: </span>"},
                    { type: 'select', cls: 'columnSelector', options: function (ui) {
                  var opts = [{'SPECIAL FEATURES':'SPECIAL FEATURES','IFO':'IFO (PER DAY CONS)','MGO':'MGO/MDO (PER DAY CONS)','WEIGHT':'WEIGHT','DISPLACEMENT':'DISPLACEMENT'}];
  return opts;
                },    attr: "multiple='multiple'"
                },
]
};
$("#vessel_tab_main").pqGrid("option", "toolbar", toolbar);
$("#vessel_tab_main").pqGrid("refreshDataAndView");       
}
  });

[paramvir]

Please share a jsfiddle.

[bsolteam]

Hi,

I have updated my codes in the following link.
http://jsfiddle.net/b6b710mz/6/

[paramvir]

There is a syntax error in your jsfiddle.