Questions on UI for ASP.NET MVC Forum

1 answer

386 views

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

316 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

834 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

1 answer

145 views

MultiSelectFor removing preselected items when filtering additional item

kendo 2015.1.318 \ JQuery 1.10.2 \ MVC 5

@(Html.Kendo().MultiSelectFor(m => m.SelectedUsers)
.Name("SelectedUsersBox")
.DataTextField("DisplayName")
.DataValueField("UserId")
.BindTo(Model.AllUsers)
)

When there are pre-existing items in the box and additional items are added (by typing in some letters and allowing the list to be filtered), some of the existing items which don't match the filter will be removed from the underlying select list. This causes empty items to be posted with the form.

For example a preexisting list of Andrea, Bob. The underlying select list looks like:

<select name="SelectedUsersBox" id="SelectedUsersBox" style="display: none;" multiple="multiple" data-role="multiselect">
    <option value="1" selected="selected">Andrea</option>
    <option value="2">Allan</option>
    <option value="3" selected="selected">Bob</option>
</select>

If the letter "A" is typed into the box, "Andrea" is shown highlighted and "Allan" is not highlighted. As soon as the choice list is filtered to names beginning with "A", the underlying select list looks like (no name is selected\clicked):

<select name="SelectedUsersBox" id="SelectedUsersBox" style="display: none;" multiple="multiple" data-role="multiselect">
    <option value="1" selected="selected">Andrea</option>
    <option value="2">Allan</option>
    <option selected="selected"/>
</select>

If "Allan" is selected the list looks like:

<select name="SelectedUsersBox" id="SelectedUsersBox" style="display: none;" multiple="multiple" data-role="multiselect">
    <option value="1" selected="selected">Andrea</option>
    <option value="2" selected="selected">Allan</option>
    <option selected="selected"/>
</select>

If the form is posted at this point "Bob" is not one of the selected choices. In fact, one of the selected choices has no value!

Is this expected behavior? Am I missing a configuration\setting\property on the MultiSelectFor?

PS: If the user clicks on the box which brings up the entire menu, the select list is rebound and all of the values show up. Unfortunately, having a person click on the box to bring up the menu before submission is not a suitable solution.

MultiSelect

answered on 25 Jun 2015

2 answers

165 views

Kendo Objects stop functioning on load

Hi,

I have a problem that i'm not entirely sure how to describe. So, starting from the beginning: I have a view that has a list of parts and projects. When a part or project is clicked, a kendo window is opened and loads a partial view containing information about the part or project and other kendo objects (buttons, text boxes, drop downs). The first time a project/part is clicked the window loads fine, and even if the user only clicks projects the window loads fine. But if a user clicks a project/part, closes the window, and then clicks the other (either a project or a part) all kendo objects in the window stop working. They lose their styling and their functionality. For example, drop down boxes are no longer drop downs but just a textbox, and not a kendo text box, just a regular one. Buttons turn a dark blue color, lose their styling, and lost their function. And text boxes lose their styling. I've had similar problems before, and I fixed it with name changes of the objects or fixing the javascript functions they link too. Neither worked in this case. I'm not sure what else to try, but all help is welcomed.

I'm reluctant to post all of my code because of my NDA (I'm an intern) but here is the code of the buttons for one of my partial views. The names of all the objects in both windows are different, as in a button that serves the same purpose and displays the same info in partial1 is named differently than in partial2, and neither share a name with an object in the rest of the project.

  <div style="width:100%;text-align:center;">
<div style="display:inline-block; vertical-align:central">
<table>
<tr>
<td>
@Html.Kendo.Button.Name("test1").Content("Add Costs").Events(Sub(events) events.Click("enterActualInfo"))
</td>

<td>
@Html.Kendo.Button.Name("test2").Content("View Change History").Events(Sub(events) events.Click("showProjectHistory"))
</td>

<td>
@Html.Kendo.Button.Name("test3").Content("Target").Events(Sub(events) events.Click("addTarget"))
</td>
</tr>
</table>
</div>
</div>


<script>
function enterActualInfo() {
debugger;
alert("test1");
}
function showProjectHistory() {
alert("test2");
}
function addGPC() {
alert("test3");
}
</script>

I noticed some differences between buttons that work and buttons that don't in the IE DOM Explorer. It seems that the objects are not inheriting the kendo properties. Functioning button: <button tabindex="0" class="k-button" id="addPart" role="button" aria-disabled="false" data-role="button">Add Part</button>Not functioning button: <button id="addPart" role="button">Add Part</button>

I've attached pictures of the difference between functioning and non functioning buttons.

Thanks in advance!

-Eric

General Discussions

answered on 25 Jun 2015