Questions on UI for ASP.NET MVC Forum

1 answer

827 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.7K+ 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

214 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

292 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

93 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

467 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

114 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

239 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

2 answers

283 views

Custom editor not working with editCell method

Hi, i have a kendo grid with custom editor that show comboBox or dropDownList or datePicker.
It work correctly if i manually focus on column.

I need to show cell editor from code, so i call myGrid.editCell(myCol), but i noticed that this method work correcly only with columns without custom editor (it's show inputbox and focus on it).
With custom editor columns it's show the corresponding element (comboBox, dropDownList, datePicker ecc...) but if i click the widget not respond (es. not open comboBox or dropdownList or datePicker window).

my kendo ui version is v2014.2.1008

Any solution?
Thanks

Grid

answered on 19 Mar 2015