Questions on UI for ASP.NET MVC Forum

2 answers

1.4K+ 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.8K+ 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

436 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

493 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

3 answers

209 views

[Solved] Serve different format video to different browsers

Hello,

When using the standard HTML5 <video> tag, one can list various formats of the same video e.g. .webm, .mp4 and the browser will work down the list and take the first one it supports or render the text line following the files if nothing is supported.

<video controls width="640" height="360">

<source src="~/Content/video/intro_20170825.webm" type="video/webm"></source>

<source src="~/Content/video/intro_20170825.mp4" type="video/mp4"></source>

<p>Your browser doesn't support video. Please use IE9+, Firefox, Chrome, Opera or Safari.</p>

</video>

How can I achieve the same result with Media Player control?

I can serve up files in various qualities (e.g. 480p, 720p) but it always takes the first file in the list no matter what (and does not display in IE11).

@(Html.Kendo().MediaPlayer()

.Name("mediaplayer1")

.AutoPlay(true)

.HtmlAttributes(new { style = "height:360px; width:640px" })

.Media(m => m

.Title("Power Vision Mobile Platform")

.Source(new[] {

new { quality = "720p", url = "../Content/Video/intro_20170825.webm" }

})

)

.Media(m => m

.Title("Power Vision Mobile Platform")

.Source(new[] {

new { quality = "720p", url = "../Content/Video/intro_20170825.mp4" }

})

)

I've also tried having one .Media block with both files listed in the .Source array, but still it only takes the first one. We prefer to serve up .webm file as default and keep the .mp4 around for Internet Explorer users.

Thanks in advance for any suggestions,

Rob

MediaPlayer

answered on 04 Sep 2017

3 answers

350 views

Autocomplete popup position wrong in Firefox when page is scrolled

Hi! i have a serious problem with kendo ui autocomplete in my mvc cshtml page. With Chrome or Edge all work fine, but with Firefox i have a position problem with the autocomplete popup. If i load page and not scroll page, the position of autocomplete popup is correct, but when i scroll page the position become wrong as if the distance of the popup is calculate on the viewport and not on the body page.

Below the image.

AutoComplete

answered on 04 Sep 2017

5 answers

2.3K+ views

ToolTip hover Grid

Hello everybody. I have a question. As I can run a tooltip in the following code grid? the idea is to show me where I positioned the field.
Thank you!

@(Html.Kendo().Grid<ControlGAS.DataAccess.Entities.Customer>()

.Name("GridCustomers")

.Columns(columns =>

{

columns.Bound(customer => customer.Id).Title("ID").Filterable(f => f.UI("filterById")).HtmlAttributes(new { @style = "white-space: nowrap;"});

columns.Bound(customer => customer.Denomination).Title("Nombre").Filterable(f => f.UI("filterByName")).HtmlAttributes(new { @style = "white-space: nowrap;"});

columns.Bound(customer => customer.Code).Title("Codigo").Filterable(f => f.UI("filterByCode")).HtmlAttributes(new { @style = "white-space: nowrap;"});

columns.Bound(customer => customer.Address).Title("Direccion").Filterable(f => f.UI("filterByAddress")).HtmlAttributes(new { @style = "white-space: nowrap;"});

columns.Bound(customer => customer.City).Title("Ciudad").Filterable(f => f.UI("filterByCity")).HtmlAttributes(new { @style = "white-space: nowrap;"});

columns.Bound(customer => customer.FiscalIdentification).Title("Identificacion Fiscal").Filterable(f => f.UI("filterByFiscalId")).HtmlAttributes(new { @style = "white-space: nowrap;"});

columns.Template(customer => { }).ClientTemplate(

"<a href=" + quote + @Url.Action("Editing", "Customer", new { customerId = "#=Id#" }) + quote + "><i class='font-size-20 icon md-edit margin-right-10' aria-hidden='true'></i></a>" + "" +

"<a href=" + quote + @Url.Action("Editing", "Customer", new { customerId = "#=Id#" }) + quote + "><i class='font-size-20 icon md-delete margin-right-10' aria-hidden='true'></i></a>")

.Title("Actions").Width(100);

})

.Scrollable()

.Sortable()

.Groupable()

.Pageable()

.DataSource(

dataSource => dataSource

.Ajax()

.Read(read => read.Action("GetCustomers", "Customer"))

)

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

.ClientDetailTemplateId("master")

.Filterable(filter => filter.Mode(GridFilterMode.Row)

.Extra(false)

.Operators(operators => operators

.ForString(str => str.Clear()

.StartsWith("Empieza con")

.IsEqualTo("Igual a")

.IsNotEqualTo("No es igual a")

)

.ForNumber(num => num.Clear()

.IsEqualTo("Es igual a")

.IsNotEqualTo("Distindo de")

.IsNull("Vacio")

.IsLessThan("Menor a")

.IsGreaterThan("Mayor a"))

)

.Events(events => events.DataBound("dataBound"))

)

ToolTip

answered on 04 Sep 2017

2 answers

404 views

Async tooltip using JSON and kendo.template

Hi, currently I am doing the following to get some tooltip information on a grid row:

$("#gridPop").kendoTooltip({
filter: 'td:nth-child(10)',
content: function (e) {
var template = kendo.template($("#myToolTipTemplate").html());
var dataItem = $("#grid").data("kendoGrid").dataItem(e.target.closest("tr"));
var tooltipHtml;
$.ajax({
url: DetailsURL + "/" + dataItem.Id,
async: false
}).done(function (data) { // data is a JSON object from the server with details for the row
if (data.Success) {
data.Result = data.Result.replace(/null/g, "\"N/A\"");
tooltipHtml = template($.parseJSON(data.Result));
} else {
tooltipHtml = "Ooops!<br>Something went wrong (" + data.Result + ")";
}
});
return tooltipHtml;
}
});

I would like to get rid of the synchronous ajax call and make it asynchronous. I saw some asynchronous examples where the server delivers the full html, but nothing that works with JSON data from the server, that is then "compiled" via a kendo.template() to html on the client. Any suggestions how to do this?

ToolTip

answered on 01 Sep 2017

2 answers

402 views

[Solved] MVVM now storing item as "[Object, object]" instead of the object

Kendo updated with our last Sitefinity update, and previous to now it always stored the selected item in the list to the MVVM model. However in the current version it seems to just store literally as the string "[Object, object]"

I've tried setting data-value-primitive to true\false, no change either way.

<select class="schedules form-control"

data-bind="source: schedule, value: location.schedule, events: { change: onScheduleChange }, visible: hasScheduleItems"

data-text-field="StartDateFormatted"

data-value-primitive="false"

data-role="dropdownlist"

data-option-label="Select a schedule entry"

style="width: 100%; max-width: 300px">

</select>

DropDownList

answered on 31 Aug 2017

7 answers

2.4K+ views

Kendo Grid inline dropdownlist shows ValueField After Edit instead of TextField

I have a Kendo Grid with drop-down lists for in-line update.When i am in edit mode, the drop-down list text fields are displayed. But after i save, the value of the selected items are displayed in the grid instead of the text fields. I am using EditorTemplateName for displaying the drop-down lists in the grid.Can you please help me find what is wrong and help me correct this issue.

I have uploaded a copy of the code and 2 images. Thanks for the help

Grid

answered on 30 Aug 2017