Questions on UI for ASP.NET MVC Forum

11 answers

427 views

How does the signalr chart client needs refresh?

ok so I have created a chart, that takes data from a MVC action method and populates a chart, in your example here http://dojo.telerik.com/@tsvetomir/UvON You have autosync set to true, but where is the push coming from? How do I send the updated information? My chart loads Initially but does not change when any of the status' change.

Code for chart:
<script>
var connection = $.hubConnection();
var hub = connection.createHubProxy("centralHub");
connection.logging = true;
var hubPromise = connection.start();

</script>
@{

double[] clockins = new double[5];
double[] breaks = new double[5];
double[] lunch = new double[5];
if (Model != null)
{
foreach (var item in Model)
{
switch (item.SiteName)
{
case "Mabel":
switch (item.TypeName)
{
case "ClockIn":
clockins[0] = item.Count;
break;
case "Break":
breaks[0] = item.Count;
break;
case "Lunch":
lunch[0] = item.Count;
break;
}
break;
case "Harp":
switch (item.TypeName)
{
case "ClockIn":
clockins[1] = item.Count;
break;
case "Break":
breaks[1] = item.Count;
break;
case "Lunch":
lunch[1] = item.Count;
break;
}
break;
case "Pendleton":
switch (item.TypeName)
{
case "ClockIn":
clockins[2] = item.Count;
break;
case "Break":
breaks[2] = item.Count;
break;
case "Lunch":
lunch[2] = item.Count;
break;
}
break;
case "Granite":
switch (item.TypeName)
{
case "ClockIn":
clockins[3] = item.Count;
break;
case "Break":
breaks[3] = item.Count;
break;
case "Lunch":
lunch[3] = item.Count;
break;
}
break;
case "HQ":
switch (item.TypeName)
{
case "ClockIn":
clockins[4] = item.Count;
break;
case "Break":
breaks[4] = item.Count;
break;
case "Lunch":
lunch[4] = item.Count;
break;
}
break;
}
}
}
}
<body>
<div class="k-chart">
@(Html.Kendo().Chart<TcStatusChartData>()
.Name("chart")
.Title("Agents by status")
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.SeriesDefaults(seriesDefaults =>
seriesDefaults.Bar().Stack(ChartStackType.Normal)
)
.Series(series =>
{
series.Column(new double[] { clockins[0], clockins[1], clockins[2], clockins[3], clockins[4] }).Stack(ChartStackType.Normal).Name("Clocked In");
series.Column(new double[] { breaks[0], breaks[1], breaks[2], breaks[3], breaks[4] }).Stack(ChartStackType.Normal).Name("On Break");
series.Column(new double[] { lunch[0], lunch[1], lunch[2], lunch[3], lunch[4] }).Stack(ChartStackType.Normal).Name("On Lunch");
}).SeriesColors("#33FF33", "#CCFF33", "#FF9933")
.CategoryAxis(axis => axis
.Categories("Mabel", "Harp", "Pendleton", "Granite", "HQ")
.MajorGridLines(lines => lines.Visible(false))

)
.ValueAxis(axis => axis
.Numeric()
.Labels(labels => labels.Format("{0}"))
.Max(100)
.Line(line => line.Visible(false))
.MajorGridLines(lines => lines.Visible(true))
).DataSource(datasource => datasource
.SignalR().AutoSync(true)

.Transport(tr => tr.Promise("hubPromise")
.Hub("hub")
.Server(server => server
.Read("chart_Read")
.Update("update")
.Destroy("desstroy")
.Create("create")))
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= series.name #: #= value #")
)
)
</div>
</body>

Chart

answered on 11 Nov 2014

1 answer

1.3K+ views

Accessing model fields in editor templates

Hello,

I am attempting to display a link when you open the editor modal from the Kendo grid on my site. The problem that I have run into is that I can't find a way to access any of the variables from my model, where I need to pull the link from.

Here is my grid code:

