2 tabs in yii framework - yii

I'm now task to create a website using a yii as a framework. I would like to as for your help on how will i be able to display 2 tabs with grid view on each tab. I was able to create tabs but every time i put a grid view in the tab, the 1st tab will not display the grid view and only the last tab will display the grid view.
here's the code of the 1st and 2nd tab
<div id="gridview-claims">
<script type="text/javascript">
if ($gif.content) {
$.extend($gif.content, {
//DO SYSTEM SPECIFIC STUFF AFTER CONTENT IS LOADED
onload : function (content) {
//APPLY FLEXGRID TO TABLES
$.get('/ADS/index.php/claims/admin', function (data) {
content.find('#gridview-claims').html(data);
});
}
});
}
</script>
</div>
<div id="tb-2-content" class="tb-content hidden">
<div id="gridview-deduction">
<script type="text/javascript">
if ($gif.content) {
$.extend($gif.content, {
//DO SYSTEM SPECIFIC STUFF AFTER CONTENT IS LOADED
onload : function (content) {
//APPLY FLEXGRID TO TABLES
$.get('/ADS/index.php/deduction/admin', function (data) {
content.find('#gridview-deduction').html(data);
});
}
});
}
</script>
</div>

I suggest you use the jquery widget in Yii instead, then. For each tab you can then use a render function to display your your grids.
For example:
$this->widget('zii.widgets.jui.CJuiTabs', array(
'tabs'=>array(
'Pediatric Info'=> $this->renderPartial("_view", array('data' => $model, 'patientID'=> $model->id), true, true),
'Contacts' =>$this->renderPartial("_viewContacts", array('data' => $model, 'patientID'=> $model->id), true, true),
// panel 3 contains the content rendered by a partial view
'Insurance'=> $this->renderPartial("_viewInsurance", array('data' => $model, 'patientID'=> $model->id), true, true),
'Activities' =>$this->renderPartial("_viewEncounters", array('data' => $model, 'patientID'=> $model->id), true, true),
),
// additional javascript options for the tabs plugin
'options'=>array('collapsible'=>true,),
));

2 tabs with two forms works for me..
<?php
$this->widget('zii.widgets.jui.CJuiTabs', array(
'tabs'=>array(
'Share By Email'=> $this->renderPartial("_form", array('model' => $model), true, true),
'Share to Friends'=> $this->renderPartial("_friendsform", array('model' => $model), true, true),
),
// additional javascript options for the tabs plugin
'options'=>array('collapsible'=>true,),
));
?>

Related

Adding custom buttons to Kendo grid toolbar in ASP.NET Core

