Questions on UI for ASP.NET MVC Forum

4 answers

101 views

Display different data in dropdownlist if we update or create

Hi,

I have a grid inline with two fields "OrigenId" and "DestiID". These fields uses foreignkey and two templates named "GetOrigenOnPlanning" and "GetDestiOnPlanning". Now I explaind to you that I need, the data inside in template will be different in function if user selects update or create. The problem is I don't find a event is traggered before the data are inserted in dropboxlist, I tested with event edit or event push of the datasource object.

GRID

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

.Name("expedition")

.HtmlAttributes(new { style = "margin-bottom:10px;" })

.Scrollable()

.ToolBar(t =>

{

if (User.IsInRole("Modify"))

{

t.Create().Text("Afegir Expedicio");

}

})

.Columns(columns =>

{

columns.Bound(f => f.ExpeditionID).Width(90);

columns.Bound(f => f.Data).Width(100);

columns.ForeignKey(f => f.OrigenID, (System.Collections.IEnumerable)ViewBag.Centres, "ContactID", "Nom").Width(120).EditorTemplateName("GetOrigenOnPlanning");

columns.ForeignKey(f => f.DestiID, (System.Collections.IEnumerable)ViewBag.Centres, "ContactID", "Nom").Width(120).EditorTemplateName("GetDestiOnPlanning");

columns.ForeignKey(f => f.VehicleID, (System.Collections.IEnumerable)ViewBag.Vehicles, "VehicleID", "Matricula").Width(110).EditorTemplateName("CustomGridForeignKey");

columns.ForeignKey(f => f.XoferID, (System.Collections.IEnumerable)ViewBag.Xofers, "PersonID", "Nom").Width(200).EditorTemplateName("CustomGridForeignKey");

if (User.IsInRole("Modify"))

{

columns.Command(commands =>

{

commands.Edit();

commands.Destroy();

});

}

})

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

.Events(e => e

.Change("onChange")

.Edit("onEdit")

)

.Sortable()

.Selectable()

.Pageable(pageable => pageable.Refresh(true))

.Navigatable()

.Filterable()

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Model(m =>

{

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

m.Field(f => f.ExpeditionID).Editable(false);

m.Field(f => f.Data).DefaultValue(ViewBag.date);

//m.Field(f => f.OrigenID).DefaultValue(ViewBag.CentreUsuari);

//m.Field(f => f.DestiID).DefaultValue(ViewBag.CentreUsuari);

})

.Events(e => e

.Error(@<text>

function (e) {

onError(e, "expedition");

}

</text>)

.Push("onPush")

)

.Read("Read", "Planning", new { date = ViewBag.date })

.Create("Create", "Planning")

.Update("Update", "Planning")

.Destroy("Destroy", "Planning")

)

TEMPLATES

@model object

@(

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

.Name("OrigenID")

.DataTextField("Nom")

.DataValueField("ContactID")

.ValuePrimitive(true)

.AutoBind(true)

.DataSource(source =>

{

source.Read(read =>

{

read.Action("SearchCentres", "Productors", new { area = "Comercial" }).Data("filterCentres");

})

.ServerFiltering(true);

})

)

@model object

@(

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

.Name("DestiID")

.DataTextField("Nom")

.DataValueField("ContactID")

.ValuePrimitive(true)

.AutoBind(true)

.DataSource(source =>

{

source.Read(read =>

{

read.Action("SearchCentres", "Productors", new { area = "Comercial" }).Data("filterCentres");

})

.ServerFiltering(true);

})

)

function filterCentres() {

return {

contactCreate : isCreate

};

}

Code Event Edit and Push

var isCreate;

