Questions on UI for ASP.NET MVC Forum

4 answers

270 views

Advanced grouping and empty line

Hi!

I'm using a scheduler in cshtml:

@(Html.Kendo().Scheduler<ITSV6.Areas.CoreApp.Models.SchedulerModel>()

.Name("scheduler")

.Date(new DateTime(2013, 6, 13))

.StartTime(new DateTime(2013, 6, 13, 7, 00, 00))

.MajorTick(60)

.Views(views =>

{

views.TimelineView(timeline => timeline.EventHeight(50));

views.TimelineWeekView(timeline => timeline.EventHeight(50));

views.TimelineWorkWeekView(timeline => timeline.EventHeight(50));

views.TimelineMonthView(timeline =>

{

timeline.StartTime(new DateTime(2013, 6, 13, 00, 00, 00));

timeline.EndTime(new DateTime(2013, 6, 13, 00, 00, 00));

timeline.MajorTick(1440);

timeline.EventHeight(50);

});

})

.Timezone("Etc/UTC")

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

.Resources(resource =>

{

resource.Add(m => m.Type)

.Title("Type")

.Name("Type")

.DataTextField("Text")

.DataValueField("Value")

.DataColorField("Color")

.BindTo(new[] {

new { Text = "Pay Code", Value = 1},

new { Text = "Day Off", Value = 2},

new { Text = "Shift", Value = 2}

});

resource.Add(m => m.SchedulerName)

.Title("Scheduler Group")

.Name("SchedulerName")

.DataTextField("sg_name")

.DataValueField("sg_group")

.DataColorField("Color")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("getScheduleGroups", "Scheduler");

});

resource.Add(m => m.Employees)

.Title("Employees")

.Name("Employees")

.Multiple(true)

.DataTextField("FullNM")

.DataValueField("emp_id")

.DataColorField("Color")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetEmployees", "Scheduler");

});

})

.DataSource(d => d

.Model(m =>

{

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

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

m.RecurrenceId(f => f.RecurrenceId);

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

})

//.Read("Read", "Scheduler")

.Create("Create", "Scheduler")

.Destroy("Destroy", "Scheduler")

.Update("Update", "Scheduler")

)

The "Employee" and the "RuleName" are associated by a field called "schedulerId".

I need to group "Employees" with a "SchedulerName" only if the Employee is associated to the SchedulerName just like the attached image.

Also, I need to add an empty line as "Empty Template" for add a new "Schedule Rule" like the first line in the attached image.

Its posible to do that with the scheduler?

Thanks a lot!

Best regards!

Scheduler

answered on 13 Dec 2016

3 answers

147 views

Setting recurrance messages from variable

Hi Guys

I'm sure this is just a syntax issue.. but I'm stuffed if I can work it out.

If I set my messages ( for testing only) like this in the editor template it works fine.

<div data-container-For="recurrenceRule" Class="k-edit-field">

<div data-bind="value:recurrenceRule" name="recurrenceRule" data-role="recurrenceeditor" data-frequencies="['never','daily','weekly']" data-messages="{'frequencies':{'never':'Nie','daily':'Täglich','weekly':'Wöchentlich','monthly':'Monatlich','yearly':'Jährlich'}}"></div>

</div>

But if I try to set the data-messages to a javascript variable I can't get it to work. ( I wan't to do this as I want to be able to change the language based on the browser language.. so I want to have an externally defined message object.)

I've tried all sorts of ways to define the variable.. but it never works

var rmessages = {'frequencies':{'never':'Nie','daily':'Täglich','weekly':'Wöchentlich','monthly':'Monatlich','yearly':'Jährlich'}};

// var rmessages  = {frequencies:{never:"Nie",daily:"Täglich",weekly:"Wöchentlich",monthly:"Monatlich",yearly:"Jährlich"}};

//-------------------------------

<div data-container-For="recurrenceRule" Class="k-edit-field">

<div data-bind="value:recurrenceRule" name="recurrenceRule" data-role="recurrenceeditor" data-frequencies="['never','daily','weekly']" data-messages="rmessages"></div>

</div>

