Questions on UI for ASP.NET MVC Forum

2 answers

1.7K+ views

Switching Button icon using onClick event

Hi There,

i have the following code. I'm wanitng the icon of the button to change eveytime you click the button deppening if the panel has expaneded or not. ("pin" and "unpin").

$("#button").kendoButton({
icon: "pin",
click: function (e) {
$('.UserFavouritesPanel').animate({ width: 'toggle' }, 350);

if ($('.UserFavouritesPanel').width()>1) {
$("#button").kendoButton({
icon: "unpin"
});
} else {
$(".UserFavouritesViewBtn").kendoButton({
icon: "pin"
});
}
}
});

The issue im having is that on the fist click the icon changes to the correct one but after that when you click the button it never changes again until you refresh the screen. Any ideas on why this happens.

Button

answered on 17 Jul 2015

2 answers

374 views

Inline editing nullable foreign key

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

173 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

[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

420 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

293 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

129 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

153 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

579 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

450 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