Hi, I would like to know if this is possible, and maybe how to go about it?

I am using Datagrid Filter Row extension. My users want the Menu for each filter e.g. 'equal','beginwith' etc.
They would also like the 'filterDelay' style filtering where anything entered in the filter input can start filtering.

I can see that by using 'text' type with 'op' unspecified and 'filterDelay' set, that the defaultFilterOperator is applied automatically.

Is it possible to doFilter if, say the user enters into the box and then presses a certain key?
If no filter type is set I'd like to apply defaultFilterOperator, or if they previously chose another option then to stick with that and go ahead to 'doFilter'?

I have managed to get an individual filter input to do this by changing its options, but I can't work out how to apply this to all of my filters whenever they are built.

Any help gladly received!

Hi,

I have an issue with a menu button object inside a combogrid.
The menubuttons are generated from the datagrid filterrow extension, so have the filter operations listed.

When the user selects a filter, the menu closes but so does the combogrid. The user then has to re-open the combogrid to see the data.

I think I have tracked this down to this bit of code:

Code:

	$(function() {
		$(document).unbind(".combo").bind("mousedown.combo mousewheel.combo", function(e) {
			var p = $(e.target).closest("span.combo,div.combo-p");
			if (p.length) {
				_8d4(p);
				return;
			}
			$("body>div.combo-p>div.combo-panel:visible").panel("close");
		});
	});

The .panel("close") line seems to be saying 'close any visible combo panel in the whole body'.
This seems a bit broad, when it is just an interaction with a single menu/combo!

Is there any way to keep the combogrid open when a menu button inside is used?

Thanks!

OK a slight hack on this seemed to do the trick. It feels hacky though.

Code:

        url: null,
        firstLoad: true,
        onBeforeLoad: function (param) {
            var opts = $dg.datagrid('options');
            if (typeof opts.firstLoad === 'undefined') {
                return true;
            }
            else {
                delete opts.firstLoad;
                return false;
            }
        },

Hi Jarry, any many thanks for this suggestion.

I have tried this and unfortunately I still seem to get strange behaviour.

I get 3 loads, 1 with no filterRules, then 2 with the filterRules I initialised in the first step.

To complicate matters, I don't have a 'url' based loader, but a custom 'loader' function.

So I am doing:

Code:

$dg.datagrid({
 url: null,
 view: scrollview,
 filterRules: [{ field: 'ValidationStatusID', op: 'equal', value: '0' }],
etc...
});

$dg.datagrid('enableFilter', filts);