When I run , it seems that the data-messages are set to 'rmessages' ( as per the attached image) however is other parts of the same template I refer to javascript variable and this works. ( e.g setting the 'data-source' for this drop down which is on the same template.

<div id="selectsg" style="display:none;">

<div Class="k-edit-label"><label for="SGIDId">Queue</label></div>

<div data-container-For="SGID" Class="k-edit-field">

<input name="SGIDId" type="text" id="SGIDId" data-role="combobox" data-source="sgdataSource" data-text-field="name" data-value-field="id" data-bind="value:SGID" data-placeholder="Select Queue..." data-value-primitive="true" />

</div>

Can someone please point out my stupid error in syntax or thinking!

Many thanks

Rob

asdad

Scheduler

answered on 13 Dec 2016

1 answer

154 views

Drop down list in Grid

Hi All,

please let me know we put dropdownlist in grid as child control? And how it populate?

Grid

answered on 13 Dec 2016

1 answer

415 views

grid rowaction does not execute

@model IEnumerable<dynamic>
@(
Html.Kendo().Grid(Model).Name("resgrid")
.RowAction(row =>
{
row.HtmlAttributes["style"] = "background:red;";
})
.CellAction(cell =>
{
cell.HtmlAttributes["style"] = "background:red;";
})
.DataSource(ds => ds.Custom()
.Transport(t=>t.Read(r =>
{
r.Url("../Report/ResultGridRead/" + @ViewBag.ID).DataType("json");
}))
)
.Events(e=>e.DataBinding("DataBinding").DataBound("DataBound"))
)

Grid

answered on 12 Dec 2016

2 answers

662 views

Use variable for ClientDetailTemplateId name

Hi,

Can you use a variable or a Session["variable"] as the ClientDetailTemplateId value? Or does it have to be a hard-coded string? I would like to be able to control the displaying of the detail template based on a user profile setting. If the user is not allowed to see the details, I'd like to set a variable (or session cookie/variable) to an empty string, otherwise set it to the detail template name.

I already have the detail template working, but would now like to control whether or not it is displayed. When I change the name to an empty string "", the details template does not get displayed, so if I can use a variable for this name, I should be able to get my desired result.

Thanks,
Shawn

Grid

answered on 12 Dec 2016

2 answers

333 views

[Solved] Filter scheduler on 2 parameters

Hello

I have a scheduler that I want to filter on 2 different parameters (Team and Factory). With my current implementation I am only able to filter on one of the two. I have a dropdown for the teams and checkbuttons for the factories. So the aim is that you should be able to look at one or all teams AND 1 to all factories. How can I achive this filter?

This is what I got so far:

.Filter(filters =>

{

filters.Add(model => model.teamId).IsEqualTo(4).Or().IsEqualTo(5).Or().IsEqualTo(6);

filters.Add(model => model.factoryId).IsEqualTo(1).Or().IsEqualTo(2).Or().IsEqualTo(3);

})

Do I even really need this if I want to show everything default on load?

$("#teamDDL").change(function (e) {

var checked = $.map($("#teamDDL"), function (dropdown) {

return parseInt($(dropdown).val());

});

if (checked == "NaN")

checked = [4, 5, 6];

var filter = {

logic: "or",

filters: $.map(checked, function (value) {

return {

operator: "eq",

field: "teamId",

value: value

};

})

};

var scheduler = $("#scheduler").data("kendoScheduler");

scheduler.dataSource.filter(filter);

});

$("#factories :checkbox").change(function (e) {

var checked = $.map($("#factories :checked"), function (dropdown) {

return parseInt($(dropdown).val());

});

var filter = {

logic: "or",

filters: $.map(checked, function (value) {

return {

operator: "eq",

field: "factoryId",

value: value

};

})

};

var scheduler = $("#scheduler").data("kendoScheduler");

scheduler.dataSource.filter(filter);

scheduler.view(scheduler.view().name);

});

So I have 2 functions for updating the filters, one for the dropdown and one for the checkboxes. I need to modify these two functions to do an AND search on both the dropdown value and the checkbox values, how do I do that?

BR
Jonas

Scheduler

answered on 12 Dec 2016

4 answers

2.1K+ views

[Solved] Drop Down List Font Size

I have a web page on which some of the drop down lists need normal text, and some of them will be used on touch screens and hence need large text. If I just add the style...

k-popup .k-item {

font-size: 24px;

}

That sets the fonts for all drop down lists - not just the touchscreen ones. I have tried the following...

.gatehousedropfont.k-popup .k-item {

font-size: 24px;

}

$("#LoadTipTypeDropDown").kendoDropDownList({

open: function(e) {

e.sender.list.addClass("gatehousedropfont");

}

});

...but that just removes all the items from the drop down list. Indeed, even the following call removes all the items from the drop down list:

$("#NewExtraVehicle").kendoDropDownList();

Also, looking at the object in the Chrome inspector implies that something like the following might work - but unfortunately it doesn't:

var theList = $("#LoadTipTypeDropDown").kendoDropDownList;

theList[0].style.fontSize = "24";

DropDownList

answered on 12 Dec 2016

3 answers

337 views

Neat bundling solution

I've long thought the pattern for bundling files, that included the version number was ugly, and was a barrier to quick upgrade of Kendo versions. Now that we have a private nuget, I wanted to make upgrading versions easier.

As an idea I came up with the following : this removes all version constants from the bundling and layout. It would be nice if there was a static Version getter on the Kendo class though :-) Kendo.Version would make it much clearer (hint!)

