jQuery UI Widgets Forums Editors Button, RepeatButton, ToggleButton, LinkButton Binding click event on jqxToolBar button

This topic contains 4 replies, has 2 voices, and was last updated by  rishisahi 9 years, 3 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Binding click event on jqxToolBar button #67762

    rishisahi
    Participant

    Hi,

    I am trying to bind “click” event on button which is on tool bar but when I press the button it executes the code but submits the form too which I don’t want. Usually we add “return false” attribute on button to avoid submissions but no idea how do do here,

    var button1, buttonMin1;
                         case 5:
                            tool.jqxButton({ width: '120'});
    	                tool.text("Apply filter");
         	                if (menuToolIninitialization === false) {
                               button1= tool;
                             } else {
                               buttonMin1= tool;
                             }
                         break;

    Here is adding click event on this button,

    button1.bind('click', function (event) {
                alert('Filter code goes here');
          });
    • This topic was modified 9 years, 3 months ago by  rishisahi.
    • This topic was modified 9 years, 3 months ago by  rishisahi.
    • This topic was modified 9 years, 3 months ago by  rishisahi.
    Binding click event on jqxToolBar button #67766

    Dimitar
    Participant

    Hi rishisahi,

    Is the toolbar positioned in a form? Please provide a larger code sample, including your HTML.

    I would also like to note that unless there is some special case (such as Cascading dropdown list on jqxToolBar), tool event bindings can be simplified as:

    case 5:
        tool.jqxButton({
            width: '120'
        });
        tool.text("Apply filter");
        tool.click(function() {
            alert('Filter code goes here');
        });
        break;

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Binding click event on jqxToolBar button #67770

    rishisahi
    Participant

    Thanks Dimitar. Actually when I add “click” function in tool bar code it submits the form which I don’t expect to happen. Here is full code

    <!DOCTYPE html>
    <html lang="en">
    <head>
           <script type="text/javascript">
            $(document).ready(function () {
                var url = "<Computed Value>";
                // prepare the data
                var source =
                {
                    datatype: "xml",
                    datafields: [
                         { name: 'date', type: 'date' },
                         { name: 'event_no', type: 'string' },
                         { name: 'opcenter', type: 'string' },
                         { name: 'brief_desc', type: 'string' },
                         { name: 'risk_level', type: 'string' },
    	     { name: 'status', type: 'string' },
    	     { name: 'hazard_source', type: 'string' },
    	     { name: 'hazard_effect', type: 'string' },
    	     { name: 'where_observed', type: 'string' },
    	     { name: 'activity', type: 'string' },
    	     { name: 'work', type: 'string' },
    	     { name: 'project_name', type: 'string' },
    	     { name: 'country', type: 'string' },
    	     { name: 'violated_rules', type: 'string' },
      	     { name: 'support_departments', type: 'string' },
      	     { name: 'employed_by', type: 'string' },
      	     { name: 'job_position', type: 'string' },
      	     { name: 'author_name', type: 'string' },
      	     { name: 'confidentiality', type: 'string' },
      	     { name: 'nrm_type', type: 'string' },
      	     { name: 'non-conformity', type: 'string' }
                    ],
                    root: "documents",
                    record: "document",
                    id: "docid",
                    url: url
                };
                var dataAdapter = new $.jqx.dataAdapter(source, {
                    downloadComplete: function (data, status, xhr) { },
                    loadComplete: function (data) { },
                    loadError: function (xhr, status, error) { }
                });
                // create jqxgrid.
                $("#jqxgrid").jqxGrid(
                {
                    width: 850,
                    source: dataAdapter,
                    pageable: true,
    	sortable: true,
                    groupable: true,
    	autoheight: true,
                    filterable: false,
    	autoshowfiltericon: false,
                    columnsresize: true,
                    altrows: true,
                    columns: [
                      { text: 'Date', datafield: 'date', cellsformat: 'dd-MMM-yyyy' , filtertype: 'range', width: '13%' },
                      { text: 'Event Number', datafield: 'event_no' },
                      { text: 'OpCenter', datafield: 'opcenter' },
                      { text: 'Brief Description', datafield: 'brief_desc' },
                      { text: 'Risk Level', datafield: 'risk_level' },
                      { text: 'Status', datafield: 'status', hidden: true },
                      { text: 'Hazard Source', datafield: 'hazard_source', hidden: true },
                      { text: 'Hazard Effect', datafield: 'hazard_effect', hidden: true },
                      { text: 'Where Observed', datafield: 'where_observed', hidden: true },
                      { text: 'Activity', datafield: 'activity', hidden: true },
                      { text: 'Work', datafield: 'work', hidden: true },
                      { text: 'Project Name', datafield: 'project_name', hidden: true },
                      { text: 'Country', datafield: 'country', hidden: true },
                      { text: 'Violated Rules', datafield: 'violated_rules', hidden: true },
                      { text: 'Support Departments', datafield: 'support_departments', hidden: true },
                      { text: 'Employed By', datafield: 'employed_by', hidden: true },
                      { text: 'Job Position', datafield: 'job_position', hidden: true },
                      { text: 'Author Name', datafield: 'author_name', hidden: true },
                      { text: 'Confidentiality', datafield: 'confidentiality', hidden: true },
                      { text: 'NRM Type', datafield: 'nrm_type', hidden: true },
                      { text: 'Non-Conformity', datafield: 'non-conformity', hidden: true }
                    ]
                });
    
    var listSource = [
    		 { label: 'Status', value: 'status', checked: false },
    	                 { label: 'Hazard Source', value: 'hazard_source', checked: false},
    		 { label: 'Hazard Effect', value: 'hazard_effect', checked: false},
    		 { label: 'Where Observed', value: 'where_observed', checked: false},
    		 { label: 'Activity', value: 'activity', checked: false},
    		 { label: 'Work', value: 'work', checked: false},
    		 { label: 'Project Name', value: 'project_name', checked: false},
    		 { label: 'Country', value: 'country', checked: false},
    		 { label: 'Violated Rules', value: 'violated_rules', checked: false},
    		 { label: 'Support Departments', value: 'support_departments', checked: false},
    		 { label: 'Employed By', value: 'employed_by', checked: false},
    		 { label: 'Job Position', value: 'job_position', checked: false},
    		 { label: 'Author Name', value: 'author_name', checked: false},
    		 { label: 'Confidentiality', value: 'confidentiality', checked: false},
    		 { label: 'NRM Type', value: 'nrm_type', checked: false},
    		 { label: 'Non-Conformity', value: 'non-conformity', checked: false}
    	             ];
    
    var dropdownlist1, dropdownlist1Min, dropdownlist2, dropdownlist2Min, listbox, listboxMin, button1, buttonMin1, button2, buttonMin2;
    
    $("#jqxToolBar").jqxToolBar({
                    width: 850, height: 35, tools: 'custom | dropdownlist | custom | dropdownlist | custom | button | button | custom',
                    initTools: function (type, index, tool, menuToolIninitialization) {
                       switch (index) {
                            case 0:
    	            tool.append("<div style='font-weight: bold;padding: 3px;'>Select Level :</div>");
    	            break;
                            case 1:
                               var levelsource = <Computed Value>;
                                tool.jqxDropDownList({ width: 150, source: levelsource, placeHolder: "Select..."});
    	            if (menuToolIninitialization === false) {
                                    dropdownlist1 = tool;
                                 } else {
                                    dropdownlist1Min = tool;
                                 }
                                break;
                            case 2:
    	            tool.append("<div style='font-weight: bold;padding: 3px;'>Select :</div>");
    	            break;
    	          tool.append("<div style='padding: 3px;'></div>");
    //                       tool.append("<div style='font-weight: bold;'>Select</div>");
    //                           dropdownlist1.add(dropdownlist1Min).on('select', function (event) {
    //	           tool.append("<div style='font-weight: bold;'>Select "+event.args.item.label+"</div>");
    //	          });
    	            break;
                            case 3:
                                  var resultsource = <Computed Value>;
                                tool.jqxDropDownList({ width: 150, source: [], placeHolder: "Select..."});
    	            if (menuToolIninitialization === false) {
                                    dropdownlist2 = tool;
                                } else {
                                    dropdownlist2Min = tool;
                                }
                                break;
                            case 4:
    	            tool.append("<div style='padding: 10px;'></div>");
    	            break;
                            case 5:
                                tool.jqxButton({ width: '120'});
    	            tool.text("Apply filter");
     	            if (menuToolIninitialization === false) {
                                    button1= tool;
                               } else {
                                    buttonMin1= tool;
                                }
                                break;
                            case 6:
                                tool.jqxButton({ width: '120'});
    	            tool.text("Clear filter");
     	            tool.click(function() {
          	            $("#jqxgrid").jqxGrid('clearfilters');
    	            //event.preventDefault();
    	             });
                                break;                          
                            case 7:
                                tool.jqxListBox({source: listSource, width: '100%', height: 300,  checkboxes: true });
    	            if (menuToolIninitialization === false) {
                                    listbox= tool;
                                 } else {
                                    listboxMin= tool;
                                 }
                                break;
                        }
                    }
                });
    listbox.add(listboxMin).on('checkChange', function (event) {
     $("#jqxgrid").jqxGrid('beginupdate');
                    if (event.args.checked) {
                        $("#jqxgrid").jqxGrid('showcolumn', event.args.value);
                    }
                   else {
                        $("#jqxgrid").jqxGrid('hidecolumn', event.args.value);
                    }
                    $("#jqxgrid").jqxGrid('endupdate');
        });
    
    	          dropdownlist1.add(dropdownlist1Min).on('select', function (event) {
                              level= event.args.item.label;
    	           switch (level) {
                            			case "Project":
                                                                              dropdownlist2.jqxDropDownList({ source: <Computed Value>});
    			                          dropdownlist2Min.jqxDropDownList({ source: <Computed Value>});
                                                                    break;
                            			case "Vessel":
                                                                              dropdownlist2.jqxDropDownList({ source: <Computed Value>});
    			                          dropdownlist2Min.jqxDropDownList({ source: <Computed Value>});
                                                                    break;
    				case "Client":
                                                                              dropdownlist2.jqxDropDownList({ source: <Computed Value>});
    			                          dropdownlist2Min.jqxDropDownList({ source: <Computed Value>});
                                                                    break;
    				case "Maritime Manager":
                                                                              dropdownlist2.jqxDropDownList({ source: <Computed Value>});
    			                          dropdownlist2Min.jqxDropDownList({ source: <Computed Value>});
                                                                    break;
    				case "Global":
                                                                              dropdownlist2.jqxDropDownList({ source: <Computed Value>});
    			                          dropdownlist2Min.jqxDropDownList({ source: <Computed Value>});
                                                                    break;
    				case "Region":
                                                                              dropdownlist2.jqxDropDownList({ source: <Computed Value>});
    			                          dropdownlist2Min.jqxDropDownList({ source: <Computed Value>});
                                                                    break;
    				case "Subgroup":
                                                                              dropdownlist2.jqxDropDownList({ source: <Computed Value>});
    			                          dropdownlist2Min.jqxDropDownList({ source: <Computed Value>});
                                                                    break;
                                                             }
                                   });
    var applyFilter = function (datafield)
    {
                    $("#jqxgrid").jqxGrid('clearfilters');
                    var filtertype = 'stringfilter';
                    var filtergroup = new $.jqx.filter();
                            var filter_or_operator = 1;
                            var filtervalue = dropdownlist2.jqxDropDownList('getSelectedItem').value;
    	        if(filtervalue!="Select...")
    	     {
                        	    var filtercondition = 'equal';
    	                    var filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition);
                    	    filtergroup.addfilter(filter_or_operator, filter);
    	                    $("#jqxgrid").jqxGrid('addfilter', datafield, filtergroup);
    	                   // apply the filters.
    	                   $("#jqxgrid").jqxGrid('applyfilters');
    	     }
     }
    				button1.bind('click', function (event) {
    				            var datafield= dropdownlist1.jqxDropDownList('getSelectedItem').value;
    				            switch (datafield) {
    					   case "Vessel":
    					  	 applyFilter("opcenter");
                                                                                       break;
    					   case "Project":
    					  	 applyFilter("project_name");
                                                                                       break;
                                                                                }
    			                            event.preventDefault();
     				 });
    //				button2.bind('click', function (event) {
    //				            $("#jqxgrid").jqxGrid('clearfilters');
    //				            event.preventDefault();
    //				 });
    });
        </script>
    </head>
    <body class='default'>
    <table id='jqxWidget' border="0">
                <tr>
                      <td>
                              &nbsp;
                       </td>
    	   <td>
                              <div style="float: left;" id="jqxToolBar"> 
                             </div>
                       </td>
                 </tr>
                  <tr>
                        <td valign=top>
      	           <!-- <div style="float: left;" id="jqxlistbox"></div>  -->
                        </td>
                        <td>
                                   <div style="float: left;" id="jqxgrid"></div>
                        </td>
                  </tr> 
    </table>
    </body>
    </html>
    • This reply was modified 9 years, 3 months ago by  rishisahi.
    Binding click event on jqxToolBar button #67802

    Dimitar
    Participant

    Hi rishisahi,

    Your usual approach is also applicable in this situation, too:

    case 5:
        tool.jqxButton({
            width: '120'
        });
        tool.text("Apply filter");
        tool.click(function() {
            alert('Filter code goes here');
            return false;
        });
        break;

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    rishisahi
    Participant

    Thanks Dimitar

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.