Print Page - Combogrid + scrollview, ID is not translated to Value

Title: Combogrid + scrollview, ID is not translated to Value
Post by: phunksta on September 22, 2014, 08:12:40 AM

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!

Title: Re: Combogrid + scrollview, ID is not translated to Value
Post by: stworthy on September 22, 2014, 06:49:21 PM

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'
		});
	}
})

Title: Re: Combogrid + scrollview, ID is not translated to Value
Post by: phunksta on October 15, 2014, 02:50:54 AM

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?

Title: Re: Combogrid + scrollview, ID is not translated to Value
Post by: stworthy on October 15, 2014, 03:50:25 AM

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

Title: Re: Combogrid + scrollview, ID is not translated to Value
Post by: phunksta on October 21, 2014, 05:50:27 AM

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. ???

Title: Re: Combogrid + scrollview, ID is not translated to Value
Post by: stworthy on October 21, 2014, 07:44:22 AM

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

Title: Re: Combogrid + scrollview, ID is not translated to Value
Post by: phunksta on December 03, 2014, 04:07:30 AM

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.

Title: Re: Combogrid + scrollview, ID is not translated to Value
Post by: phunksta on December 03, 2014, 10:36:13 AM

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?

Title: Re: Combogrid + scrollview, ID is not translated to Value
Post by: stworthy on December 04, 2014, 12:13:57 AM

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

Title: Re: Combogrid + scrollview, ID is not translated to Value
Post by: phunksta on December 04, 2014, 06:10:53 AM

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

Title: Re: Combogrid + scrollview, ID is not translated to Value
Post by: Opan Mustopah on March 14, 2015, 09:08:11 AM

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

Title: Re: Combogrid + scrollview, ID is not translated to Value
Post by: phunksta on March 19, 2015, 06:54:49 AM

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.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: phunksta on September 22, 2014, 08:12:40 AM