Questions on UI for ASP.NET MVC Forum

1 answer

374 views

Multiple clicks on "Save" button in Scheduler Editor popup result in multiple appointments created in Database

I was able to reproduce this problem in your online demo page:

https://demos.telerik.com/aspnet-mvc/scheduler

When clicked on "Save" button multiple times, duplicate calendar entries are created in database. How to prevent that?

Screenshot attached.

Scheduler

answered on 07 Sep 2017

4 answers

379 views

[Solved] Remove entries in dropdown lists

Hello Support Team,

I implemented the scheduler in a mvc project with razor views.

Whats the recommended way to remove entries from the dropdown lists on the editing form? For example: I'd like to remove the option "Yearly" in the "Repeat" dropdownlist and some options in the "repeat on" dropdownlist (day, weekday, weekend day).

Many thanks for your help.

Regards,

David

Scheduler

answered on 07 Sep 2017

3 answers

2.5K+ views

Remove Time/TimePicker from Grid

I have a kendo grid that has 3 dates. The user only cares about the actual date and not the time so I format the date as "MM/DD/YYYY" for what displays. My issues is when the user clicks into on of the fields to edit, say "CollegeDeadline" they see "12:00 AM" in the date field as well as the time picker because the value stored in the database is obviously a DateTime field. I want to remove the 12:00 AM and time picker as its useless to the user and confuses them. I have been searching the past few days and cannot find a clear cut example of removing these items from a grid. Is there anyway to accomplish this?

@(Html.Kendo().Grid(Model.Progress.PlansProgress)

.Name("PlanProgressGrid")

.Columns(columns => {

columns.Bound(p => p.CollegeName);

columns.ForeignKey(p => p.ApplicationMilestoneType, Model.Progress.TypeCategories, "CategoryID", "CategoryName")

.Title("Milestone Type");

columns.Bound(p => p.ApplicationMilestone);

columns.Bound(p => p.CollegeDeadline).Format("{0:MM/dd/yyyy}");

columns.Bound(p => p.StudentDeadline).Format("{0:MM/dd/yyyy}");

columns.ForeignKey(p => p.MilestoneStatus, Model.Progress.StatusCategories, "CategoryID", "CategoryName")

.Title("Status");

columns.Bound(p => p.StatusUpdated).Format("{0:MM/dd/yyyy}");

})

.ToolBar(toolbar =>

{

toolbar.Save();

})

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

.Groupable()

.Sortable()

.Scrollable()

.Reorderable(reorder => reorder.Columns(true))

.Resizable(resize => resize.Columns(true))

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.ServerOperation(false)

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

.Model(model =>

{

model.Id(p => p.ID);

model.Field(p => p.CollegeName).Editable(false);

model.Field(p => p.ApplicationMilestoneType).Editable(false);

model.Field(p => p.ApplicationMilestone).Editable(false);

})

.Update("Editing_Update", "Applications")

)

Grid

answered on 07 Sep 2017

2 answers

817 views

[Solved] Select all button in MultiSelectFor using ".bindto"

I have a kendo grid with some custom editors, one is a multiselect. I have a cshtml file for the editor that looks like so:

@model IEnumerable<ManageSitesInTemplateViewModel>

@(Html.Kendo().MultiSelectFor(m => m)

.AutoClose(false)

.DataTextField("SiteName")

.DataValueField("SiteId")

.BindTo((IEnumerable<ManageSitesInTemplateViewModel>)ViewData["sites"])

)

It uses the "bindto" which is data gotten from ViewData that is created when the page is requested. Everything works fine just as it should, no problems there. The problem is I have been trying to implement a "select/deselect all" button using various implementations to no avail. I have a suspicion that it's because I use "bindto". This is some of the examples I have tried:
https://stackoverflow.com/questions/28207667/how-can-we-implement-select-all-option-in-kendo-multiselectfor
http://docs.telerik.com/kendo-ui/controls/editors/multiselect/how-to/selection/select-deselect-all-items
http://www.telerik.com/forums/select-all-items-after-data-is-read
I can get the button to select everything correctly, but when everything is selected and I try to save the entry on the grid, the action is not fired. Nothing happens and the selection resets. Still works if I select manually.
What is going on? Full code for the custom editor:

