Questions on UI for ASP.NET MVC Forum

1 answer

863 views

hide and show export excel and pdf in grid

How set export to excel and export to pdf based on condition kendo grid

Grid

answered on 28 Jun 2017

6 answers

343 views

Telerik MVC Upgrade Wizard

I just upgraded from 2017.2.504 to 2017.2.621. As of this update I can not seem to get any project to upgrade. I get 100% failure no matter how complex or simple the solution.

Does anyone have an actual solution which is upgrade capable via the "normal" upgrade wizard? I know the Telerik folks deliver great products however this might be simply something I am not doing or doing incorrectly.

As I am now getting 100% failures, I visited the documentation site and actually walked through things step by step. I noticed the existence of the "Compatibility" button. While that looks like a wonderful option, I now get the error "There is missing resource for comparing versions: 2017.2.504 and 2017.2.621 for technology ASP.NET MVC." once it is used. This error is consistent among all the projects I have attempted.

NOTE: I define a failure to upgrade to mean any upgrade that never completes (after waiting 20 minutes) or produces a "the task stopped working" message. In these cases I undid all source code changes, re-retrieved a fresh copy of everything from TFS and re-tried things.

My review of the TELERIK install shows I do in fact have the requisite 2017.2.621 files however the project in question does not have them copied to it yet as that is what the upgrade wizard is supposed to do.

If it is of importance the projects in question are all .NET 4.6.1.

NOTE: My asp.net/Ajax wizards work without issue. The problem seems to be MVC based.

General Discussions

answered on 27 Jun 2017

3 answers

972 views

Cascading DropDownLists

I am trying to follow the example code of a cascading combobox here for some cascading drop down lists I need. I have 3 total drop down lists, just as in the example. The first cascading drop down is working fine. The only problem with the first cascading drop down is that my "optionlabel" is ignored completely. The second does not work at all. What's wrong with my second cascading drop down list, and how do I pass my vehicle type and my make to the action to get my models? Here are my drop down lists.


<script type="text/javascript">
    function VehicleType() {
        return {
            VehicleType: $("#VehicleType").val()
        };
    }
    function Make() {
        return {
            Make: $("#Make").val()
        };
    }
</script>

<%: Html.Kendo().DropDownListFor(i => i.VehicleType)
                .Name("VehicleType")
                .BindTo(new SelectList(Model.DemographicValues, "ValidValue", "ValidValueLabel"))
                .OptionLabel("Please Select")
                .HtmlAttributes(new {Style="Width:200px;"})%>

<%: Html.Kendo().DropDownListFor(i => i.Make)
                .Name("Make")
                .DataTextField("Make")
                .DataValueField("Make_Code")
                .DataSource(source => {
                    source.Read(read =>
                        {
                            read.Action("GetCascadeMakes", "Home")
                                .Data("VehicleType");
                        })
                        .ServerFiltering(true);
                    })
                .OptionLabel("Please Select")
                .CascadeFrom("VehicleType")
                .Enable(false)
                .AutoBind(false)
                 %>


<%: Html.Kendo().DropDownListFor(i => i.Model)
                .Name("Model")
                .DataTextField("Model")
                .DataValueField("ModelCode")
                .DataSource(source => {
                    source.Read(read =>
                        {
                            read.Action("GetCascadeModels", "Home")
                                .Data("Make");
                        })
                        .ServerFiltering(true);
                    })
                .CascadeFrom("Make")
                .Enable(false)
                .AutoBind(false)
                 %>

DropDownList

answered on 27 Jun 2017

4 answers

866 views

Pass series name to tooltip template

I have a pop-up chart in a tooltip template working for some column charts. The definition passes the dataitem to the template function, which then creates a pie chart in the tooltip.

This is working well for charts which dynamically create the series using a field in the dataitem.

However, I now have a stacked column chart using two fixed series, from two different value fields in the dataitem. To create the pop-up chart, I need to identify which series is being hovered over, but I can't work out how to pass this to the function, as the dataitem field names just seem to get parsed in a 'magical' way.

The chart definition is:-

