Questions on UI for ASP.NET MVC Forum

9 answers

2.6K+ views

[Solved] Kendo Grid: How to keep scoll position after calling sync (with Batch property set to true)

We have a Kendo Grid, shows many records with Batch property set to true.
Sync() is called after user modifies data, but then the scroll always moves up to the first row.

$('#grid').data('kendoGrid').dataSource.sync()

How can I prevent the scroll from moving up to the first row?
I have set focus to the current cell by calling, but it doesn't work (from this example: http://dojo.telerik.com/@Alexander/Ezoh/3):

this.current(cell);
grid.table.focus();

Thank you very much in advanced.

Grid

answered on 16 Jul 2015

6 answers

458 views

[Solved] Inline editing validation with drop-down list fails

I've got a grid, which uses in-line editing on the sub-grid for the linked hierarchical data.

When just using a text box, the validation message display, and prevents entry of a blank value, but when I replace it with a drop-down list editor template, the validation fails to fire, causing an error message to be displayed (from the controller) when the record tries to save. This is strange, as when I do similar drop-down lists with pop-up edit forms, the validation works fine.

The grid:-

@(Html.Kendo().Grid<CMS_2013.Models.ApportionmentScenario>()

.Name("Grid")

.Events(e=>e.Edit("onEdit"))

.Columns(columns=>

{

columns.Bound(o => o.ID).Title("ID");

columns.Bound(o => o.FormattedDateTime).Title("Created");

columns.Bound(o => o.ScenarioName).Title("Name");

columns.Bound(o => o.CreatingUser).Title("User");

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

})

.ClientDetailTemplateId("detailsTemplate")

.ToolBar(commands=>commands.Create())

.Editable(editable=>editable

.Mode(GridEditMode.PopUp))

.DataSource(dataSource=>dataSource

.Ajax()

.Model(m=>m.Id(p=>p.ID))

.Events(events => events.Error("error"))

.PageSize(10)

.Read(read=>read.Action("ReadScenarios","Apportionment"))

.Create(create=>create.Action("InsertScenario","Apportionment"))

.Update(update=>update.Action("UpdateScenario","Apportionment"))

.Destroy(delete=>delete.Action("DeleteScenario","Apportionment"))

)

.Pageable()

.Sortable()

.Filterable()

)

</div>

<script id="detailsTemplate" type="text/kendo-tmpl">

@(Html.Kendo().Grid<CMS_2013.Models.ApportionmentData>()

.Name("Data_#=ID#")

.Columns(columns=>

{

columns.Bound(o => o.FormattedDateTime).Title("Date");

columns.Bound(o => o.Purchaser).Title("Purchaser");

columns.Bound(o => o.Apportionment);

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

})

.ToolBar(commands=>commands.Create())

.Editable(editable=>editable

.Mode(GridEditMode.InLine))

.DataSource(dataSource=>dataSource

.Ajax()

.Model(m=>m.Id(p=>p.ID))

.Events(events => events.Error("error"))

.PageSize(10)

.Read(read=>read.Action("ReadData","Apportionment", new { SID = "#= ID #" }))

.Create(create=>create.Action("InsertData","Apportionment", new { SID = "#= ID #" }))

.Update(update=>update.Action("UpdateData","Apportionment"))

.Destroy(delete=>delete.Action("DeleteData","Apportionment"))

)

.Pageable()

.Sortable()

.ToClientTemplate())

The editor template for the purchaser field (PurchaserEditor.cshtml):-

@(Html.Kendo().DropDownList()

.Name("Purchaser")

.DataTextField("ShortName")

.DataValueField("Purchaser")

.OptionLabel("Choose Purchaser")

.HtmlAttributes(new { style="width:180px;"})

.DataSource(source=>source

.Read(read=>read.Action("GetPurchaserLookUpList2","ManualData"))))

The object meta data:-

public class ApportionmentDataMD

{

[Required, StringLength(6)]

[UIHint("PurchaserEditor")]

public object Purchaser { get; set; }

[Required]

[UIHint("ApportionmentPercent")]

public object Apportionment { get; set; }

}

Thanks

Grid

answered on 16 Jul 2015

3 answers

317 views

Not able to see the kendo editor icon when deployed application on cloude

I have implemented Kendo Editor(MVC) in my application.Its working fine
on the local.But as When I upload my application on Cloude (Windows
Azure) I am not able to see tools ICON images.Please check with attached
Image.
I also Verified with Sprite.png but its exists on Cloude ,Still issue occurs.Here is below my code.

Layout.cshtml :
@Styles.Render("~/bundles/KendoCss")
@Scripts.Render("~/bundles/KendoJs")

