Questions on UI for ASP.NET MVC Forum

4 answers

627 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

226 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

100 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

133 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

129 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.3K+ 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

1 answer

391 views

Error in Razor View

I created a Telerik asp.net MVC project and have a standard generated razor create from my controller When I try to run the create view I get the following error? the view does not have any controls.

The error below occurs on the HTML.EditorFor
----------create.cshtml--------------
<div class="form-group">
@Html.LabelFor(model => model.NonFoodAllergies, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.NonFoodAllergies, new { htmlAttributes = new { @class = "form-control" } }) --Errors On this
@Html.ValidationMessageFor(model => model.NonFoodAllergies, "", new { @class = "text-danger" })
</div>
</div>

---------------------ERROR--------------------
System.Web.HttpCompileException occurred
HResult=0x80004005
Message=c:\Users\\Source\Workspaces\WebApps\Views\Shared\EditorTemplates\String.cshtml(3): error CS1061: 'System.Web.Mvc.HtmlHelper<object>' does not contain a definition for 'Kendo' and no extension method 'Kendo' accepting a first argument of type 'System.Web.Mvc.HtmlHelper<object>' could be found (are you missing a using directive or an assembly reference?)
Source=System.Web.Mvc
StackTrace:
at System.Web.Mvc.BuildManagerWrapper.System.Web.Mvc.IBuildManager.GetCompiledType(String virtualPath)
at System.Web.Mvc.BuildManagerCompiledView.Render(ViewContext viewContext, TextWriter writer)
at System.Web.Mvc.Html.TemplateHelpers.ExecuteTemplate(HtmlHelper html, ViewDataDictionary viewData, String templateName, DataBoundControlMode mode, GetViewNamesDelegate getViewNames, GetDefaultActionsDelegate getDefaultActions)
at System.Web.Mvc.Html.TemplateHelpers.TemplateHelper(HtmlHelper html, ModelMetadata metadata, String htmlFieldName, String templateName, DataBoundControlMode mode, Object additionalViewData, ExecuteTemplateDelegate executeTemplate)
at System.Web.Mvc.Html.TemplateHelpers.TemplateHelper(HtmlHelper html, ModelMetadata metadata, String htmlFieldName, String templateName, DataBoundControlMode mode, Object additionalViewData)
at System.Web.Mvc.Html.TemplateHelpers.TemplateFor[TContainer,TValue](HtmlHelper`1 html, Expression`1 expression, String templateName, String htmlFieldName, DataBoundControlMode mode, Object additionalViewData, TemplateHelperDelegate templateHelper)
at System.Web.Mvc.Html.TemplateHelpers.TemplateFor[TContainer,TValue](HtmlHelper`1 html, Expression`1 expression, String templateName, String htmlFieldName, DataBoundControlMode mode, Object additionalViewData)
at System.Web.Mvc.Html.EditorExtensions.EditorFor[TModel,TValue](HtmlHelper`1 html, Expression`1 expression, Object additionalViewData)
at ASP._Page_Views_MedicalSelfReport_Create_cshtml.Execute() in c:\Users\\Views\MedicalSelfReport\Create.cshtml:line 31
at System.Web.WebPages.WebPageBase.ExecutePageHierarchy()
at System.Web.Mvc.WebViewPage.ExecutePageHierarchy()
at System.Web.WebPages.StartPage.RunPage()
at System.Web.WebPages.StartPage.ExecutePageHierarchy()
at System.Web.WebPages.WebPageBase.ExecutePageHierarchy(WebPageContext pageContext, TextWriter writer, WebPageRenderingBase startPage)
at System.Web.Mvc.RazorView.RenderView(ViewContext viewContext, TextWriter writer, Object instance)
at System.Web.Mvc.BuildManagerCompiledView.Render(ViewContext viewContext, TextWriter writer)
at System.Web.Mvc.ViewResultBase.ExecuteResult(ControllerContext context)
at System.Web.Mvc.ControllerActionInvoker.InvokeActionResult(ControllerContext controllerContext, ActionResult actionResult)
at System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilterRecursive(IList`1 filters, Int32 filterIndex, ResultExecutingContext preContext, ControllerContext controllerContext, ActionResult actionResult)
at System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilterRecursive(IList`1 filters, Int32 filterIndex, ResultExecutingContext preContext, ControllerContext controllerContext, ActionResult actionResult)

General Discussions

answered on 05 Sep 2017

3 answers

430 views

TreeList conditional filter functionality

We have implemented in grid a conditional filter using 'filterMenuOpen' and 'filter' events of the grid. And it works.
Now we have a page where a hierarchy data needs to be display and must have the same look and feel as the grid, hence the conditional filtering. In order to do this we have modified the treelist in order to have the 'filterMenuOpen' and 'filter' events on tree adapting the code from grid.
We also handled the filter open like in the thread http://www.telerik.com/forums/cascade-filter-using-ajax-binding

But we have found that setting the filter on treelist does not work in the same way as it does for grid:
1. We have a table with Id, MainField, SubField, ParentId => the data is displayed in the treelist correctly
(The SubField has to have the source dynamic based on the MainField selected)
2. Select a filter on MainField => the data is filtered correctly
3. Select a filter on SubField => The datasource of SubField it is correct based on the selected MainField filter value and the filter is done correctly
4. Change the MainField filter and select another value (we have to remove the SubField filter) =>
The TreeList displays changes multiple times and the last one is not the correct one (It displays the same data as the first filter at point 2)

Questions:

1. Is there a way to make the filter functionality work like in grid?

2. Is there a plan to soon release a new version to make the treelist have the same functionality as the grid? If not can we still hope there will be one :D

3. Is there a solution to implement the hierarchy in the grid?

PS: Because we are using MVC and should have the same filtering as the grid we had to attach to the framework the same functionality (as in grid) already supported by the filter (kendoFilterMenu) in treelist.

TreeList

answered on 05 Sep 2017