Data Picker

Data picker

the idea is the same as Date Picker but the different is that its generating data from database rather than date.

to get this Data Picker working in the form you’ll need CJuiDialog and CGridView.

maybe the picture below will helps you to understand the idea a little bit.

First of all you’ll need to use CJuiDialog in your form and see how it works

and then added CGridView in your form.

if you don’t know how to use CJuiDialog please read the yii document here

and if you don’t know how to use CGridView pleas read the yii document here

i’m going to start from the view and that is from _form.php.

open _form.php and modified an input field a little bit.

I’m going to edit a field and that is “id_pendaftar” that only accept integer value. this field has relationship with id from pendaftar table that contains id and nama_pemohon fields. to make it simple its just like id_user with table user that contain id and username fields.

here how it goes :

the "id_pendaftar" field will be hidden from the user eyes. and change with a read only "nama_pemohon" field. next to the read only field will be CJuiDialog Button that will pop the dialog and showing CGridView with data from "pendaftar" table with all its best part (paging, sorting, searching) but its minus advance search.

in other case you can just create a dropdownlist to get data from other tables. but since my client asked that how can they search based on other field rather than single field so i made this Data Picker.




<!-- This is the field from _form.php code that going to change -->

<div class="row">

   <?php echo $form->labelEx($model,'id_pendaftar'); ?>

   <?php echo $form->textField($model, 'id_pendaftar', array('size'=>60, 'maxlength'=>255)); ?>

   <?php echo $form->error($model,'id_pendaftar'); ?>

</div>



and after few modification with CJuiDialog and CGridView here is the result.




<div class="row">

<!-- this is a Default Generated label -->

		<?php echo $form->labelEx($model,'id_pendaftar'); ?>


<!-- Notice that i made the ID field Hidden -->

		<?php echo $form->hiddenField($model,'id_pendaftar'); ?>


<!-- And user only need to see what they understand in this case is a Name from ID -->

<input type="text" name="nama_pendaftar" id="nama_pendaftar" readonly value="<?php echo Pendaftaran::model()->findByPk($model->id_pendaftar)->nama_pemohon ?>">


<!-- This is Delete Button if the user choose to empty the ID and the Name Field -->

<?php echo CHtml::Button('x', array('name' => 'del_pendaftar', 'id' => 'del_pendaftar', 'onclick' => '$("#nama_pendaftar").val("");$("#Izin_id_pendaftar").val("")')) ?>


<!-- This is CJUIDIALOG -->

<?php 

  $this->beginWidget('zii.widgets.jui.CJuiDialog', 

       array(	'id'=>'pendaftar_dialog',

		// additional javascript options for the dialog plugin

		'options'=>array(

				'title'=>'List Pendaftar',

				'width'=>'auto',

				'autoOpen'=>false,

				),

			));

/* Youll put CGridView Here */


$this->widget('zii.widgets.grid.CGridView', 

   array( 'id'=>'pendaftaran-grid',

	  'dataProvider'=>$pendaftaran_model->search(),

	  'filter'=>$pendaftaran_model,

	  'columns'=>array(

			'no_daftar',

			array(

	  		  'header'=>'Tanggal Pendaftaran',

			  'name'=>'tgl_daftar',

			),

			'nama_pemohon',

			'alamat_pemohon',

			'nama_perusahaan',

			array(

			  'header'=>'',

			  'type'=>'raw',

/* Here is The Button that will send the Data to The MAIN FORM */

			  'value'=>'CHtml::Button("+", 

                                              array("name" => "send_pendaftar", 

                                                     "id" => "send_pendaftar", 

                                                     "onClick" => "$(\"#pendaftar_dialog\").dialog(\"close\"); $(\"#nama_pendaftar\").val(\"$data->nama_pemohon\"); $(\"#Izin_id_pendaftar\").val(\"$data->id\");"))',

						   ),

			   ),

					));


$this->endWidget('zii.widgets.jui.CJuiDialog');

<!-- this is CJuiDialog Button that will pop up the Dialog -->

