putting jquery buttons in clistview widget in yii - jquery-ui

I am trying to put a button which will be displayed along with some data in the view file I specified in "itemView" field of the CListView widget, but instead of the styled button for every list item, I am just getting it or the first list item. My code in the _view file is:
<div id="listView">
<div class="thedata">
...some data
</div>
<div id="buttons">
<?php
$this->widget('zii.widgets.jui.CJuiButton', array(
'buttonType'=>'button',
'name'=>'btnJobs',
'caption'=>'Manage Jobs',
'options'=>array('icons'=>'js:{primary:"ui-icon-wrench"}'),
'onclick'=>'js:function(){alert("Manage Jobs clicked."); this.blur(); return false;}',
));
?>
</div>
</div>
and the code for CListView widget is just the bare minimum:
$this->widget('zii.widgets.CListView', array(
'dataProvider' => $dataProvider,
'itemView' => '_view'
));
any suggestions?

Try passing in a unique ID to the CJuiButton, like so:
<?php
$this->widget('zii.widgets.jui.CJuiButton', array(
'id'=>'button'.$data->id, // add a unique ID here (could use $index instead of $data->id)
'buttonType'=>'button',
'name'=>'btnJobs',
'caption'=>'Manage Jobs',
'options'=>array('icons'=>'js:{primary:"ui-icon-wrench"}'),
'onclick'=>'js:function(){alert("Manage Jobs clicked."); this.blur(); return false;}',
));
?>
The problem is that since all of your buttons have the same 'name' (and therefore 'id') jQuery is only binding to the first one. Making sure each button has a unique ID should fix this, so jQuery will bind correctly.

Related

ZEND_Auth, deactivate navigation area

I´ve built a Login Page using Zend_Auth. Now my question ist how can I deactivate areas which are loaded with my layout.phtml?
Here the part of my code of my layout.phtml which I don´t want to see in my login and logout forms:
<div id="navigation">
<ul>
<li>Arbeitskalender</li>
<li>Arbeitskalender download</li>
<!--<li>Bibliothek</li> -->
<!-- <li>Schwestern</li> -->
</ul>
</div>
How can I work with different layouts? In which place and how can I load them?
You can have multiple layouts in an application. If you create another without the navigation HTML and configure it in your module.config.php, you can simply select which layout to use from within the controller.
'template_map' => array(
'layout/layout' => __DIR__ . '/../view/layout/layout.phtml',
'layout/layout_login' => __DIR__ . '/../view/layout/layout_login.phtml'
)
Then in your controller:
$this->layout('layout/layout_login');
EDIT:
Alternatively if you'd like to dynamically change your layout you can use the Identity View Helper to check whether a user is logged in or not. e.g.
<!-- if logged in, show logout link -->
<?php if (null !== $this->identity()) : ?>
Logout
<?php endif; ?>

ZF2 Form\Element\MultiCheckbox: how to get each item on a new line?

I've been Googling this to no avail. I have a multi-checkbox form element in one of my forms. Here's the code I used to create it:
$this->add(array (
'name' => 'thingyId',
'type' => 'MultiCheckbox',
'options' => array (
'value_options' => $thingyArray,
)
));
In my view script, I have this:
<?= $this->formRow($form->get('thingyId')); ?>
The form element shows up fine, but all of the checkboxes are on a single line. How do I get it so that each checkbox is on a new line?
If you view this link, you can see that the fourth argument is partial. So, you can use many ways to accomplish the task.
Method 1:
echo $this->formRow($element, null, null, 'template-file');
Now, create a template file named as template-file.phtml to render the element however you like.
//template-file.phtml
<span><?php echo $label; ?></span><br/>
<?php foreach ($element->getValueOptions() as $key => $value): ?>
<input type="checkbox" name="<?php echo $element->getName() ?>[]" value="<?php echo $value; ?>">
<span><?php echo $key; ?></span><br/>
<?php endforeach; ?>
Method 2
Create your own view helper by extending the default helper.
namespace Application\View\Helper;
class MyFormRow extends \Zend\Form\View\Helper\FormRow
{
/**
* #var string
*/
protected $partial = 'template-file';
}
Now, inform our application about our new helper in your module,
namespace Application;
class Module
{
public function getViewHelperConfig()
{
return array(
'invokables' => array(
'myFormRow' => 'Application\View\Helper\MyFormRow'
)
);
}
}
Lastly use the helper:
echo $this->myFormRow($element);
I came across this question when I was having this issue myself. The code that was being used was the following:
<?php
$oMultiCheckboxField = $oForm->get('multicheckboxelement');
echo $this->formMultiCheckbox($oMultiCheckboxField);
?>
The only additional parameter you could pass to the formMultiCheckbox view helper was whether to append or prepend the label.
How I eventually chose to solve this is with the following code:
<?php
$oMultiCheckboxField = $oForm->get('multicheckboxelement');
$oMultiCheckboxViewHelper = new \Zend\Form\View\Helper\FormMultiCheckbox();
$oMultiCheckboxViewHelper->setSeparator('<hr>');
echo $oMultiCheckboxViewHelper->render($oMultiCheckboxField);
?>
From what I recall, ZF1 had the option to set the separator (I clearly remember this at least for radio buttons). Why there isn't a clearer way to do this in ZF2 is a bit puzzling. If there are better ways to do this, I would certainly like to know about it.

