Questions on UI for ASP.NET MVC Forum

2 answers

82 views

MVC Grid DropDown Editor Templates With Large DB

I implemented inline editing for one of my Model(ClassRoom). And this model has a foreignkey coloumn which maps to the other table.(Teacher).
But i have 100.000+ Teachers in my database. What is the efficient way to load Teachers.

NOTE: (Also Teached is in the filter coloum. )

Grid

answered on 11 Mar 2015

1 answer

1.1K+ views

MVC Grid DropDown Editor Templates

Hi,
I am trying to put a cascading dropdowns into my GridView and for first step, i want to create a basic editor template.
It is working while in edit mode, but in read-mode, i could not figure how i shoul read. This field is WlbLine property.

How can i get the WlbLine.LineNo in grid-Read-Mode.

Here is my view:

@model IEnumerable<Umki2.Areas.Wlb.ViewModels.VmWlbWeldLogBook>





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

.Name("grid")

.DataSource(ds => ds

.Ajax()

.PageSize(20)

.Model(model =>

{

model.Id(a => a.Id);

model.Field(a => a.Id).Editable(false);

model.Field(a => a.PID).Editable(false);

})

.Create(create => create.Action("Grid_Create", "WlbWeldLogBook"))

.Read(read => read.Action("Grid_Read", "WlbWeldLogBook"))

.Update(update => update.Action("Grid_Update", "WlbWeldLogBook"))

.Destroy(destroy => destroy.Action("Grid_Destroy", "WlbWeldLogBook"))

)

.Columns(p =>

{

p.Command(commands =>

{

commands.Edit();

commands.Destroy();

}).Title("").Width(180).Locked();

p.Bound(c => c.WlbLine).Width(160);

p.ForeignKey(c => c.WlbSpoolId, (System.Collections.IEnumerable)ViewData["WlbSpoolId"], "Id", "SpoolNo").Width(110).Locked(true).Lockable(false);

p.Bound(c => c.PID).Width(200);

p.Bound(c => c.JointNo).Width(110).Locked(true).Lockable(false);

p.Bound(c => c.WeldingProcess).Width(200);

p.Bound(c => c.WlbJointLocation).Width(200);

p.Bound(c => c.WlbJointType).Width(200);

p.ForeignKey(c => c.WrhIdentity1Id, (System.Collections.IEnumerable)ViewData["WrhIdentityList"], "Id", "IdentityNo").Width(110);

p.ForeignKey(c => c.WrhIdentity2Id, (System.Collections.IEnumerable)ViewData["WrhIdentityList"], "Id", "IdentityNo").Width(110);

})

.ToolBar(toolbar =>

{

toolbar.Create();

toolbar.Excel();

})

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

.Pageable()

.Sortable()

.Groupable()

.Filterable(ftb => ftb.Mode(GridFilterMode.Menu))

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

.Scrollable(scrollable => scrollable.Height(430))

.Reorderable(reorderable => reorderable.Columns(true))

.ColumnMenu()

.Excel(excel => excel

.FileName("LineList_" + System.DateTime.Now + ".xlsx")

.Filterable(true)

.ProxyURL(Url.Action("Excel_Export_Save", "Grid"))

)

And my editor template WlbLine.cshtml

@model Umki2.Areas.Wlb.Models.WlbLine

@(Html.Kendo().DropDownListFor(m => m)

.AutoBind(false)

.OptionLabel("Select Line...")

.DataTextField("LineNo")

.DataValueField("Id")

.DataSource(dataSource =>

{

dataSource.Read(read => read.Action("GetLines", "WlbWeldLogBook", new { area = "Wlb" }))

.ServerFiltering(true);

})

)

@Html.ValidationMessageFor(m => m)

Finally my controller :

public JsonResult GetLines()

{

return Json(

db.WlbLine.Select(x => new

{

Id = x.Id,

LineNo = x.LineNo

}), JsonRequestBehavior.AllowGet);

}

