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\'
Related
Whenever the modal window pops up, it goes to the top of the page like so:
https://i.imgur.com/6DDP3Ic.gif
Self contained telerik project https://filebin.net/wgcuasrr6uhejmrv
How do I prevent it from going to the top of page?
Here's the code, the delete confirmation dialog goes to the top of page:
<div class="row">
<div class="col-12">
#(Html.Kendo().Grid<TelerikAspNetCoreApp7.Models.OrderViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.OrderID).Filterable(false);
columns.Bound(p => p.Freight);
columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
columns.Bound(p => p.ShipName);
columns.Bound(p => p.ShipCity);
columns.Command(command =>
{
command.Custom("Destroy")
.Click("showDeleteConfirmation")
.HtmlAttributes(new { style = "width:40%" });
}).Width("15%");
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height:550px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Orders_Read", "Grid"))
.Destroy(read => read.Action("Orders_Read", "Grid"))
)
)
</div>
</div>
#(Html.Kendo()
.Dialog()
.Name("DeleteConfirmation")
.Modal(true)
.Title("Confirm Delete")
.Content("Are you sure you want to delete this item?")
.Visible(false)
.Actions(a =>
{
a.Add().Text("No").Action("cancelDelete");
a.Add().Text("Yes").Action("confirmDelete").Primary(true);
})
)
<script>
var modelToDelete;
function showDeleteConfirmation(e) {
var grid = $("#grid").data("kendoGrid");
var dialog = $('#DeleteConfirmation').data("kendoDialog");
modelToDelete = grid.dataItem($(e.target).parents('tr'));
dialog.content("Are you sure you want to delete this item with ID - " + modelToDelete.OrderID + "?");
dialog.open();
}
function confirmDelete(e) {
var grid = $("#grid").data("kendoGrid");
grid.dataSource.remove(modelToDelete);
grid.dataSource.sync();
$('#DeleteConfirmation').data("kendoDialog").close();
}
function cancelDelete() {
$('#DeleteConfirmation').data("kendoDialog").close();
}
</script>
I encountered a similar problem a long time ago. Unfortunately, I forgot exactly how I resolved it :(
SUGGESTION:
Try adding e.preventDefault(); to your custom command handler:'
https://www.telerik.com/forums/problem-expandrow()-causes-jump-to-top-of-window
https://stackoverflow.com/a/1253492/3135317
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
I am using Kendo UI Grid.And i want to do InCell editing on it.The InCell editing is working well.And once i click on "Add New Record" button then it shows textbox for the first column "Name".
My problem is when i press tab after putting value on "Name" field then its not shifting into second field "Description".And the tab order should work there.
Below is the piece of code for Kendo Grid :-
#using Gts.GlaspacLX.Web.App_Start;
#using Gts.GlaspacLX.ListValues;
#using System.Collections;
#using Kendo.Mvc.UI
#*<script src="#Url.Content("~/Scripts/jquery-ui-1.8.18.min.js")"></script>*#
<script type="text/javascript" src="../../Scripts/js/Product/Category.js"></script>
<style>
.k-dirty { display:none; }
</style>
<fieldset>
<form>
<div id="divProduct" style="display: none;">
#(Html.Kendo().Grid<Gts.GlaspacLX.Web.ViewModel.ProductViewModel>()
.Name("ProductGrid")
.Columns(columns => {
columns.Bound(p => p.Name).Width(50);
columns.Bound(p => p.Description).Width(200);
columns.Command(command => { command.Destroy(); }).Width(75);
columns.Bound(p => p.ID).Hidden();
})
.ToolBar(commands => {
commands.Create();
commands.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Model(model => {
model.Id(p => p.ID);
})
.Read(read => read.Action("ProductEditingInline_Read", "Product"))
.Create(create => create.Action("ProductEditingInline_Create", "Product"))
.Update(update => update.Action("ProductEditingInline_Update", "Product"))
.Destroy(destroy => destroy.Action("ProductEditingInline_Destroy", "Product")
)
.Events(events => events.Change("onProductChange"))
// .Events(events => events.Error("error_handler"))
)
)
<input type="button" value="Cancel" onclick=" $('.k-button.k-button-icontext.k-grid-cancel-changes').click(); $('#productWindow').data('kendoWindow').close(); " />
<input type="button" value="Save" onclick=" SaveProductChanges(); " />
</div>
</form>
</fieldset>
}
Can anyone help me out on this ?
You'll want to use the navigatable option of the grid. Following is a jsfiddle example I've built: Kendo Grid Example with keyboard navigation. In MVC the navigatable option is turned on by calling .Navigatable() on the grid (see example below):
#(Html.Kendo().Grid<TestModel>()
.Name("TestGrid")
.Columns(columns =>
{
columns.Bind(c => c.DisabledString);
columns.Bind(c => c.Description);
columns.Bind(c => c.TestInvisibleDate);
columns.Bind(c => c.TestDate);
columns.Bind(c => c.AllExpressions);
})
.HtmlAttributes(new { style = "height:550px;" })
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Sortable()
.Scrollable(s => { s.Enabled(true); s.Virtual(true); })
.Pageable(p => p.Enabled(false))
.Mobile(MobileMode.Disabled)
.Navigatable()
.Resizable(s => s.Columns(true))
.Reorderable(c => c.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(50)
.ServerOperation(false)
.Model(model =>
{
model.Id(e => e.UniqueId);
})
)
)
This help?
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
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,),
));
?>