[SOLVED] How to get id from CJuiSortable itemtemplate for CHTML::Link

Yii 1.1 General Discussion
1

Hello folks,

I am trying to create a sortable list with "edit" and "delete" links by using CHTML::link.

Goal:

Create a sortable list with the ability to delete or update an entry in the list.

Issue:

The sorting it self is working and the results are stored to the DB. I am however trying to insert the links in the itemtemplate. I am unable to get the id for the chtml::link.

I used the knowledge described in this wiki entry as an example: Ordering Models by Weight with CJuiSortable

Controller




	public function actionUpdate($id)

	{

		$model=$this->loadModel($id);


		// Uncomment the following line if AJAX validation is needed

		$this->performAjaxValidation($model);


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

		{

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

			if($model->save())

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

		}


                $dataProvider = new CActiveDataProvider('Catalogitem', array(

			'pagination' => false,

			'criteria' => array(

                                'condition' => 'catalog_id='.$id,

				'order' => 'sort ASC, parameter DESC',

			),

		));


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

			'model'=>$model,

                        'dataProvider'=>$dataProvider,

		));

	}

Relevant Viewpart





$items = CHtml::listData($dataProvider->getData(), 'id', 'parameter');

$delete = CHtml::link('Delete', '#', array('submit'=>array('catalogitem/delete', 'id'=>'{id}'), 'confirm'=>'Are you sure?'));


        $this->widget('zii.widgets.jui.CJuiSortable', array(

                'id'=>'orderlist',

                'items' => $items,

                'itemTemplate'=>'<li id="{id}" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>{content}'.$delete.'</li>',


                'options'=>array(

			'placeholder'=>'ui-state-highlight',

                ),

        ));

Does anyone know how I can provide the $items id to the CHTML::link from the itemTemplate? If there is a better solution I am all ears ;)

2

Hi there,

After reviewing the way JSortable works, I see that every item is created as ‘id’=>‘content’ <— in your case is ‘parameter’. Now, what you have to do is to include the links on the parameter attribute :)

How to do that? There a couple of ways but the easiest one is the following. Loop through the $items before giving the array to the CJuiSortable:




$items = CHtml::listData($dataProvider->getData(), 'id', 'parameter');

$sortableItems = array();


foreach($items as $id=>$content)

     $sortableItems[$id] = $content. ' '.CHtml::link('Delete', '#', array('submit'=>array('catalogitem/delete', 'id'=>$id), 'confirm'=>'Are you sure?'));

... 

 $this->widget('zii.widgets.jui.CJuiSortable', array(

                'id'=>'orderlist',

                'items' => $sortableItems,

Note: Totally untested :P

3

btw, welcome to the forum

4

Antonio,

You are the man!

It works great. I will post my solution here shortly.

It’s an obvious solution, but I have to get used to way yii works.

5

This is my solution:

Catalog\update view




    <?php

        // get items from controller

        $items = $dataProvider->getData();

        $sortableItems = array();


        // Add custom CSS and add control buttons

        foreach($items as $item)

        {

                $sortableItems[$item->id] = 

                        '<div class="ui-widget-content">' . CHtml::encode($item->parameter) . '</div> ' .

                        '<div class="ui-widget-content">' . CHtml::encode($item->value) . '</div> ' .

                        CHtml::link(Chtml::image('images/icons/cross.png', $alt='Delete'), '#', array('submit'=>array('catalogitem/delete', 'id'=>$item->id), 'confirm'=>'Delete item?')). ' ' .

                        CHtml::link(Chtml::image('images/icons/pencil.png', $alt='Edit'), array('catalogitem/update', 'id'=>$item->id));

        }


        // clear the items array

        unset($items);


        $this->widget('zii.widgets.jui.CJuiSortable', array(

                'id'=>'orderlist',

                'items' => $sortableItems,

                'itemTemplate'=>'<li id="{id}" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>{content}</li>',

                // additional javascript options for the accordion plugin

                'options'=>array(

			'placeholder'=>'ui-state-highlight',

                        'cursor'=>'move',

                ),

        ));

    ?>