Bundle.config :
bundles.Add(new StyleBundle("~/bundles/KendoCss").Include(
                 "~/Styles/Kendo/kendo.common.min.css",
                  "~/Styles/Kendo/kendo.bootstrap.min.css",
                   "~/Styles/Kendo/kendo.dataviz.min.css",
                   "~/Styles/Kendo/kendo.dataviz.default.min.css"
                ));
            bundles.Add(new ScriptBundle("~/bundles/KendoJs").Include(
                  "~/Scripts/Kendo/kendo.all.min.js",
                            "~/Scripts/Kendo/kendo.web.min.js"

Editor.cshtml :
        @(Html.Kendo().EditorFor(m => m.Header)
          .HtmlAttributes(new { style = "width: 100%;height:Auto;" })
                   .Tools(tools => tools
                .Clear()
                .Bold().Italic().Underline().Strikethrough()
                .JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
                .InsertUnorderedList().InsertOrderedList()
                .Outdent().Indent()
                .CreateLink().Unlink()
                .InsertImage()
                .InsertFile()
                .SubScript()
                .SuperScript()
                .TableEditing()
                .ViewHtml()
                .Formatting()
                .FontName()
                .FontSize()
                .FontColor().BackColor()
              )
                      .Encode(false)
        )

Also Please checked with attached folder structure and Output image.

Editor

answered on 16 Jul 2015

1 answer

146 views

Grid line issues with Freeze Pane and Grid Height

Hi

We are using Q2 hot fix release of Telerik Kendo MVC UI Grid controls. We are using Freeze Columns and Fix height of Grid control. With this when grid is not filled with data, we see vertical line. Is there a way to get rid of that line?

Grid

answered on 15 Jul 2015

2 answers

181 views

Grid "auto" height with Header Row Freeze

Hi !!

We are using Telerik Kendo MVC UI Q2 hotfix controls. We want grid with "auto" height but in process of making "auto" height we are loosing header row information. Is there a way header scroll with grid scroll so users never loose site of column headers?

Thanks,

Grid

answered on 15 Jul 2015

6 answers

600 views

[Solved] Everything Works with the exception of Filtering

Hello All!

I have setup a page that uses the Kendo UI Grid (code attached below). Everything seems to be working fine with the exception of filtering. I've looked at the documentation and browsed through the forums, but must have completely missed the answer. Can anyone take a look and offer any help? Thanks for your time in advance!

Brun

chtml code

01.@using (Ajax.BeginForm("AddCurriculum", "Home", new { @personID = ViewBag.UserID }, new AjaxOptions

02.{

03. HttpMethod = "Post",

04. InsertionMode = InsertionMode.Replace,

05. UpdateTargetId = "PersonCurriculum",

06. OnSuccess = "resetAddCurriculum",

07. OnComplete = "closeAddCurriculum"

08.}))

09.{

10. 

11. <div class="modal fade" id="addCurriculum" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">

12. <div class="modal-dialog" style="width: 1500px; height: 600px;">

13. <div class="modal-content">

14. <div class="modal-header">

15. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

16. <h4 class="modal-title">Add Curriculum</h4>

17. </div>

18. <div class="modal-body">

19. @(Html.Kendo().Grid<NCHTraining.Models.CourseSchedule>()

20. .Name("courseSchedules")

21. .Columns(columns =>

22. {

23. columns.Bound(c => c.ID)

24. .ClientTemplate("<button name=\"btnAddCurriculum\" type=\"submit\" class=\"btn btn-primary\" value=\"#=ID#\">Add</button>")

25. .HtmlAttributes(new { style = "text-align:center; width:100px;" })

26. .Title("")

27. .Sortable(false)

28. .Filterable(false);

29. columns.Bound(c => c.Course.Name).Filterable(true);

30. columns.Bound(c => c.StartDateTime)

31. .Format("{0: MM/dd/yyyy}")

32. .HeaderHtmlAttributes(new { style = "text-align:center;" })

33. .HtmlAttributes(new { style = "text-align:center; width:100px;" })

34. .Title("Start Date")

35. .Filterable(false);

36. columns.Bound(c => c.StartDateTime)

37. .Format("{0: hh:mm:ss tt}")

38. .HeaderHtmlAttributes(new { style = "text-align:center;" })

39. .HtmlAttributes(new { style = "text-align:center; width:100px;" })

40. .Title("Start Time")

41. .Sortable(false)

42. .Filterable(false);

43. columns.Bound(c => c.EndDateTime)

44. .Format("{0: hh:mm:ss tt}")

45. .HeaderHtmlAttributes(new { style = "text-align:center;" })

46. .HtmlAttributes(new { style = "text-align:center; width:100px;" })

47. .Title("End Time")

48. .Sortable(false)

49. .Filterable(false);

50. columns.Bound(c => c.AvailableSeats)

51. .HeaderHtmlAttributes(new { style = "text-align:center;" })

52. .HtmlAttributes(new { style = "text-align:center; width:100px;" })

53. .Title("Seats Remaining")

54. .Filterable(false);

55. })

56. .Pageable()

57. .Sortable()

58. .Filterable()

59. .DataSource(dataSource => dataSource

60. .Ajax()

61. .PageSize(10)

62. .Sort(sort => sort.Add("StartDateTime").Ascending())

63. .Read(read => read.Action("GetCourseSchedules", "Home", new { @personID = ViewBag.UserID }))

64. )

65. )

66. </div>

67. <div class="modal-footer">

68. <button id="btnCloseAddCurriculum" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

69. </div>

70. </div>

71. 

72. </div>

73. 

74. </div>

75. 

76.}

77.

78.<script>

79. function resetAddCurriculum(context) {

80. // Get grid, set to page 1, and refresh data

81. var grid = $('#courseSchedules').data('kendoGrid');

82. grid.dataSource.page(1);

83. grid.dataSource.read();

84. }

85.

86. function closeAddCurriculum(context) {

87. // Close modal

88. $('#btnCloseAddCurriculum').click();

89. }

90.</script>

controller code

01.public JsonResult GetCourseSchedules([DataSourceRequest]DataSourceRequest request, int personID)

02. {

03. using (NCHTrainingDataContext db = new NCHTrainingDataContext())

04. {

05. // Get the persons curriculum

06. var personCurriculumIDs = GetPersonCurriculum(personID).Select(pc => pc.CourseScheduleID);

07.

08. // Get the list of available cousre schedules

09. IQueryable<CourseSchedule> courseSchedules = db.CourseSchedule.Where(c => c.StartDateTime > DateTime.Now

10.

&& c.AvailableSeats > 0

11.

&& !personCurriculumIDs.Contains(c.ID))

12.

.Include(c => c.Course)

13.

.Include(c => c.Course.CourseLocation)

14.

.Include(c => c.Course.CourseType);

15.

16. return Json(courseSchedules.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

17. }

18. }

Grid

answered on 15 Jul 2015

1 answer

465 views

Call Select-Method after onChange of Dropdownlist

Hi everybody,

I've the following problem: I tried to add a dropdownlist to a Html.Telerik.Grid in the Toolbar. I did it like this:

01..ToolBar(toolbar =>

02. {

03. toolbar.Template(@<text>

04. <div class="toolbar">

05. @Html.DropDownList("SelectedShopCategoryId",

06. Model.AvaiablePriceLists,new

07. {@onchange="onChange(this.value);"})

08. </div>

09. </text>);

10. }))

Now in the onChange-Event of the DropDownList I want to fire the Select-Command of the grid from this piece of code:

1..DataBinding(dataBinding =>

2. dataBinding.Ajax().Select("ProductList", "Event", new RouteValueDictionary {

3. { "selectedIds", Model.SelectedProductIds } }))

How can I achive this behaviour or how can I call the action in the controller with Javascript/Ajax?

Greetings

Alexander

Grid

answered on 15 Jul 2015

1 answer

133 views

loading existing tree data on-demand and on page load

Hi

This is probably a really dumb question, but can anyone point me to a simple example of how I can automatically select and expand nodes on my tree on page load?

Our tree contains a great deal of data, so we're using load on-demand. I need to create a page that allows users to edit an existing tree, but I can't seem to work out how I can load on-demand only the ticked nodes and their siblings.

TreeView

answered on 15 Jul 2015

2 answers

458 views

Globalization on Kendo grid

Hi,

To allow the user to change the website language, I've added globalization on my grids following the instructions here.

~/Scripts/jquery.min.js

~/Scripts/kendo.all.min.js

~/Scripts/kendo.aspnetmvc.min.js

~/Scripts/cultures/kendo.culture.fr-BE.min.js

The last instruction before the end of head tag is :

<script>

kendo.culture('@culture');

</script>

I checked, all files are included in that order. However the grid messages and date en decimal formats remain in english as you can see in attached screenshots.

Note:

The user can change language on the fly (I've seen solutions using directive <globalization> in web.config. I think I cannot use that)
The language change but the date format must remains the same (comma for decimals and dd/MM/yyyy as date format)

I use editor template to edit grid inline but I cannot format the value that way. Am I missing something ?

Grid

answered on 15 Jul 2015

3 answers

84 views

[Solved] Get rid of colors on the Agenda view

I'm trying to display the Agenda view on the Scheduler without the colors.

I have tried using a custom event template like so (edited for brevity):

Html.Kendo().Scheduler<Project.Models.ViewModel>()
.Name("Scheduler")
.EventTemplate(
"<div class='agenda-template'>" +
"<p>#= title #</p>" +
"</div>"
)

However, this does not get rid of the colors on the Agenda view. Suggestions?

Scheduler

answered on 14 Jul 2015