Questions on UI for ASP.NET MVC Forum

1 answer

372 views

I have a custom command and when i clicked it, i want to call an ajax function and if it returns, i want it to be disable. I have more than 1000 rows , and i want to refresh only related row.

@(Html.Kendo().Grid<Umki2.Areas.Wlb.ViewModels.VmWlbWeldLogBook>()

.Name("grid")

.Columns(columns =>

{

columns.Bound(c => c.JointNo).Width(140);

columns.Bound(c => c.WlbJointLocation).Width(190);

columns.Command(command => command.Custom("FitUp").Click("showDetails"));

})

.HtmlAttributes(new { style = "height: 380px;" })

.Scrollable()

.Groupable()

.Sortable()

.Pageable(pageable => pageable

.Refresh(true)

.PageSizes(true)

.ButtonCount(5))

.DataSource(dataSource => dataSource

.Ajax()

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

)

@(Html.Kendo().Window().Name("Details")

.Title("Customer Details")

.Visible(false)

.Modal(true)

.Draggable(true)

.Width(300)

)

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

<div id="details-container">

<h2>#= JointNo # #= JointNo #</h2>

<em>#= WlbJointLocation #</em>

<dl>

<dt>City: #= WlbJointLocation #</dt>

<dt>Address: #= WlbJointLocation #</dt>

</dl>

</div>

</script>

<script type="text/javascript">

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

function showDetails(e) {

e.preventDefault();

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

var wnd = $("#Details").data("kendoWindow");

wnd.content(detailsTemplate(dataItem));

wnd.center().open();

}

</script>

Grid

answered on 11 Mar 2015

2 answers

1.6K+ views

Accessing the Child Nodes of a Selected Node

I have an Ajax populated treeview....

@(Html.Kendo().TreeView()

.Name("fao")

.HtmlAttributes(new {@class="fixed-height" })

.DataTextField("Text")

.TemplateId("treeview-item-template")

.DataSource(ds => ds

.Read(r => r

.Action("_ModuleData", "Home")

)

.Model(m => m

.Children("Items")

.HasChildren("HasChildren")

)

I have a requirement to update some data hidden against each child item - in the template - when a action (triggered outside of the control) occurs.

The template, for completeness, looks like this ...

<script id="treeview-item-template" type="text/kendo-ui-template">

#= item.Text #<input type='hidden' class='hidden-data' data-fal='#= item.Fal#' data-uid='#=item.uid#'/>

</script>

Now, I have code for the trigger and that works just fine.

I have code to update the hidden data. Again. No worries.

What I can't figure out is how to simply get at all of the child (and granchild, etc) nodes of the node that is selected when the trigger fires.

If I were trying to get at the children when the node was initially clicked, I kind of expected to be able to say something like...

function doSomething(e)

{

for(n=0; n<e.node.nodes.length; n++)

{

doSomethingElse(e.node.nodes[n]);

}

But no such functionality seems to exist.

Does anyone have any suggestions how I might go about this?

TreeView

answered on 11 Mar 2015

2 answers

91 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

289 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

820 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

105 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

101 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

84 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

376 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