//BundleConfig.cs

var version = typeof(Kendo.Mvc.UrlGenerator).Assembly.GetName().Version;

var kendoVersion = string.Format("{0}.{1}.{2}", version.Major, version.Minor, version.Build);

bundles.Add(new StyleBundle("~/Content/kendo/"+kendoVersion+"/css").Include(

"~/Content/kendo/"+kendoVersion+"/kendo.common.min.css",

"~/Content/kendo/"+kendoVersion+"/kendo.default.min.css"

));

bundles.Add(new ScriptBundle("~/Scripts/kendo/" + kendoVersion +"/scripts").Include(

"~/Scripts/kendo/" + kendoVersion + "/kendo.all.min.js",

"~/Scripts/kendo/" + kendoVersion + "/kendo.aspnetmvc.min.js",

"~/Scripts/kendo/" + kendoVersion + "/cultures/kendo.culture.en-GB.min.js"

));

//_Layout.cshtml

@{

var version = typeof(Kendo.Mvc.UrlGenerator).Assembly.GetName().Version;

var kendoVersion = string.Format("{0}.{1}.{2}", version.Major, version.Minor, version.Build);

}

@Styles.Render("~/Content/kendo/" + kendoVersion + "/css")

/* ... */

@Scripts.Render("~/Scripts/kendo/" + kendoVersion +"/scripts")

General Discussions

answered on 12 Dec 2016

3 answers

284 views

Grid Initial Filters - MVC - From Query String

I'm looking to pass some initial filters to the grid via the query string in the URL.
I know this is possible as I can do things like.... ?grid-page=5, ?grid-sort=Price-desc.
This is fine but I cannot find any documentation that lists all of the available filters, sorting and paging etc...
For example, the things I want to do with filtering are more complex, like - price less than 20 and price greater than 5.
How can I achieve what I'm looking for and where is the documentation?
I'm sure this can be done... ?
Thanks

Grid

answered on 12 Dec 2016

7 answers

848 views

[Solved] Aggregates failing on hierarchical grids.

I'm currently having an issue with aggregates on child grids. For the system I am currently developing, we have a grid that shows our businesses different projects. Each row expands out using the "detail template" (kendo ui detail template demo) feature to show a tabset with each tab having a sub grid. The aggregate i am trying to implement is in the invoices tab's grid for a project, i would like to have a sum of the amount of each invoice generated. I have followed the tutorials exactly (kendo ui aggregate demo) but the rows will no longer expand out and the javascript console shows the error: "Uncaught ReferenceError: sum is not defined".

The exact same code used to do the aggregation on this grid will work on the parent grid fine. I'm very unsure as to why i'm getting this error. Below i've listed out the code for the grids and attached screenshots of the grids in action.

Any help will be appreciated.

Parent grid view code:

@(Html.Kendo().Grid<Central.Models.ProjectsModel>()

.Name("Grid")

.Columns(columns =>

{

columns.Bound(p => p.projectCode)

.HeaderTemplate("Project Code");

columns.Bound(p => p.protocolNo)

.HeaderTemplate("Protocol")

.ClientTemplate("<div style='width: 100%; height: 20px; overflow: hidden;'>#if(protocolNo !== null) {#<span title='#=protocolNo#'>#=protocolNo#</span>#}#</div>");

columns.Bound(p => p.description)

.HeaderTemplate("Description")

.ClientTemplate("<div style='width: 100%; height: 20px; overflow: hidden;'>#if(description !== null) {#<span title='#=description#'>#=description#</span>#}#</div>");

columns.Bound(p => p.typeCode)

.HeaderTemplate("Type");

columns.Bound(p => p.userCode)

.HeaderTemplate("User");

columns.Bound(p => p.contractValue)

.ClientTemplate("<div style='text-align: right;'>#= kendo.toString(contractValue, \"n\")#$#=currency# </div>")

.HeaderTemplate("<div style='float: right; margin-right: 10px;'>Contract Value</div>");

columns.Command(c => { c.Edit(); c.Destroy(); })

.HtmlAttributes(new { style = "display: none;" })

.Width(1);

})

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("Projects_Read", "Projects"))

