Questions on UI for ASP.NET MVC Forum

4 answers

154 views

I have an application that needs to support dragging from one TreeView onto another, where items are only copied, not moved.

I can achieve this using the DragStart event on the destination tree, to prevent any dragging from it. I can then identify what node has been dragged to the other tree, cancel the operation with PreventDefault, and then append the node manually (and also update the back0end database). What I can't work out how to stop, is nodes from the source tree being dragged onto other nodes in the source tree (which I want as read only).

This is because the drop event always fires from the source tree, and to find out more about the destination node (i.e. the object ID it was created with etc..) requires a call involving the TreeView's name

e.g.:-

alert($("#Treeview").getKendoTreeView().dataItem(e.dropTarget).id);

As I have two TreeViews on the page, how do identify which treeview the droptarget is on (or even better, just allow the source tree to allow dragging and not dropping?

Thanks

TreeView

answered on 28 May 2015

2 answers

384 views

Grid pop up editor with custom validator not working

Hi there,

I've got a razor page called: ManageNotification.cshtml, inside there's one kendo grid with pop up editor:

@(Html.Kendo().Grid<Ozone.Domain.Notification>()
.Name("gridNotification").Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("AddEditNotification")

In the Script section of this same page, i've got this code to initiate kendoValidator:

$(document).ready(function () {
$("form#NotificationForm").kendoValidator({
rules: {
datecompare: function (input) {
if (input.is("[data-datecompare-msg]") && input.val() != "") {
var startDatetime = $("#dtStart").data("kendoDateTimePicker").value();
var endDatetime = $("#dtEnd").data("kendoDateTimePicker").value();

var startDatetime = kendo.parseDate(startDatetime);

var result = endDatetime >= startDatetime;

return !result;
}
}
}
});
});

The AddEditNotification.cshtml is located in EditorTemplates folder, and it's like this:

<form method="post" action="" role="form" name="NotificationForm" id="NotificationForm">
<div class="form1">
<label>Name:</label>
@Html.TextBoxFor(o => o.Name, new { @class = "control1", @title = "Name is not used" })
</div>
<br />
.....

</form>

My problem is: this line in Script is never hit:
if (input.is("[data-datecompare-msg]") && input.val() != "") {

When I did kendoValidator in a normal form (that is, not in a pop up editor template), everything works fine and the above line will be triggered every time any control in the form is changed. But doesn't seem to work this way here, not even when I click the Update button.

Everything else about the pop up editor is fine.

Anyone has any luck making this work? I've been goolging around for more than 2 hrs now without luck.
I'm on a commercial license and hoping this can be resolved quickly.
Any working example will be much appreciated.

Grid

answered on 28 May 2015

2 answers

91 views

How to dynamically create detailsTemplate script

Hello,

On the demo project:

When I click on Beverages then ...

If I click on Chai menu, I would like to create detailsTemplate to host Chai data.

If I click on Chang menu, I would like to create detailsTemplate to host Chang data.

Please note that the data structure are not the same for all of the menu.

And so on...

Thank you.

SplitView

answered on 27 May 2015

3 answers

73 views

How to change left side Categories title

Hello,

On the demo project:

If I click on Beverages, I would like to change the left side title from Products to Beverages.

If I click on Condiments, I would like to change the left side title from Products to Condiments.

And so on...

Thank you.

SplitView

answered on 27 May 2015

3 answers

139 views

How to highlight selected Item

Hello,

On the demo project:

When I click on Beverages then clicking on Chai menu, I would like the selected menu item to highlight. Also, I would like any of the other menu items to un-highlight whenever a menu item is selected. So only one of the menu items be selected.

Thank you...

SplitView

answered on 27 May 2015

4 answers

218 views

Wrong json date string when in line editing datetime

Hi,

I have a grid in my project and it's giving me problems. In local enviroment when I try to update inline everything works perfect

{"Data":[{"Id":51,"IdEvento":50,"Nombre":"asdfa","Descripcion":"sadfasd","Escuela":"dsdaf","HoraInicio":"\/Date(1432243240000)\/","HoraTermino":"\/Date(1432288800000)\/","Lugar":"dasf","Estatus":true,"Cupo":6,"Inscritos":1}],"Total":1,"AggregateResults":null,"Errors":null}

As you can see the date is correctly set, but when deployd to a Q/A enviroment

{"Data":[{"Id":21,"IdEvento":32,"Nombre":"taller 1","Descripcion":"prueba","Escuela":"Escuela uno","HoraInicio":"\/Date(-62135575200000)\/","HoraTermino":"\/Date(-62135575200000)\/","Lugar":"Lugar uno","Estatus":true,"Cupo":48,"Inscritos":22}],"Total":1,"AggregateResults":null,"Errors":{"HoraInicio":{"errors":["The value \u002701/01/1900 12:30:00 p. m.\u0027 is not valid for HoraInicio."]},"HoraTermino":{"errors":["The value \u002701/01/1900 02:00:00 p. m.\u0027 is not valid for HoraTermino."]}}}

The same escenario now sets the date wrong.

This is the code from my grid:

01.@(Html.Kendo().Grid(Model).Name("Grid").Columns(

02. columns =>

03. {

04. columns.Bound(p => p.IdEvento);

05. columns.Bound(p => p.Nombre);

06. columns.Bound(p => p.Descripcion);

07. columns.Bound(p => p.Escuela);

08. columns.Bound(p => p.HoraInicio).Width(30).Format("{0: dd/MM/yyyy hh:mm tt}");

09. columns.Bound(p => p.HoraTermino).Width(30).Format("{0: dd/MM/yyyy hh:mm tt}");

10. columns.Bound(p => p.Lugar);

11. columns.Bound(p => p.Estatus);

12. columns.Bound(p => p.Cupo);

13. columns.Bound(p => p.Inscritos);

14. columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);

15. })

16. .ToolBar(toolbar =>

17. {

18. toolbar.Create();

19. })

20. .Editable(editable => editable.Mode(GridEditMode.InLine))

21. .Pageable()

22. .DataSource(dataSource => dataSource

23. .Ajax()

24. .PageSize(20)

25. .Events(events =>

26. {

27. events.Error("error_handler");

28. })

29. .Model(model =>

30. {

31. model.Id(p => p.Id);

32. model.Field(p => p.IdEvento).Editable(false).DefaultValue(idEvento);

33. })

34. .Create(update => update.Action("EditingInline_Create", "EditarTaller"))

35. .Update(update => update.Action("EditingInline_Update", "EditarTaller"))

36. .Destroy(update => update.Action("EditingInline_Destroy", "EditarTaller"))

37. )

38.)

Any help will be greatly appreciated, thanks in advanced.

Grid

answered on 27 May 2015

1 answer

372 views

Pass additional parameters to Data method of Mobile Listview

In Listview,I used Data method to passing additional parameters :

.Read(read => read.Action("Products_Read", "ListView").Data("additionalInfo"))

But Mobile Listview not exist Data menthod like Listview.
Please can you show my how to pass addtional parameter in Mobile Listview(MVC) for Read operation and how to handle it in corresponding Controller?

ListView (Mobile)

answered on 27 May 2015

1 answer

308 views

How to identify the ListView is in edit mode

I am using a kendo listview in my project. I have a situation where i need to find out if the listview is in edit mode from jquery on a button click. Unfortunalely i could not find any suitable attribute or property to identify. Please provide me with a suitable solution for the same.

Thanks in advance

ListView

answered on 27 May 2015

1 answer

988 views

Grid Popup edit with cutom template close event

Hi

I have a popup edit template and when I close it I want to refresh the grid.

I used the instructions from here http://www.telerik.com/forums/pop-up-editor-events but there is no Edit event. It doesnt find such an event so I used Deactive. I tried almost all events and none of them will fire my javascript function. Even after I get it to fire I wouldnt know what to use to make the grid to refresh.

Can you please help me what should I use to refresh the grid on popup close. I need to do something like rebind because I need to refresh result from another table and maybe run another javascript function to repaint the rows.

Here is my code:

@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).Title("Files").Width(60);

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.Deactivate("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.Template(@<text></text>).ClientTemplate("<a class='k-button' href='" +

Url.Action("ClientDocs_Download", "Home") +

"/\\#= ASSIGNMENT_DOCUMENT_ID \\#'" +

">Download</a>").Width(110);

columns.Command(c => c.Destroy().Text("Delete")).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#" }))

.Destroy(delete => delete.Action("gridCaseDocumentsDetails_Destroy", "Home"))

)

.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 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", "#40FF00");

} 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>

Grid

answered on 26 May 2015

2 answers

392 views

Series color issue when Binding Chart series to dynamic Data

Hi,

I having an issue with the Chart control. All series columns in the chart are Black but the Legend shows each series with a different color.

@(Html.Kendo().Chart<ViolationsChartModel>()
.Name("ViolationsChart")
.Title("Inspection Results By Year")
.DataSource(ds => ds
.Read(read => read.Action("ViolationsReportChart", "Violations"))
.Group(g => g.Add(v => v.InspectionYear))
.Sort(s => s.Add(v => v.Question))
)
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.Series(series =>
{
series.Column(value => value.InspectionPercent, category => category.Question).Name("${group.value}").CategoryField("Question");
})
.ValueAxis(axis => axis.Numeric()
.Labels(lables => lables.Format("{0:P0}").Visible(true))
)
.CategoryAxis(axis => axis
.Visible(true)
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0:P0}")
.Template("${series.name} - ${category} - ${value}")
)
)

If I add .SeriesColors("#cd1533", "#d43851", "#dc5c71", "#e47f8f", "#eba1ad",...) the Legend shows those colors but chart still shows all series as black.

What am I doing wrong?

Thanks,

Chart

answered on 26 May 2015