@(Html.Kendo().Chart<WLI_Payments.Models.TimelinessChartItem>()

.Name("SummaryTimelinessChartFour")

//.Title("Paid / Awaiting Payment Requests")

.Title(ti => ti.Text("Payment Timeliness By Month").Font("11px Arial"))

.Theme("bootstrap")

.Legend(l => l.Visible(true).Position(ChartLegendPosition.Bottom))

.ChartArea(c => c.Background("transparent").Height(250))

.DataSource(ds => ds.Read(read => read.Action("GetTimelinessData", "Dashboard"))

.Sort(s =>

{

s.Add("Year").Ascending();

}

)

.SeriesDefaults(sd => sd.Column().Stack(true))

.Series(series =>

{

series.Column(model => model.InTime).Name("In Time").Spacing(0).Labels(l => l.Visible(true).Font("9px Arial")).Color("#428BCA");

series.Column(model => model.Late).Name("Late").Spacing(0).Labels(l => l.Visible(true).Font("9px Arial")).Color("#DA3B36");

})

.CategoryAxis(axis => axis

.Categories(model => model.MonthText)

.Labels(labels => labels.Rotation(-45).Font("10px Arial"))

.MajorGridLines(lines => lines.Visible(false))

)

.ValueAxis(axis => axis.Numeric()

.Labels(labels => labels.Font("10px Arial"))

)

.Tooltip(tooltip => tooltip

.Visible(true)

.Format("{0:N0}")

//.Template("#=series.name# : #=value#")

//.Font("10px Arial")

.Background("White")

.Template("#=tooltipTemplate4(dataItem)#")

)

.Pannable(p => p.Lock(ChartAxisLock.Y))

.Zoomable(zoomable => zoomable

.Mousewheel(mousewheel => mousewheel.Lock(ChartAxisLock.Y))

.Selection(selection => selection.Lock(ChartAxisLock.Y))

)

</div>

<p></p></text>);

})

)

The template definition is:-

<script id="childChartTemplate4" type="text/x-kendo-template">

<div id="childChart4" />

# setTimeout(function() { createChildChart4(SeriesName,Mth,Year); }) #

</script>

The Mth and Year fields are in the dataitem, and get passed through to the function, but I also need the series name.

The template is defined in the script block as:-

var tooltipTemplate4 = kendo.template($("#childChartTemplate4").html());

And then the function createChildChart4 gets the data and builds the chart (or would do, if it had the series name). How do I pass the series name through to the function?

Thanks

Chart

answered on 27 Jun 2017

1 answer

512 views

Multi-level grid

Hello,

My team is wanting to utilize a grid control to display data in a multi level format. We looked into the pivot grid control, and that looks a little more complicated then what we need, and after looking over documentation, the Aggregate filter on the grid control looks like the closest match (Doc here). What we are looking for is in the attached image, Grid Mockup.png.

Essentially, the x-axis is the month/year for the data that we are looking for, with the current month needing to show up two times, once for the estimated month and the next column with month-to-date. All the other columns are for a past month. The y-axis is a given cost center.

We want the top row(first level) to be an aggregate of all the data across all cost centers for the given time period, upon expanding the tree, it shows a second level where it is the overall cost center, then then it can be expanded further to show the third level where it is the specific cost center.

I strongly feel the aggregate filter is what we are looking for, but is it possible to write our own filters? Or is there a better way to do this?

Grid

answered on 27 Jun 2017

1 answer

83 views

kendo grid date column format after filtering

I have a kendo MVC grid that has a bound column like below

columns.Bound(c => c.CreatedDate).Title("Submitted on").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains"))).Format("{0: MM/dd/yyyy HH.mm.ss}");

the column formats fine when first loading the view: 06/22/2017 15.02.00
but i have some buttons which use AJAX to post back and get back filtered data and when re-populating the grid the column looks like this:

/Date(1498161720000)/

Any help?

Grid

answered on 27 Jun 2017

1 answer

374 views

FIX: Grid with SignalR Binding Not Working with Batch on DataSource

Just want to share this in case anyone else runs into it. When a Kendo UI grid is bound to a SignalR datasource and Batch = true for that datasource, the server will begin responding with the following during create/update/destroy method calls:

{"I":"1","E":"There was an error invoking Hub method 'tranimporterrorshub.update'."}

This is because the automatically generated JSON is in an incorrect format to bind to your hub methods.

