Questions on UI for ASP.NET MVC Forum

2 answers

150 views

[Solved] How to move loading icon to top center of listview?

As per the subject question, I have a tall listview - and the loading icon/animation is not visible due to the height of the listview - so I'd like to be able to move it top center (offset down a bit) in the listview client area when loading.

ListView

answered on 01 Apr 2013

1 answer

153 views

Autocomplete dropdown over the textbox

Hello,

I am learning kendoui for MVC and I am having trouble with a very simple example of Autocomplete.

Everything seems to work fine apart from one thing:

When I start typing in the autocomplete something that is found in the data behind the autocomplete, the dropdown falls not below the textbox but over the textbox, therefore I cannot see the suggestion or the cursor and it doesn't look right. The CSS have been included correctly. I am attaching a screenshot before typing and after typing in the autocomplete.

Thanks in advance,

Lefteris

AutoComplete

answered on 01 Apr 2013

1 answer

110 views

Listview with indefinite types

Hello,

I am trying to use a ListView to edit a list of generic components inside a form. Currently, I am using ASP.NET MVC standard mechanism to automatically choose a template editor using the current element type. All elements extend the same abstract class (which serves as the base model of the list) but I need to display the specific information of each subclass inside the editor.

I want to use ListView to have the possibility to add and remove elements from the list but I don't know how to make the template use the ASP.NET MVC .EditorFor mechanism.

Thanks in advance

ListView

answered on 01 Apr 2013

1 answer

358 views

Telerik Kendo UI for ASP.NET MVC VSExtensions and new MVC 4 project

Hello,

when I create a new "Kendo UI for MVC Web Application" project using Telerik Kendo UI for ASP.NET MVC VSExtensions version 2013.1.318.0 and select MVC 4 the project is created without errors. However, there is no support for bundles (as for example when I create a standard MVC4 project). The App_Start folder does not exist in the solution.

Is this normal behaviour?

Thanks in advance,

Lefteris

Installer and VS Extensions

answered on 01 Apr 2013

1 answer

2.0K+ views

MultiSelect cascade from DropDownList

We have two dropdowns, second one CascadeFrom the first, using MVC wrapper. The second dropdown actually needs to be a MultiSelect. MultiSelect doesn't appear to have a CascadeFrom option. Please confirm that cascading is not possible with the new MultiSelect control. Seems like that's something MultiSelect would support. Any known workarounds? Thanks.

Here's the existing code, we're trying to make the second dropdown a MultiSelect

@(Html.Kendo().DropDownListFor(m => m.InputModel.CampusCode).OptionLabel("--- select ---").BindTo(Model.Campuses))

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

.DataTextField("FullName")

.DataValueField("ClientUserCode")

.DataSource(source =>

{

source.Read(read => read.Url("/GetCampusUsers);

source.ServerFiltering(true);

})

.OptionLabel("-- select --")

.AutoBind(false)

.CascadeFrom("InputModel_CampusCode")

)

MultiSelect

answered on 29 Mar 2013

1 answer

83 views

Switching content / comtrols in a tab strip

Hello,
so I have a page with a autocomplete textbox. The user types in a value and depending on the selected value a tabstrip loads with multiple tabs with kendo ui grids on them. 4 seperate tabs. A parent child relationship exists to the tabbed data. I have this working correctly.The behavior I'd like to implement would be if no data exists for one of the tabs (child data), the grid view on that tab does not show but a label or text telling the user that no data exists for this client. Is this behavior possible ? If so how could I implement it?

Thanks

TabStrip

answered on 29 Mar 2013

1 answer

172 views

Read-only DateTime column on creation/update

I have a grid that is working well, except that I am unable to create or update a row that contains a date.

On the back-end, my model class looks like this:

public class Model

{

public Model() {

this.CreateDate = DateTime.UtcNow;

}

// Other properties

public DateTime CreateDate { get; private set; }

}

In my MVC cshtml file I have:

// Other setup...

.DataSource(ds =>

ds.Ajax()

.Model(model =>

{

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

model.Field(m => m.CreateDate).Editable(false);

})

// more...

I would think that with this code that the data source would not try to pass the CreateDate field at all to the server, since it is read only. This appears not to be the case and it passes something that MVC doesn't understand such as "Wed Mar 27 2013 16:41:40 GMT-0400 (Eastern Daylight Time)." How do I prevent it from sending this value?

Grid

answered on 29 Mar 2013

1 answer

165 views

Aggregates 0 when initially bound to model using ajax binding

Hi,
I don't know if I'm doing something wrong but I have a page with a grid that is populated with IQueryable<Grant> data initially using BindTo and are ajax bound with aggregates. When the page loads, the aggregate total (sum) shows 0. As soon as I sort or page the aggregates are populated so I'm not sure what's going on.

My grid is as follows:

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

.Name("gd-gt")

.BindTo(Model.Grants)

.Columns(c =>

{

c.Bound(g => g.GrantDate).Width(90).Format("{0:MM/dd/yyyy}").HtmlAttributes(new { style = "text-align:center;" });

c.Bound(g => g.ResultText).Title("Special Result").Sortable(false);

c.Bound(g => g.Amount).Format("{0:C2}").Width(80).HtmlAttributes(new { style = "text-align:right;" })

.ClientFooterTemplate("#=kendo.toString(sum, 'C2')#").FooterHtmlAttributes(new { style = "text-align:right;" });

})

.Pageable()

.Sortable(s => s.AllowUnsort(false))

.DataSource(ds => ds

.Ajax()

.ServerOperation(true)

.PageSize(5)

.Aggregates(aggregates =>

{

aggregates.Add(g => g.Amount).Sum();

})

.Model(model =>

{

model.Id(m => m.GrantId);

})

.Read(read => read.Action("LoadGrants", "Home", new { caseId = caseId }))

.Sort(s => { s.Add(g => g.GrantDate).Descending(); })

))

)