@(Html.Kendo().Grid<AttorneyRequestPendingDeterminationViewModel>(Model.AttorneyRequests)
.Name("attorneyRequestGrid")
.DataSource(dataSource => dataSource
.WebApi()
.Read(read => read.Action("GetPendingDeterminationQueue", "AttorneyRequests"))
.Model(model => model.Id(p => p.Id))
.Update(read => read.Action("DecisionsEdit", "AttorneyRequests"))
.Update(read => read.Type(HttpVerbs.Post))
.Events(events => events.RequestEnd("onRequestEnd"))
.AutoSync(true)
)
.Columns(columns =>
{
columns.Bound(m => m.CreatedDateDisplay).Title("Date Entered");
columns.Bound(m => m.LocalId).Title("Local ID");
columns.Bound(m => m.DefendantName).Title("Name");
columns.Bound(m => m.OffenseCodeDisplay).Title("Offense Code");
columns.Bound(m => m.EnteredBy).Title("FQ User ID");
columns.Bound(m => m.InterviewLocation).Title("Interview Location");
columns.Bound(m => m.Recommendation).Title("Recommendation");
columns.Command(m => m.Edit()).Title("Actions");
})
.Editable(edit => edit.Mode(GridEditMode.PopUp).TemplateName("DecisionsTemplate"))
.Deferred()
)

<script>
require(['/Content/js/config.js'], function() {
require(['jquery', 'lib/kendo/kendo.grid.min', 'lib/kendo/kendo.aspnetmvc.min', 'form-inputs', 'form-submit', 'modal'], function($, kendogrid, kendomvc, FormInputs, FormSubmit, Modal) {
@Html.Kendo().DeferredScriptsFor("attorneyRequestGrid", false)
});

function onRequestEnd(e) {
}
});
</script>

And here is DecisionsTemplate.cshtml:

<fieldset>
<legend>Decisions</legend>
<p class ="colossal">
@Html.Label(m => m.Recommendation)
<input class="text-box single-line" id="Recommendation" name="Recommendation" type="text" value="" disabled />
</p>
<p class="colossal">
@Html.Label(m => m.Decision)
@Html.Kendo().DropDownListFor(m => m.Decision).BindTo(@ViewBag.Decisions)
</p>
<p class="colossal">
@Html.Label(m => m.EligibilityOverrideReason)
@Html.Kendo().DropDownListFor(m => m.EligibilityOverrideReason).BindTo(@ViewBag.EligibilityOverrideReasons)
</p>
<p class="colossal">
@Html.Label(m => m.NotEligibleReason)
@Html.Kendo().DropDownListFor(m => m.NotEligibleReason).BindTo(@ViewBag.NotEligibleReasons)
</p>
</fieldset>

In the modal, all fields are null, although I can get them to display using @Html.EditorFor, so I feel like there has to be a way for me to access them. I have tried using Javascript, but it appears to not work in the template. Are there any workarounds for this problem? I'd be happy to supply any further code or information you might need from me.

Thanks,
Danny

Grid

answered on 10 Nov 2014

1 answer

118 views

Display more task per cell

I have a scheduler that is using:

.AllDayEventTemplate(

"<div class='asset-task' style='color: black; background-color: #= Color #' title='#= title # \nAsset: #= AssetName # \nOwner: #= OwnerName #'>"

+

"<strong>#= title #</strong>" +

"<p>" +

"<strong>Asset: </strong>#= AssetName #" +

"<br>" +

"<strong>Owner: </strong>#= OwnerName #" +

"</p>" +

"</div>"

)

The width of the task is the width of the grid cell. Below the task there is a bar that you can click that will take you to the day view. See attachment "image1".
I want to shrink the width down to display several task. See attachment "image2" (This is a doctored image I did in paint)

How can I do this?

Scheduler

answered on 10 Nov 2014

1 answer

107 views

Getting row number if server side validation failed

Hi,

Is there a way to get the row number that caused the error when a server side validation failed

