Questions on UI for ASP.NET MVC Forum

3 answers

241 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

535 views

[Solved] 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

942 views

[Solved] 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

answered on 23 Jun 2017

7 answers

839 views

Need to pass string param to grid ajax bound in partial page

I have a main page "JLO" that accepts user input using a kendo text box. User then clicks a button that is handled by a jquery script that opens the partial page. I am stuck on passing the param [textbox value] to the partial page and rendering the grid.

this is my basic code.

main view

<div id="userinput" class="row">

<ul class="userrentry">

<li>

@Html.Label("User ID")

@Html.Kendo().TextBox().Name("searchuserid")

</li>

<li>

@Html.Kendo().Button().Name("findUser").Content("Search for Sessions").HtmlAttributes(new { @class = "k-button" })

</li>

</ul>

</div>

<div id="sessionsfound" class="row grid-centered" style="display:none">

</div>

<div id="success" class="row grid-centered" style="display:none">

</div>

<script type="text/javascript">

$('#findUser').click(function () {

var userid = $('#searchuserid').val();

$("#userinput").css("display", "none");

$('#sessionsfound').css("display", "block");

//alert(userid)

$("#sessionsfound").load('@Url.Action("getSessionsView", "Home", new {userid = userid })');

})

</script>

Partial view for Grid

@model string

<div>

@(Html.Kendo().Grid<Jlo4MVC.Models.SessiondataDTO>()

.Name("VSM_Grid")

.AutoBind(false)

.DataSource(data => data

.Ajax()

.Model(model =>

{

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

})

.Read(read => read.Action("sessions_read", "Home", new { userid = Model }))

.Data("readuser")

)

.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple).Type(GridSelectionType.Row))

.Columns(c =>

{

c.Bound(i => i.id).Title("ID").Width(10);

c.Bound(i => i.farmName).Title("Farm").Width(25);

c.Bound(i => i.domainName).Title("Domain").Width(25);

c.Bound(i => i.applicationName).Title("App Name").Width(75);

c.Bound(i => i.serverName).Title("Server").Width(25);

c.Bound(i => i.sessionID).Title("Session ID").Width(10);

})

))

</div>

<div class="kbutton-centered">

@Html.Kendo().Button().Name("endselected").Content("End Sessions").HtmlAttributes(new { @class = "k-button" })

</div>

<script type="text/javascript">

debugger;

var userID = @Model ;

var grid = $("#VSM_Grid").data("kendoGrid");

grid.dataSource.read();

function readuser() {

debugger

return {

userid: userID

};

}

</script>

Grid

answered on 23 Jun 2017

1 answer

125 views

autoselect proble using filterrow

I’m using the telerik mvc grid with a filterrow as in this demo http://demos.telerik.com/aspnet-mvc/grid/filter-row

My column is defined like below, using a contains suggestion operator

columns.Bound(p => p.ArticleNumber).Filterable(ftb => ftb.Cell(cell => cell.SuggestionOperator(FilterType.Contains)));

The problem that sometimes occurs is when a user enter a search value, the first item is automaticcaly selected in the dropdown. (see screenhot)
This causes the problem, if the user hits enter, he will search on 101250xxxx where his intention was to search on values containing 10125.
How can it be avoided that the first item is automatically selected?

Grid

answered on 23 Jun 2017

1 answer

370 views

Editable Mode InLine event lifecycle and triggers

Looking to implement a combination of functionality while using the Grid in InLine mode. Thus far searches have not brought up directly applicable examples or details on the event lifecycles for the grid.

Is there anywhere that shows an event lifecycle for the Grid?