Any suggestions?

Thank you.
David A.

Grid

answered on 29 Mar 2013

1 answer

145 views

Server filtering sends no data

Data Source has:

    serverFiltering: true,

Grid has:

           filterable: true,

When the Filter is selected from the columnMenu, nothing goes across the wire per Fiddler and the C# breakpoint is not hit. (Sorting server-side on this grid works fine, HttpGet breakpoint in the Controller is hit for every change.)

And fyi the filter doesn't seem to work at all in Chrome, it won't accept a text value to search.

For the browsers where it works, do I have to do something else to enable the grid to Filter on the server?

Grid

answered on 29 Mar 2013

4 answers

257 views

[Solved] Kendo UI mobile using ASP.NET MVC

I'm using trial version of Kendo UI Complete for ASP.NET MVC to test some features of the mobile component.
I'm trying to build a mobile app to test some features, but I'm having some problems to understand some concepts.

1. The initialization of the app:

var app = new kendo.mobile.Application();

Should be done just once, to be able to use the navigation capabilities of the kendo framework, am I right? Using the MVC pattern of ASP.NET MVC, where is the best place to put this piece of code? There is some best practice/suggestion to place the initialization?

2. This question is related with the first one. In the "Create" view, I have the following code:

@model MiniSIGEMobile.Models.Student

@using (Html.BeginForm()) {

@Html.AntiForgeryToken()

@Html.ValidationSummary(true)

<ul data-role="listview" data-inset="true">

<li data-role="fieldcontain">

@Html.LabelFor(model => model.Person.FirstName)

@Html.EditorFor(model => model.Person.FirstName)

@Html.ValidationMessageFor(model => model.Person.FirstName)

</li>

<li data-role="fieldcontain">

@Html.LabelFor(model => model.Person.Age)

@Html.EditorFor(model => model.Person.Age)

@Html.ValidationMessageFor(model => model.Person.Age)

</li>

<li data-role="fieldcontain">

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

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

@Html.ValidationMessageFor(model => model.Course)

</li>

<li data-role="fieldcontain">

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

</li>

</ul>

}

And the "Create" action in the controller is like this:

// POST: /Student/Create

[HttpPost]

[ValidateAntiForgeryToken]

public ActionResult Create(Student student)

{

if (ModelState.IsValid)

{

db.Students.Add(student);

db.SaveChanges();

return RedirectToAction("Index");

}

return View(student);

}

So when I click the "Create" button, the information is stored in the database, but the RedirectToAction("Index") is forcing the rebuild of all HTML, so the mobile app is no more initialized, without the mobile styles (because I'm initializing just once in another controller action).
How should I solve this?

3. Finally, I would Like to know how can I change the style of the "Create" input to be like a kendoMobileButton?

Any kind of suggestion or guidance will be very appreciated!

General Discussions

answered on 29 Mar 2013