Telerik Tabstrip not displaying inside Telerik Grid

I have a Telerik MVC grid with a single detail view.
Inside the detail view is a telerik tabstrip. When I select the grid row to display, the detail will open up completely empty.
I have copied the tabstrip code outside the grid, changing the name of the grid to a static name and rendering the grid instead of outputting it as an htmlstring, and it displays perfectly.
I've tried registering all required javascript files, no change.
I'm pretty stumped at this point. I've cleared out the entire tabstrip so it contains nothing but text, but no change.
Here's the code which i have:
<%: Html.Telerik().Grid(Model.AccessRequests)
.Name("gridAccessRequests")
.ColumnContextMenu()
.DataKeys(d => { d.Add(a => a.Access_Request_ID).RouteKey("id");})
.DataBinding(dataBinding => dataBinding
.Ajax()
.Select("AjaxBinding", "Home")
.Insert("Insert", "Home")
.Update("Save", "Home")
.Delete("Delete", "Home"))
.ToolBar(commands => commands.Insert())
.Editable(editing => editing
.InsertRowPosition(GridInsertRowPosition.Bottom)
.Mode(GridEditMode.PopUp))
.HtmlAttributes(new { style = "width:100%" })
.Selectable()
.Sortable(sorting => sorting
.OrderBy(sortOrder => sortOrder.Add(o => o.EMPLOYEE_NAME).Ascending()))
.Filterable(filtering => filtering
.Filters(filters => filters
.Add(o => o.RECORD_YEAR).IsEqualTo(Model.CurrentYear)))
.Pageable(paging =>
paging.PageSize(15)
.Style(GridPagerStyles.NextPreviousAndNumeric)
.Position(GridPagerPosition.Both))
.ClientEvents(events =>
{
events.OnEdit("onEdit");
events.OnRowDataBound("requests_onRowDataBound");
})
.DetailView(details => details.ClientTemplate(
Html.Telerik()
.TabStrip()
.Name("TabStrip_<#=id#>")
.SelectedIndex(0)
.Items(items =>
{
items.Add().Text("Assets").Content("Assets");
items.Add().Text("Locations").Content("Locations");
})
.ToHtmlString()
))
.Columns(col =>
{
col.Bound(c => c.Access_Request_ID).Title("ID");
col.Bound(c => c.RECORD_YEAR).Title("Year");
col.Bound(c => c.VERSION_NO).Title("Version");
col.Bound(c => c.EMPLOYEE_NAME).Title("Name");
col.Command(commands =>
{
commands.Edit()
.ButtonType(GridButtonType.Image);
commands.Delete()
.ButtonType(GridButtonType.Image);
commands.Custom("Clone")// the constructor accepts the name of the custom command (used to differentiate between multiple custom commands)
.Text("Clone")
// Specify which fields from the bound data item to include in the route (pass as action method arguments)
.DataRouteValues(route => route.Add(o => o.Access_Request_ID).RouteKey("requestId"))
.Ajax(true)
// Which action method to call
.Action("CloneRequest", "Home");
}).Width(145)
.IncludeInContextMenu(false);
})%>
Here is the standalone tabstrip:
<%
Html.Telerik().TabStrip()
// Make the Name unique
.Name("TabStrip")
.SelectedIndex(0)
.Items(items =>
{
items.Add().Text("Assets").Content("Assets");
items.Add().Text("Locations").Content("Locations");
})
.Render();
%>
Any Suggestion/ Solution/Demo will be helpful.
Thanks in advance!
UPDATE
I have figured out that the tabstrips are not displaying on initial load of the grid; after hitting the grid's refresh button or paging the tabstrips display and function correctly.
It appears that there is an invalid property value error being thrown after the grid is loaded but before any databinding is completed, but I still can't seem to pinpoint the exact problem. Again, hitting the grid's refresh button or paging will successfully databind all the rows.
When the page first loads, the grid is loaded via server side binding. The tab strips are defined in the client template which is not used during server binding. When you refresh the grid, it is loaded via ajax binding and the client template is used.
You need to make the grid load initially via ajax binding so you need to use a different constructor.
Change this:
Html.Telerik().Grid(Model.AccessRequests)
to this:
Html.Telerik().Grid<AccessRequests>() //Put in the appropriate type for AccessRequests

