Questions on UI for ASP.NET MVC Forum

2 answers

342 views

In my model I have a nullable foreign key (DocumentCausalID) and the foreign object (DocumentCausal).

I'm using the default "GridForeignKey" editor template to choose the value using the DropDownList.

I've edited the default "GridForeignKey" adding the OptionLabel so I can choose a null value.

When I select the null value it update the row correctly, but the next time if I select a not-null value on the same row it doesn't work: it doesn't enter into the Update function of my controller.

Can you help me? (I've attached my Model, View and the Editor Template)

Thank you

Grid

answered on 17 Jul 2015

1 answer

158 views

Bind to dynamic SQL?

Is there a way to bind the Grid to the results from a ADO.net reader without converting each row into a POCO object? We are trying to figure a way of allowing the end-users to add data from sql joins to the grid's data. So for example:

We have 3 tables: Parents, Students, Grades. A student can have multiple Parents (1..n) and multiple Grades (1..n). The default grid view should show only Students records but should allow the end user to add Parents to the grid so that each row shows parent/student combination.

Grid

answered on 17 Jul 2015

9 answers

2.5K+ views

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

398 views

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

274 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

107 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

135 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

560 views

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

430 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

100 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