for example in the function grid_error(e) in this example http://docs.telerik.com/kendo -ui/aspnet-mvc/helpers/grid/ajax-editing

Thanks,
Annie

Grid

answered on 10 Nov 2014

4 answers

161 views

Cannot Convert F# MVC Project to use UI for ASP.NET MVC

First forum post here, I'm currently in the midst of my free trial using Kendo UI for ASP.NET MVC. I'm an F# developer and use the MVC5 templates provided by this visual studio extension. When I right click on the project in solution explorer, I have the option to convert the application into a Telerik UI for ASP.NET Ajax but not an option for MVC. This is probably because this feature only recognizes the C# MVC5 templates. Is there any manual work around for this or hope for a future addition to support this.

Thanks,

Steve

Installer and VS Extensions

answered on 10 Nov 2014

2 answers

318 views

[Solved] Sortable Filter with multiple JQuery Selector

Hi,

I am setting up a Kendo sortable with a grid.

@(Html.Kendo().Sortable()
            .For("#MyGrid")
            .Filter(".sortable, table > tbody > tr:not(.k-grid-edit-row)")
            .Disabled(".disabledDragSort")
            .Cursor("move")
            .HintHandler("ConfigureHint")
            .PlaceholderHandler("placeholder")
            .ContainerSelector("#MyGrid tbody")
            .Events(events => events.Start("onStart").Change("onChange"))
)

When I set the filter as above it does not work. I am trying to filter for two separate jQuery selectors, separated by a comma. It does not work. When I remove one or the other, for example: .Filter(".sortable"), it works. What can I do to get this working?

Sortable

answered on 07 Nov 2014

2 answers

1.0K+ views

[Solved] Grid In Partial View Demo

Is there a demo of using a Grid in a Partial View where you are sending the view a model that contains an IEnumerable of what you want in the Grid? If possible I'd like it to show paging and sorting as well.

I can get this to partially work for me by using BindTo, but once you try to page or sort it does not work out.

Grid

answered on 07 Nov 2014

3 answers

462 views

Remote Data Binding Not Working with Teleric ASP.NET MVC TreeView Control.

Please assist. My code is as follows:

Razor:

@(Html.Kendo().TreeView()
                          .Name("geographyView")
                          .DataTextField("name")
                          .Checkboxes(true)
                          .DataSource(dataSource => dataSource
                                                        .Model(model => model
                                                                            .Id("id")
                                                                            .HasChildren("children")

                                                        ).Read(read => read.Action("Geography", "Home"))
                                                        )
                          )

Controller:

public JsonResult Geography(long? parentGeographyId)
        {
            if (!parentGeographyId.HasValue)
            {
                ICollection<IGeography2> geography2s = CacheConfig.GeographyCache.FindGeography2();

                var result = geography2s.Select(geography2 => new
                    {
                        geography2.id,
                        geography2.name,
                        children = true
                    }).ToList();

                return Json(result, JsonRequestBehavior.AllowGet);
            }

            if (Convert.ToString(parentGeographyId.Value).Length == 2)
            {
                var geography2Id = (int) parentGeographyId.Value;

                IGeography2 geography2 = _dtoFactory.NewGeography2Dto();

                geography2.id = geography2Id;

                ICollection<IGeography4> geography4s = CacheConfig.GeographyCache.FindGeography4(geography2);

                var result = geography4s.Select(geography4 => new
                    {
                        geography4.id,
                        geography4.name,
                        children = true
                    }).ToList();

                return Json(result, JsonRequestBehavior.AllowGet);
            }

            throw new ArgumentOutOfRangeException("parentGeographyId");
        }

Screenshot is attached.

Basically, the first level of the tree is loaded correctly, and I can see the corresponding AJAX request going out to the controller. However, when I click an entry to expand it in order to fetch the second-level set of entries, nothing happens. The click icon disappears, and no AJAX request is seen going out to the server when viewing the Firefox's Developer Tools' Network tab.