public ActionResult Index()

{

ViewBag.WlbSpoolId = db.WlbSpool.ToList();

ViewBag.WrhIdentityList = db.WrhIdentityList.ToList();

return View();

}

public ActionResult Grid_Read([DataSourceRequest]DataSourceRequest request)

{

IQueryable<WlbJoint> WlbJoint = db.WlbJoint;

var model = from o in db.WlbJoint

select new VmWlbWeldLogBook

{

Id = o.Id,

JointNo = o.JointNo,

WeldingProcess = o.WeldingProcess,

WlbJointType = o.WlbJointType,

WlbJointLocation = o.WlbJointLocation,

WlbSpoolId = o.WlbSpoolId,

WrhIdentity1Id = o.WrhIdentity1Id,

WrhIdentity2Id = o.WrhIdentity2Id,

WlbLineId = o.WlbSpool.WlbIsometric.WlbLineId,

PID = o.WlbSpool.WlbIsometric.WlbLine.PID

};

DataSourceResult result = model.ToDataSourceResult(request);

return Json(result);

}

Grid

answered on 11 Mar 2015

1 answer

275 views

Label Template for Linear Gauge

OK.

I know I'm not the brightest button in the box, but I feel even more stupid after spending the better part of a day trying to work this out.

I have a gauge with 5 values and I want to put a text label next to the major tick of each one on the chart but I can't get anything to work.

My chart definition looks like this...

