Questions on UI for ASP.NET MVC Forum

2 answers

1.2K+ views

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

144 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

537 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

155 views

[Solved] 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

276 views

[Solved] 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

316 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

7 answers

140 views

[Solved] How was the Unit Price custom editor accomplished on the grid/editing-custom demo?

I may be missing something obvious here, but how was the Unit Price NumericTextBox with a minimum of 1 accomplished on the demo at http://demos.telerik.com/aspnet-mvc/grid/editing-custom ? I only see one mention of UnitPrice in the example code

columns.Bound(p => p.UnitPrice).Width(120);

but surely that's not all there was to it. When I view the demo page's source I also see a kendo.data.DataSource being created with:

UnitPrice: { type: "number", validation: { required: true, min: 1} }

but it still seems like there would be something else going on in the @(Html.Kendo().Grid definition to make the editor use a NumericTextBox over just a plain textbox.

Is there anything else going on, and if so, where can I find the details? I'm not seeing any more information in the local demo project either, but I might just be looking in the wrong place. Or is there a better demo example I can look at that shows how to do just the NumericTextBox in a grid?

Grid

answered on 19 Mar 2015

1 answer

177 views

Treelist expanded by default

How can I set my treelist to expanded state by default ?

TreeList

answered on 19 Mar 2015

3 answers

292 views

Setting colors for events

Hi,

We need to set different colors for different events based upon a status value (Approve/Reject) dynamically.
We tried the sample on your site.

.Resources(resource =>

{

resource.Add(m => m.OwnerID)

.Title("Owner")

.DataTextField("Text")

.DataValueField("Value")

.DataColorField("Color")

.BindTo(new[] {

new { Text = "Alex", Value = 1, Color = "#f8a398" } ,

new { Text = "Bob", Value = 2, Color = "#51a0ed" } ,

new { Text = "Charlie", Value = 3, Color = "#56ca85" }

});

})

But our requirement is to load datasource for resource dynamically with StatusId and StatusColor.

Thanks,
Jazeel

Scheduler

answered on 19 Mar 2015

4 answers

741 views

[Solved] Custom editing - binding dropdownlist to a grid cell

Hi

I'm trying to reproduce the custom editing sample with dropdownlist inside the gridcell.
For some reason, the combo is not created...

I'm attaching the project to this message.

Do I miss any script for the project?

Thank you in advance,
Shabtai

Grid

answered on 19 Mar 2015