I must be missing something either in the setup of the component (although I do follow Telerik example found here - - or I must be missing a configuration detail such as the version of a supporting component (I am using jQuery 1.9.1 and ASP.NET MVC Q2 2014 SP2).

Thank you in advance for your assistance.

TreeView

answered on 07 Nov 2014

1 answer

343 views

AJAX Bound Grid Column Bound to ViewModel can't display name

I have an ajax bound grid:

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

.Name("locationGrid_#=CustomerID#")

.Columns(columns =>

{

columns.Bound(c => c.Name).Title("Location Name");

columns.Bound(c => c.Description).Title("Description");

columns.Bound(c => c.SummaryDescription).Title("Summary Description");

columns.Bound(c => c.Environment).Title("Environment Name"); //.ClientTemplate("\\#: Environment.Name \\#")

columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);

})

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(10)

.Read(read => read.Action("GetLocations", "Home", new { customerID = "#=CustomerID#" }))

.Create(create => create.Action("AddLocation", "Home", new { id = "#=CustomerID#" }))

.Update(update => update.Action("UpdateLocation", "Home"))

.Destroy(update => update.Action("DeleteLocation", "Home"))

.Model(model =>

{

model.Id(m => m.LocationID);

})

.Events(e => e.Error(@<text>function(e) { onError(e,"locationGrid_#=CustomerID#", "locationErrors") }</text>))

)

.ToolBar(toolbar => toolbar.Create().Text("Add Location"))

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

.Pageable()

.Sortable()

.ToClientTemplate()

)

That uses this view model:

public class LocationViewModel

{

public Guid? LocationID { get; set; }

[Required]

[StringLength(256)]

public string Name { get; set; }

[StringLength(1024)]

public string Description { get; set; }

public int TestPointNo { get; set; }

public MarketViewModel Market { get; set; }

[UIHint("EnvironmentEditor")]

public EnvironmentViewModel Environment { get; set; }

public int TimeZoneGmtOffset { get; set; }

public double Latitude { get; set; }

public double Longitude { get; set; }

public double HAE { get; set; }

public bool Deleted { get; set; }

[StringLength(512)]

public string SummaryDescription { get; set; }

}

This is the editor template for Environment:

@(Html.Kendo().DropDownList()

.Name("EnvironmentViewModel")

.DataValueField("EnvironmentID")

.DataTextField("Name")

.DataSource(d =>

{

d.Read(r => r.Action("GetEnvironmentsJsonResult", "Home").Data("getCustomerID()")).ServerFiltering(true);

}

)

.SelectedIndex(0)

)

Right now everything "works" but I'd like to display the Environment.name instead of [Object object] in the grid. If I use the commented out client template than the add function returns a javascript error "Uncaught ReferenceError: Environment is not defined". If I bind the column to Environment.Name than the editor with the ddl doesn't work. How do I bind to the EnvironmentViewModel but just display the name in the grid?

Grid

answered on 07 Nov 2014

1 answer

164 views

Kendo MVC Dropdownlistboxfor - how to send a post for updating model to the controller

Hi:
I am new to using Kendo UI. I am using MVC4 (VS 2012) with Kendo Mvc wrappers. I am trying to display a DropdownlistboxFor associated with a model item. Then during listbox change event i want to save that model (in the controller). I have hardcoded listbox items added to the listbox like in the code below. Should i post an ajax call which will call a controller method that saves model? How do i do this ajax post with model data sent to the controller action with the combo box updated data?

Is there any other way?
Thank you so much for your help.

=========================================
My model code is:
public class PackageModelView
{
public int DefaultReason { get; set; }
}
=========================================
View code (say named file Package.cshtml) has:
@using .<model namespace directory>
@model PackageModelView

@(Html.Kendo().DropDownListFor(model => model.DefaultAction)
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>()
{
new SelectListItem()
{
Text = "Active",
Value = "1"
},
new SelectListItem()
{
Text = "In-active",
Value = "2"
}
})
.Value("1")
)

TabStrip

answered on 07 Nov 2014