Questions on UI for ASP.NET MVC Forum

2 answers

220 views

[Solved] Aggregates totals with multiple levels of grouping

Hi,

I'm having a minor issue with showing aggregate totals when using 2 levels of grouping on a Grid. My grid is grouped by Vendor then invoice and the totals show once for each level of grouping. This is what I want but when there is only one invoice in the group it looks quite confusing (please see attached). Is there a way in the ClientGroupFooterTemplate to check which level of grouping is currently being shown so I can change the labelling accordingly? So something like the below but I don't know how I would calculate the function IAmInvoiceTotal().

.ClientGroupFooterTemplate("# if(IAmAnInvoiceTotal()){#Invoice Total : #= kendo.toString(sum, 'c') #}else{#Vendor Total : #= kendo.toString(sum, 'c') #}");

I can use jquery to check the class of the previous row and work out which level of grouping I'm at and dynamically change the label that way but it seems like there is probably an easier way.

Grid

answered on 18 Mar 2014

2 answers

260 views

[Solved] GroupBy functionality not working correctly with ClientRowTemplate

Hello,
I am trying to implement a grid that uses a ClientRowTemplate and also has GroupBy functionality. The grid renders fine and all other behaviors act appropriately except the GroupBy, when a column is selected to GroupBy the column headers act strangely and an additional column is inserted and the widths are changed as well. If I remove the ClientRowTemplate everything works great. I am new to Kendo so please let me know if my implementation is wrong or could be better code is below:

@(Html.Kendo().Grid(Model)

.Name("Grid")

.HtmlAttributes(new { style = "height:450px;font-size:.85em;" })

.Columns(columns =>

{

columns.Template(e => { }).ClientTemplate(" ").Width(30).HtmlAttributes(new { style="vertical-align: middle; text-align: center" });

columns.Bound(p => p.Id).Width(60);

columns.Bound(p => p.Title).Width(250);

columns.Bound(p => p.AssignedUser).Width(120);

columns.Bound(p => p.Status);

columns.Bound(p => p.Priority);

columns.Bound(p => p.Category);

columns.Bound(p => p.Tier);

columns.Bound(p => p.LastModifiedAsString).Title("Last Modified").Width(120);

})

.ClientRowTemplate(

"<tr>" +

"<td>" +

"<img style ='margin-top:5px;' src='" + Url.Content("~/Images/") +"#:data.Icon#' alt='#:data.Icon#' />" +

"</td>" +

"<td width='60'>#: Id #</td>" +

"<td width='250'>#: Title #</td>" +

"<td width='120'>#: AssignedUser #</td>" +

"<td>#: Status #</td>" +

"<td>#: Priority #</td>" +

"<td>#: Category #</td>" +

"<td>#: Tier #</td>" +

"<td>#: LastModifiedAsString #</td>" +

"</tr>"

)

.Pageable()

.Sortable()

.Scrollable()

.Groupable()

.Filterable(filterable => filterable

.Extra(false)

.Operators(operators => operators

.ForString(str => str.Clear()

.StartsWith("Starts with")

.IsEqualTo("Is equal to")

.IsNotEqualTo("Is not equal to")

))

)

.Selectable(selectable => selectable

.Mode(GridSelectionMode.Single))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Read(read => read.Action("Get", "Grid"))

)

.Events(e => e.Change("onChanged"))

)

<script type="text/javascript">

function onChanged(arg) {

var selected = this.select();

var wiId = this.dataItem(selected).Id;

window.location = '../WorkItem/Edit?Id=' + wiId;

}

var myGrid;

$(function () {

myGrid = $('#Grid').data('kendoGrid');

});

setInterval(DoWork, parseInt(@ViewBag.RefreshInterval));

function DoWork() {

myGrid.dataSource.read();

}

</script>

Grid

answered on 18 Mar 2014

1 answer

181 views

Getting Locations from Sql Server Database

I have been searching documentations but couldnt find any document about adding locations dynamicaly to the map ui. I want to get places locations from my database? I will be glad to see if someone shares knowledge about it.Thanks.

Map

answered on 18 Mar 2014

1 answer

2.1K+ views

[Solved] DropDownlist Validation is not validating

Hello I'm trying to validate the dropdownlist and it is not validating.. Below is the code i'm trying.. DropDownlist and Date column is required field and when click the button it populate the grid view.. Even though I'm not selecting dropdownlist value it is not validating and populating the empty grid.