I am using Kendo tools for my ASP.NET Core application. I have a grid and I want to add custom buttons to the grid tool bar. I can easily add the export to excel button but I'm having a really hard time adding my custom buttons.
Currently I just have my buttons displayed above the grid, here are those buttons:
<a href='#' class='k-button' id='saveState'>Save Grid Settings</a>
<a href='#' class='k-button' id='clearState'>Clear Grid Settings</a>
Here is my grid:
#(Html.Kendo().Grid<SylectusTL.ViewModels.Account.UserList>()
.Name("UserList")
.Columns(columns =>
{
columns.Bound(c => c.user_name).ClientTemplate(#"#: user_name #").Title("User Name");
columns.Bound(c => c.full_name).Title("Name");
columns.Bound(c => c.main_phone).Title("Phone").Width(150);
columns.Bound(c => c.main_phone_ext).Title("Ext").Width(100);
columns.Bound(c => c.email).Title("E-Mail");
columns.Bound(c => c.admin).ClientTemplate("#= admin ? 'Y' : 'N' #").Title("Admin").Width(100).HeaderHtmlAttributes(new { style = "text-align: center;" }).HtmlAttributes(new { style = "text-align: center;" });
columns.Bound(c => c.active).ClientTemplate("#= active ? 'Y' : 'N' #").Title("Active").Width(100).HeaderHtmlAttributes(new { style = "text-align: center;" }).HtmlAttributes(new { style = "text-align: center;" });
columns.Bound(c => c.last_login).Title("Last Login").Format("{0:MM/dd/yyyy}");
})
.ToolBar(tools =>
{
tools.Excel();
})
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(new int[] { 10, 20, 50 })
.ButtonCount(5))
.Sortable(sortable => sortable
.AllowUnsort(true)
.SortMode(GridSortMode.MultipleColumn)
.ShowIndexes(true))
.Scrollable()
.Reorderable(reorder => reorder.Columns(true))
.Filterable()
.ColumnMenu()
.Excel(excel => excel
.FileName("User List.xlsx")
.Filterable(true)
.ProxyURL(Url.Action("Excel_Export_Save", "Account"))
)
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Users_Read", "Account").Data("additionalData"))
)
)
Is there a way to add a template of soemthing to the toolbar property, I want the buttons to display next to the export to excel button. I've looked up some tutorials and everything is showing using tools.template in my toolbar property but when I try that it says Template does not exist.
Add a tools.Custom() statement after the tools.Excel(). This example creates a toolbar with the standard create button and a custom button for duplicating a row.
...
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Custom()
.HtmlAttributes ( new { onclick="master_duplicate(); return false;" } )
.Name("duplicate")#* creates a button with class k-grid-duplicate *#
.Text("Duplicate")
.IconClass("k-icon k-i-copy")
.Url("#")
;
})
...
and javascript
var dup_select_id; * used later in databound handler to automatically select the new duplicate;
function master_duplicate() {
var grid = $('#master').data('kendoGrid');
var data = grid.dataItem(grid.select());
$.ajax({
url: "#Url.Action("Duplicate")",
type: "POST",
data: { masterID: data.id }
})
.done(function (data, status, jqXHR) {
if (data.Data && data.Data.id) {
dup_select_id = data.Data.id;
grid.dataSource.read();
}
})
;
}
and there is other logic to hide the button when there is no selected row.
We can use ClientTemplate to add more than one column menu in existing. Below line of code we can refer for the same
.ToolBar(tools => {
tools.ClientTemplate("<a class='column_Menu' style='float:right' id='columnMenuButton' href='\\#' />"+"<label for='HideEmptyIndicatores' style='float:right;padding-right: 20px;padding-left: 3px;'> Hide Empty Indicators</label> <input type='checkbox' style='height:15px;min-width:15px; float:right'; id = 'HideEmptyIndicatores' onchange='hideEmptyRateIndicators(this)'/> "); })
this line of code result in the below SS

jQuery - validate kendo dropdownlist with display:none style

