Questions on UI for ASP.NET MVC Forum

7 answers

131 views

Im using DropDownList with remote data binding and it works great on Firefox and Chrome, but there is an issue with filtering on Internet Explorer. After few keystrokes it selects top filtered position automatically instead of just filter out unmatching positions.

Code i use:

01.Html.Kendo().DropDownList()

02..Name("DropDown")

03..DataTextField("Text")

04..DataValueField("Value")

05..Filter(FilterType.Contains)

06..DataSource(source =>

07. source.Read(read =>

08. {

09. read.Action("ReadMethod", "Applications");

10. }))

11..Events(e =>

12. {

13. e.Select("onSelect");

14. e.DataBound("onLoad");

15. })

Is there anything that can be done to fix that?

DropDownList

answered on 21 Apr 2017

1 answer

79 views

I have a problem with the following implementation I want to update a dropdownlist in the save event of a grid

@(Html.Kendo().Grid<MasterSuiteMultiPais.Models.SURVEY>()
.Name("grid")
.Columns(columns =>
{......
.Events(events => events.Save("Updateddl"))
....
and this is my function to update

<script type="text/javascript">
function Updateddl() {
$("#encuestas").data('kendoDropDownList').dataSource.read()
or
var cat = $("#encuestas").data("kendoDropDownList");
cat.dataSource.read();
cat.refresh();
}
</script>

but this no have effect the dropdownlist is in the same page an the same controller
this is the DDL i like to update

@(Html.Kendo().DropDownList()
.Name("encuestas")

.HtmlAttributes(new { style = "width:200px" })
.OptionLabel("Seleccione una encuesta...")
.DataTextField("surv_name")
.DataValueField("surv_id")
.Events(e => e.Change("change"))
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetSurvey", "Survey");
});
})
)

Gracias!

Grid

answered on 21 Apr 2017

1 answer

625 views

disable tabstop on non-editable cells in Grid

I have a grid that I'm using batch mode for editing. There are only 1 column in the grid that is editable the rest are editable(false). I want to be able to have tab navigation only stop on those editable cells. I've tried setting the tabindex for the non-editable ones to -1 and that doesn't work. I've tried changing my edit mode to InLine but then nothing is editable.

Thanks

Lee

Grid

answered on 21 Apr 2017

5 answers

686 views

Aggregates with dynamic grouping

Hi all.

In den Kendo UI docs there is a sample which I would like to use with the MVC wrapper.

But I have no idea how to tell a grid column to have aggregates. Like it is done in the docs.

Any ideas?

Kind regards

Bernd

Grid

answered on 21 Apr 2017

1 answer

1.3K+ views

'Kendo.Mvc.UI.Fluent.UploadBuilder' does not contain a definition for 'Validation'

Hi Team,

I am trying to create simple upload section using code shared further down, but it gives me below error saying validation is not defined error.

'Kendo.Mvc.UI.Fluent.UploadBuilder' does not contain a definition for 'Validation' and no extension method 'Validation' accepting a first argument of type 'Kendo.Mvc.UI.Fluent.UploadBuilder' could be found (are you missing a using directive or an assembly reference?)

I tried putting below in view but not fixed, not sure where this method comes from. Do i need to upgrade dll version as of now i am using 2014.3.1119.

@using Kendo.Mvc.Extensions;

Please suggest what i am missing. thanks.

@(Html.Kendo().Upload()

.Name("documentUploader")

.Messages(m => m.Select("Browse").UploadSelectedFiles("Upload"))

.Events(events =>

events.Success("uploadSuccess")

.Complete("uploadComplete")

.Error("onError")

.Upload("uploadClick")

)

.Multiple(false)

.Async(a => a

.Save("UploadDocument", "Document")

.AutoUpload(false)

.SaveField("uploadedDocuments")

)

.Validation(validation => validation.AllowedExtensions(new string[] { ".zip", ".rar" }).MaxFileSize(3145728)))

Upload

answered on 20 Apr 2017

1 answer

524 views

Forcing Synchronous Grid Action to prevent data dropping

Hello,

Is there any way to force a script (javascript/jquery) to wait for the Grid sync to complete?

OR any way to retrieve the grid's model with data so as to perform a last update manually?

Currently due to timing with the async calls:

$("#Grid").data("kendoGrid").saveChanges();

OR

$("#OfficerGrid").data().kendoGrid.dataSource.sync();

There is data-loss when navigating to another page if it is done too soon after these calls are made.