@using DWH.WEB.Models.ViewModel

@{

ViewBag.Title = "test";

}

<div style="background-color: #E3F1F7; text-align: left; vertical-align: middle;">

<h2>>>>test</h2>

</div>

<table>

<tr>

<td>

<div class="section"style="width: 350px;">

<h4>Select Entity code</h4>

<div id="ValidateMyContents">

@(Html.Kendo().DropDownList()

.Name("dropdownlist")

.HtmlAttributes(new { style = "width:320px" })

.DataTextField("Text")

.DataValueField("Value")

//.OptionLabel("Please Select")

.OptionLabel(new { Text = "Select Entity", Value = 0 })

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetEntityCode", "GLFINBAL");

});

})

)

<span class="k-invalid-msg" data-for="dropdownlist"></span>

</div>

</td>

<td>

<div class="section"style="width: 250px;">

<h4>Select FiscalYear</h4>

@(Html.Kendo().DatePicker()

.Name("yearpicker")

.Start(CalendarView.Decade)

.Depth(CalendarView.Decade)

.Format("yyyy")

.Value("2014")

.HtmlAttributes(new { style = "width:250px" })

)

</div>

</td>

<td>

<button id="showGrid" class="k-button" type="button" style="width: 150px">View Report</button><br />

<span id="status"></span>

</td>

</tr>

<tr>

<td colspan="3">

</td>

</tr>

</table>

<script>

$("#showGrid").click(function (e) {

e.preventDefault();

$("#status").text("");

var validator = $("#ValidateMyContents").kendoValidator().data('kendoValidator');

if (validator.validate()) {

$("#status").text("Entity was selected");

} else {

$("#status").text("Entity was not selected");

}

$("#AjaxGrid").data("kendoGrid").dataSource.read();

$("#AjaxGrid").css("display", "block");

});

// $("#showGrid").click(function () {

// $("#AjaxGrid").data("kendoGrid").dataSource.read();

// $("#AjaxGrid").css("display", "block");

// });

