Questions on UI for ASP.NET MVC Forum

3 answers

78 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

148 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

230 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

381 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

319 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

999 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

400 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