echo CHtml::Button('Get Pendaftar', 

                      array('onclick'=>'$("#pendaftar_dialog").dialog("open"); return false;',

		   ))


<!-- this is a Default Generated Error Message -->

<?php echo $form->error($model,'id_pendaftar'); ?>

</div>



after view done. then You’ll need to modified the method in the Controller that control the form which is actionCreate and actionUpdate




/**

* Creates a new model.

* If creation is successful, the browser will be redirected to the 'view' page.

*/

public function actionCreate()

	{

            /* Data That will be loaded into CGridView */

            /* actually this was just a simple COPY PASTE from actionAdmin controller */

            /* DONT FORGET TO copy paste this into actionUpdate controller */

               $pendaftaran_model=new Pendaftaran('search');

		$pendaftaran_model->unsetAttributes();  // clear any default values

			if(isset($_GET['Pendaftaran']))

			$pendaftaran_model->attributes=$_GET['Pendaftaran']; 

           

           /* this Code is Default Code to Create Data you don't have to change this */

		$model=new Izin;

		

		

		if(isset($_POST['Izin']))

		{

			$model->attributes=$_POST['Izin'];

			if($model->save())

				$this->redirect(array('view','id'=>$model->id));

				

		}


		$this->render('create',array(

			'model'=>$model,

              /* DONT FORGET TO RENDER THE DATA PROVIDER INTO VARIABLE THAT WILL BE LOADED INTO CGRIDVIEW */

			'pendaftaran_model'=>$pendaftaran_model,

		

		));

	}



then you’ll have to Modified a little bit in the create.php and update.php.

create.php and update.php is located at View folder





<?php 

/* in the render partial add the variable that contains the data */

     echo $this->renderPartial('_form',

                         array('model'=>$model,

                              /* DONT FORGET TO DO THIS OR NO DATA PROVIDER WILL BE LOADED */

                              'pendaftaran_model'=>$pendaftaran_model

                               )); 

?>



Done now you’ll have a Data Picker.

I’m sorry for the messy code and my bad English.

thanks

I LIKE IT! This is exactly the sort of solution I’m looking for. After a few modifications, I’ll have this using a Google map as the data source returning lat/lon.

Thanks!

nice ! i like it , thanks for sharing your idea :D

I tried for my case, but CJuiDialog with CGridView show in the view of the form. And when I click the button nothing happen.

It’s appreciated if anyone can post a simple working demo to learn and try.

Best regards,

mp

mauphung,

here example for data picker




