Guriddo » Topic: Using Chosen plugin with select elements in add/edit form

Using Chosen plugin with select elements in add/edit form

Guriddo
jqgrid add/edit form chosen
Using Chosen plugin with select elements in add/edit form

Tagged: jqgrid add/edit form chosen

This topic has 7 replies, 4 voices, and was last updated 7 years, 3 months ago by igor83.

Creator

Topic
June 14, 2016 at 4:37 pm #125275

Orlov Den
Participant

Hi.

I have jQGrid. Some of columns are edittype:”select”.
<pre class=”default prettyprint prettyprinted”>{label:"Student",name:"student_id",index:"student_id",editable:true,edittype:"select",editoptions:{dataUrl:"../ajax/selects/select_student.php"}} In my project the number of elements in selects become huge and this lead to usability drawbacks. I want to make selects in add/edit form more intelligent. For this purpose i try to use "chosen" plugin. So, i try this: 
<pre class=”default prettyprint prettyprinted”>beforeShowForm: function() { $("#student_id").chosen(); } 
In this example “student_id” is the id of select element on add/edit form.

But no effect. Select stay as usual select. Chosen functionality is not added.

Than I try this:

editoptions:{

dataUrl:”…”,

selectFilled:function(){
$(“#student_id”).chosen();

}

}

But still no liuck.

How can I have “chosen” to work on add/edit form for select elements?
<pre class=”default prettyprint prettyprinted”> 
<pre class=”default prettyprint prettyprinted”> 
Creator

Topic

Viewing 7 replies - 1 through 7 (of 7 total)

Author

Replies

June 15, 2016 at 11:25 am #125280

guriddo.support

Participant

Hello,

The code you posted is not good seen. When try to post code switch to text mode (not Visual as show in upper right corner of editor), mark the text and select code button at toolbar.

You can try to use dataInit event to bind this plugin. By example you can try

{label : "Student",
name: "student_id",
edittype: "select"
editoptions: { 
   dataUrl: "some.php"
   dataInit : function(element, options) {
       $(element).chosen();
   } 
}
}

{label : "Student",

name: "student_id",

edittype: "select"

editoptions: {

dataUrl: "some.php"

dataInit : function(element, options) {

$(element).chosen();

}

Maybe $(element).chosen() should be set in setTimeout in order to have time to load the data from server.

Kind Regards,
Will

Guriddo Support Team

July 10, 2017 at 5:17 am #126256

igor83

Participant

Hello.
Also there was a question on this plugin.
I do so

{ label: 'Student', name: 'student_name', width: '30%', filtering: true, viewable: false, stype: 'select',
   searchoptions: {
      value:':;1:student_1;2:student_2;3:student_3',
      dataInit : function (element, options) {
         $(element).chosen();
      }
   }
},