function additionalInfo() {

var info = $("#dropdownlist").data("kendoDropDownList").value();

var yearpicker = $("#yearpicker").data("kendoDatePicker").value();

return {

dropdownlist: info,

yearpicker: yearpicker

}

</script>

DropDownList

answered on 18 Mar 2014

1 answer

167 views

Kendo Grid drag and drop with JQueryUI draggable

Hi,

I'm new to Kendo UI and want to implement drag a record from a Kendo Grid and drop to another JQuery controller (http://tux.fi/~jarnok/fullcalendar-resourceviews/). I've managed to implement drag a row using kendo graggable event, but it is not working for the other controller.It support for JQuery UI drop event. How to implement drag a row in a kendo grid using jquery ui drag?

Grid

answered on 17 Mar 2014

4 answers

276 views

[Solved] How to apply theme for the Schelduler

Hello

I have some trouble to apply a theme for the schelduler.
I want to apply the "Moonlight" theme for the "Schelduler selection" that can be currently selected in the Kendo webpage Demos.
I choose the theme but the code of the Kendo UI web page doesn't change.

Cf : http://demos.telerik.com/kendo-ui/web/scheduler/selection.html

I use Kendo UI 2013.3.1511 and Razor engine.

Here is my code :

@(Html.Kendo().Scheduler<iMail.Web.Models.TaskViewModel>()

.Name("scheduler")

.Date(DateTime.Now)

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

.Height(600)

.Views(views =>

{

views.DayView();

views.WeekView();

views.MonthView();

views.AgendaView(agenda => agenda.Selected(true));

})

.Selectable(true)

.Timezone("Etc/UTC")

.Editable(editable => {

editable.TemplateName("_EditorTemplatePartial");

})

.DataSource(d => d

.Model(m => {

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

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

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

})

.Events(e => e.Error("error_handler"))

.Read("TasksRead", "Dashboard")

.Create("Tasks_Create", "Dashboard")

.Destroy("Tasks_Destroy", "Dashboard")

.Update("Tasks_Update", "Dashboard")

)

Scheduler

answered on 17 Mar 2014

3 answers

169 views

[Solved] Auto-collapse menu based on size?

I've got my menu setup with controller actions attached. Based on system permissions only the menu items the logged in user has access to will show up on the menu. This works fine.

A couple of the roles though have access to everything and when the menu shows all of the possible items, the menu wraps to 3 lines since it is wider than the width of my layout. What I need is a way to auto-collapse the menu items at the end of the menu (down to one nested menu item) in the cases where it would wrap past 1 line. Is there any way to do this?

Menu

answered on 17 Mar 2014

1 answer

216 views

Update TreeView After Adding Row To Grid

Ok, I've hunted around for a solution to this for hours now, but to no avail...

I have a page that uses the Kendo splitter. In the left pane is a kendo tree view and in the right, a kendo grid. I am using the toolbar "Save" option, which adds a nice Save/Cancel button to the already existing 'Add new record' button.

I have no trouble updating the grid whenever a new node is selected on the tree view. What I do need to know is how to do is update the tree view whenever an
existing row is updated or a new row is added to the grid. If it makes any difference, I am using .cshtml pages and not aspx.

ANY help will be GREATLY appreciated!!!

Grid

answered on 16 Mar 2014

2 answers

545 views

Dyanmically changing the value of a DropDownList control inside of the Edit Template of a ListView control

Hello,
I have a DropDownList control in the Edit template of a ListView control and it is passing values to my controller instance correctly if the user selects a value from the DropDownList and then presses the "k-update-button".

Also , I have code that dynamically changes the value of the DropDownList control if the value of another DropDownList control is changed. I am using this statement to change the DropDownList control value:

$("#ValidationType").data("kendoDropDownList").value("Flat");

The above line works correctly and the UI successfully displays the correct DropDownList option on the screen. However, when pressing the "k-update-button", the dynamically selected value is not passed back to the controller during MVC binding. It is a null value.

Again, my the value binding works if the user selects a value, but it does not work if I dynamically select a value using JavaScript/jQuery.

Just wanted to see if this is a known issue and/or if there is a work-around.

I have also tried getting the template data via the "Data" method in conjunction with the DataScource Create event but I ran into the same problem here as well. My ListView is defined as:

@(Html.Kendo().ListView<AdjustmentsListViewModel>()
.Name("LineItemsAdjustmentsListView")
.TagName("div")
.ClientTemplateId("adjustments-template")
.AutoBind(false)
.Editable()
.Events(events => events
.Remove("LineItemsAdjustmentsListViewRemove")
.DataBound("LineItemsAdjustmentsListViewDataBound")
.Edit("LineItemsAdjustmentsListViewEdit")
)
.DataSource(dataSource => dataSource
.Model(model =>
{
model.Id(a => a.Id);
model.Field(f => f.AdjustmentId);
model.Field(f => f.AdjustmentType);
model.Field(f => f.Description);
model.Field(f => f.ValidationType);
model.Field(f => f.IncreaseDecrease);
model.Field(f => f.Percent);
model.Field(f => f.Amount);
})
.Create(create => create.Action("CreateAdjustmentForLineItem", "Intake").Data("GetLineItemKeys"))
.Read(read => read.Action("GetAdjustmentsForLineItem", "Intake").Data("GetLineItemKeys"))
.Update(update => update.Action("UpdateAdjustmentForLineItem", "Intake").Data("GetLineItemKeys"))
//Destroy(Delete) handled by Remove event above
.Events(events => events
.Error("LineItemsAdjustmentsListViewError")
.RequestEnd("LineItemsAdjustmentsListViewRequestEnd")
)
)
)
@Html.ValidationMessageFor(model => model.LineItems.LineItemsDetail.Adjustments)

My Edit Template appears as:

@model InvSubModule.WebApp.Areas.Submission.Models.LineItems.AdjustmentsListViewModel

@using System.Globalization;
@using System.Web.Mvc.Html
@using Kendo.Mvc.UI
@using InvSubModule.Infrastructure.Localization

<div class="lineItemsAdjustmentView k-widget">
<div class="lineItemsAdjustmentButtons">
<div><a class="k-button k-button-icontext k-update-button" href="\\#"><span title='@ResourceManager.GetString("Save")' class="k-icon k-update"></span></a></div>
<div><a class="k-button k-button-icontext k-cancel-button" href="\\#"><span title='@ResourceManager.GetString("Cancel")' class="k-icon k-cancel"></span></a></div>
</div>
<dl>
<dt><label class="displayLabel">*@ResourceManager.GetString("LineItems_Adjustments_AdjustmentType")</label></dt>
<dd>
@(Html.Kendo().DropDownListFor(model => model.AdjustmentType)
.Name("AdjustmentType")
.OptionLabel(" ")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new SelectList(Model.AdjustmentTypes, "AdjustmentType", "AdjustmentTypeAnswer"))
.Events(e =>
{
e.Change("AdjustmentTypeChange");
})
)
@Html.ValidationMessageFor(model => model.AdjustmentType)
</dd>
<dt><label class="displayLabel">@ResourceManager.GetString("LineItems_Adjustments_Description")</label></dt>
<dd>
@Html.TextBoxFor(model => model.Description, "", new { @id = "Description", @class = "k-input k-textbox k-state-disabled", @disabled="disabled" })
@Html.ValidationMessageFor(model => model.Description)
</dd>
<dt><label class="displayLabel">*@ResourceManager.GetString("LineItems_Adjustments_ValidationType")</label></dt>
<dd>
@(Html.Kendo().DropDownListFor(model => model.ValidationType)
.Name("ValidationType")
.OptionLabel(" ")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new SelectList(Model.ValidationTypes, "ValidationType", "ValidationTypeAnswer"))
.Events(e =>
{
e.Change("ValidationTypeChange");
})
)
@Html.ValidationMessageFor(model => model.ValidationType)
</dd>
<dt><label class="displayLabel">*@ResourceManager.GetString("LineItems_Adjustments_IncreaseDecrease")</label></dt>
<dd>
@Html.RadioButtonFor(model => model.IncreaseDecrease, "Increase")
@ResourceManager.GetString("LineItems_IncreaseDecrease_Increase")
@Html.RadioButtonFor(model => model.IncreaseDecrease, "Decrease")
@ResourceManager.GetString("LineItems_IncreaseDecrease_Decrease")
@Html.ValidationMessageFor(model => model.IncreaseDecrease)
</dd>
<dt>
<label id="lblAmount" class="displayLabel">*@ResourceManager.GetString("LineItems_Adjustments_Amount")</label>
<label id="lblPercent" class="displayLabel" style="display:none;">*@ResourceManager.GetString("LineItems_Adjustments_Percent")</label>
</dt>
<dd>
@(Html.Kendo().NumericTextBoxFor<decimal>(model => model.Amount)
.Name("Amount")
.Format("c")
.Decimals(4)
.Spinners(false)
.Min(-9999999.0000m)
.Max(9999999.0000m)
.Culture(CultureInfo.CurrentCulture.ToString())
)
@Html.ValidationMessageFor(model => model.Amount)
@(Html.Kendo().NumericTextBoxFor<decimal>(model => model.Percent)
.Name("Percent")
.Spinners(true)
.Decimals(2)
.Min(-100.00m)
.Max(100.00m)
.Step(0.01m)
.Culture(CultureInfo.CurrentCulture.ToString())
)
@Html.ValidationMessageFor(model => model.Percent)
</dd>
</dl>
</div>

Thanks for your time,
Scott

ListView

answered on 14 Mar 2014

1 answer

439 views

Grid read action - url rewrite

Hi,

does kendoui widgets support url rewrite?

I have a situation where we have our web site published (firewall) as a "subfolder" of root like this:

http://server.domain/xxxx/Home/Dummy2?Length=7

but the site is actually in the root off IIS.

I configured url rewrite like this:

<rule name="Kendo" enabled="true" stopProcessing="false">
<match filterByTags="A, Area, Base, Form, Frame, Head, IFrame, Img, Input, Link, Script" pattern="([^:]+://)([^:/]+(:[0-9]+)?/)([^:/].*)" />
<conditions logicalGrouping="MatchAll" trackAllCaptures="true" />
<action type="Rewrite" value="{R:1}{R:2}xxxx/{R:4}" />
</rule>

For links, script links etc. it is working fine but for kendogrid

@(Html.Kendo()
.Grid("xGrid")
.....
.Read(read => read.Action("Dummy2", "Home", "Catalog"))
...

I can`t get it working. It is always rendering http://server/Home/Dummy2?Length=7 instead http://server/xxxx/Home/Dummy2?Length=7.

Any suggestions?
Thx

Grid

answered on 14 Mar 2014