@(Html.Kendo().LinearGauge()

.Name("progressGauge")

.Pointer(pointer => pointer

.Value(2.5)

.Shape(GaugeLinearPointerShape.Arrow)

)

.Scale(scale => scale

.MajorUnit(1)

.MinorUnit(0.5)

.Max(4)

.Vertical(false)

.Ranges(ranges =>

{

ranges.Add().From(0).To(1).Color("#dbe5f1");

ranges.Add().From(1).To(2).Color("#cadbf0");

ranges.Add().From(2).To(3).Color("#b2c9e5");

ranges.Add().From(3).To(4).Color("#94b6df");

})

)

I'm trying to put in a template that will allow the value of the label to be changed.

A post on StackOverflow pointed me in the right direction (I think) but it assumed I was working with kendo directly. It's my attempt to get the template working with the MVC wrappers that has me stumped.

A line like this works...

.Labels(x=>x

.Template("#= 't' #")

)

insomuch that it prints 't' as the label for each item, so it's of no practical help.

Any kind of JS just returns an error. for example, ...

.Labels(x=>x

.Template("# 'function(r){ return 't'} #")

)

reports the following error in Chrome...

Uncaught Error: Invalid template:'# 'function(r){ return 't'} #' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput=''; 'function(r){ return 't'} ;$kendoOutput+='';}return $kendoOutput;'

I wondered if the JS was simply being executed, so I tried this ...

.Labels(x=>x

.Template("#= 'function(r){ return 't'} #")

)

and that get's me a slightly different error....

Uncaught Error: Invalid template:'#= 'function(r){ return 't'} #' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput=''+( 'function(r){ return 't'} )+'';}return $kendoOutput;'

So, I'm falling at the first fence,. The most frustrating thing is that I can't find any meaningful documentation.

Can some one PLEASE help me?

Chart

answered on 11 Mar 2015

1 answer

756 views

Conditional CheckBox for Enabling and Disabling

Hi All,
I am stuck with a very small problem. Please help me in solution to the problem.
Basically, I need to compare the value in the BatchingStatus field in my dataset accordingly need to disable the checkbox in the grid.
Following is my code. Attached the screen shot of portal.

@using (Html.BeginForm("ReplaySelectedMessages", "Home"))
{

<div id="gridContent">
<h1></h1>
@(Html.Kendo().Grid<XYZ.MessageReplay.MvcApp.Models.LogModel>(Model)
.Name("gridTable")
//.EnableCustomBinding(true)

.HtmlAttributes(new {style = "font-family: verdana,arial,sans-serif; font-size: 11px;color: #333333;border-color: #999999;"})
.Columns(columns =>
{

columns.Template(@<text>#if(@item.BatchingStatus) == 0 { # <input class='box' id='assignChkBx' name='assignChkBx' type='checkbox' value='@item.LogID' /> #} else {# <input class='box' id='assignChkBx' name='assignChkBx' type='checkbox' value='@item.LogID' disabled='disabled'/> #} # </text>).HeaderTemplate(@<text><input class="selectAll" type="checkbox" id="allBox" onclick="toggleSelection()"/></text>).Width(20);
columns.Bound(p => p.LogID).Template(p => Html.ActionLink(((string)p.LogID), "MessageDetails", new { logid = p.LogID })).Width(200);
columns.Bound(p => p.ReceivePortName)
.Width(100)
.Filterable(ft => ft.UI("ReceivePortsFilter").Extra(false));
columns.Bound(p => p.SendPortName).Width(100).Filterable(ft => ft.UI("SendPortsFilter").Extra(false));
columns.Bound(p => p.loggedDate).Format("{0:MM/dd/yyyy hh:mm tt}").Filterable(f => f.UI("DateTimeFilter").Extra(true)).Width(100);
columns.Bound(p => p.ControlID).Width(100).Filterable(e => e.Extra(false));
columns.Bound(p => p.SenderID).Width(100).Filterable(ft => ft.UI("SenderIDFilter").Extra(false));
columns.Bound(p => p.ReceiverID).Width(100).Filterable(ft => ft.UI("ReceiverIDFilter").Extra(false));
columns.Bound(p => p.InterchangeID).Width(100).Filterable(e => e.Extra(false));
columns.Bound(p => p.ReplayedCount).Width(100).Filterable(e => e.Extra(false));
columns.Bound(p => p.RetryCount).Width(100).Filterable(e => e.Extra(false));
columns.Bound(p => p.AckCode).Width(100).Filterable(e => e.Extra(false));
columns.Bound(p => p.BatchingStatus).Width(100).Filterable(e => e.Extra(false));
})
// .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.Filterable()
.Pageable(page => page.PageSizes(new int[]{10,25,50,100}).Enabled(true))
.Sortable()
.Scrollable(src => src.Height("auto"))
.Resizable(resize => resize.Columns(true))
)

Grid

answered on 10 Mar 2015

1 answer

88 views

Behavior stange in combobox

I show you the scenario, we have a combobox with filter “contains”.

Combobox ProductorSearch

@model int

@(Html.Kendo().ComboBox()

.Name("ContactID")

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

.AutoBind(false)

.Placeholder("Escriu...")

.DataTextField("Nom")

.DataValueField("ContactID")

.Filter(FilterType.Contains)

.MinLength(4)

.DataSource(source =>

{

source.Read(read => read.Action("SearchProductors", "Productors", new { area = "Comercial" }).Data("filterProductors"))

.ServerFiltering(true);

})

//.HeaderTemplateId("ProductorSearch_HeaderTemplate")

.TemplateId("ProductorSearch_ItemTemplate")

)

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

<div>

<span class="k-widget k-header">Productor</span>

<span class="k-widget k-header">Poblacio</span>

</div>

</script>

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

<div style="width:300px">

@*<span class="k-state-default">#: data.Poblacio #</span>*@

<p><span class="k-state-default">#: data.Nom #</span><span class="k-state-default">#: data.Poblacio #</span></p>

</div>

</script>

Model

public class CollectServiceViewModel

{

[DisplayName("Ordre")]

[HiddenInput(DisplayValue = false)]

[Required(ErrorMessage = "El número d'ordre es obligatori.")]

public int ServiceID { get; set; }

[DisplayName("Albarà")]

public string RefExt { get; set; }

[DisplayName("Full Seguiment")]

public string DocNum { get; set; }

[DisplayName("Data Comanda")]

//[DisplayFormat(DataFormatString = "{0:d}")]

[DataType(DataType.Date)]

public DateTime DataOrdre { get; set; }

[DisplayName("Data Servei")]

[DataType(DataType.Date)]

[UIHint("CustomDate")]

public Nullable<DateTime> DataServei { get; set; }

[DisplayName("Expedició")]

[UIHint("ExpeditionsByData")]

public Nullable<int> ExpeditionID { get; set; }

//public Nullable<short> Position { get; set; }

[DisplayName("Urgent")]

public bool Urgent { get; set; }

[DisplayName("Reclamat")]

[DataType(DataType.Date)]

public Nullable<DateTime> DataClaim { get; set; }

[DisplayName("Recollida Extra")]

public bool Extra { get; set; }

[DisplayName("Productor")]

[Required(ErrorMessage = "El productor es obligatori.")]

[UIHint("ProductorSearch")]

public int ContactID { get; set; }

[DisplayName("Productor")]

[HiddenInput(DisplayValue = false)]

public string ProductorName { get; set; }

Grid in View

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

.Name("collects")

.HtmlAttributes(new { style = "height: 100%; border: 0;" })

.Scrollable()

.ToolBar(t =>

{

if (User.IsInRole("Modify"))

{

t.Create().Text("Nou Servei");

}

})

.Columns(columns =>

{

columns.Bound(f => f.ServiceID).Width(80);

columns.Bound(f => f.DataServei).Width(110);

columns.Bound(f => f.RefExt).Width(110);

columns.Bound(f => f.DocNum).Width(110);

columns.Bound(f => f.ProductorName).Width(300).Filterable(f => f.Operators(g => g.ForString(h => { h.Clear(); h.Contains(

"Conté"); })));

columns.Bound(f => f.ContactID).Title("Codi").Width(80);

The first time I write a text with 4 o more chars my chars are hidden and then I can see a char 0. This behavior is only occurred the first time, after that the behavior is normal.

Thanks in advance.
Xavier

Grid

answered on 10 Mar 2015

2 answers

90 views

The right combination of MobileApplication and MVC forms

Hi guys,

I have an MVC app built using the MobileApplication wrapper. Everything is working fine but I'm struggling with incorporating a form that submits to the controller. Everything I've found says the MobileApplication wrapper turns your site into a SPA which is great so no postbacks. That means all of the forms have to be created using Ajax.BeginForm rather than Html.BeginForm. I can't seem the find the right combination of setting ServerNavigation(true|false) and building a form that works in my MobileViews.

In my View I have the form defined as Content but looking at the markup it never actually created the <form> tag. Here's an example of one of my form markup:

@(Html.Kendo().MobileView()

.Title("Site Verification")

.Name("outage-details-view")

.Content(@<text>

@using (Ajax.BeginForm("OutageDetails", "Outage", new AjaxOptions

{

HttpMethod = "POST"

}))

{

@Html.ValidationSummary(true);

@Html.AntiForgeryToken()

<div class="form-group">

@Html.LabelFor(model => model.MeterNumber)

@Html.TextBoxFor(model => model.MeterNumber, new { @type = "number", @class = "form-control", placeholder = "Meter Number" })

</div>

<div class="form-group">

<label>OR</label>

</div>

<div class="form-group">

@Html.LabelFor(model => model.SiteId)

@Html.TextBoxFor(model => model.SiteId, new { @class = "form-control", @type = "number", placeholder = "Site ID" })

</div>

<input type="submit" value="Next"/>

}

</text>)

)

The markup is displaying the form elements, but not the surrounding <form> tag so nothing is firing.

Thanks

Application

answered on 09 Mar 2015

1 answer

76 views

Grid PDF Export

I know that the 2015 Q1 release has a fix in it to allow all pages to be included when doing a PDF export from a grid.

I also know that the beta version is only a trial and not a commercial version of the product and why this is so.

I'm coming under a fair bit of pressure to get this fix in place.

So,

What will the impact be on my application if I use the trial version?
Do we have any sort of a timescale for the official release if Q1 for UI for MVC

Grid

answered on 09 Mar 2015

1 answer

337 views

Excel export settings don't work after setOptions()

Hi

I'm using 2014.3.1119.440 version of Kendo MVC UI.
I configured the grid to export all data and a custom filename, and a custom toolbar with export to excel button.

It works fine, when I don't restore grid options using setOptions function.
When I restore it, with my custom toolbar preserve, it looks, like the export options are ignored.
There are only records from current page exported and exported file has a standard name.

I found the settings are correct in the page source.

Do I need some extra steps to make the settings working after restoring grid options?

Here's my razor grid code:

@{ Html.Kendo().Grid<Vectra.CPN.CPNLibrary.ViewModel.TRANSFER_IN_V>()

.Name("MainGrid")

.ToolBar(toolBar => toolBar.Template(@<text>

<input class="t-button" type="button" id="ShowCreateNewExtFormId" name="ShowCreateNewExtForm" value="@Resources.Create" onclick="location.assign('@Url.Content("~/" + ControllerName + "/New")')"/>

<input class="t-button" type="button" id="ShowEditFormId" name="ShowEditForm" value="@Resources.Edit" />

<input class="t-button" type="button" id="ShowDetailFormId" name="ShowDetailForm" value="@Resources.Details" />

<a class="k-button k-button-icontext k-grid-excel" href="#"><span class="k-icon k-i-excel"></span>Zapisz do Excela</a>

<a href="" class="k-button" id="save">Save View</a>

<a href="" class="k-button" id="load">Restore View</a>

</text>)

)

.Excel(ex => ex.AllPages(true).FileName("cpn_do_vectry_" + DateTime.Now.ToShortDateString() + ".xlsx"))

.ColumnMenu(column => column.Columns(true))

.Columns(columns => columns.LoadSettings((IEnumerable<GridColumnSettings>)ViewBag.GridColumns))

.Reorderable(reorder => reorder.Columns(true))

.Sortable(sortable => sortable.Enabled(true).SortMode(GridSortMode.SingleColumn).AllowUnsort(true))

.Pageable(pageable => pageable.Enabled(true).Refresh(true).ButtonCount(5).PageSizes(true).PageSizes(new int[] { 5, 10, 20, 50 }))

.Filterable(filtering => filtering.Enabled(true))

.Selectable(s => s.Mode(Kendo.Mvc.UI.GridSelectionMode.Single).Type(GridSelectionType.Row))

.Events(events => events.Change("onChange"))

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("TransferIn_Read", "TransferIn"))

.Model(model => model.Id(o => o.TRANSFER_ID))

.ServerOperation(false)

)

.AutoBind(false)

.Render()

;

}

and here's the part of my javascript for saving and restoring grid options:

var localStorageKey = "MainTransferInOptions";

var areOptionsLoaded = false;

function bindSaveRestoreCliks()

{

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

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

e.preventDefault();

localStorage[localStorageKey] = kendo.stringify(grid.getOptions());

});

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

e.preventDefault();

loadGridOptions(e);

});

}