.Create(create => create.Action("Projects_Create", "Projects"))

.Update(update => update.Action("Projects_Update", "Projects"))

.Destroy(destroy => destroy.Action("Projects_Destroy", "Projects"))

.PageSize(30)

.Model(model =>

{

model.Id(p => p.projectCode);

model.Field(p => p.projectCode).DefaultValue("#=projectCode#");

})

)

.Pageable()

.Filterable()

.Sortable()

.Resizable(resize => resize.Columns(true))

.Selectable()

.Scrollable((scr => scr.Height(500)))

.ClientDetailTemplateId("projectsGridDetail")

.ToolBar(t => { t.Create(); })

.Editable(e => e.Mode(GridEditMode.PopUp))

.Events(e =>

{

e.Edit(@<text>function(e) { onEdit(e); }</text>);

})

)

<script id="projectsGridDetail" type="text/kendo-tmpl">

@(Html.Kendo().TabStrip()

.Name("TabStrip_#=projectCode#")

.SelectedIndex(0)

.Items(items =>

{

items.Add().Text("Project Details").Content(@<text>@Html.Partial("~/Views/Projects/ProjectsTabs/Details.cshtml")</text>);

items.Add().Text("Sites").Content(@<text>@Html.Partial("~/Views/Projects/ProjectsTabs/Sites.cshtml")</text>);

items.Add().Text("Contact").Content(@<text>@Html.Partial("~/Views/Projects/ProjectsTabs/Contacts.cshtml")</text>);

items.Add().Text("Invoices").Content(@<text>@Html.Partial("~/Views/Projects/ProjectsTabs/Invoices.cshtml")</text>);

})

.ToClientTemplate()

)

</script>

As you can see, it uses partial views to separate the code out for the sub grids.

Invoices grid view code:

@using Kendo.Mvc.UI

<div>

@(Html.Kendo().Grid<Central.Models.ProjectsInvoiceModel>()

.Name("Invoices_#=projectCode#")

.Columns(columns =>

{

columns.Bound(p => p.description)

.HeaderTemplate("Description");

columns.Bound(p => p.amount)

.HeaderTemplate("Amount")

.ClientFooterTemplate("Sum: #=sum# ");

columns.Bound(p => p.ubcAmount)

.HeaderTemplate("UBC Amount");

columns.Command(p => { p.Edit(); p.Destroy(); })

.Width(158);

})

.DataSource(dataSource => dataSource

.Ajax()

.Aggregates(aggregates => {

aggregates.Add(p => p.amount).Sum();

})

.Read(read => read.Action("Invoice_Read", "ProjectsInvoice", new { projectCode = "#=projectCode#" })) // Specify the action method and controller name

.Create(create => create.Action("Invoice_Create", "ProjectsInvoice"))

.Destroy(destroy => destroy.Action("Invoice_Destroy", "ProjectsInvoice"))

.Update(update => update.Action("Invoice_Update", "ProjectsInvoice"))

.PageSize(30)

.Model(model =>

{

model.Id(p => p.projectInvoiceId);

model.Field(p => p.projectCode).DefaultValue("#=projectCode#");

})

)

.ToolBar(toolbar =>

{

toolbar.Create();

})

.Pageable()

.HtmlAttributes(new { style = "margin: 7px 0px;" })

.Scrollable(scr => scr.Height(200))

.Filterable()

.Sortable()

.Editable(edit => {

edit.Mode(GridEditMode.PopUp);

})

.ToClientTemplate()

)

</div>

Attached files:
1. The grid when trying to expand rows while #=sum# is in the client footer template for the aggregate column.
2. The grid expanding normally without #=sum# used.

Grid

answered on 09 Dec 2016