[DaveyWaveyParticipant]

OK, after some more fiddling, it’s now working. The custom rule must also return true when the validation is good…

rule: function(input){ if ($(input).val() == '') { return false; } else { return true; } }}

[DaveyWaveyParticipant]

OK, I can confirm that the above code IS WORKING, but there appears to be something wrong with my validation rules.

I am trying to validate a SELECT box to ensure an option is selected. It appears I must use a custom rule for this. My code is:

        var thisForm = $('#project-form');

        thisForm.jqxValidator({
            rules: [
                { input: '#project-title',  message: 'Project Title is required', action: 'keyup, blur', rule: 'required' },
                { input: '#project-client', message: 'Client is required',
                    rule: function(input){ if ($(input).val() == '') return false; }}
            ]
        }).on('validationSuccess', function (event) {
            alert('ready to post');
        });

The above validation rules work in that they generate the validation message when the fields are not populated, but with the ‘#project-client’ rule in place the validator won’t fire the ‘validationSuccess’ event. It works fine if the ‘#project-client’ rule is removed.

Any thoughts?

[DaveyWaveyParticipant]

Thanks for the info nadezhda and the jsfiddle.

I was using that approach as my ‘hack’ to get it to work, but with animation and fade switched on it’s not quite as slick as your demo. I guess I’ll have to disable things until I’ve got all the tabs loaded.

Cheers.

[DaveyWaveyParticipant]

Can’t edit my previous post (again). I found the cellClassName property now which sets the required class name on the column of each table row.

My next question is likely to be: ‘How to insert new rows into a table below a clicked row?’

DW

[DaveyWaveyParticipant]

Thanks for quick response Peter, but I’d taken a look at that example it it’s not what I need.

Having a look through the other examples, it looks like I am looking for a combination of the Data Grouping (javascript-datatable-grouping.htm) and the Master Details (javascript-datatable-nested-tables.htm) examples.

What I want is to initially list ‘parent’ entries, but have an option to expand each entry to show related ‘child’ entries.

The grouping example does the type of grouping I need, but the child entries are already expanded and visible, where I would want them retrieved when the group is expanded – as per the row_details example on datatables.net I linked to.

I also need to have 4 levels of ‘child’ grouping too, each retrieved on a click of it’s parent!

PS. I found the ‘className’ property for the columns[] setting, but that looks like it only sets the class name of the header row. How to set the className of table rows?

Thanks,
DW

[DaveyWaveyParticipant]

Note that the first column doesn’t have a title, so no column ‘dataField’ as such.

[DaveyWaveyParticipant]

Looks like I may have solved it, but any suggestions of better approaches are welcome.

To solve it I introduced a do_goToPage flag variable which has overcome the problem caused by putting the goToPage call in the rendered: callback.

A snippet of the solution…

var do_goToPage = false;

  $("#dataTable").jqxDataTable(
    {
      serverProcessing: true,
      filterable: true,
      filterMode: 'simple',
      pageable: true,
      pageSize: 10,
      pagerMode: 'advanced',
      pagerPosition: 'both',
      pageSizeOptions: ['10','25','50','100','500'],

      source: dataAdapter,
      ready: function () {

        // if a filter existed previously, reapply it now that dataTable is ready
        if (datatable_filter!='') {
          var filtergroup1 = new $.jqx.filter();
          var idx_filter = filtergroup1.createfilter('numericfilter', datatable_filter, 'equal');
          // seems to be a bug in the 'operator' setting, so using 0 for 'or'
          filtergroup1.addfilter(0, idx_filter);

          var filtergroup2 = new $.jqx.filter();
          var str_filter = filtergroup2.createfilter('stringfilter', datatable_filter, 'contains');
          // seems to be a bug in the 'operator' setting, so using 0 for 'or'
          filtergroup2.addfilter(0, str_filter);

          $("#dataTable").jqxDataTable('addfilter', 'IDX', filtergroup1);
          $("#dataTable").jqxDataTable('addfilter', 'NAME', filtergroup2);
          $("#dataTable").jqxDataTable('addfilter', 'ITEMTYPE', filtergroup2);
          $("#dataTable").jqxDataTable('addfilter', 'MANUFACTURER', filtergroup2);
          $("#dataTable").jqxDataTable('applyfilters');

          // also make the 'clear filter' icon visible
          $('.jqx-icon-close').css('display', 'block');

        }

        // flag that we need to return to previous data page
        do_goToPage = true;
      },

      rendered: function () {
        // return to a specific page if relevant
        if (do_goToPage) {
          $("#dataTable").jqxDataTable('goToPage', datatable_pagenum);
          do_goToPage = false;
        }
      },

      columns: [
        { text: 'ID', dataField: 'IDX', width: '5%' },
        { text: 'Title', dataField: 'NAME' },
        { text: 'Type', dataField: 'ITEMTYPE', width: '20%' },
        { text: 'Manufacturer', dataField: 'MANUFACTURER', width: '25%' }
      ]
    }
  );

Why am I doing this?

My dataTable lists items. When an item is clicked, browser goes to a display page with a ‘close’ button. When the close button is clicked I needed to return to the dataTable page but also show the table as it appeared prior to viewing the display page (ie. same page number, same number of rows, same filter applied).

DW

[DaveyWaveyParticipant]

Peter,

I realise I don’t need a button click, but I’m just using it for now to have some control over activation of the filter.

My problem is this…

When filtering is set to ‘simple’ and I manually type something into the Search box, the following data is submitted:

