jQWidgets Forums
Forum Replies Created
-
Author
-
March 4, 2015 at 6:14 am in reply to: Filtering grid with separate start and end date Filtering grid with separate start and end date #67974
Other than rounded corner, Exapander behaves abnormally. You may see expander neither display properly nor expand.
March 4, 2015 at 6:09 am in reply to: Filtering grid with separate start and end date Filtering grid with separate start and end date #67970March 4, 2015 at 5:43 am in reply to: Filtering grid with separate start and end date Filtering grid with separate start and end date #67964Thanks Peter, I am able to do it. One more thing wanted to check I don’t find my post which was regarding different behavior of grid on IE and Firefox. It was under general discussions.
Could you please help me to investigate why grid is not looking good on IE as it’s looking on Firefox/Chrome ?
March 3, 2015 at 5:59 am in reply to: Binding click event on jqxToolBar button Binding click event on jqxToolBar button #67920Thanks Dimitar
March 3, 2015 at 5:36 am in reply to: Placing widgets inside expander Placing widgets inside expander #67917Great! Thank you Peter.
March 2, 2015 at 6:34 am in reply to: Cascading dropdown list on jqxToolBar Cascading dropdown list on jqxToolBar #67861I have posted my form code in another thread about adding function in toolbar button. Still my listbox doesn’t come up when clicking icon on toolbar.
March 2, 2015 at 6:32 am in reply to: Cascading dropdown list on jqxToolBar Cascading dropdown list on jqxToolBar #67860Hi Dimitar,
My IE version is 9.0.8112.
February 27, 2015 at 6:58 am in reply to: Binding click event on jqxToolBar button Binding click event on jqxToolBar button #67770Thanks 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> </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>February 26, 2015 at 7:28 am in reply to: Cascading dropdown list on jqxToolBar Cascading dropdown list on jqxToolBar #67711Thank Dimitar but still I see strange behavior,
On firefox when I click the icon on tool bar it drops the list box
[IMG]http://i61.tinypic.com/123sbp1.png[/IMG]
But on IE nothing happens when I click on the icon,
[IMG]http://i61.tinypic.com/2mqnpms.png[/IMG]
Also, Why does the grid styles are so smooth (like rounded corner ) on Firefox but it is not as good on IE ?
February 25, 2015 at 8:47 am in reply to: Cascading dropdown list on jqxToolBar Cascading dropdown list on jqxToolBar #67622Hi Dimitar,
I have added ListBox on jqxToolBar but it’s showing different behavior on IE and Firefox. Firefox behavior what I was expecting and it’s same on Chrome too. Any idea why IE is not displaying properly ? Here are the images of the behavior for your ref,
On Firefox,
[IMG]http://i60.tinypic.com/2vjse90.jpg[/IMG]On IE,
[IMG]http://i59.tinypic.com/2mrtunq.png[/IMG]Following is the code added in the toolbar with “Custom” option,
`case 4:
tool.jqxListBox({ source: listSource, width: 200, height: 200, checkboxes: true });
break`February 25, 2015 at 8:18 am in reply to: Cascading dropdown list on jqxToolBar Cascading dropdown list on jqxToolBar #67619Thanks Dimitar ! Few more things I am looking in jqxToolBar but not getting any help in API documentation. For example,
1- How to add space between buttons on toolbar
2- how to add static text on toolbar like,Country <<Country dropdown list>> City <<City Selection>> <<Button1>> <Button2> <<More options>>
February 25, 2015 at 7:23 am in reply to: Cascading dropdown list on jqxToolBar Cascading dropdown list on jqxToolBar #67614Perfect! Thanks Dimitar.
However I am noticing something very strange with the dropdown list promptText it is showing what I am not using at all. For now I am using “Select…” but it’s showing “Please choose” which I was using yesterday. I tried clearing cache but still it shows the wrong one.Another question I have could I use ListBox on jqxToolBar ? I have tried but it throws an error.
February 12, 2015 at 7:10 am in reply to: Datatable grouping like jqxGrid Datatable grouping like jqxGrid #66976Thank you very much Peter..I have another question thought to ask here instead of creating new thread. In my XML I might have 15 columns but only 10 will be visible when grid loads and rest 5 columns I want to keep under “Show/Hide more columns” where end user has an option to add 5 more columns. Can it be done ?
-
AuthorPosts
