or
2 answers
194 views
Hi,
When I create a hyperlink in the nested grid, it is using the parent unique id over the child unique id. This results in an incorrect URL.
Below is the code for the template kendo grid.
When I create a hyperlink in the nested grid, it is using the parent unique id over the child unique id. This results in an incorrect URL.
Below is the code for the template kendo grid.
<script id="Load_PCSO" type="text/kendo-templ"> <h3>Power Cost Savings</h3> @(Html.Kendo().Grid<PowerCostSaving>() .Name("PCSO_#=SiteId#") .Columns(columns => { columns.Bound(p => p.Id).Width("50px").ClientTemplate(Html.ActionLink("#=Id#", "PowerCostSavingEdit", "Account", new {siteId = "#=SiteId#", powerCostSavingId = "#=Id#"}, null).ToString()); columns.Bound(p => p.Id); columns.Bound(p => p.Type).Width("150px"); columns.Bound(p => p.FollowUpDate).Width("100px").HtmlAttributes(new {style = "text-align: center"}); columns.Bound(p => p.Lead).Width("150px"); columns.Bound(p => p.Savings).Width("100px").HtmlAttributes(new {style = "text-align: right"}); columns.Bound(p => p.Status).Width("100px"); columns.Bound(p => p.DateOfStatus).Width("100px").HtmlAttributes(new {style = "text-align: center"}); }) .DataSource(dataSource => dataSource.Ajax() .PageSize(20) .Read(read => read.Action("PSCO_Load", "AccountReview", new { siteId = "#=SiteId#"})) .ServerOperation(true)) .HtmlAttributes(new { style = "width: 800px;" }) .ToClientTemplate() )</script>
If you look at the attached image, you will noticed that the id in the hyperlink in the first column differs from the id in the second column. I would like the hyperlink to use the id in the second column.
Thank You,
Arthur
2 answers
73 views
@(Html.Kendo().Grid<Zeus.Models.QuestionGroup>() .Name("grid") .Columns(columns => { columns.Bound(p => p.Id); columns.Bound(p => p.Name); }) .HtmlAttributes(new { style = "margin:10px;height:230px;" }) .DataSource(dataSource => dataSource .Ajax() .PageSize(20) .Read(read => read.Action("Answers2", "Survey")) ))Above is some MVC code. I've tested this code using local binding and it works, but when I call it remotely and bind it, it doesn't. However, it does trace into the following function:
public ActionResult Answers2() {/* SNIP */ Models.Survey survey = modelSurvey.GetFull();/* SNIP */ return Json(survey.QuestionGroups); }And I see the trace using Fiddler, and I can debug it, but when the Json object is returned, nothing shows up in the grid. There is data there, and Im getting no javascript errors. Any idea what I'm missing?
3 answers
292 views
Hi Kendo support,
I was trying to transer the telerik logic of editing in treeview node, but got some problem, is there any sample example in kendo for editing the node, Also i want to do for adding the node in treeview as well. Any sample or idea will be helpful.
Below is my telerik code for editing,
//Partial page
@model IEnumerable<PFLMakeTreeviewModel>
@model IEnumerable<PFLMakeTreeviewModel>
<script type="text/javascript">
function onLoad(e) {
// subscribe to the contextmenu event to show a contet menu
$('.t-in', this).live('contextmenu', function(e) {
// prevent the browser context menu from opening
e.preventDefault();
// the node for which the 'contextmenu' event has fired
var $node = $(this).closest('.t-item');
// default "slide" effect settings
var fx = $.telerik.fx.slide.defaults();
// context menu definition - markup and event handling
var $contextMenu =
$('<div class="t-animation-container" id="contextMenu">' +
'<ul class="t-widget t-group t-menu t-menu-vertical" style="display:none">' +
'<li class="t-item"><a href="#" class="t-link">Edit</a></li>' +
//'<li class="t-item"><a href="#" class="t-link">Delete</a></li>' +
'</ul>' +
'</div>')
.css( //positioning of the menu
{
position: 'absolute',
left: e.pageX, // x coordinate of the mouse
top: e.pageY // y coordinate of the mouse
})
.appendTo(document.body)
.find('.t-item') // select the menu items
.mouseenter(function() {
// hover effect
$(this).addClass('t-state-hover');
})
.mouseleave(function() {
// remove the hover effect
$(this).removeClass('t-state-hover');
})
.click(function(e) {
e.preventDefault();
// dispatch the click
onItemClick($(this), $node);
})
.end();
// show the menu with animation
$.telerik.fx.play(fx, $contextMenu.find('.t-group'), { direction: 'bottom' });
// handle globally the click event in order to hide the context menu
$(document).click(function(e) {
// if clicked inside the editing textbox - discard
if ($(e.target).is('#TreeView14 :text'))
return;
// remove any textboxes from the treeview and update the node if needed
$('#TreeView14 :text').each(function() {
var $textBox = $(this);
var newText = $textBox.val();
var oldText = $textBox.data('text');
// the node to which the textbox belongs to
var $node = $textBox.closest('.t-item');
// remove the textbox from the node
$textBox.replaceWith($('<span class="t-in" />').html(newText));
// if the text changed update the node
if (newText != oldText) {
onEdit($node);
}
});
// hide the context menu and remove it from DOM
$.telerik.fx.rewind(fx, $contextMenu.find('.t-group'), { direction: 'bottom' }, function() {
$contextMenu.remove();
});
});
});
}
function onItemClick($item, $node) {
var treeView = $('#TreeView14').data('tTreeView');
var nodeText = treeView.getItemText($node);
var menuItemText = $item.text();
if (menuItemText == "Edit") {
// replace the node contents with a textbox
setTimeout(function() {
$node.find('.t-in:first')
.replaceWith($('<input type="text" />')
.val(nodeText)
.data('text', nodeText)
.keydown(function(e) {
if (e.keyCode == 13) {
// handle enter key - edit the node
var newText = $(this).val();
// remove the textbox from the node
$(this).replaceWith($('<span class="t-in"/>').html(newText));
if (newText != nodeText) {
// if the text changed update the node
onEdit($node);
}
} else if (e.keyCode == 27) {
// handle escape key - cancel editing
// remove the textbox from the node
$(this).replaceWith($('<span class="t-in"/>').html(nodeText));
}
}))
}, 0);
}
//else if (menuItemText == "Delete") {
// //delete the node
// onDelete($node);
// }
}
function onEdit($node) {
var treeView = $('#TreeView14').data('tTreeView');
// post to HomeController.EditNode using jQuery
$.post('@(Url.Action("EditNode", "ReferenceFiles"))',
{
level: $node.parents('.t-item').length, // node level required to determine whether this is a Category or a Product
id: treeView.getItemValue($node),
text: treeView.getItemText($node)
}
);
}
// function onDelete($node) {
// var treeView = $('#TreeView14').data('tTreeView');
//
// if (confirm('Are you sure you want to delete this node?')) {
//
// // post to HomeController.DeleteNode using jQuery
// $.post('@(Url.Action("DeleteNode", "ReferenceFiles"))',
// {
// level: $node.parents('.t-item').length,
// id: treeView.getItemValue($node),
// });
//
// $node.remove();
// }
// }
// function AppendItem() {
// debugger
// var treeView = $("#TreeView14").data("tTreeView");
// var itemData = { Text: $("#itemText").val() };
// var selected = getSelected();
// treeView.append(itemData, selected.length != 0 ? selected : null);
// }
</script>
@* <button onclick="AppendItem()" class="t-button">Add new item</button>
@Html.TextBox("itemText", "Add item", new { style = "width: 100px" }) *@
<style type="text/css">
ul.t-widget.t-group.t-menu.t-menu-vertical
{
background-color:White;
width:80px;
font-size: 10pt;
color:black;
}
div.t-top, div.t-mid, div.t-bot
{
width:20%;
}
</style>
@(Html.Telerik().TreeView()
.Name("TreeView14")
.ClientEvents(events => events.OnLoad("onLoad"))
//.DragAndDrop(settings => settings
// .DropTargets(".drop-container"))
.BindTo(Model, mappings =>
{
mappings.For<PFLMakeTreeviewModel>(binding => binding
.ItemDataBound((item, make) =>
{
item.Text = make.MAKE_DESCRIPTION;
item.Value = make.MAKE_ID.ToString();
})
.Children(make => make.Models)
);
mappings.For<PFLModelTreeviewModel>(binding => binding
.ItemDataBound((item, model) =>
{
item.Text = model.MODEL_DESCRIPTION;
item.Value = model.MODEL_ID.ToString();
})
.Children(model => model.Series)
);
mappings.For<PFLSeriesTreeviewModel>(binding => binding
.ItemDataBound((item, serie) =>
{
item.Text = serie.SERIE_DESCRIPTION;
item.Value = serie.SERIE_ID.ToString();
})
);
})
)
//Controller
[HttpPost]
public ActionResult EditNode(int level, int id, string text)
{
var ausfleet = new AUSFLEETEntities();
ReferencesFiles _ReferencesFiles = new ReferencesFiles();
if (level == 0)
{
var make = ausfleet.PFL_MAKE.FirstOrDefault(c => c.MAKE_ID == id);
if (make != null)
{
make.MAKE_DESCRIPTION = text;
}
}
else if (level == 1)
{
var model = ausfleet.PFL_MODEL.FirstOrDefault(p => p.MODEL_ID == id);
if (model != null)
{
model.MODEL_DESCRIPTION = text;
}
}
else
{
var serie = ausfleet.PFL_SERIE.FirstOrDefault(p => p.SERIE_ID == id);
if (serie != null)
{
serie.SERIE_DESCRIPTION = text;
}
}
ausfleet.SaveChanges();
return new EmptyResult();
}
I was trying to transer the telerik logic of editing in treeview node, but got some problem, is there any sample example in kendo for editing the node, Also i want to do for adding the node in treeview as well. Any sample or idea will be helpful.
Below is my telerik code for editing,
//Partial page
@model IEnumerable<PFLMakeTreeviewModel>
@model IEnumerable<PFLMakeTreeviewModel>
<script type="text/javascript">
function onLoad(e) {
// subscribe to the contextmenu event to show a contet menu
$('.t-in', this).live('contextmenu', function(e) {
// prevent the browser context menu from opening
e.preventDefault();
// the node for which the 'contextmenu' event has fired
var $node = $(this).closest('.t-item');
// default "slide" effect settings
var fx = $.telerik.fx.slide.defaults();
// context menu definition - markup and event handling
var $contextMenu =
$('<div class="t-animation-container" id="contextMenu">' +
'<ul class="t-widget t-group t-menu t-menu-vertical" style="display:none">' +
'<li class="t-item"><a href="#" class="t-link">Edit</a></li>' +
//'<li class="t-item"><a href="#" class="t-link">Delete</a></li>' +
'</ul>' +
'</div>')
.css( //positioning of the menu
{
position: 'absolute',
left: e.pageX, // x coordinate of the mouse
top: e.pageY // y coordinate of the mouse
})
.appendTo(document.body)
.find('.t-item') // select the menu items
.mouseenter(function() {
// hover effect
$(this).addClass('t-state-hover');
})
.mouseleave(function() {
// remove the hover effect
$(this).removeClass('t-state-hover');
})
.click(function(e) {
e.preventDefault();
// dispatch the click
onItemClick($(this), $node);
})
.end();
// show the menu with animation
$.telerik.fx.play(fx, $contextMenu.find('.t-group'), { direction: 'bottom' });
// handle globally the click event in order to hide the context menu
$(document).click(function(e) {
// if clicked inside the editing textbox - discard
if ($(e.target).is('#TreeView14 :text'))
return;
// remove any textboxes from the treeview and update the node if needed
$('#TreeView14 :text').each(function() {
var $textBox = $(this);
var newText = $textBox.val();
var oldText = $textBox.data('text');
// the node to which the textbox belongs to
var $node = $textBox.closest('.t-item');
// remove the textbox from the node
$textBox.replaceWith($('<span class="t-in" />').html(newText));
// if the text changed update the node
if (newText != oldText) {
onEdit($node);
}
});
// hide the context menu and remove it from DOM
$.telerik.fx.rewind(fx, $contextMenu.find('.t-group'), { direction: 'bottom' }, function() {
$contextMenu.remove();
});
});
});
}
function onItemClick($item, $node) {
var treeView = $('#TreeView14').data('tTreeView');
var nodeText = treeView.getItemText($node);
var menuItemText = $item.text();
if (menuItemText == "Edit") {
// replace the node contents with a textbox
setTimeout(function() {
$node.find('.t-in:first')
.replaceWith($('<input type="text" />')
.val(nodeText)
.data('text', nodeText)
.keydown(function(e) {
if (e.keyCode == 13) {
// handle enter key - edit the node
var newText = $(this).val();
// remove the textbox from the node
$(this).replaceWith($('<span class="t-in"/>').html(newText));
if (newText != nodeText) {
// if the text changed update the node
onEdit($node);
}
} else if (e.keyCode == 27) {
// handle escape key - cancel editing
// remove the textbox from the node
$(this).replaceWith($('<span class="t-in"/>').html(nodeText));
}
}))
}, 0);
}
//else if (menuItemText == "Delete") {
// //delete the node
// onDelete($node);
// }
}
function onEdit($node) {
var treeView = $('#TreeView14').data('tTreeView');
// post to HomeController.EditNode using jQuery
$.post('@(Url.Action("EditNode", "ReferenceFiles"))',
{
level: $node.parents('.t-item').length, // node level required to determine whether this is a Category or a Product
id: treeView.getItemValue($node),
text: treeView.getItemText($node)
}
);
}
// function onDelete($node) {
// var treeView = $('#TreeView14').data('tTreeView');
//
// if (confirm('Are you sure you want to delete this node?')) {
//
// // post to HomeController.DeleteNode using jQuery
// $.post('@(Url.Action("DeleteNode", "ReferenceFiles"))',
// {
// level: $node.parents('.t-item').length,
// id: treeView.getItemValue($node),
// });
//
// $node.remove();
// }
// }
// function AppendItem() {
// debugger
// var treeView = $("#TreeView14").data("tTreeView");
// var itemData = { Text: $("#itemText").val() };
// var selected = getSelected();
// treeView.append(itemData, selected.length != 0 ? selected : null);
// }
</script>
@* <button onclick="AppendItem()" class="t-button">Add new item</button>
@Html.TextBox("itemText", "Add item", new { style = "width: 100px" }) *@
<style type="text/css">
ul.t-widget.t-group.t-menu.t-menu-vertical
{
background-color:White;
width:80px;
font-size: 10pt;
color:black;
}
div.t-top, div.t-mid, div.t-bot
{
width:20%;
}
</style>
@(Html.Telerik().TreeView()
.Name("TreeView14")
.ClientEvents(events => events.OnLoad("onLoad"))
//.DragAndDrop(settings => settings
// .DropTargets(".drop-container"))
.BindTo(Model, mappings =>
{
mappings.For<PFLMakeTreeviewModel>(binding => binding
.ItemDataBound((item, make) =>
{
item.Text = make.MAKE_DESCRIPTION;
item.Value = make.MAKE_ID.ToString();
})
.Children(make => make.Models)
);
mappings.For<PFLModelTreeviewModel>(binding => binding
.ItemDataBound((item, model) =>
{
item.Text = model.MODEL_DESCRIPTION;
item.Value = model.MODEL_ID.ToString();
})
.Children(model => model.Series)
);
mappings.For<PFLSeriesTreeviewModel>(binding => binding
.ItemDataBound((item, serie) =>
{
item.Text = serie.SERIE_DESCRIPTION;
item.Value = serie.SERIE_ID.ToString();
})
);
})
)
//Controller
[HttpPost]
public ActionResult EditNode(int level, int id, string text)
{
var ausfleet = new AUSFLEETEntities();
ReferencesFiles _ReferencesFiles = new ReferencesFiles();
if (level == 0)
{
var make = ausfleet.PFL_MAKE.FirstOrDefault(c => c.MAKE_ID == id);
if (make != null)
{
make.MAKE_DESCRIPTION = text;
}
}
else if (level == 1)
{
var model = ausfleet.PFL_MODEL.FirstOrDefault(p => p.MODEL_ID == id);
if (model != null)
{
model.MODEL_DESCRIPTION = text;
}
}
else
{
var serie = ausfleet.PFL_SERIE.FirstOrDefault(p => p.SERIE_ID == id);
if (serie != null)
{
serie.SERIE_DESCRIPTION = text;
}
}
ausfleet.SaveChanges();
return new EmptyResult();
}
Alex Gyoshev
Telerik team
answered
on
05 Mar 2014
1 answer
95 views
hi i am new telerik panel bar
can any one give me source code to bind my panel bar from database using entity framework
can any one give me source code to bind my panel bar from database using entity framework
Daniel
Telerik team
answered
on
05 Mar 2014
1 answer
1,000 views
Consider the following code i want to set the grid datePicker column empty if date validation fails WorkOrderDate< task date , any help would be higly appreciable.
***********Grid***************
columns.Bound(c => c.WorkOrderDetailsDate).Title("Estimated Start Date").EditorTemplateName("WorkOrderDetailsDate")
***********Editor**************
@model DateTime?
@(Html.Kendo().DatePicker()
.Name("WorkOrderDetailsDate")
.Value(Model == null ? DateTime.Now.Date : ((DateTime)@Model).Date)
.Events(d=>d.Change("TaskDateValidate"))
)
*************JavaScript***********
function TaskDateValidate(e)
{
if ($("#workOrder_EstStartDate").val() != null && $("#workOrder_EstStartDate").val() != "") {
var workDate = kendo.parseDate($("#workOrder_EstStartDate").val());
var taskDate = kendo.parseDate(kendo.toString(this.value(), 'd'));
if (taskDate < workDate)
{
showMessage("Task date should be after work order Date");
this.value(""); <-----this is not working want to set to empty to force user to select date again
this.value("28/02/2014");<---this is not working as well...
}
}
please advise on this problem
reagrds
Shaz
***********Grid***************
columns.Bound(c => c.WorkOrderDetailsDate).Title("Estimated Start Date").EditorTemplateName("WorkOrderDetailsDate")
***********Editor**************
@model DateTime?
@(Html.Kendo().DatePicker()
.Name("WorkOrderDetailsDate")
.Value(Model == null ? DateTime.Now.Date : ((DateTime)@Model).Date)
.Events(d=>d.Change("TaskDateValidate"))
)
*************JavaScript***********
function TaskDateValidate(e)
{
if ($("#workOrder_EstStartDate").val() != null && $("#workOrder_EstStartDate").val() != "") {
var workDate = kendo.parseDate($("#workOrder_EstStartDate").val());
var taskDate = kendo.parseDate(kendo.toString(this.value(), 'd'));
if (taskDate < workDate)
{
showMessage("Task date should be after work order Date");
this.value(""); <-----this is not working want to set to empty to force user to select date again
this.value("28/02/2014");<---this is not working as well...
}
}
please advise on this problem
reagrds
Shaz
Alexander Popov
Telerik team
answered
on
04 Mar 2014
1 answer
464 views
You've all been doing this for a bit, so please be patient...
Please follow along to see the logic…don't assume the initial error is my issue...
In MVC - I have a part view and wanted a datepicker on it.
So in my _PartialFormName.cshtml I had (from the sample) the following:
<input id="datepicker" />
<script>
$(function() {
$("#datepicker").kendoDatePicker();
});
</script>
This reports the error $ not defined.
That's because the render scripts call hasn't loaded the JQuery library at the bottom of the _Layout.cshtml page:
@Scripts.Render("~/bundles/scripts")
AND the script is not in a @section Script section that will be rendered by the call:
@RenderSection("scripts", required: false)
So, I put the script for datetimepicker it in the @section Script block...
BUT that's in the main MainPage.cshtml razor page, NOT the _PartialFormName.cshtml partial page…
So I need to know and collect all the control scripts of ALL partial views and put their scripts in the containing page?
******************************************
Now the best practice question...
Should I reference a child script named for that partial view containing all of the kendo scritps for that page?
How do we best contain kendo scripts? Is there a best practice?
Thanks
Thanks
R
Please follow along to see the logic…don't assume the initial error is my issue...
In MVC - I have a part view and wanted a datepicker on it.
So in my _PartialFormName.cshtml I had (from the sample) the following:
<input id="datepicker" />
<script>
$(function() {
$("#datepicker").kendoDatePicker();
});
</script>
This reports the error $ not defined.
That's because the render scripts call hasn't loaded the JQuery library at the bottom of the _Layout.cshtml page:
@Scripts.Render("~/bundles/scripts")
AND the script is not in a @section Script section that will be rendered by the call:
@RenderSection("scripts", required: false)
So, I put the script for datetimepicker it in the @section Script block...
BUT that's in the main MainPage.cshtml razor page, NOT the _PartialFormName.cshtml partial page…
So I need to know and collect all the control scripts of ALL partial views and put their scripts in the containing page?
******************************************
Now the best practice question...
Should I reference a child script named for that partial view containing all of the kendo scritps for that page?
How do we best contain kendo scripts? Is there a best practice?
Thanks
Thanks
R
Dimo
Telerik team
answered
on
04 Mar 2014
1 answer
122 views
Hi,
I have question that in my project there are different test cases and i want to generate new chart for each of this test case.I tired placing for loop before the kendo chart in the view for each of different test case but only one chart is generated.The datasource o this chart is using ajax binding.How do i get different charts for same datasource using different parameters passed to the action method?
I have question that in my project there are different test cases and i want to generate new chart for each of this test case.I tired placing for loop before the kendo chart in the view for each of different test case but only one chart is generated.The datasource o this chart is using ajax binding.How do i get different charts for same datasource using different parameters passed to the action method?
T. Tsonev
Telerik team
answered
on
03 Mar 2014
1 answer
95 views
I am having grid with virtual scroll and Batch editing functions.
If, I make some value changes on first row it shows red mark. After scrolling the grid (on virtual scroll call), that red mark gets removed. Value remain changed, but, red mark gone from a cell.
If, I make some value changes on first row it shows red mark. After scrolling the grid (on virtual scroll call), that red mark gets removed. Value remain changed, but, red mark gone from a cell.
Nikolay Rusev
Telerik team
answered
on
03 Mar 2014
1 answer
31 views
Could anyone provide a link for the demo solution file so I can have a look at the views etc.
Thanks
John
Thanks
John
Dimiter Madjarov
Telerik team
answered
on
03 Mar 2014
2 answers
156 views
Hello,
I currently have a clear grid button and the following code clears the rows from the grid:
$("#studentGrid").data('kendoGrid').dataSource.data([]);
But my problem is, I have a ClientFooterTemplate with totals. How do I clear the ClientFooterTemplate in a javascript call? I could do it on the DataBound event, but just don't know how to clear that footer.
Thanks...
I currently have a clear grid button and the following code clears the rows from the grid:
$("#studentGrid").data('kendoGrid').dataSource.data([]);
But my problem is, I have a ClientFooterTemplate with totals. How do I clear the ClientFooterTemplate in a javascript call? I could do it on the DataBound event, but just don't know how to clear that footer.
Thanks...