$dg.datagrid({
        loader: function (param, success, error) {
(custom loader here)
        }
}

When I declare the loader, then the 3 loads begin. Without this I get an unloaded datagrid with the filter row shown, so I think the first and second parts are OK i.e. I can initialize the datagrid without it trying to load and then enableFilters.

EDIT: also noticed that when trying the 'late' loader above, that enableFilters throws an error 'Cannot read property options of undefined' in the context of the first 2 filters which are comboboxes. See attached
Please ignore - in the above I'm redefining the whole dg instead of extending. My stupid fault.

Regarding this bug report thread

I am also seeing this behaviour. I have tried all sorts of combinations of invoking datagrid load, enableFilter and filterRules but I always get several remote calls instead of 1.

In my case I have a datagrid, with scrollview and datagrid-filter extensions.

The datagrid starts as an empty element in html
I initialise the datagrid in javascript, including the filterRules option I want to be active on first fetch.
The first fetch omits the filterRule - when this is complete (about 6 secs) the datagrid shows this data
2 more fetches then occur, with the filterRule - when these complete nothing seems to happen (they come back before the first fetch < 1 sec)

Nothing I do seems to be able to affect this.

I just fetched the latest datagrid-filter extension file but I still get the issue.

Where am I going wrong? 

Interesting... I'll give that a go!
Thanks again stworthy!

Ok, stworthy hope you might be able to comment further here.

I have continued through and now have a 'onFetch' based solution working.

I ended up with code a bit like this:

Code:

 onFetch: function (page, rows) {
                    var val = $ma.combogrid("getValue");
                    var opts = $ma.combogrid("options");
                    var idf = opts.idField;

                    var result = $.grep(rows, function(e){ return e[idf] == val; });

                    if (!result.length) {
                        jQuery.ajax({
                            dataType: 'json',
                            async: false,
                            url: '/odata/Myentity('+val+')?$select=ID,Name',   //should really do this $sleect stuff on the main fetch too
                            success: function (data) {
                                rows.unshift(data); //unshift or push - still jumps about
                            },
                            error: function () {
                                showError(arguments);
                            }
                        });
                    }
                }

And, it works... sort of!
The value is now translated correctly

Unfortunately, when the combogrid is open, and the user scrolls through the records looking for an alternative selection, the scroll position repeatedly jumps BACK to the selected record. So for instance:

• User Opens the combogrid
• Scrolls down to row 50
• A new row (74 in this example) appears after 50
• Next page is accessed, rows 51-100 are added so now we go 1..49,50,74,51...100
• grid JUMPS to 74 (selected row)
• user click out to many pages forward, say page 8
• grid JUMPS to 74, wherever that currently is

etc.
So unfortunately pushing the result into the grid seemingly isn't going to work for this

Do you have any other suggestions?

Solved - finally. I eventually realised my project was running Easyui 1.4.0 instead of 1.4.1

Somehow this was causing an infinite number of scroll events to be captured by scrollview.

Hitting UPDATE in nuget sorted this out.

Hi,

This might well be a stupid question, but is it possible to load a datagrid with a large dataset, and then use scrollview/pagination to render a page-at-a-time locally on the browser?

For all my experimentation I don't seem to be able to do this, the page parameters always seem to be sent to the url

Thanks!

If the value does not exist, the value itself will display on the combo component.

If I can also then reset the actual ID field to empty/null I think this would work OK?

EDIT: or... when I submit the form I could modify the posted value, but is there an easy way to trap/identify a combo in the state as above?
EDIT2: During form submit I was able to put in direct checks on the form data, but it's not a very elegant solution

Code:

 if (frmdata.DealerID === frmdata.DealerCode) frmdata.DealerID = "";

Hi,

I got stuck with this too a while back. You also need a 'formatter' function for the datagrid column, this should go and pick up the text value that you want to display from the record.
The issue is 'where does that come from' if there is not a column in the data to hold it?

I ended up with 2 approaches to this that both worked: onSelect in the editor for the column you can extend the data row with a new hidden field with the text value for the combo. The 'formatter' function can then pick this up and display it instead.

In the end I was quite lucky as I'm using odata, and the related columns can be obtained by using $extend. This might not mean much to you but in short, as well as the ID column I also retrieved the Text value column from the database. As above when changed I got the combo to change the value in this column.

Have a search about the forum I'm sure you'll find the answer to this.

 

I end up trying to guess some of the properties and methods. I have looked at the documentation, and I am either blind or this info was not there.

Hi, I admit it takes a while, but the documentation does have this stuff. After staring at it over a few weeks it started to make a lot more sense.
I have also found it useful to actually go into the easyui code in some places, especially to see when event handlers are called.

I too started with very little javascript and jQuery but I'm getting it slowly! I still need stworthy to point out the best way quite often though!

That looks great, I get the idea I think - after the form loads revisit the combos that did not get populated.

Can I clarify; If I use the setValue function on a combo(box|grid) but set for the Text value rather than the Id value, will the component understand this Ok?

EDIT: having tried this, the combogrid DOES show the text value after 'setValue', but also stores this value against its ID field. If this is submitted then this text value is submitted too causing a database failure.

I also tried:

Code:

    var $cb = $('#DealerID').combo();
    var $tb = $cb.combo('textbox');
    $tb.textbox('setValue',data[textFieldName]);

This shows the value, but it looks like it is being treated as a 'prompt' value rather than a real one.

So, I still can't see how to set the text value on a combo as if the user had entered it

[wanted]

Hi,

When loading a form containing any combo or extended combo like a combogrid, is it possible to set initial TEXT, not initial value?

In my use case, the database might return something like:

Code:

{"DealerID":"","DealerCode":"ABC?E"}

I would like to have a combobox that can be bound to the DealerID field on the form, but also refer to DealerCode.
When the DealerID is null on the record, but DealerCode is populated, I'd like the combo to treat the value returned by the DB in that field as if it were user input. This should then to go on to search the data etc. just like if the user had input it.

I have tried all sorts, but I can't find a way to make this behaviour happen!

I am imagining something like:

Code:

<input name="DealerID" class="easyui-combobox" data-options="textFieldName='DealerCode'" />

As a wanted side-effect, whatever is in the text field of the combo should post to the form field of that name.

Can anyone help with how I might achieve this?

Hmm ok interesting...

So bulk process on the way in, and I guess on the way out too.
or I guess I will have to look to do a custom datebox that retains server/local format.

Thanks for your help!