Example hub method:

public class ExampleHub : Hub

{

public DataSourceResult Read(DataSourceRequest request)

{

// read operations here

}

public async Task Update(IEnumerable<ExampleViewModel> rows)

{

foreach (var row in rows)

{

// Update operations here

}

public async Task Destroy(IEnumerable<ExampleViewModel> rows)

{

foreach (var row in rows)

{

// Delete operations here

}

When the JSON for create/update/destroy is generated, it is something like this:

data:{"H":"exampleshub","M":"update","A":[{"models":[{"Id":1,"Example":"Test"},{"Id":3,"Example":"Test2"}]}],"I":2}

If you look closely, the "A" property in the JSON starts with a "[", which indicates an array, even though there is NOT an array of models. ASP.NET MVC SignalR does not support a call with the "data" being an array (must be an object or basic type) and the following exception is thrown:

Exception: Exception thrown: 'Newtonsoft.Json.JsonSerializationException' in Newtonsoft.Json.dll ("Cannot deserialize the current JSON object (e.g. {"name":"value"}) into type 'System.Collections.Generic.IEnumerable`1[ExampleViewModel]' because the type requires a JSON array (e.g. [1,2,3]) to deserialize correctly.

To fix this error either change the JSON to a JSON array (e.g. [1,2,3]) or change the deserialized type so that it is a normal .NET type (e.g. not a primitive type like integer, not a collection type like an array or List<

T

>) that can be deserialized from a JSON object. JsonObjectAttribute can also be added to the type to force it to deserialize from a JSON object.

Path 'models', line 1, position 10.").

I found a fix for this. Simply add this function and wire it up to the parameterMap property for your DataSource:

function datasourceParameterMap(data, type) {

if (type !== 'read' && data.models) {

return data.models;

} else {

return data;

}

Hope this helps someone else so that they don't have to figure it out the hard way.

Grid

answered on 26 Jun 2017

3 answers

161 views

Fixed top row?

Hello,

I'm using the scheduler in timeline month view (albeit with a custom view to just show 7 days) and I want to freeze the top row.

Here is my grid:

@(Html.Kendo().Scheduler<TEAMSV2.Models.WeekViewSchedulerDTO>()

.Name(Section + TabName + SubTabName)

.Date(new DateTime(ChosenDate.Year, ChosenDate.Month, ChosenDate.Day))

.StartTime(new DateTime(ChosenDate.Year, ChosenDate.Month, ChosenDate.Day, 00, 00, 00))

.EndTime(new DateTime(ChosenDate.Year, ChosenDate.Month, ChosenDate.Day, 23, 59, 59))

.Timezone("Etc/UTC")

.MajorTick(1440)

.Height(500)

.Views(v =>

{

v.CustomView("MyCustomTimelistView");

})

.Group(group => group.Resources("Employees").Orientation(SchedulerGroupOrientation.Vertical))

.Resources(r =>

{

r.Add(m => m.Employees)

.Title("Employees")

.Name("Employees")

.Multiple(true)

.DataTextField("Text")

.DataValueField("Value")

//.DataColorField("Color")

.DataSource(d => d

.Read(rd =>

{

rd.Action("GetWeekViewResources", "TeamsV2").Type(HttpVerbs.Post);

})

);

})

.DataSource(d => d

.Model(m =>

{

m.Id(f => f.EventId);

m.Field(f => f.Title).DefaultValue("No title");

})

.Read("GetWeekViewSchedulerData", "TeamsV2")

)

.Events(e => e

.DataBinding(Section + TabName + SubTabName + "SchedulerDatabinding")

.DataBound(Section + TabName + SubTabName + "SchedulerDatabound")

)

And here is the custom view:

<script>

var MyCustomTimelistView = kendo.ui.TimelineMonthView.extend({

options: {

name: "MyCustomTimelistView",

title: "Timeline Month",

selectedDateFormat: "{0:D} - {1:D}",

selectedShortDateFormat: "{0:d} - {1:d}",

majorTick: 720,

numberOfDays: 7,

dateHeaderTemplate: "<div class='k-link k-nav-day'>#=kendo.toString(date, 'ddd dd MMM yyyy')#</div>"

},

name: "MyCustomTimelistView",

calculateDateRange: function () {

//create the required number of days

var start = this.options.date,

// start = kendo.date.dayOfWeek(selectedDate, this.calendarInfo().firstDay, -1),

idx, length,

dates = [];

for (idx = 0, length = this.options.numberOfDays; idx < length; idx++) {

dates.push(start);

start = kendo.date.nextDay(start);

}

this._render(dates);

},

previousDate: function () {

var date = new Date(this.startDate());

date.setDate(date.getDate() - this.options.numberOfDays);

return date

}

});

</script>

The "Resources" for this scheduler are a list of employees but the top one is hard-coded as "Unassigned" for when an event is not assigned to an employee. I need this row of unassigned events to always be visible when the rest of the employees are scrolled (as the scheduler is set to 500px).

Any ideas?

Thanks,

Mark.

Scheduler

answered on 26 Jun 2017

2 answers

483 views

Hide lablels for zero value columns

I have a chart, which uses the group function, in order to display a dynamic number of series. Unfortunately, in order for this to work properly, each series must contain a record for each category (in this case, month). If not, columns are displayed in the incorrect category, and the chart has missing x-axis labels.

However, I also want each column to have a label showing the value, but the chart also shows labels for the 0 value items.

How can I remove these zero labels (or show dynamic series without adding the values in, in the first place!)?

The chart definition is:-

@(Html.Kendo().Chart<WLI_Payments.Models.SummaryChartItem3>()

.Name("SummaryDirectorateChartThree")

.Title(ti => ti.Text("Requests by Month and Type").Font("11px Arial"))

.Theme("bootstrap")

.Legend(l => l.Visible(true).Position(ChartLegendPosition.Bottom))

.ChartArea(c => c.Background("transparent").Height(250))

.DataSource(ds => ds.Read(read => read.Action("GetRequestTypeData", "Dashboard"))

.Group(g => g.Add(v => v.RequestTypeDescription))

.Sort(s =>

{

s.Add("Year").Ascending();

}

)

.Series(series =>

{

series.Column(model => model.YIntValue).Name("#=group.value#").Spacing(0).Labels(l => l.Visible(true).Font("9px Arial"));

})

.CategoryAxis(axis => axis

.Categories(model => model.Month)

.Labels(labels => labels.Rotation(-45).Font("10px Arial"))

.MajorGridLines(lines => lines.Visible(false))

)

.ValueAxis(axis => axis.Numeric()

.Labels(labels => labels.Font("10px Arial"))

)

.Tooltip(tooltip => tooltip

.Visible(true)

.Background("White")

.Template("#=tooltipTemplate3(dataItem)#")

)

.Pannable(p => p.Lock(ChartAxisLock.Y))

.Zoomable(zoomable => zoomable

.Mousewheel(mousewheel => mousewheel.Lock(ChartAxisLock.Y))

.Selection(selection => selection.Lock(ChartAxisLock.Y))

)

Thanks

Chart

answered on 23 Jun 2017

2 answers

892 views

Grid button client template - change width

Trying without success to alter the width of the button rendered in a grid using client template -

columns.Template(c => { }).ClientTemplate("<a class='k-button k-button-icontext k-grid-ManageCompany' href='" + Url.Action("ManageCompanies") + "/#= CompanyId #'" + ">#= Name #</a

>").HtmlAttributes(new { @class = "customGridRowStyle", title = "Edit Company Profile" }).Width(50); //.Filterable(filterable => filterable.UI("nameFilter"));

When rendered, the code is as follows -

<td class="customGridRowStyle" title="Edit Company Profile" role="gridcell"><a class="k-button k-button-icontext k-grid-ManageCompany" href="/Portal/Search/ManageCompanies/344"><span class="k-icon k-i-edit"></span></a></td>

Min-width seems to be defined as :

k-grid tbody .k-button, .k-ie8 .k-grid tbody button.k-button {
min-width: 64px;
}

I've tried seeting the style within the page itself as -

.k-button .k-button-icontext .k-grid-ManageCompany {

min-width: 30px;

width: 30px;

}

But it seems to have no effect.

Ive also tried adding the style to the HtmlAttributes with no success either.

Any help appreciated.

Terry.
.

Grid