Looking to know what events are available to work with (Grid/javascript/JQuery all valid) for controlling what happens when a row enters into EditMode AND if a new row is Added (Which therefore is automatically opened into edit mode but no datasource command has fired yet.

The functionality looking to implement:

Setting which cell in the row focus is set to when the row opens up int InLine edit mode
Selecting all contents of cell clicked that is in the row in edit mode
When a new row is added (Automatically opened); set the following column dropdown values to some defaults. This is so it is visually already selected for the user and they can still change it if need be.

Columns:

c.ForeignKey(vm => vm.LocationNumber, (System.Collections.IEnumerable)ViewData["LocationsList"], "LocationNumber", "Drop_Text").HtmlAttributes(new { onchange = "triggerDropChange(this);" }).Width(200).Hidden(Model.Locations_ColumnInitHidden); //Display UIHint in Dropdown through LocationsList ClientTemplate with just the LocationNumber value behind
//c.ForeignKey(vm => vm.State, (System.Collections.IEnumerable)ViewData["StateList"], "Value", "Text").Width(120);
c.Bound(vm => vm.State).HtmlAttributes(new { @class = "locationLinkedState" }).Width(80);

The Datasource Create command already can set a default value if left blank; though that would not matter to a user till they sent the row through by clicking on the row Update command. So the aim in 3. is to have the default already selected for the user.

Any information on the available event lifecycles and the implementation of the mentioned functionality will be greatly appreciated.

Grid

answered on 22 Jun 2017

3 answers

3.0K+ views

How to reset Kendo Upload via Javascript

How can I reset a Kendo Upload control based upon a button click event?

Upload

answered on 22 Jun 2017

1 answer

7.6K+ views

[Solved] Set filter programatically?

Hi, I want to set a default filter value for a column on the grid but only if the application is not already persisting state. My question is how do I set a filter programmatically in this scenario? There is a Boolean column called "Enabled" that I am trying to default to TRUE when no pervious grid state can be found on client.

var localStorageKey = "UserAdministrationUserGridOptions";

$(function () {

// pull client grid state and apply to grid (filters, current page, sorts, etc).

setGridOptions();

});

function setGridOptions() {

var options = localStorage[localStorageKey];

if (options) {

$("#UserAdministrationUserGrid").data("kendoGrid").setOptions(JSON.parse(options));

}

else

{

// set initial enabled filter to true

// HOW DO I DO THIS IN JAVASCRIPT

// server: .Filter(f => f.Add(m=> m.Enabled).IsEqualTo(true))

}

Grid

answered on 21 Jun 2017

6 answers

429 views

PDF Export issue

hello,

Recently I updated my Kendo version from 2014 to 2017 r2

I try to implemented the pdf export on my Scheduler but when I click on export I got a blank pdf file.

I have a view with style and script:

<style>

/*

Use the DejaVu Sans font for display and embedding in the PDF file.

The standard PDF fonts have no support for Unicode characters.

*/

.k-scheduler {

font-family: "DejaVu Sans", "Arial", sans-serif;

}

/* Hide toolbar, navigation and footer during export */

.k-pdf-export .k-scheduler-toolbar,

.k-pdf-export .k-scheduler-navigation .k-nav-today,

.k-pdf-export .k-scheduler-navigation .k-nav-prev,

.k-pdf-export .k-scheduler-navigation .k-nav-next,

.k-pdf-export .k-scheduler-footer {

display: none;

}

</style>

<script src="@Url.Content("~/Scripts/pako.min.js")"></script>

<h1 class="titrePlanning">Planning Electro</h1>

@Html.Partial("ControlPanel")

<div class="wrapper">

<div id="divScheduler">

@(Html.Kendo().Scheduler<Ubaldi.Logisttique.PlanningRDV.Web.Controllers.EventViewModel>()

.Name("scheduler")

.DateHeaderTemplate("<span class='k-link k-nav-day'>#=kendo.toString(date, 'ddd dd/MM')#</span>")

.Selectable(false)

.Timezone("Etc/UTC")

.Width(1200)

.Pdf(pdf => pdf

.FileName("Export_PlanningRDV.pdf")

.ProxyURL(Url.Action("Pdf_Export_Save", "Scheduler"))

)

.Toolbar(t => t.Pdf())

- I also imported Deja Vus font in \Content\fonts\DejaVu

In my contoller:

public ActionResult Pdf_Export_Save(string contentType, string base64, string fileName)

{

var fileContents = Convert.FromBase64String(base64);

return File(fileContents, contentType, fileName);

}

I try with and without ProxyUrl and I'm getting the same issue.Do I miss something ?

Scheduler

answered on 21 Jun 2017

3 answers

185 views

Is there an MVC equivalent to StyleSheetManager?

With Kendo ASP.Net Ajax there is a style sheet manager that can be used to switch between several styles for the Kendo controls. Is there an equivalent in the MVC?

General Discussions

answered on 21 Jun 2017