Questions on UI for ASP.NET MVC Forum

1 answer

219 views

Inline insert new row and populate column values

I would like to allow the user to insert new rows inline (but not edit existing rows). The left most column will contain a dropdown list and based on the selection from the dropdown list I would like to then populate the other 4 cells in the new row with specific values which can't be changed by the user? Is this possible

Grid

answered on 12 Mar 2015

3 answers

219 views

Multiple Resource Issues

Using a standard scheduler I am attempting to assign multiple resources. However, on submit I am getting a javascript alert error telling me the "someNumber" is invalid, where some number is the Datavalue for resource RegionRes. ("1" is invalid, "2" is invalid. etc)

The following things happen:

The record is processed and inserting into the database.
The edit form does not close.
Upon cancelling out of the edit form the event does not appear on the schedule.
Upon refreshing no events will appear on the schedule.

However, deleting the the offending record(s) from the join table and refreshing the calendar all events appear again.

Here is the scheduler:

@(Html.Kendo().Scheduler<SchedulerViewModel>()

.Name("scheduler")

.Views(views =>

{

views.DayView();

views.WeekView();

views.MonthView(monthView => monthView.Selected(true));

})

.Resources(resource =>

{

resource.Add(r => r.RegionIds)

.Name("RegionsResource")

.Title("RegionsRes")

.DataTextField("RegionName")

.DataValueField("RegionId")

.Multiple(true)

.DataSource(source =>

{

source.Read(read => { read.Action("RegionDropDownList", "DropDownList"); });

});

resource.Add(v => v.VenueId)

.Name("VenuesResource")

.Title("VenueRes")

.DataTextField("VenueName")

.DataValueField("VenueId")

.BindTo((IEnumerable<VenueViewModel_DDL>)ViewData["Venues"]);

}

)

.DataSource(d => d.Model(m =>

{

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

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

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

m.Field(f => f.IsAllDay).DefaultValue(false);

})

.Read("Read", "Scheduler")

.Create("Create", "Scheduler")

.Destroy("Destroy", "Scheduler")

.Update("Update", "Scheduler")

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

)

.Editable(true)

)

I have also tried a bindto using viewdata to no avail.

It is just very odd that it will display the multiselect for edit and insert the event into the database but not display the event.

As usual any help would be appreciated.

Thanks,
Chris

Scheduler

answered on 11 Mar 2015

1 answer

378 views

Client-side Sorting of Template Columns Bound to Object

I am passing an IEnumerable of viewmodels to the grid at load time. My columns are bound to properties on the viewmodels, which are themselves different viewmodels. Since I am not reading the data via AJAX, I would like to have the data sorted on the client-side. I have .Sortable() called on the grid and .ServerOperation(false) called on the DataSource. When I mouse over the column header, my browser displays a URL like: http://mysite/controller/action?gridName-sort=ColumnName-asc When I click on the column header, the sort arrow appears, changes, or disappears, but the data is not reordered. I tried implementing IComparable and IComparable<T> on my column viewmodel on a suggestion from another user, but this does not appear to work. Can client-side sorting work in this scenario? If so, what do I need to do?

Thanks,
Brian

Grid

answered on 11 Mar 2015

1 answer

118 views

Checkboxes on Scheduler

Hi,

We are evaluating the scheduler control for our application.
We need to add a checkbox on top of each day caption.Please see the attached image. Is there any options to do that?

Thanks,
Jazeel

Scheduler

answered on 11 Mar 2015

1 answer

380 views

MVC Grid Custom Command, Refreshing Row

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

101 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

305 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

840 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