How to adapt this wordpress loop query code to include pagination?

I have sourced the below code to query my posts in Wordpress and all works as intended.
I'd like to add pagination to this now. I don't want to alter the code too much now that I know it works, can anyone advise on the best way to adapt this to include the pagination?
I would like it to show a maximum of 18 posts per page and have next and prev links to other pages if they exist. This code is being used in custom category templates, but I have also setup a static page setup under the reading settings and the display of main posts uses home.php, I'd like to use the same or similar loop code to also paginate that. Any help is appreciated. Here is the code:
<div id="Items">
<ul>
<?php
// Grid sorted alphabetically
if (is_category('categoryName'))
{
$args = array( 'posts_per_page' => -1, 'orderby'=> 'title', 'order' => 'ASC', 'category' => 41 );
$categoryNameposts = get_posts( $args );
}
foreach( $categoryNameposts as $post ) : setup_postdata($post);
?>
<li><?php get_template_part( 'content', get_post_format() ); ?></li>
<?php endforeach; ?>
</ul>
</div><!-- #ItemsEnd -->
You should let wordpress know how much post you want to show per page in the query_posts. Replace your $args with these two lines:
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array( 'posts_per_page' => 18, 'paged' => $paged, 'orderby'=> 'title', 'order' => 'ASC', 'category' => 41 );
Now to show Next-Previous link:
<div class="paginationClass">
<?php next_posts_link(); ?>
<?php previous_posts_link(); ?>
</div>
Also in is_category function, use categorySlug, instead of categoryName.

Telerik grid with checkbox - Checkbox not showing up when the grid initially paints

I have a telerik grid with a checkbox. I am using a client template. There is a .DataBinding Ajax call attached.
When the grid initially comes up, instead of a checkbox, it has the id value as text.
If I hit refresh, the ajax call gets executed and when it comes back the checkbox appears. Is there any way to force the ajax call to happen when the grid initially paints so that I have a checkbox and not text ...
Code sample:
<% Html.Telerik().Grid(Model.AdminSongQueue)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(o => o.UserTrackAssignmentID)
.ClientTemplate("<input type='checkbox' name='checkedRecords' value='<#= UserTrackAssignmentID #>' />")
.Title("Check")
.Width(50)
.HtmlAttributes(new {style="text-align:center"});
})
.DataBinding(dataBinding => dataBinding.Ajax()
.Select("_CheckBoxesSongGrid", "RightsToolSvc"))
.Scrollable()
.Pageable()
.Render();
%>
Yes, this is possible: You just have to call the empty constructor of the Grid class like this and the grid binds by calling the ajax select method for the initial data load, too:
Html.Telerik().Grid<YourModelDataType>().Name("Grid")...
In my View (viewname.cshtml, MVC) I added the following before my .ClientTemplate:
.Template(
#<text> <input type='checkbox' id='chkMessage' name='checkedMovies' value='<#= ID #>' /> </text>)
...
This post is related, I found my answer here

Resources