@model IEnumerable<ManageSitesInTemplateViewModel>

@(Html.Kendo().MultiSelectFor(m => m)

.AutoClose(false)

.DataTextField("SiteName")

.DataValueField("SiteId")

.BindTo((IEnumerable<ManageSitesInTemplateViewModel>)ViewData["sites"])

)

<button class="k-button" id="selectall123">Select All</button>

<script type="text/javascript">

$(document).ready(function () {

$("#selectall123").on('click', function (e) {

e.preventDefault();

var multiselect = $('#Sites').data("kendoMultiSelect");

var all = $.map(multiselect.dataSource.data(), function (dataItem) {

return dataItem.SiteId;

});

multiselect.value(all);

});

</script>

MultiSelect

answered on 07 Sep 2017

4 answers

707 views

Chart SeriesClick to filter a Kendo Grid

I'm trying to make my chart interactive by displaying data in a Kendo Grid based on clicking on a data point from a Kendo Chart,

I have a working chart and it's event is connected to a seriesclick which currently is tied to a kendoConsole.Log. I would like to hide the grid and display it filtered when a data point is clicked and refilter if another is clicked. Is this possible? If so how do you do it?

Thanks!

Chart

answered on 07 Sep 2017

6 answers

279 views

Can't Delete from Grid Row

I've been struggling with deleting a record from a grid view all weekend. I could really use some assistance.

Below is my code:

01.var documentDataSource = new kendo.data.DataSource({

02. transport: {

03. read: { url: "/api/MedicalNecessityReviewAPI/GetDocumentsByAuthID", data: function () { return []; } }

04. , create: { url: "/api/MedicalNecessityReviewAPI/AddDocument", data: function () { return []; } }

05. , delete: {

06. url: '/api/MedicalNecessityReviewAPI/DeleteMedReviewDocument'

07. , data: { DocID: $("DocID").val(), UserID: $("UserID").val() }

08. , dataType: "jsonp"

09. , type: "GET"

10. }

11. , dataType: "jsonp"

12.

13. , parameterMap: function (options, operation) {

14. if (operation !== "read" && options.models) {

15. return { models: kendo.stringify(options.models) };

16. }

17. }

18. }

19. , serverPaging: false

20. , serverSorting: false

21. , serverFiltering: false

22. , pageSize: 25

23. , schema: {

24. // total is returned in the "total" field of the response;

25. total: "total"

26. , data: "results"

27. }

28.});

29.

30.// search results kendo grid

31.$("#documentGrid").kendoGrid({

32. autoBind: true

33. , height: 400

34. , sortable: false

35. , pageable: { buttonCount: 5 }

36. , filterable: false

37. , selectable: false

38. , columnMenu: false

39. , noRecords: { template: kendo.template($("#EmptyGridMessage").html()) }

40. , columns: [

41. { field: "originalFilename", title: "File Name", width: "60%" }

42. , { field: "lastUpdatedDate", title: "Uploaded Date", template: "#= kendo.toString(kendo.parseDate(lastUpdatedDate, 'yyyy-MM-dd'), 'MM/dd/yyyy') #" }

43.

//, { field: "docId", title: "DocId" }, { field: "authId", title: "AuthId" }, { field: "docData", title: "DocData" }, { field: "docExtension", title: "DocExtension" }, { field: "deleted", title: "Deleted" }, { field: "userId", title: "UserId" }

44. , { command: ["Delete"], title: " ", width: "100px" }

45. ]

46. , dataSource: documentDataSource,

47.});

Any assistance would appreciated!

Grid

answered on 07 Sep 2017

2 answers

120 views

Grid Columns Not Resizble on small devices

All the grids in our application should have resizable columns.On large/medium windows they functions good but when i resize the windows smaller than 1024px , the columns resize doesn't work anymore.Where can the problem come from? Is there a possible solution?

Grid

answered on 07 Sep 2017

9 answers

171 views

[Solved] DDL not reflecting changes in controller

I have a complex solution where I need to change values of DDLs from the controller.

Although I can get the inital values set - changes made by a post do not change the DDL selections.

My Code:

public class HomeController : Controller {

public class ConfigEntryLine {

public long ItemID { get; set; }

public string ItemText { get; set; }

public ConfigEntryLine() { }

public ConfigEntryLine(long pItemIDVal, string pItemText) {

ItemID = pItemIDVal;

ItemText = pItemText;

}

public class ConfigElement {

public long ElementID { get; set; }

public long SelectedID { get; set; }

public List<ConfigEntryLine> Lines { get; set; }

public ConfigElement() {

Lines = new List<ConfigEntryLine>();

}

public static ConfigElement CreateElement(long pInitID) {

ConfigElement ceRet = new ConfigElement();

ceRet.ElementID = pInitID;

if(pInitID == 1) {

for(int nX = 1; nX < 5; nX++) {

ceRet.Lines.Add(new ConfigEntryLine(nX, $"Outer Val: {nX}"));

}

ceRet.SelectedID = 2;

}

else if(pInitID == 2) {

for(int nX = 11; nX < 15; nX++) {

ceRet.Lines.Add(new ConfigEntryLine(nX, $"First Val: {nX}"));

}

ceRet.SelectedID = 12;

}

else {

for(int nX = 21; nX < 25; nX++) {

ceRet.Lines.Add(new ConfigEntryLine(nX, $"Second Val: {nX}"));

}

ceRet.SelectedID = 22;

}

return (ceRet);

}

public class ProductConfigurationEntry {

public string ActionName { get; set; }

public string InfoMessage { get; set; }

public ConfigElement OuterElement { get; set; }

public List<ConfigElement> Elements { get; set; }

public ProductConfigurationEntry() {

Elements = new List<ConfigElement>();

}

public static ProductConfigurationEntry CreateEntry() {

ProductConfigurationEntry pceRet = new ProductConfigurationEntry();

pceRet.InfoMessage = "Clear";

pceRet.OuterElement = ConfigElement.CreateElement(1);

pceRet.Elements.Add(ConfigElement.CreateElement(2));

pceRet.Elements.Add(ConfigElement.CreateElement(3));

return (pceRet);

}

[HttpGet]

public ActionResult Index() {

return View(ProductConfigurationEntry.CreateEntry());

}

[HttpPost]

public ActionResult Index(ProductConfigurationEntry pEntry) {

ProductConfigurationEntry pceRet = ProductConfigurationEntry.CreateEntry();

if(pEntry.ActionName == "ONE") { //resend outer made selection - keep first selected on client - change second from default to first

pceRet.InfoMessage = $

"{pEntry.OuterElement.SelectedID}, {pEntry.Elements[0].SelectedID}, {pEntry.Elements[1].SelectedID} resend outer made selection -keep first selected on client - change second from default to first"

;

pceRet.OuterElement.SelectedID = pEntry.OuterElement.SelectedID;

pceRet.Elements[0].SelectedID = pEntry.Elements[0].SelectedID;

pceRet.Elements[1].SelectedID = 21;

}

if(pEntry.ActionName == "TWO") { //set outer to first - set second to last - keep third default

pceRet.InfoMessage = $

"{pEntry.OuterElement.SelectedID}, {pEntry.Elements[0].SelectedID}, {pEntry.Elements[1].SelectedID} set outer to first - set second to first - keep third default"

;

pceRet.OuterElement.SelectedID = 1;

pceRet.Elements[0].SelectedID = 11;

}

return View(pceRet);

}

My View:

@model WebApplication4.Controllers.HomeController.ProductConfigurationEntry

@{

ViewBag.Title = "Home Page";

}

<h2>@Model.InfoMessage</h2>

@Html.ActionLink("Abbrechen", "Index", null, new { @class = "btn btn-success" })

@using(Html.BeginForm()) {

@Html.AntiForgeryToken()

<div class="form-horizontal">

<div class="form-group">

@Html.HiddenFor(model => model.ActionName)

</div>

<div class="form-group">

@(Html.Kendo().DropDownListFor(m => m.OuterElement.SelectedID)

.DataTextField("ItemText")

.DataValueField("ItemID")

.AutoBind(true)

.HtmlAttributes(new { style = "width:280px;font-size:small" })

.ValuePrimitive(true)

.BindTo(Model.OuterElement.Lines)

)

@Model.OuterElement.SelectedID

</div>

<div class="form-group">

<table class="table table-striped table-hover">

@{int nCnt = Model.Elements.Count;}

@for(int nX = 0; nX < nCnt; nX++) {

<tr>

<td class="last-col">

@Html.EditorFor(model => model.Elements[nX], new { htmlAttributes = new { @class = "form-control" } })

@Model.Elements[nX].SelectedID

</td>

</tr>

}

</table>

<div class="form-group" style="margin-right:0px">

<div class="pull-right">

<input id="SubHiddenButton" type="submit" style="display:none" value="Save" name="SubmitButton" />

<input id="SubButton" type="submit" value="Check 1" class="btn btn-success" name="SaveButton" onclick="return SaveData(this)" />

<input type="submit" value="Check 2" class="btn btn-info" name="CancelButton" onclick="return CheckSaveName(this)" />

</div>

}

@section Scripts {

@Scripts.Render("~/bundles/jqueryval")

<script>

function SaveData(theButton) {

$("#ActionName").val("ONE");

$("#SubmitButton").click();

}

function CheckSaveName(theButton) {

$("#ActionName").val("TWO");

$("#SubmitButton").click();

}

</script>

}

My Editor:

@model WebApplication4.Controllers.HomeController.ConfigElement

@Html.HiddenFor(model => model.ElementID)

@(Html.Kendo().DropDownListFor(m => m.SelectedID)

.DataTextField("ItemText")

.DataValueField("ItemID")

.AutoBind(true)

.HtmlAttributes(new { style = "width:280px;font-size:small" })

.ValuePrimitive(true)

.BindTo(Model.Lines)

)

When I Get the page in every DDL the second line is selected - so far so good.

After a post I get the new selected IDs - also correct.

But changing the values on the server an passing back the changed data doesn_t change the selection in the DDLs.

I display the "SelectedID" just to check - and YES this value reflects the changes - only the DDLs stay a their former selection.

Is this a bug - or am I missing something, or?????

DropDownList

answered on 06 Sep 2017

3 answers

1.6K+ views

Validate if file is selected for upload

hello,

i am using Kendo upload control in a form which has many other controls and on submit click in jquery i Need to validate if any file is selected for upload. If no files selected i should Show message. I am trying this

var upload =$(#files").find('kendoUpload');

var len = upload.closest(".k-upload").find(".k-file").length;

if(len === 0){

alert('please select file');

}

doesnt seem to work.

How can i validate in jquery.

Thanks

Anamika

Upload

answered on 06 Sep 2017

2 answers

168 views

[Solved] Reload on Closing Grid without Editing Data

I'm looking for a way to reload my grid's data, when users use the "Update" button to exit out of the popup editor, without having actually edited any data. As far as I can tell, unless a user edits some data before hitting "Update," no event is fired. Is that correct?

I have an odd situation where I need the grid to reload its data even if no data has been edited. Is there a way for me to do that?

Grid

answered on 05 Sep 2017