jQuery Grid Plugin - jqGridForum

11/07/2008
07:21

kaare

Member

Members

Forum Posts: 13

Member Since:
11/07/2008

Offline

1

I wonder if it will be straight forward to include autocomplete functionality with jqGrid?

I imagine jQuery('#...').editRow(id,true,doautocommit);

function doautocommit(id){

use_autocommit_plugin

}

Is this the way? Any pitfalls?

11/07/2008
07:43

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

2

I think that this is very interesting. Generally there should be no problem The only think that you will to known is that every input id is created as combination of rowid+"_"+name where the rowid is the edited row and name is the name from colModel of that field.

Please let me known of the result. It will be very interesting to demostrate this in the demo page.

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

11/07/2008
12:16

julizar

Member

Members

Forum Posts: 32

Member Since:
12/06/2008

Offline

3

I`m using on a one row autocompete and ui.datapicker, and there is no

problem.

11/07/2008
13:02

kaare

Member

Members

Forum Posts: 13

Member Since:
11/07/2008

Offline

4

julizar, do you mind sharing your code?

15/07/2008
03:50

julizar

Member

Members

Forum Posts: 32

Member Since:
12/06/2008

Offline

5

I`ll create an example page for exchange of experience soon. 🙂

16/07/2008
15:29

kaare

Member

Members

Forum Posts: 13

Member Since:
11/07/2008

Offline

6

Finally I had a little time to test this.

You're right, it's easy. I put

jQuery('...').editRow(id,true,fieldfunctions);

in onSelecctRow. And in fieldfunctions:

jQuery("#"+id+"_field1","#...").datepicker({dateFormat:"yy-mm-dd"});
jQuery("#"+id+"_field2","#...").autocomplete(...etc etc

This is just great!

18/08/2008
12:19

brad8118

Member

Members

Forum Posts: 20

Member Since:
23/07/2008

Offline

7

I'm trying to create an text element and set a datepicker to it when a row is edited.

$("#list").editRow(rowNum);

                    var calText = document.createElement("text");
                    $(calText).html("<input id='calText' name='calText' type= 'text' style='width: 95px' value='Click To Set'/>");
                    $(calText).datepicker();
                    jQuery("#list").setCell(rowNum, "Promised", calText, { 'text-align': 'center' });

The datepicker isn't being applied to calText.

Any ideas?

19/08/2008
01:23

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

8

I think that the right syntax is:

$("#calText").datepicker();

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

19/08/2008
07:15

brad8118

Member

Members

Forum Posts: 20

Member Since:
23/07/2008

Offline

9

Tried - No luck

🙁

19/08/2008
11:49

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

10

Also try first to implement your script without using setCell -i.e.

apply this to other element in the page and see the result - IMHO the way

you do this is not correct.

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

20/08/2008
09:21

brad8118

Member

Members

Forum Posts: 20

Member Since:
23/07/2008

Offline

11

I created a text box in the html

I attached the datepicker to it and was able to choose a date from the popup calendar. (not in jqgrid).

I then used setCell and set $('#examplePicker') as the data ie

jQuery("#list").setCell(rowNum, "Promised", $('#examplePicker'), { 'text-align': 'center' });

This moves the element examplePicker from the page into the jqgrid. Good- I click on the text box and the calendar appears. I click a date and the date is saved in the text box. This means there isn't a layer problem.

I cancel/save the row then edit the same row again and now there is no text box to click. I think this happens because the examplePicker is added to the jqgrid. Then it tries to add it again but its gone...

I have also tried to create the element as a div, text, and textarea.

Text and textarea did not work.

Using the div (ie calText = document.createElement("div");) added the calender to be displayed inline. The calendar's months and days can be switched and selected.

20/08/2008
10:11

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

12

I do not think so. You first applay editRow and then setCell - these method are not compatible.

To attach datepicker in you case

...

jQuery('#rowed6').editRow(id,true,pickdates);

function pickdates(id){ jQuery("#"+id+"_sdate","#rowed6").datepicker({dateFormat:"yy-mm-dd"}); }

Also see examples - datepicker integration in demo page

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

20/08/2008
11:41

brad8118

Member

Members

Forum Posts: 20

Member Since:
23/07/2008

Offline

13

Awesome.

Thanks. I had tried this but I was also using the setCell function.

Thanks again.