Hi
I have multiple tree views named role, responsibility, function using local data binding as in the below attached screen shot. Below is the html view . I need to reload automatically the RoleListView if any changes made on responsibility tree view. i.e if i drag a function and drop it on Responsibility tree view then rolelist should be reloaded with modified responsibilities data automatically. How can i do this. pls assist .
@using Kendo.Mvc.UI;
@using Kendo.Mvc.UI.Fluent;
@using Msc.UAM.Presentation.ViewModel;
@model List<
ResponsibilityListView
>
@(Html.Kendo().TreeView()
.Name("ResponsibilityList")
.BindTo(Model, (NavigationBindingFactory<
TreeViewItem
> mappings) =>
{
mappings.For<
ResponsibilityListView
>
(binding => binding.ItemDataBound((item, response) =>
{
item.Id = response.InternalResponsibilityId.ToString();
item.Text = response.Description;
item.SpriteCssClasses = "iconResponsibility";
})
.Children(res => res.Functions));
mappings.For<
FunctionListView
>(binding => binding.ItemDataBound((item, function) =>
{
item.Id = function.InternalFunctionId.ToString();
item.Text = function.Description;
item.SpriteCssClasses = "iconFunction";
}));
})
.DragAndDrop(true)
.Events(events => events.DragStart("OnResponsibilityDragStart")
.Drop("OnResponsibilityDrop"))
)
@using Kendo.Mvc.UI;
@using Msc.UAM.Presentation.ViewModel;
@model List<
FunctionListView
>
@(Html.Kendo().TreeView()
.Name("FunctionList")
.BindTo(Model, (Kendo.Mvc.UI.Fluent.NavigationBindingFactory<
TreeViewItem
> mappings) =>
{
mappings.For<
FunctionListView
>
(binding => binding.ItemDataBound((item, function) =>
{
item.Id = function.InternalFunctionId.ToString();
item.Text = function.Description;
item.SpriteCssClasses = "iconFunction";
}));
})
.DragAndDrop(true)
.Events(events => events.Drop("OnFunctionDrop"))
)
@using Kendo.Mvc.UI;
@using Kendo.Mvc.UI.Fluent;
@using Msc.UAM.Presentation.ViewModel;
@model List<
RoleListView
>
@(Html.Kendo().TreeView()
.Name("RoleList")
.BindTo(Model, (NavigationBindingFactory<
TreeViewItem
> mappings) =>
{
mappings.For<
RoleListView
>
(binding => binding.ItemDataBound((item, role) =>
{
item.Id = role.InternalRoleId.ToString();
item.Text = role.Description;
item.SpriteCssClasses = "iconRole";
})
.Children(role => role.Responsibilities));
mappings.For<
ResponsibilityListView
>(binding => binding.ItemDataBound((item, responsibility) =>
{
item.Id = responsibility.InternalResponsibilityId.ToString();
item.Text = responsibility.Description;
item.SpriteCssClasses = "iconResponsibility";
}).Children(res => res.Functions));
mappings.For<
FunctionListView
>(binding => binding.ItemDataBound((item, function) =>
{
item.Id = function.InternalFunctionId.ToString();
item.Text = function.Description;
item.SpriteCssClasses = "iconFunction";
}));
})
.DragAndDrop(true)
.Events(events => events.DragStart("OnRoleDragStart")
.Drop("OnRoleDrop")
.DragEnd("OnDragEnd")
.Expand("OnRoleExpand"))
HI,
I am displaying 80 records on a bar chart and when the renders on the screen, all the labels on the category axis are squashed together.
Is there a way of only displaying the 5th label?
The code i have tried is:
@(Html.Kendo().Chart()
.Name(
"string-battery-chart"
)
.Title(
"BATTERY VOLTAGES"
)
.Theme(
"moonlight"
)
.Legend(legend => legend.Visible(
false
))
.ChartArea(ch => ch.Height(300).Background(
"transparent"
))
.DataSource(ds => ds.Read(read => read.Action(
"BatteryVoltageChartData"
,
"STRING"
)))
.Series(series =>
{
series.Column(
"Value"
).CategoryField(
"BatteryNumber"
).Name(
"Volts [V]"
).Color(
"#0099ff"
);
series.Line(
"Value"
).CategoryField(
"BatteryNumber"
);
})
.CategoryAxis(axis => axis.Title(
"Battery Number"
).MajorTicks(ticks => ticks.Skip(4).Step(5)))
.ValueAxis(axis => axis.Numeric(
"Value"
).Title(
"Volts"
).Labels(lab => lab.Format(
"{0}V"
)))
.Tooltip(t => t.Visible(
true
).Template(
"Battery ${category}: ${value} V"
))
.Transitions(
false
)
.Events(e => e.Zoom(
"onZoom"
))
.Events(e => e.Drag(
"onDrag"
))
.Events(e => e.DragEnd(
"onDragEnd"
))
)
Can anyone help please?
Thanks
Scott
Hi Guys,
I have a custom button in a nested grid. I want when the user clicks the button to download a file saved in my database and save it to the local disk.
Whats the best approach? And could you provide a sample of how to call the controller action for download, how to pass ASSIGNMENT_DOCUMENT_ID, and after returning the file from the controller to ask the user where to save it? Not sure how to do post and get or do I need to do a get with the custom button..
Here is my nested grid:
@using PartnerLink.Models
@using Telerik.OpenAccess.SPI
@model Tuple<
TBL_ASSIGNMENT
, IQueryable<TBL_ASSIGNMENT_EXPENDITURE_VALUE>, IQueryable<
TBL_ASSIGNMENT_INCOME_VALUE
>, IQueryable<
TBL_ASSIGNMENT_VEHICLE
>>
<
div
style
=
"height:500px"
>
@(Html.Kendo().Grid<
AssignmentDocTypesExt
>()
.Name("gridCaseDocuments")
.Columns(columns =>
{
columns.Bound(p => p.ASSIGNMENT_DOCUMENT_TYPE_ID).Hidden(true);
columns.Bound(p => p.ASSIGNMENT_ID).Hidden(true);
columns.Bound(p => p.DOCUMENT_TYPE_ID).Hidden(true);
columns.Bound(p => p.WHICH_APPLICANT).Hidden(true);
columns.Bound(p => p.DOCUMENT_TYPE_STATUS_ID).Hidden(true);
columns.Bound(p => p.CREDITOR_ID).Hidden(true);
columns.Bound(p => p.numOfUploadedFiles).Hidden(true);
columns.Bound(p => p.documentDescription).Title("Document").Width(350);
columns.Bound(p => p.whichApplicant).Title("Applicant").Width(100);
columns.Bound(p => p.documentTypeStatusDescription).Title("Type Status").Width(200);
columns.Bound(p => p.COMPLETE_FLAG).Title("Complete").ClientTemplate("<
input
type
=
'checkbox'
#= COMPLETE_FLAG ?
checked
=
'checked'
:'' # disabled />").Width(90);
columns.Bound(p => p.autoCompleteOnUpload).Title("Auto Complete").ClientTemplate("<
input
type
=
'checkbox'
#= autoCompleteOnUpload ?
checked
=
'checked'
:'' # disabled />").Hidden(true);
columns.Command(command => { command.Edit().Text("Upload"); }).Width(230);
})
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ClientDocumentUpload").Window(w => w.Events(e => e.Close("onCloseClientDocumentUpload"))))
.Sortable()
.Scrollable()
.ClientDetailTemplateId("gridCaseDocumentsDetails")
.Pageable(pager => pager.Refresh(true))
.Resizable(resize => resize.Columns(true))
.HtmlAttributes(new { style = "height:500px;" })
.Events(clientEvents => clientEvents.DataBound("onRowDataBoundgridCaseDocuments"))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("error_handlerCaseDocuments"))
.Model(model => model.Id(p => p.ASSIGNMENT_DOCUMENT_TYPE_ID))
.Read(read => read.Action("CaseDocuments_Read", "Home", new { id = Model.Item1.ASSIGNMENT_ID }))
.Update(update => update.Action("CaseDocuments_Update", "Home"))
)
)
</
div
>
<
script
id
=
"gridCaseDocumentsDetails"
type
=
"text/kendo-tmpl"
>
@(Html.Kendo().Grid<
ClientDocumentsExt
>()
.Name("gridCaseDocuments_#=ASSIGNMENT_DOCUMENT_TYPE_ID#")
.Columns(columns =>
{
columns.Bound(m=>m.ASSIGNMENT_DOCUMENT_ID).Hidden(true);
columns.Bound(m => m.FILE_NAME).Title("File Name");
columns.Bound(m => m.uploadedBy).Title("Uploaded By").Width(210);
columns.Bound(m => m.DATE_CREATED).Title("Upload Date").Format("{0:dd/MM/yyyy}").Width(110);
columns.Command(c => c.Custom("Download").Click("onClickDownloadClientDoc")).Width(110);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Model(model => model.Id(m => m.ASSIGNMENT_DOCUMENT_ID))
.Read(read => read.Action("gridCaseDocumentsDetails_Read", "Home", new { id = "#=ASSIGNMENT_DOCUMENT_TYPE_ID#" }))
)
.Pageable(pager => pager.Refresh(true))
.Sortable()
.Scrollable()
.ToClientTemplate()
)
</
script
>
<
script
type
=
"text/javascript"
>
function error_handlerCaseDocuments(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
}
}
$("#gridCaseDocuments").find(".k-grid-content").height(421);
function onClickDownloadClientDoc(e)
{
alert(e.ASSIGNMENT_DOCUMENT_ID);
}
function onRowDataBoundgridCaseDocuments(e) {
var grid = $("#gridCaseDocuments").data("kendoGrid");
var gridData = grid.dataSource.view();
for (var i = 0; i <
gridData.length
; i++) {
var
currentUid
=
gridData
[i].uid;
if (gridData[i].COMPLETE_FLAG) {
var
currenRow
=
grid
.table.find("tr[
data-uid
=
'" + currentUid + "'
]");
$(currenRow).css("background-color", "rgb(164,198,57)");
} else if (gridData[i].numOfUploadedFiles > 0)
{
var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
$(currenRow).css("background-color", "rgb(255,191,0)");
}
}
}
function onCloseClientDocumentUpload()
{
alert("onCloseClientDocumentUpload");
}
</
script
>
Hello,
What I am trying to achieve is add a placeholder in a dropdownlist that will display the binded model's property. When trying to use DisplayTextFor in the OptionLabel, I get "undefined" first option in the DropDownList. Is there a way to achieve this? I don't want to hardcode the OptionLabel.
Thanks
When I build a server bound grid with a pager and you click to go to the next page, it returns you to the top of the page (full page refresh). With an ajax grid, it keeps you at the same location on the page that you were on originally. This is not unexpected behavior, but is there a way to get around it?
Thanks!
Laurie
@(Html.Kendo().TabStrip()
.Name("tabstrip1")
.Items(tabstrip =>
{
tabstrip.Add().Text("Customer Information")
.Content(@<
div
>
@using (Ajax.BeginForm("AddData", "Customer", new AjaxOptions { HttpMethod = "post" }))
{
<
input
type
=
"button"
class
=
"k-button"
value
=
"Submit"
onclick
=
"checkValues()"
/>
}
</
div
>
);
})
)
@(Html.Kendo().TabStrip()
.Name("tabstrip2")
.Items(tabstrip =>
{
tabstrip.Add().Text("Customer Information")
.Content(@<
div
>
<
form
action
=
"/Customer/AddData"
data-ajax
=
"true"
data-ajax-method
=
"post"
id
=
"form0"
method
=
"post"
novalidate
=
"novalidate"
>
<
input
type
=
"button"
class
=
"k-button"
value
=
"Submit"
onclick
=
"checkValues()"
/>
</
form
>
</
div
>
);
})
)
@model PASS.ViewModels.Proposals.UpdateViewModel
@{
ViewBag.Title = "My Proposal";
}
<
h2
>My Proposal</
h2
>
@(Html.Kendo().TabStrip()
.Name("tsProposal")
.SelectedIndex(0)
.Items(items =>
{
items.Add().Text("General").LoadContentFrom("_General", "Proposals", new { proposalID = Model.ID });
items.Add().Text("Required Information").LoadContentFrom("_Required", "Proposals", new { proposalID = Model.ID });
items.Add().Text("Associates").LoadContentFrom("_Experimenters", "Proposals", new { proposalID = Model.ID });
items.Add().Text("Research").LoadContentFrom("_Questions", "Proposals", new { proposalID = Model.ID });
items.Add().Text("Attachments").LoadContentFrom("_Attachments", "Proposals", new { proposalID = Model.ID });
items.Add().Text("Time Request").LoadContentFrom("_TimeRequests", "Proposals", new { proposalID = Model.ID });
items.Add().Text("Errors").LoadContentFrom("_Errors", "Proposals", new { proposalID = Model.ID });
})
)
<
script
type
=
"text/javascript"
>
$(document).ready(function () {
var errorCount = @Html.Raw(Json.Encode(Model.Error_Count));
var tabStrip = $("#tsProposal").data("kendoTabStrip");
if (errorCount == 0) {
$(tabStrip.items()[6]).attr("style", "display:none");
}
tabStrip.tabGroup.on('click', 'li', function (e) {
tabStrip.reload($(this));
});
})
</
script
>
@model PASS.ViewModels.Proposals.GeneralViewModel
@using (Ajax.BeginForm("_General", "Proposals", new AjaxOptions { UpdateTargetId = "generalReturnMsg", HttpMethod = "Post" }))
{
@Html.HiddenFor(model => model.Proposal_ID, Model.Proposal_ID)
<
div
class
=
"editor-container"
>
<
div
class
=
"editor-label"
>
@Html.Label("Title:")
</
div
>
<
div
class
=
"editor-field"
>
@Html.TextBoxFor(model => model.Title, new { style = "width: 350px;" })
@Html.ValidationMessageFor(model => model.Title)
</
div
>
<
br
class
=
"clear"
/>
<
br
/>
<
div
class
=
"editor-label"
>
@Html.Label("Total hours requested for LIFE of the proposal")
</
div
>
<
div
class
=
"editor-field"
>
@Html.TextBoxFor(model => model.Total_Hours_Requested)
@Html.ValidationMessageFor(model => model.Total_Hours_Requested)
</
div
>
<
br
class
=
"clear"
/>
<
br
/>
<
br
/>
<
p
><
input
type
=
"submit"
value
=
"Save"
/></
p
>
<
div
id
=
"generalReturnMsg"
></
div
>
</
div
>
}
I can't seem to find any examples of adding a menu item to a splitbutton in a toolbar.
Here is the code I have for the splitbutton:
$("#toolbar").kendoToolBar({
items: [
{
type: "splitButton",
text: "Select",
id: "selectButton",
click: selectButtonClickHandler,
menuButtons: [
{ text: "foo1" },
{ text: "foo2" }
]
}
]
});
I'm trying to do something like $("#selectButton").add(new menuButton("foo3"));
Is there a way to do this? How have I missed it in the documentation?