In my view I have a kendo dropdownlist. I´ve implement jQuery validation inserting these scripts in the view:
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
I've set the property as Required in the entity and all I need to perform the validation.
Model:
[Required(ErrorMessage = "Campo Tipo de Llenado es necesario")]
public int TipoLlenado { get; set; }
View:
#(Html.Kendo()
.DropDownListFor(model => model.pedidoGranelAutoEs.TipoLlenado)
.BindTo(new SelectList(cmbTipoLlenado.Select(s => new { Key = s.IdDatoMaestro, Value = s.ValorPortal }), "Key", "Value"))
.Events(events =>
{
events.Select("selectTipoLlenado");
})
.OptionLabel(Idioma.Shared.Pedidos_SeleccioneOpcion)
)
#Html.ValidationMessageFor(model => model.pedidoGranelAutoEs.TipoLlenado)
The thing is that if I inspect the web with Chrome and remove the "display:none" style from the input generated by the kendo DropDownList (using Razor), and then press the Submit button the validation works fine.
I've tried the following solutions without result:
$(document).ready(function () {
$('#formu').validate({
ignore: []
});
}
OR
$(document).ready(function () {
$('#formu').validate({
ignore: ':hidden'
});
}
OR
$.validator.setDefaults({ ignore: []});
OR
$.validator.setDefaults({ ignore: ':hidden' });
Any advise??
Thanks in advance!!
I've found the mistake.
It was that I have to write the line:
$.validator.setDefaults({
ignore: []
});
outside of $(document).ready(function () {...}

cgridview modal link passing data

How do I pass data for that row?
In cgridview:
array(
'header'=>'Message',
'type'=>'raw',
'value' => 'CHtml::link(substr($data->comments, 0, 70)."...","#",array("data-toggle"=>"modal","data-target"=>"#message","data-id" => "$data->comments"))',)
under TbModal
<script>
$(document).ready(function(){
var comments = $this.data('id');
$("#message").val(comments);
}
);
</script>
replace "data-id" => "$data->comments" with "data-id" => \'$data->comments\'

Handling Form Post in asp.net MVC when dojo grid is present

I am pretty new to web based applications development.I am using ASP.Net MVC4 with dojo toolkit. My requirement is like I have certain textboxes to capture data and also one dojo grid to capture certain details which are in a tabular format. So I am using Dojo grid(http://dojotoolkit.org/api/1.8/dojox/grid/DataGrid) with ItemFileWriteStore. My view is like below(I am using razor)
#using (Html.BeginForm("CreateNewData", "Home", FormMethod.Post, new { id = "myForm" }))
{
<div class="controlWrapper">
<div class="controlLabel">
#Html.DisplayNameFor(model => model.Name)
</div>
<div class="controlValue">
#Html.TextBoxFor(model => model.Name)
</div>
</div>
<div class="controlWrapper">
<h4>
Table Items</h4>
<div id="myGrid">
</div>
<div id="addRemoveMode">
<button data-dojo-type="dijit.form.Button" id="addButton" onclick="addRecord()">
Add</button>
<button data-dojo-type="dijit.form.Button" id="removeButton" onclick="removeRecord()">
Remove Selected Rows
</button>
</div>
</div>
}
My java script to create grid is like below
require(["dojo/ready",
"dojox/grid/DataGrid",
"dojo/data/ItemFileWriteStore",
"dojo/json",
"dojo/query",
"dijit/form/TextBox"
], function (ready, DataGrid, ItemFileWriteStore, Json, query, TextBox) {
ready(function () {
var layout = [[
{ name: 'ID', field: 'ID', hidden: true },
{ name: 'Label', field: 'Label', width: '10%', editable: true },
{ name: 'Position', field: 'Position', width: '10%', editable: true }
]];
var attCodeData = {
identifier: 'ID',
items: []
};
console.log(globalVar);
attCodeData["items"] = globalVar;
myStore= new ItemFileWriteStore({ data: attCodeData })
myGrid= new DataGrid({
store: myStore,
structure: layout,
rowSelector: '20px'
},"divGrid");
myGrid.startup();
}
My problem is since the grid is inside the form, whenever I add or remove a row, page is getting submitted to Post method mentioned in form. I just need to post the whole data so that I can process together. So I moved my grid outside Form. Now I am confused how to capture the whole data(data in text boxes and grid together) and submit to a controller method. Please help me.
To preventing whole page from getting submitted to Post method, you should use ajax solutions for sending and receiving data.
Take a look at this :DataGrid View with "CRUD operations" using Dojo DataGrid, JsonRest Store, Entity Framework, SQL Server, ASP.NET MVC Web API
and this: Ajax with dojo/request. I hope, they help.

items per page in header of Kendo UI Grid

I'm trying to get Kendo Grid to show a number of products per page, and with following code it will render a drop down to choose a number of items per page in the footer of the grid.
Is it possible to render the drop down in the header or in some other html element outside of the grid itself?
#(Html.Kendo().Grid(Model.Products)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.Id).Groupable(false).Visible(false);
columns.Bound(p => p.Name);
columns.Bound(p => p.UnitPrice);
})
.Pageable(pager => { pager.PageSizes(true); })
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Products_Read")
)
)
It is not possible to render the built-in pages dropdown outside of the grid. However it is relatively easy to create a separate dropdownlist and change the page size of the grid:
#(Html.Kendo().DropDownList()
.Name("pages")
.Events(e => e.Change("onChange"))
)
<script>
function onChange() {
$("#Grid").data("kendoGrid").dataSource.pageSize(this.value());
}
</script>
Here is a live demo: http://jsbin.com/uwiqow/1/edit