I have setup and stepped through the existing event calls for both the grid (http://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/GridEventBuilder) and datasource (http://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/DataSourceEventBuilder).

All around it seems the DataSource .Sync() event is the last one triggered.

Here is the definition for the Grid:

@(Html.Kendo().Grid<NexusPWI.ViewModels.Wizard.ReportingViewModel>()
.Name("Grid")
.Columns(c =>
{
c.Bound(vm => vm.FirstName).Width(120);
c.ForeignKey(vm => vm.LocationNumber, (System.Collections.IEnumerable)ViewData["LocationsList"], "LocationNumber", "Drop_Text").HtmlAttributes(new { onchange = "triggerDropChange(this);" }).Width(100).Hidden(Model.Locations_ColumnInitHidden);
c.Bound(vm => vm.State).Width(120);
c.Command(command => { command.Destroy(); }).Width(40);
c.Template(@<text></text>);//Blank Column to handle Scrollable variable width so headers do not skew
})
.Scrollable(s => s.Enabled(true).Height("auto"))//Scrollable to control column widths
.ToolBar(toolbar =>
{
toolbar.Template("<div class='col-lg-3'>" +
"<a class='pull-right k-button k-button-icontext k-grid-save-changes' href='javascript:void(0)'><span class='k-icon k-update'></span>Save All</a>" +
"<a class='pull-right k-button k-button-icontext k-grid-add' href='/Wizard/EmployeePayrollRead?EmployeeGrid-mode=insert'><span class='k-icon k-add'></span>Add Row</a>" +
"</div>");
})
.Editable(editable => editable.Mode(GridEditMode.InCell)
.CreateAt(GridInsertRowPosition.Bottom)
)
.Navigatable()
.Pageable()
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Events(events => events.Error("employeeGrid_error")
.RequestEnd("Grid_RequestEnd")
.Change("Grid_Delete")
.Sync("sendEnable")
)
.Model(model => model.Id(vm => vm.PolicyHolderPayroll_EmployeeGridId))
.PageSize(1000)
.Create("EmployeePayrollCreate", "Wizard")
.Read("EmployeePayrollRead", "Wizard")
.Update("EmployeePayrollUpdate", "Wizard")
.Destroy("EmployeePayrollDestroy", "Wizard")
))

With a call to navigate and save:

function save_Grids_n_Move() {
var Grid_save = $("#Grid").data().kendoGrid;
Grid_save.dataSource.sync();

element.closest("form").each(function () {
var form = $(this);
form.attr("action", action);
form.submit();
});
}

</script>

Grid

answered on 19 Apr 2017

2 answers

512 views

[Solved] Read-only editor window

When editing an event that has already occurred and not to recur again, the user should be able to see the Edit window but have everything disabled and read-only for viewing the details of the event but not allowed to make changes or save.

What I have so far is after the logic for determining the event has ended and never to recur again to add the "k-state-disabled" class and set the pointer-events style to none so all controls in the k-edit-form-container are not clickable. This encompasses the entire edit window rather than explicitly disabling each and every control:

