Questions on UI for ASP.NET MVC Forum

1 answer

463 views

Foreign key Name based sort in telerik grid

I have a foreign key column in my grid.
columns.ForeignKey(c => c.ManagerId, (SelectList)ViewData["ManagerIdSource"]);

It sorts by the default Guid and not by the name.
Any way I can achieve this ?

If not supported, is this feature expected anytime soon from Telerik ?

Grid

answered on 23 Mar 2015

1 answer

869 views

Set data-title attribute to every <td> cell

I am into customizing the display of kendo grid in mobile devices.

I need to know if I can achieve this.
I need to set the data-title={the corresponding header title} to each corresponding td cell in a column.

For example I need it this way.

<td data-title="Name" role="gridcell">Joe</td>

Any way I can achieve this ?

Grid

answered on 23 Mar 2015

2 answers

1.8K+ views

String length validation in Masked text box

I am using the following mask for phone and zip code

@(Html.Kendo().MaskedTextBox().Name("phone_number").Mask("(999) 000-0000")

and my model is
[StringLength(10, MinimumLength = 10, ErrorMessageResourceName = "InvalidPhoneNumber", ErrorMessageResourceType = typeof(ErrorMessage), ErrorMessage = null)]
public string phone_number { get; set; }

I am using unobtrusive JS validation
This works fine and throws the validation error for numbers less that 10, but still persists the error message with all digits filled.

I tried setting the min length to 14(to include special characters within), but it never throws the error message by then.
Is there any workaround or is this a known bug ?

MaskedTextBox

answered on 23 Mar 2015

1 answer

235 views

ASP.NET MVC controls are generating inline javaScript

Hello,

We are using ASP.NET MVC controls, and we have one potential deal breaker.

When we open the HTML source off a rendered page we see the HTML code generated by the Telerik control and immediately below it we see a <script> tag with some javascript for that control. This is very bad for us, and we don't want to have javascript code mixed in the HTML.

Is there an alternative to this issue or it is just how the controls are designed?

Thank you!

General Discussions

answered on 23 Mar 2015

1 answer

317 views

Generic Dropdown Editor Template???

I'm creating all of these grids in different views and many require custom edit template. The pattern I'm having to create is a bunch of editor templates for the dropdowns. Is there a way to reuse the editor types with different models. The answer might be no, I just don't have yet the experience with mvc and editor templates for the answer.

My limited and not realistic way would be to have the classes used for the dropdown to inherit from a "BaseDropDown" that has the text and value properties. Then have a case statement determine which dataveiw to use when binding.

Greg

Grid

answered on 20 Mar 2015

2 answers

1.2K+ views

Missing Down Arrow

I have a drop-down list in a collapsible sidebar (defined using css). When placed in the sidebar, the down arrow on the control doesn't show, no matter what the width of the control is set to.

The code is:-

<div id="sidebar-wrapper">

<ul class="sidebar-nav">

<li class="sidebar-brand">

<img src="@Url.Content("~/Content/Images/Trust_Logo.png")" />

</li>

<li style="margin-top:40px;">

<span style="font-size:x-small">Division</span>

@(Html.Kendo().DropDownList()

.Name("ddlDivsion")

.DataValueField("Code")

.DataTextField("Description")

.Events(e => e.Change("onChange"))

.HtmlAttributes(new { style = "width:80px; font-size:x-small;" })

.DataSource(src => src.Read(rd => rd.Action("GetDivisions", "Division")))

)

</li>

</ul>

</div>

And the css that defines the sidebar is:-

#wrapper {

padding-left: 0;

-webkit-transition: all 0.5s ease;

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

transition: all 0.5s ease;

}

#wrapper.toggled {

padding-left: 150px;

}

#sidebar-wrapper {

z-index: 1000;

position: fixed;

left: 150px;

width: 0;

height: 100%;

margin-left: -150px;

overflow-y: auto;

background: #C9F2F8;

-webkit-transition: all 0.5s ease;

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

transition: all 0.5s ease;

}

#wrapper.toggled #sidebar-wrapper {

width: 150px;

}

#page-content-wrapper {

width: 100%;

position: absolute;

padding: 15px;

}

#wrapper.toggled #page-content-wrapper {

position: absolute;

margin-right: -150px;

}

/* Sidebar Styles */

.sidebar-nav {

position: absolute;

top: 0;

width: 150px;

margin: 0;

padding: 0;

list-style: none;

}

.sidebar-nav li {

text-indent: 20px;

line-height: 40px;

margin-top:10px;

}

.sidebar-nav li a {

display: block;

text-decoration: none;

color: #0483AA;

}

.sidebar-nav li a:hover {

text-decoration: none;

color: darkblue;

background: rgba(255,255,255,0.2);

}

.sidebar-nav li a:active,

.sidebar-nav li a:focus {

text-decoration: none;

}

.sidebar-nav > .sidebar-brand {

height: 65px;

font-size: 18px;

line-height: 60px;

}

.sidebar-nav > .sidebar-brand a {

color: #999999;

}

.sidebar-nav > .sidebar-brand a:hover {

color: #fff;

background: none;

}

@media(min-width:768px) {

#wrapper {

padding-left: 150px;

}

#wrapper.toggled {

padding-left: 0;

}

#sidebar-wrapper {

width: 150px;

}

#wrapper.toggled #sidebar-wrapper {

width: 0;

}

#page-content-wrapper {

padding: 20px;

position: relative;

}

#wrapper.toggled #page-content-wrapper {

position: relative;

margin-right: 0;

}

I'm assuming something in the css is causing the issue - but can't work out what.

Thanks

DropDownList

answered on 20 Mar 2015

3 answers

100 views

Label in Donut Chart

Hi,

Before I start hacking around with CSS, is there an obvious way to get a label / title in the centre of a Donut Chart?

Thanks

Chart

answered on 20 Mar 2015

6 answers

511 views

Binding to custom editor for a grid column (i.e. drop down list)

How do you specify a custom editor function for in-line editing with ASP.NET MVC? If I was doing this strictly on the client side I would set the 'editor:' attribute on the column with a javascript function name. Is there a way to specify an editor function using Razor syntax in my view?

FYI, the scenario here is very simple - I have a list of Products and each product record has a Category ID field. When I add or edit a product, I want the user to select from a list of defined categories. The category items can come from server on initial page load or dynamically from ajax (in this case, I really don't care which - the category list doesn't change much).

Thanks in advance.

Grid

answered on 19 Mar 2015

3 answers

126 views

Latest UI ASP.NET MVC

Does the latest update for UI for ASP.NET MVC only install for MVC 5 apps in Visual Studio?

We have a few MVC 4 apps, and the upgrade wizard in VS does not seem to want to update those.

Installer and VS Extensions

answered on 19 Mar 2015

2 answers

263 views

ASP.NET MVC Grid - Filter row with date range filter

I tried to search but have been able to find a solution for this. I am attempting to implement a grid with filter row that allows for filtering on a date range - having a From date entry box and a To date entry box both visible in the filter row. I couldn't find a way to implement templates for the filters on filter rows or really either other way to accomplish this. Any help or examples of someone doing something similar would be a huge help. Thanks,

Grid

answered on 19 Mar 2015