Yii2: Using Kartik Depdrop Widget?

Question

Ok I am trying to use the Kartik Depdrop widget, all I am getting a white drop-down list that is values not showing in the dependent drop-down list.

I have a state model and a city model and I have it setup like this.

In _form.php

$catList=ArrayHelper::map(app\models\State::find()->all(), 'id', 'state_name' );  
  echo $form->field($model, 'state')->dropDownList($catList, ['id'=>'state_name']);

echo $form->field($model, 'district_city')->widget(DepDrop::classname(), [
'options'=>['id'=>'district_city'], 
'pluginOptions'=>[
'depends'=>['state_name'], // the id for cat attribute
'placeholder'=>'Select...',
'url'=>  \yii\helpers\Url::to(['patient-entry/subcat'])
]
]);
  ?>

Then in model

    public static function getCity($city_id) {
        $data=\app\models\City::find()
       ->where(['state_name'=>$city_id])
       ->select(['id','city_name'])->asArray()->all();

            return $data;
        }

Then in my controller

public function actionSubcat() {
        $out = [];
        if (isset($_POST['depdrop_parents'])) {
        $parents = $_POST['depdrop_parents'];

        if ($parents != null) {
        $cat_id = $parents[0];
        $out = \app\models\PatientEntry::getCity($cat_id);
        echo Json::encode(['output'=>$out, 'selected'=>'']);
        return;
        }
        }
        echo Json::encode(['output'=>'', 'selected'=>'']);
        }

When I select the state field, the firebug console shows the data correctly like:

{"output":[{"id":"172","city_name":"Along"},{"id":"173","city_name":"Bomdila"},{"id":"174","city_name":"Itanagar"},{"id":"175","city_name":"Naharlagun"},{"id":"176","city_name":"Pasighat"}],"selected":""}

The city field drop-down is also shows as if it has been filled up with data, but only with white-spaces.

What I am doing wrong here?

Thanks.

Answer 1

Ok I found the solution, All the code is ok, actually the depdrop widget looks for the pair id and name like:

// the getSubCatList function will query the database based on the
        // cat_id and return an array like below:
        // [
        // ['id'=>'<sub-cat-id-1>', 'name'=>'<sub-cat-name1>'],
        // ['id'=>'<sub-cat_id_2>', 'name'=>'<sub-cat-name2>']
        // ]

Accordingly I have changed the code in the model

->select(['id','city_name'])->asArray()->all();

with

->select(['id','city_name AS name'])->asArray()->all();

That's all and it is working fine now. Hope someone will find this useful.

Answer 2

Instead of changing the Select statement you could also:

echo $form->field($model, 'district_city')->widget(DepDrop::classname(), [
'options'=>['id'=>'district_city'], 
'pluginOptions'=>[

////  change default 'nameParam'=>'name' to

'nameParam'=>'city_name',
'depends'=>['state_name'], // the id for cat attribute
'placeholder'=>'Select...',
'url'=>  \yii\helpers\Url::to(['patient-entry/subcat'])
]
]);
  ?>

change the 'nameParam' to 'city_name'