Array
(
    [IDXoperator] => or
    [filtervalue0] => foobar
    [filtercondition0] => EQUAL
    [filteroperator0] => 0
    [filterdatafield0] => IDX
    [NAMEoperator] => or
    [filtervalue1] => foobar
    [filtercondition1] => CONTAINS
    [filteroperator1] => 0
    [filterdatafield1] => NAME
    [ITEMTYPEoperator] => or
    [filtervalue2] => foobar
    [filtercondition2] => CONTAINS
    [filteroperator2] => 0
    [filterdatafield2] => ITEMTYPE
    [MANUFACTURERoperator] => or
    [filtervalue3] => foobar
    [filtercondition3] => CONTAINS
    [filteroperator3] => 0
    [filterdatafield3] => MANUFACTURER
    [filterslength] => 4
    [pagenum] => 0
    [pagesize] => 10
    [_] => 1399627770879
)

So, ‘something’ builds filter conditions for all fields automatically when ‘simple’ filtering is enabled.

My original question was whether it is possible to (create a button) to put a string into the ‘simple’ search box and cause the auto generation of filters for all bound fields?

I can’t see an ‘easy’ way to do what I require, so I have the following code that manually builds a filter for each field in the table:

  $("#dataTable").jqxDataTable(
    {
      // showToolbar: true,
      theme: 'sndb',
      width: '90%',
      serverProcessing: true,
      altrows: true,
      sortable: true,
      columnsResize: true,
      filterable: true,
      filterMode: 'simple',
      pageable: true,
      pageSize: datatable_pagesize,
      pagerMode: 'advanced',
      pagerPosition: 'both',
      pageSizeOptions: ['10','25','50','100','500'],

      source: dataAdapter,
      ready: function () {
        $("#dataTable").jqxDataTable('goToPage', datatable_pagenum);
      },
      columns: [
        { text: 'ID', dataField: 'IDX', width: '5%' },
        { text: 'Title', dataField: 'NAME' },
        { text: 'Type', dataField: 'ITEMTYPE', width: '20%' },
        { text: 'Manufacturer', dataField: 'MANUFACTURER', width: '25%' }
      ]
    }
  );

  // create button to apply filter to dataTable
  $('#jqxbutton').jqxButton({width:200, height:30});
  $('#jqxbutton').click(function () {
    var filtergroup1 = new $.jqx.filter();
    var idx_filter = filtergroup1.createfilter('numericfilter', 'barfoo', 'equal');
    filtergroup1.addfilter(0, idx_filter);

    var filtergroup2 = new $.jqx.filter();
    var str_filter = filtergroup2.createfilter('stringfilter', 'barfoo', 'contains');
    filtergroup2.addfilter(1, str_filter);
    
    $("#dataTable").jqxDataTable('addfilter', 'IDX', filtergroup1);
    $("#dataTable").jqxDataTable('addfilter', 'NAME', filtergroup2);
    $("#dataTable").jqxDataTable('addfilter', 'ITEMTYPE', filtergroup2);
    $("#dataTable").jqxDataTable('addfilter', 'MANUFACTURER', filtergroup2);
    $("#dataTable").jqxDataTable('applyfilters');
  });

which submits the following data:

Array
(
    [IDXoperator] => and
    [filtervalue0] => barfoo
    [filtercondition0] => EQUAL
    [filteroperator0] => 0
    [filterdatafield0] => IDX
    [NAMEoperator] => and
    [filtervalue1] => barfoo
    [filtercondition1] => CONTAINS
    [filteroperator1] => 1
    [filterdatafield1] => NAME
    [ITEMTYPEoperator] => and
    [filtervalue2] => barfoo
    [filtercondition2] => CONTAINS
    [filteroperator2] => 1
    [filterdatafield2] => ITEMTYPE
    [MANUFACTURERoperator] => and
    [filtervalue3] => barfoo
    [filtercondition3] => CONTAINS
    [filteroperator3] => 1
    [filterdatafield3] => MANUFACTURER
    [filterslength] => 4
    [pagenum] => 0
    [pagesize] => 10
    [_] => 1399628374006
)

There’s two ‘problems’ with the code I currently have:

1. I am having to filter each field individually (which is going to be a pain for wider tabled of say 20 columns), whereas the ‘simple’ searchbox auto-applies the filter to all existing columns. Is there a way to fill the ‘simple’ searchbox from code and activate the search event?
2. The ‘operators’ are different in the two approaches…maybe a bug?…
   • In the ‘simple’ data, the [FIELD]operators have values of OR with filteroperatorX fields having a value of 0.
   • In my manual filter, the [FIELD]operators have values of AND with filteroperatorX fields having a value of 0 or 1 as per my code setting.

You can see from my code, that regardless of what value (0 or 1) is fed to filtergroupX.addfilter() as the first parameter, it has no effect on the [FIELD]operator value which is always and.

[DaveyWaveyParticipant]

Thanks Peter,

At least knowing it can’t be done will stop me hitting my head against it.

I’ve worked around it now so both the page and the pagesize remain after returning from the display page.

DW

[DaveyWaveyParticipant]

Peter,

Thanks for the quick reply. That is such a shame.

Are the API docs ahead-of-the-game, because they say:

Set the pageSize property.

$('#dataTable').jqxDataTable({ pageSize: 20 });

My code is currently doing this (with the desired pageSize being passed into it from the dataAdpater) but all it does is change the value in the ‘Show Rows’ dropdown – it won’t fire a redraw of the table.

I’ve attempted $("#dataTable").jqxDataTable('refresh'); but that doesn’t appear to do anything.

Is there some jQuery trick that could be used to click the ‘Show rows’ dropdown maybe?

DW

[Author]

Posts