function onPush(e) {

if (e.type == "update") {

isCreate = false;

} else {

if (e.type == "create")

isCreate = true;

}

function onEdit(e) {

if (!e.model.isNew()) {

isCreate = false;

//$("#expedition tbody [data-role=dropdownlist]").each(function () {

// var ddl = $(this).data("kendoDropDownList");

// if (ddl) {

// ddl.options.optionLabel = ddl.value;

//ddl.refresh();

//ddl.Value("");

// }

//})

} else {

isCreate = true;

$("#expedition tbody [data-role=dropdownlist]").each(function () {

var ddl = $(this).data("kendoDropDownList");

if (ddl) {

ddl.options.optionLabel = "-Select Please-";

ddl.refresh();

ddl.value("");

}

})

}

Thanks in advance.

Xavier de la Rubia.

Grid

answered on 29 Jun 2015

2 answers

350 views

Turn grid caching off for IE using web API

I have an IE problem with caching that i've seen many different places. My grid works fine on chrome/firefox, and it loads fine on IE. but if i add a new row set of data, the IE grid refresh doesn't show it. It's caching and I don't have a way to turn it off. The options i've seen on your site are:

set output cache to nostore ( http://www.sliqtools.co.uk/blog/net/asp-net-mvc-disable-cache-to-keep-ajax-working-ok/ ) , but this option is ONLY available in the MVC controller, not Web API.
use cache:false (https://stackoverflow.com/questions/14975103/how-to-disable-read-request-cache-in-kendo-ui-data-source). This option isn't available as an MVC wrapper though.
use HttpPost instead of HttpGet ( http://www.telerik.com/forums/prevent-ajax-caching-on-read ) . This option actually does work, but it breaks paging. For some reason it shows ALL rows in the grid, but still shows the paging at the bottom as if it was only showing 10 rows. Very odd, and totally broken (clicking on any of the paging buttons does nothing).

Are there any other options out there for an MVC Wrapper, Web API datasource that can't use HttpPost?

Grid

answered on 26 Jun 2015

1 answer

387 views

Edit multiple models in one UI

I've searched around but haven't found a concise example for this yet.

I have an object graph with nested data such as coming from Entity Framework
Parent
Multiple Children
Multiple Children

I need to provide the user a way to modify/create the parent as well as the children in as simple a way as possible in a single UI. How can I accomplish this using Kendo MVC with MS MVC 5? If possible I'd rather not manually create a ViewModel and have to do translation between the object graph and the ViewModel. If that's the only solution then I guess that's what I have to do but I was hoping to be able to use the EF model directly. Any suggestions are greatly appreciated.

General Discussions

answered on 26 Jun 2015

1 answer

100 views

Multiple drag & drop

Hello,

Is it possible to drag & drop multiple items from one listview to another at once?

Sortable

answered on 26 Jun 2015

2 answers

265 views

Windows not working

I am not sure when this window stopped working, it was working before. I have made a test and get an undefined error.
We have published a new version of site and this error is live, any ideas I am under pressure to fix this, thanks
Example is on VB

@code

Layout = Nothing

End Code

<link href="~/content/kendo/kendo.common.min.css" rel="stylesheet" />

<link href="~/content/kendo/kendo.mobile.all.min.css" rel="stylesheet" />

<link href="~/content/kendo/kendo.dataviz.min.css" rel="stylesheet" />

<link href="~/content/kendo/kendo.default.min.css" rel="stylesheet" />

<link href="~/Content/kendo/kendo.dataviz.default.min.css" rel="stylesheet" />

<link href="~/content/kendo/kendo.metro.min.css" rel="stylesheet" />

<link href="~/content/kendo/kendo.default.mobile.min.css" rel="stylesheet" />

<script src="~/Scripts/jquery-2.1.4.js"></script>

<script src="~/Scripts/Kendo/kendo.all.min.js"></script>

<script src="~/scripts/kendo/jszip.min.js"></script>

<script src="~/scripts/kendo/kendo.all.min.js"></script>

<script src="~/scripts/kendo/kendo.aspnetmvc.min.js"></script>

<script src="~/scripts/kendo/kendo.modernizr.custom.js"></script>

@code

Dim AlertWindow As Kendo.Mvc.UI.Window = Html.Kendo.Window().Name("AlertWindow").

Visible(False).Actions(Function(actions) actions.Pin().

Refresh().

Maximize().

Close()).

Width(400).

Title("Warning").

Pinned(True)

AlertWindow.Render()

End Code

<script>

alertWindow("ffffff")

function alertWindow(message) {

var win = $("#AlertWindow").data("kendoWindow");

alert(win)

win.content(

"<div class=\"alert alert-warning\">" + message + "</div>"

);

win.center().toFront().open().restore();

$("#AlertWindow").closest(".k-widget").css({

top: 100,

});

}

</script>

Window

answered on 26 Jun 2015

1 answer

319 views

Save Chart to Image from Controller

What would be the best way to:

1) Generate a chart

2) Convert it to an image

3) Save that chart image to a folder on the server

#1 is done easily enough but I have been unable to find any documentation how how I can make #2 and #3 happen and any help would be most appreciated!

Chart

answered on 26 Jun 2015

8 answers

835 views

Custom editor And foreign key Grid

Hi Guys,
I'm working with mvc and EF + razor.

I'd like to edit a model that is composed like this:
(EF generated from DB first)

public partial class DATACLASS_T003

{

public DATACLASS_T003()

{

this.DATACLASS_ATTRIBUTES_T012 = new HashSet<DATACLASS_ATTRIBUTES_T012>();

}

public long PARENTID { get; set; }

public long CLASSID { get; set; }

public Nullable<long> DATACLASS_PARENTID { get; set; }

public int GEOMETRY_TYPE { get; set; }

public string NAME { get; set; }

public int ID { get; set; }

public virtual ICollection<DATACLASS_ATTRIBUTES_T012> DATACLASS_ATTRIBUTES_T012 { get; set; }

public virtual TIP_GEOMETRY_T014 TIP_GEOMETRY_T014 { get; set; }

}

Now, I handled all the field with a normal razor view...All but the ICollection<DATACLASS_ATTRIBUTES_T012> DATACLASS_ATTRIBUTES_T012

public partial class DATACLASS_ATTRIBUTES_T012

{

public DATACLASS_ATTRIBUTES_T012()

{

this.ATT_VALUES_T004 = new HashSet<ATT_VALUES_T004>();

}

public int ATTRIBUTEID { get; set; }

public int DATACLASS_ID { get; set; }

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

public virtual ICollection<ATT_VALUES_T004> ATT_VALUES_T004 { get; set; }

public virtual DATACLASS_T003 DATACLASS_T003 { get; set; }

public virtual DC_ATTRIBUTES_T006 DC_ATTRIBUTES_T006 { get; set; }

public virtual UNITS_OF_MEASURE_T013 UNITS_OF_MEASURE_T013 { get; set; }

}

Here ATTRIBUTEID is the foreign key for DC_ATTRIBUTES_T006 table while UOM_ID is the foreign key for UNITS_OF_MEASURE_T013 table.

in my grid, I'd like to edit theese fields as combobox. I checked the "custom editor" and "foreign key" example but I'm not able to make them work.

following the custom editor ex, when I enter edit mode (inline or incell) the grid shows me ever entity field (like 4-5).
On the other hand, trying with the foreign key example I got an error
Here is my grid

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

.Name("Grid")

.ToolBar(commands => { commands.Create().Text("New Attribute"); commands.Save(); })

.Columns(columns =>

{

columns.Bound(p => p.ATTRIBUTEID).Title("Attribute");

columns.ForeignKey(p => p.UOM_ID, (System.Collections.IEnumerable)ViewData["Measure"], "ID", "CODE")

.Title("Measure Unit");

})

.Pageable()

.Sortable()

.Scrollable()

.Filterable()

.Editable(mode => mode.Mode(GridEditMode.InCell))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(5)

.ServerOperation(false)

.Batch(true)

.Model(model =>

{

model.Id(v => v.ATTRIBUTEID);

model.Field(v => v.ATTRIBUTEID).Editable(false);

model.Field(v => v.UOM_ID).DefaultValue(1);

})

.Read(r => r.Action("GetAttributeByDataClass/" + Model.ID, "Attribute"))

.Update(r => r.Action("UpdateAttribute", "Attribute"))

)

and my read action:

public ActionResult GetAttributeByDataClass([DataSourceRequest]DataSourceRequest request, long Id)

{

IList<DATACLASS_ATTRIBUTES_T012> res = db.DATACLASS_ATTRIBUTES_T012

.Include(x => x.DC_ATTRIBUTES_T006)

.Include(x => x.UNITS_OF_MEASURE_T013)

.Where(x => x.DATACLASS_ID == Id).ToList();

foreach (DATACLASS_ATTRIBUTES_T012 item in res)

{

item.DC_ATTRIBUTES_T006.DATACLASS_ATTRIBUTES_T012 = null;

item.UNITS_OF_MEASURE_T013.DATACLASS_ATTRIBUTES_T012 = null;

//to avoid circular ref

}

ViewData["Attribute"] = db.DC_ATTRIBUTES_T006;

ViewData["AttributeDefault"] = db.DC_ATTRIBUTES_T006.First();

ViewData["Measure"] = db.UNITS_OF_MEASURE_T013;

DataSourceResult result = res.ToDataSourceResult(request);

return Json(result);

}

The Error I got is: Value cannot be null.Parameter name: items (the controller's action breakpoint is not hit)

The point is that to me, in this view, attributes and measure units are like enum, I'd like to use them just as a combo with Id-Name tuple...all I need is to have the foreign key field not null on update/create.

Thanks
Fabio

Grid

answered on 26 Jun 2015

4 answers

237 views

ImageBrowser not showing files

Using Editor from the demo, but the ImageBrowser is not rendering the UI to select files. Instead it prompts to enter a URL (see attached screenshot)

Looking at the source the Html.Kendo().Editor helper generates it appears that the ImageBrowser properties are ignored and not included in the AJAX call to open the editor.

@(Html.Kendo().Editor()
.Name("editor")
.Tools(tools => tools.Clear().InsertImage().InsertFile())
.ImageBrowser(imageBrowser => imageBrowser
.Image("~/Content/UserFiles/Images/{0}")
.Read("Read", "ImageBrowser")
.Create("Create", "ImageBrowser")
.Destroy("Destroy", "ImageBrowser")
.Upload("Upload", "ImageBrowser")
.Thumbnail("Thumbnail", "ImageBrowser"))
.FileBrowser(fileBrowser => fileBrowser
.File("~/Content/UserFiles/Images/{0}")
.Read("Read", "FileBrowser")
.Create("Create", "FileBrowser")
.Destroy("Destroy", "FileBrowser")
.Upload("Upload", "FileBrowser")
)
)

Editor

answered on 25 Jun 2015

1 answer

182 views

AngularJS with UI for ASP.NET MVC

I am using Telerik UI for ASP.NET MVC. Is it possible to use AngularJS with Telerik UI for ASP.NET MVC? If it's possible, please provide me the detailed documentation or full sample code. It would be a great help if you can provide a full sample code of combobox and grid.

Please let me know the necessary info?

Thanks

General Discussions

answered on 25 Jun 2015

1 answer

478 views

Tabstrip Editor within Tabstrip

I have a Tabstrip within a Grid. When I'm under the "Branch" tab and I click on Add new record or Edit, I want a popup editor to show up with another Tabstrip inside it.

Right now, the popup editor only show up when the popup editor template "PopupBranchEditor" has only plain markup with no Tabstrip inside it. As soon as I add the Tabstrip in the popup editor template, I get the Invalid Template error when I click on Add new record or Edit.

Here's my code where I'm calling the popup editor template:

<script id="TabStripTemplate" type="text/kendo">

@(Html.Kendo().TabStrip()

.Name("TabStrip_#=InstitutionId#")

.SelectedIndex(0)

.Items(items =>

{

items.Add().Text("Branches")

.Content(@<text>

@(Html.Kendo().Grid<BranchViewModel>().Name("Branches_#=InstitutionId#").Columns(column =>

{

column.Bound(branch => branch.Address1);

column.Command(command =>

{

command.Edit();

command.Destroy();

})

.Width(275);

})

.DataSource(d => d

.Ajax().ServerOperation(false)

.Sort(sort => sort.Add("BranchCRD").Ascending())

.Read(read => read.Action("Read", "Branches", new { id = "#=InstitutionId#" }))

.Create(create => create.Action("Create", "Branches", new { id = "#=InstitutionId#" }))

.Update(update => update.Action("Update", "Branches"))

.Destroy(destroy => destroy.Action("Delete", "Branches"))

.Events(events => events.Sync("Sync"))

.Model(model =>

{

model.Id(branch => branch.BranchId); // Specify the property which is the unique identifier of the model

model.Field(branch => branch.BranchId).Editable(false); // Make the ID property not editable

})

.PageSize(5)

)

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("PopupBranchEditor"))

.Filterable(filterable => filterable

.Operators(operators => operators

.ForString(str => str.Clear()

.Contains("Contains")

.IsEqualTo("Is equal to")

)))

.Pageable(pageable => pageable

.PageSizes(new[] { 5, 10, 25, 50 })

.ButtonCount(10))

.Sortable()

.ToolBar(toolbar => toolbar.Create())

.ToClientTemplate()

)

</text>

);

})

.ToClientTemplate())

</script>

Here's the popup editor template with the Tabstrip:

@(Html.Kendo().TabStrip().Animation(false)

.Name("tabstrip")

.Items(tabstrip =>

{

tabstrip.Add().Text("Contact")

.Selected(true)

.Content(@<text>

<div class="form-horizontal">

<div class="form-group">

@Html.LabelFor(model => model.Address1, new { @class = "col-sm-5 control-label" })

<div>

@Html.EditorFor(model => model.Address1)

</div>

</text>);

})

.ToClientTemplate()

)

How do I get the Tabstrip to work in the popup editor template that's inside another Tabstrip?

TabStrip

answered on 25 Jun 2015