function loadGridOptions(e)

{

if (e == undefined || e.type == "click" || (!areOptionsLoaded && e.type == "read"))

{

var rawGrid = $("#MainGrid");

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

var options = localStorage[localStorageKey];

var toolbar = $("#MainGrid").find(".k-grid-toolbar").html();

if (options) {

grid.setOptions(JSON.parse(options));

}

else if (!areOptionsLoaded && e == undefined)

{

grid.dataSource.read();

}

var newtoolbar = $("#MainGrid").find(".k-grid-toolbar");

$("#MainGrid").find(".k-grid-toolbar").html(toolbar);

bindSaveRestoreCliks();

areOptionsLoaded = true;

}

I restore the settings on page load:

$(window).ready(function (e) {

loadGridOptions(undefined);

}

);

Thanks in advance.

Paweł

Grid

answered on 07 Mar 2015

1 answer

82 views

Is there controls for Excel-like Power View functionality

Hello,

Does Telerik has something similar to Excel's Power View functionality?
Like this: https://support.office.com/en-za/article/Create-a-Power-View-sheet-in-Excel-2013-b23d768d-7586-47fe-97bd-89b80967a405#

I need something like a Pivot Grid at top and charts below it showing data presented in pivot Grid.
Here is DevExpress' functionality similar to what I want to have: https://demos.devexpress.com/MVCxPivotGridDemos/DataOutput/ChartsIntegration

Does having one datasource connected to both (grid and chart) make this integration work? Do you have any examples or demos?

Thank you,
Andrei

General Discussions

answered on 06 Mar 2015

2 answers

1.1K+ views

DatePicker display wrong format

Hello,

I've got a page with two DatePickerFor. My problem is that one display a good format and the other no.

They are implemented like this

<div class="col-md-3" style="vertical-align:middle">

@Html.LabelFor(m => m.DateFrom, new { @style = "width:100px" })

@(Html.Kendo().DatePickerFor(m => m.DateFrom)

.Format("{0:yyyy/MM/dd}")

.ParseFormats(new String[] { "MM/dd/yyyy hh:mm:ss" })

)

</div>

<div class="col-md-3" style="vertical-align:middle">

@Html.LabelFor(m => m.DateTo, new { @style = "width:75px" })

@(Html.Kendo().DatePickerFor(m => m.DateTo)

.Format("{0:yyyy/MM/dd}")

.ParseFormats(new String[] { "MM/dd/yyyy hh:mm:ss" })

)

</div>

These DatePickerFor are linked to my model. The properties are both DateTime

[Required]

[DataType(DataType.Date)]

[Display(Name = "Date from")]

public DateTime DateFrom { get; set; }

[Required]

[DataType(DataType.Date)]

[Display(Name = "Date to")]

public DateTime DateTo { get; set; }

When I look at the generated HTML, I've got this

<input aria-readonly="false"

aria-disabled="false"

aria-owns="DateFrom_dateview"

aria-expanded="false"

role="combobox"

class="k-input"

style="width: 100%;"

data-role="datepicker"

data-val="true"

data-val-date="The field Date from must be a date."

data-val-required="The Date from field is required."

id="DateFrom" name="DateFrom"

value="02/23/2015 00:00:00"

type="text">

jQuery(function(){jQuery("#DateFrom").kendoDatePicker({"format":"yyyy/MM/dd","parseFormats":["yyyy/MM/dd","yyyy.MM.dd","MM/dd/yyyy hh:mm:ss"],"min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});

<input aria-readonly="false"

aria-disabled="false"

aria-owns="DateTo_dateview"

aria-expanded="false"

role="combobox"

class="k-input"

style="width: 100%;"

data-role="datepicker"

data-val="true"

data-val-date="The field Date to must be a date."

data-val-required="The Date to field is required."

id="DateTo"

name="DateTo"

value="03/04/2015 23:59:00" type="text">

jQuery(function(){jQuery("#DateTo").kendoDatePicker({"format":"yyyy/MM/dd","parseFormats":["yyyy/MM/dd","yyyy.MM.dd","MM/dd/yyyy hh:mm:ss"],"min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});

All seem all right, but one DatEpciker display "2015/02/23" (which is what I'm waiting for) and the other one display "03/04/2015 23:59:00".

I don't understand why with the same parameters, one DatePicker display value wiith the good format and not the other one.

Thanks for your help

Antoine

Date/Time Pickers

answered on 06 Mar 2015