Questions on UI for ASP.NET MVC Forum

3 answers

2.3K+ views

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

721 views

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

601 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

214 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

91 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

127 views

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.4K+ 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

125 views

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

2 answers

1.2K+ views

jQuery.Deferred exception: Cannot read property 'models'

I am unable to get a SignalR grid to update a client properly. When I edit client A I get an update notification in client B, but the grid is not updated.

Chrome reveals some JavaScript errors I am unable to correct:

jQuery.Deferred exception: Cannot read property 'models' of undefined TypeError: Cannot read property 'models' of undefined

at init._accept (https://localhost/MyApp/Scripts/kendo.all.js:6398:49)

at https://localhost/MyApp/Scripts/kendo.all.js:6343:34

at mightThrow (https://localhost/MyApp/Scripts/jquery-3.1.1.js:3570:29)

at process (https://localhost/MyApp/Scripts/jquery-3.1.1.js:3638:12) undefined

.cshtml

@{

ViewBag.Title = "SignalR";

var sessionId = ViewBag.SessionId;

}

@section Header {

@Styles.Render("~/Content/kendo")

}

@section Scripts {

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

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

<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>

}

<script src="@Url.Content("~/Scripts/jquery.signalR-2.2.2.min.js")"></script>

<script src="@Url.Content("~/signalr/hubs")"></script>

<script>

var hub = $.connection.trackerHub;

hub.connection.qs = { "sessionid": "@sessionId" };

hub.client.connected = function () { };

var hubStart = $.connection.hub.start();

</script>

<br />

@(Html.Kendo().Notification()

.Name("notification")

.Width("100%")

.Position(position => position.Top(0).Left(0))

)

@(Html.Kendo().Grid<TrackerJob>()

.Name("Grid")

.Columns(columns => {

columns.Bound(o => o.RoNumber).Title("RO/Arrival").HtmlAttributes(new { @class = "green" }).HeaderHtmlAttributes(new { @class = "green" }).Width(95);

columns.Bound(o => o.IsInStart).Title("START").HtmlAttributes(new { style = "border-bottom-style:dashed;" }).HeaderHtmlAttributes(new { @class = "green" }).Width(110);

// for loop here to create columns with custom headers

columns.Bound(o => o.IsInFinish).Title("FINISH").HtmlAttributes(new { style = "border-left-style:dashed;border-bottom-style:dashed;" }).HeaderHtmlAttributes(new { @class = "green" }).Width(110);

})

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

.DataSource(d => d

.SignalR()

.AutoSync(true)

.Events(events =>

events.Push(

@<text>

function(e) {

var notification = $("#notification").data("kendoNotification");

notification.success(e.type);

}

</text>

)

.PageSize(10)

.Transport(t => t

.Promise("hubStart")

.Hub("hub")

.Client(c => c

.Read("read")

.Create("create")

.Update("update")

.Destroy("destroy")

)

.Server(s => s

.Read("read")

.Create("create")

.Update("update")

.Destroy("destroy")

)

.Schema(schema => schema

.Model(m => {

m.Id(mo => mo.HeaderId);

m.Field(mo => mo.HeaderId).Editable(false);

})

)

Hub:

namespace MyApp.Hubs {

public class TrackerHub : Hub {

private static Object lockObject = new Object();

private List<TrackerJob> jobs;

public TrackerHub() {

jobs = new List<TrackerJob>();

}

public List<TrackerJob> Read() {

var jobsAndSession = CurrentSessions["A"] as JobsAndSession;

return jobsAndSession.Jobs;

}

public void Update(TrackerJob tj) {

var jobsAndSession = CurrentSessions["A"] as JobsAndSession;

var sessionHolder = jobsAndSession.Session;

var departmentCodes = CreateDeptCodesString(tj);

// update remote DB

updateTrackerJob(tj);

Clients.Others.update(tj);

}

public void Destroy(TrackerJob tj) {

}

public TrackerJob Create(TrackerJob tj) {

return new TrackerJob();

}

private void updateTrackerJob(TrackerJob tj) {

var jobsAndSession = CurrentSessions["A"] as JobsAndSession;

List<TrackerJob> updatedJobs = new List<TrackerJob>();

var presentJobs = jobsAndSession.Jobs as List<TrackerJob>;

updatedJobs = presentJobs.Where(o => o.HeaderId != tj.HeaderId).ToList();

updatedJobs.Add(tj);

jobsAndSession.Jobs = updatedJobs;

lock (lockObject) {

CurrentSessions["A"] = jobsAndSession;

}

private string CreateDeptCodesString(TrackerJob tj) {

string codesString = string.Empty;

// generate proper codesString

return codesString;

}

private readonly static ConnectionMapping<SignalRBase> _connections = new ConnectionMapping<SignalRBase>();

public override Task OnConnected() {

_connections.Add(CreateConnectionKey(), Context.ConnectionId);

return base.OnConnected();

}

public override Task OnDisconnected(bool stopCalled) {

_connections.Remove(CreateConnectionKey(), Context.ConnectionId);

return base.OnDisconnected(stopCalled);

}

public override Task OnReconnected() {

if (!_connections.GetConnections(CreateConnectionKey()).Contains(Context.ConnectionId)) {

_connections.Add(CreateConnectionKey(), Context.ConnectionId);

}

return base.OnReconnected();

}

private SignalRBase CreateConnectionKey() {

// create and return connection key object

}

There is some information that needs to be retrieved from Session that I'm filling into an accessible Hashtable in my Controller.

I've tried to mimic the GitHub example here as best as I could, but I've run into a wall.

Apologies if I've left out pertinent information...let me know if there's anything else useful I can provide.

Any suggestions about where I've gone wrong?

Grid

answered on 05 Sep 2017

8 answers

2.7K+ views

How to Pass Additional Data to Create/Update/Destroy Action Method

The documentation at http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/ajax-binding#pass-additional-data-to-the-action-method shows how to pass additional data to the Read action, when asynchronously binding the grid using AJAX.

Is there similar functionality available to other AJAX action methods Create, Update and Destroy? I do not see any mention in the documentation at http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/ajax-editing.

Grid

answered on 05 Sep 2017