function onEdit(e) {

// custom logic...

// if disabling editing then

// * add telerik disabled class to show all controls as disabled

// * set pointer-events style to prevent the controls from being active

if (disableEditing) {

$('.k-edit-form-container').addClass("k-state-disabled").css("pointer-events", "none");

}

The only issue is the k-edit-form-container also includes the save and cancel buttons as well so the only way for the Edit form to be closed is the 'X' in the upper/right. This causes a lot of confusion for our users since they do not initially understand the only way to close the window is the X and they often get "stuck" not knowing how to close it.

Is there a more recommended way to disable the edit window to display read-only and also presenting a "Close" button? I am using a customized template editor.

Scheduler

answered on 18 Apr 2017

5 answers

474 views

Grid won't update or delete

Hi. I'm trying to use the grid to display some data which a user is supposed to change. The problem is that so far I have been unsuccessful in making the grid update/edit or delete, nothing happens when I click the "Save" button. Or when I press enter. It just doesn't hit the controller when I set a break point. If I create or read, it works fine.

To create the project I did the following

Started a new MVC project though the basic asp.net web wizard
Converted to telerik application to UI for ASP.net MVC
Updated all scripts to their newest version
Enabled entity framework migrations with automatic migrations.

My versions are:
* jQuery 1.10.2
* KendoUI 2014.1.415
* Bootstrap 3.0.0.0
* MVC 5.1.0.0

ManageWorkPlacements.cshtml

01.@(Html.Kendo().Grid<WorkPlacementModel>()

02. .Name("Grid")

03. .Columns(columns =>

04. {

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

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

07. columns.Command(command => command.Destroy()).Width(110);

08. })

09. .ToolBar(toolbar =>

10. {

11. toolbar.Create();

12. toolbar.Save();

13. })

14. .Editable(editable => editable.Mode(GridEditMode.InCell))

15. .Pageable()

16. .Navigatable()

17. .Sortable()

18. .Scrollable()

19. .DataSource(dataSource => dataSource

20. .Ajax()

21. .Batch(true)

22. .PageSize(20)

23. .ServerOperation(false)

24. .Events(events => events.Error("error_handler"))

25. .Model(model => model.Id(p => p.Id))

26. .Create("WorkPlacement_Create", "WorkPlacement")

27. .Read("WorkPlacement_Read", "WorkPlacement")

28. .Update("WorkPlacement_Update", "WorkPlacement")

29. .Destroy("WorkPlacement_Destroy", "WorkPlacement")

30. )

31. )

32. <script type="text/javascript">

33. function error_handler(e) {

34. if (e.errors) {

35. var message = "Errors:\n";

36. $.each(e.errors, function (key, value) {

37. if ('errors' in value) {

38. $.each(value.errors, function () {

39. message += this + "\n";

40. });

41. }

42. });

43. alert(message);

44. }

45. }

46. </script>

WorkPlacementController.cs

01.using System;

02.using System.Collections.Generic;

03.using System.Linq;

04.using System.Web;

05.using System.Web.Mvc;

06.using Kendo.Mvc.Extensions;

07.using Kendo.Mvc.UI;

08.using RegistreringMVC.Migrations;

09.using RegistreringMVC.Models;

10.using RegistreringMVC.Services;

11.

12.namespace RegistreringMVC.Controllers

13.{

14. public class WorkPlacementController : Controller

15. {

16. private WorkPlaceService workPlacementService;

17.

18. public WorkPlacementController()

19. {

20. workPlacementService = new WorkPlaceService(new RegistreringEntities());

21. }

22.

23. public ActionResult WorkPlacement_Read([DataSourceRequest] DataSourceRequest request)

24. {

25. return Json(workPlacementService.Read().ToDataSourceResult(request));

26. }

27.

28. [AcceptVerbs(HttpVerbs.Post)]

29. public ActionResult WorkPlacement_Create([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<WorkPlacementModel> workPlacements)

30. {

31. var results = new List<WorkPlacementModel>();

32.

33. if (workPlacements != null && ModelState.IsValid)

34. {

35. foreach (var workPlacement in workPlacements)

36. {

37. workPlacementService.Create(workPlacement);

38. }

39. }

40.

41. return Json(results.ToDataSourceResult(request, ModelState));

42. }

43.

44. [AcceptVerbs(HttpVerbs.Post)]

45. public ActionResult WorkPlacement_Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<WorkPlacementModel> workPlacements)

46. {

47. if (workPlacements != null && ModelState.IsValid)

48. {

49. foreach (var workPlacement in workPlacements)

50. {

51. workPlacementService.Update(workPlacement);

52. }

53. }

54.

55. return Json(workPlacements.ToDataSourceResult(request, ModelState));

56. }

57.

58. [AcceptVerbs(HttpVerbs.Post)]

59. public ActionResult WorkPlacement_Destroy([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<WorkPlacementModel> workPlacements)

60. {

61. if (workPlacements.Any())

62. {

63. foreach (var workPlacement in workPlacements)

64. {

65. workPlacementService.Destroy(workPlacement);

66. }

67. }

68.

69. return Json(workPlacements.ToDataSourceResult(request, ModelState));

70. }

71. }

72.}

The code is taken almost directly from the offline samle (just to make it work). But still it doesn't. I tried remaking the whole project, in case I had changed something without thinking about it. But this does not help either. If you require any further code, please reply and i'll add it.

Thank you
Daniel

Grid

answered on 18 Apr 2017

6 answers

5.7K+ views

how to upgrade to the latest version of kendo ui for mvc

Hello,
i tried to make an upgrade in order to use the tooltip and other new things,or resolved bugs.
but after the upgrade,with the Telerik Control Panel,it was a mess,he only made a backup of my example project,but when i tried to use the tooltip,i noticed that there is no kendo.tooltip.js ,in the /Content folder
i had only /kendo/2012.3.1315 subfolder where are a lot of js files,and the themes,so i have to change manually the reference to the folder where are the new version of files.

the question is what do i need to copy manually in order to use everything from the latest versions of kendo ui for MVC(controls,framework functions,etc) ?
i want to copy everything manually,and work with everything that i had before + the new features.in the real application i do not want to re-create the project from a template,just to put everything togheter nicely.

Regards,
Daniel
P.S:i attach 2 files(the error and the reference section from layout.cshtml) after i copied manually everything from Telerik\Program Files March Q1 2013 to a new subfolder in my project and referenced

Installer and VS Extensions