Combogrid + scrollview, ID is not translated to Value

[phunksta]

Hello all,

I have a problem with a Combogrid.
The data for this combogrid is obtained remotely, and the grid object is also using 'view:scrollview' because initially the data can be very large; possibly many 1000's of rows.

When my form loads, the Combogrid is bound to my ID field, in this case 'ModelID'.
This might load with a value such as 123.

The Combogrid is set up with:

Code:

$('#myform input.ModelID').combogrid({
        idField: 'ID', textField: 'Name',
        mode: 'remote',
        loadMsg: 'Querying Database...',
        panelWidth: '380',
        multiSort: true,
        singleSelect: true,
        pageSize: 50,
        view: scrollview,
        remoteSort: true,
        remoteFilter: true

... so when the form loads and the combogrid is initialised, the ID=123 should translate to Name='BlueModel' and the Value should then display in the textbox of the combogrid.

If the ID entry is in the first page of the combogrid data, all is well, the value is displayed.
The problem is that if the ID entry is NOT on the first page (i.e. the entry will not be in the combogrid's data property until the user scrolls down) then the Value is not displayed, the ID is shown instead. If the user does scroll down until the page of the entry, it is then translated.

When my form loads, I actually have another field 'Model' which already contains the translated value 'BlueModel', but I can't find a property or method for combogrid that will allow me to set the initial text value rather than attempt a lookup against the data property.

Can anyone help with either a way to ensure that the current ID value is looked up, or some way to initialise the combogrid textbox? Is trying to combine combogrid and scrollview a bad idea? (I also have datagrid-filter on this datagrid too, but that's another story!)

Many Thanks.

PS I really like EasyUI, it seems to do everything - that is until I make things too complicated!

[stworthy]

When fetch a page into scrollview, the 'onFetch' event fires. You can use it to add additional rows or change these rows before displaying on the datagrid.

Code:

$('#cg').combogrid({
	view:scrollview,
	onFetch:function(page,rows){
		rows.push({
			id:123,
			name:'BlueModel'
		});
	}
})

[phunksta]

Hi stworthy,

I tried this suggestion today, and found something strange?
I just popped this into my combogrid:

Code:

        onFetch: function (page,rows) {
            console.log('onFetch');
        }

What I got was an infinite number of logs.

I also tried onLoadSuccess, and got the same.

Very strange, is there something going wrong here, or by logging the event in this way have I broken it somehow?

[stworthy]

Be sure you are using the newest 'datagrid-scrollview.js' file. If not please download it from http://www.jeasyui.com/extension/datagridview.php

[phunksta]

Hi Again,

I've picked up a fresh download of the file. I can see it is new because you have fixed another issue I posted about! Brilliant thanks!

But, unfortunately, I still get infinite triggers of the onFetch event

EDIT: I was just trying the chrome monitorEvent() facility, and it is a 'scroll' event that is constantly being triggered. Strange. 

[stworthy]

Please run this example http://jsfiddle.net/fc2wd03x/. It works fine.

[phunksta]

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.

[phunksta]

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?

[stworthy]

Here is another solution without using 'onFetch' event. For more information please refer to http://jsfiddle.net/fc2wd03x/2/

[phunksta]

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

[Opan Mustopah]

hi sir, this is work for you? because i have a similiar issue with you.

i have a large data that i want to load by combogrid.
until now i just limit query process to improve loading perfomance.

thanks

[phunksta]

Hi,

No, unfortunately none of the solutions really worked for me.
My problem was using pagination on combogrid with large data resulted in the form value not being present in the grid data until that page was scrolled to.

I could not overcome this.

In the end, I changed all combogrids so that they displayed ID only, then made them hide their input field. I manually inserted another field next to the combogrid to act as the 'text' field for the data. I then programatically dealt with populating this as I required.

This was not an optimal solution, and I hope to revisit it soon.