<div class="row">

		<?php echo $form->labelEx($model,'absscheduleid'); ?>

    <?php echo $form->hiddenField($model,'absscheduleid'); ?>

	  <input type="text" name="sched_name" id="sched_name" title="Enter Schedule name" readonly value="<?php echo Absschedule::model()->findByPk($model->absscheduleid)->absschedulename ?>">

    <?php

      $this->beginWidget('zii.widgets.jui.CJuiDialog',

       array(   'id'=>'absschedule_dialog',

                // additional javascript options for the dialog plugin

                'options'=>array(

                                'title'=>Yii::t('app','Absence Schedules'),

                                'width'=>'auto',

                                'autoOpen'=>false,

                                'modal'=>true,

                                ),

                        ));


    $this->widget('zii.widgets.grid.CGridView', array(

      'id'=>'absschedule-grid',

      'dataProvider'=>$absschedule->Searchwstatus(),

      'filter'=>$absschedule,

      'template'=>'{summary}{pager}<br>{items}{pager}{summary}',

      'columns'=>array(

        array(

          'header'=>'',

          'type'=>'raw',

        /* Here is The Button that will send the Data to The MAIN FORM */

          'value'=>'CHtml::Button("+",

          array("name" => "send_absschedule",

          "id" => "send_absschedule",

          "onClick" => "$(\"#absschedule_dialog\").dialog(\"close\"); $(\"#sched_name\").val(\"$data->absschedulename\"); $(\"#Absrule_absscheduleid\").val(\"$data->absscheduleid\");

		  "))',

          ),

        'absscheduleid',

        'absschedulename',

        'absin',

        'absout',

        array('name'=>'absstatusid', 'header'=>'Status','value'=>'$data->absstatus->shortstat'),

        array(

          'class'=>'CCheckBoxColumn',

          'name'=>'recordstatus',

          'selectableRows'=>'0',

          'header'=>'Record Status',

          'checked'=>'$data->recordstatus'

        ),

        ),

    ));


    $this->endWidget('zii.widgets.jui.CJuiDialog');

    echo CHtml::Button('...',

                          array('onclick'=>'$("#absschedule_dialog").dialog("open"); return false;',

                       ))?>

 		<?php echo $form->error($model,'absscheduleid'); ?>

	</div>



Hi siskanlandre,

I adapted your example into my case and it’s worked perfectly.

Just for your info, it’s missing $this->endWidget(‘zii.widgets.jui.CJuiDialog’); in this example.

Thank you very much for your help.

Best regards,

mauphung

NB.: Can you send me your email to mauphung.nguyen@gmail.com?

Nice,

I will also use this !

Thumbs up works fine

Hi,

I realize that if I cannot populate all the records of dataProvider model ($pendaftaran_model).

I just want to display CGridView with empty dataProvider model after that entering the search value in the search text field of CGridView to search for a specific record with a specified search value.

$this->widget(‘zii.widgets.grid.CGridView’,

array( ‘id’=>‘pendaftaran-grid’,

      'dataProvider'=&gt;&#036;pendaftaran_model-&gt;search(),

Please tell me if it’s possible and how?

Best regards,

mauphung

Hi mauphung, I had send you an email (from director_pda@yahoo.com). please check it. thank you

cool post, I can use this for my current project at one of KPPT (Kantor Pelayanan Perizinan Terpadu) in West Java. It seems you’re using this for similar project right?

Thanks,

Hello,

I follow your example, I can pick the data but when I check the database , Region_id is blank(this data comes from Data Picker). Can you tell me why?

Here is my code

view

<code>

<div class="row">

           &lt;?php 


           


          echo &#036;form-&gt;hiddenField(&#036;model,'Region_id'); ?&gt; 


		&lt;input type=&quot;text&quot; name=&quot;region&quot; id=&quot;region&quot; readonly value=&quot;&lt;?php echo Region::model()-&gt;findByPk(&#036;model-&gt;Region_id)-&gt;regionName ?&gt;&quot;&gt; 


        &lt;?php  


           &#036;this-&gt;beginWidget('zii.widgets.jui.CJuiDialog',  


            array(   'id'=&gt;'region_dialog', 


            // additional javascript options for the dialog plugin 


            'options'=&gt;array( 


                            'title'=&gt;'Region', 


                            'width'=&gt;'450px',


							'height'=&gt;'auto',


							'resizable' =&gt;false,


                            'autoOpen'=&gt;false, 


                            ), 


                    )); 








                  &#036;this-&gt;widget('zii.widgets.grid.CGridView',  


                 array( 'id'=&gt;'region-grid', 


                 'dataProvider'=&gt;&#036;pendaftaran_model-&gt;search(), 


                 


                   'columns'=&gt;array( 


                    'id', 


                    'region', 


                     


                    array( 


                      'header'=&gt;'', 


                      'type'=&gt;'raw', 





                      'value'=&gt;'CHtml::Button(&quot;+&quot;,  


                                          array(&quot;name&quot; =&gt; &quot;send_pendaftar&quot;,  


                                                 &quot;id&quot; =&gt; &quot;send_pendaftar&quot;,  


                                                 &quot;onClick&quot; =&gt; &quot;&#036;(&#092;&quot;#region_dialog&#092;&quot;).dialog(&#092;&quot;close&#092;&quot;); &#036;(&#092;&quot;#region&#092;&quot;).val(&#092;&quot;&#036;data-&gt;region&#092;&quot;); &#036;(&#092;&quot;#Izin_Region_id&#092;&quot;).val(&#092;&quot;&#036;data-&gt;id&#092;&quot;);&quot;))', 


                                               ), 


                       ), 


                                    )); 





					&#036;this-&gt;endWidget('zii.widgets.jui.CJuiDialog'); 





					echo CHtml::Button('Get Pendaftar',  


                  array('onclick'=&gt;'&#036;(&quot;#region_dialog&quot;).dialog(&quot;open&quot;); return false;', 


               )) 





			?&gt;


				&lt;?php echo &#036;form-&gt;error(&#036;model,'Region_id'); ?&gt; 


			&lt;/div&gt;

</code>

and the Controller is

<code>

public function actionCreate()

    { 


        /* Data That will be loaded into CGridView */ 


        /* actually this was just a simple COPY PASTE from actionAdmin controller */ 


        /* DONT FORGET TO copy paste this into actionUpdate controller */ 


           &#036;pendaftaran_model=new Region('search'); 


            &#036;pendaftaran_model-&gt;unsetAttributes();  // clear any default values 


                    if(isset(&#036;_GET['Region'])) 


                    &#036;pendaftaran_model-&gt;attributes=&#036;_GET['Region'];  


        


       /* this Code is Default Code to Create Data you don't have to change this */ 


            &#036;model=new Lab; 


             


             


            if(isset(&#036;_POST['Lab'])) 


            { 


                    &#036;model-&gt;attributes=&#036;_POST['Lab']; 


                    if(&#036;model-&gt;save()) 


                            &#036;this-&gt;redirect(array('view','id'=&gt;&#036;model-&gt;id)); 


                             


            } 





            &#036;this-&gt;render('create',array( 


                    'model'=&gt;&#036;model, 


          /* DONT FORGET TO RENDER THE DATA PROVIDER INTO VARIABLE THAT WILL BE LOADED INTO CGRIDVIEW */ 


                    'pendaftaran_model'=&gt;&#036;pendaftaran_model, 


             


            )); 


    }

</code>

hi ho!

I have a trouble, in teh Dialog with the Gridview, when i click in the pagination or in the search fields, the dialog becomes blank… empty… any help?

LOL, the $model was wrong :D ty!

@riza_hurhadi… can you share the tables for this apps?

Sorry for the late answer. i just forgot to check this thread and it almost a year. I’ve been busy with python.




/* your supposed to use your own form.  "Izin" is my form name */

/* thats why region_id always blank. the jquery cant find Izin_Region_id*/

 $(\"#Izin_Region_id\").val(\"$data->id\");"))


/* change the Izin_ with your form name */

 $(\"#YourFormName_Region_id\").val(\"$data->id\");"))



what tables ?? sorry but no.

actually its all there. notice the ‘columns’ ?




$this->widget('zii.widgets.grid.CGridView', 

   array( 'id'=>'pendaftaran-grid',

          'dataProvider'=>$pendaftaran_model->search(),

          'filter'=>$pendaftaran_model,

          'columns'=>array(

                        'no_daftar',

                        array(

                          'header'=>'Tanggal Pendaftaran',

                          'name'=>'tgl_daftar',

                        ),

                        'nama_pemohon',

                        'alamat_pemohon',

                        'nama_perusahaan',

                        array(

                          'header'=>'',

                          'type'=>'raw',

/* Here is The Button that will send the Data to The MAIN FORM */

                          'value'=>'CHtml::Button("+", 

                                              array("name" => "send_pendaftar", 

                                                     "id" => "send_pendaftar", 

                                                     "onClick" => "$(\"#pendaftar_dialog\").dialog(\"close\"); $(\"#nama_pendaftar\").val(\"$data->nama_pemohon\"); $(\"#Izin_id_pendaftar\").val(\"$data->id\");"))',

                                                   ),

                           ),

                                        ));



can anyone one help me to do the same thing for multiple select

how if the case is like this: I have 2 different tables in my db, item and price. and I want the item name and the price of that item, shows together in the pop up dialog. anyone can help me to solve this?

A better solution is to use the selGridView extension.