Questions on UI for ASP.NET MVC Forum

1 answer

481 views

Hi, I'm trying to make a 3-level hierarchic grid. I've seen some example doing this but in my case the nested one is still dependent from the more external and I cannot access ID to populate it.
My code:

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

.Name("dayGrid")

.Columns(columns =>

{

columns.Bound(o => o.Date).Format("{0:d}");

})

.ClientDetailTemplateId("channelTemplate")

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

.Model(model =>

{

model.Id(p => p.DayID);

})

.PageSize(10)

.Read(read => read.Action("ReadSummary", "Rate"))

)

.Pageable()

)

<script id="channelTemplate" type="text/kendo-tmpl">

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

.Name("day_#=DayID#")

.Columns(columns =>

{

columns.Bound(o => o.Channel.Label).Title("Channel");

})

.ClientDetailTemplateId("roomTemplate")

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

model.Id(p => p.ChannelID);

})

.Read(read => read.Action("ReadChannels", "Rate", new { Day = "#=DayID#" }))

)

.ToClientTemplate()

)

</script>

<script id="roomTemplate" type="text/kendo-tmpl">

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

.Name("room_#=DayID##=ChannelID#")

.Columns(columns =>

{

columns.Bound(o => o.Room.Label).Title("Room");

})

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

model.Id(p => p.RoomID);

})

.Read(read => read.Action("ReadRooms", "Rate", new { Day = "#=DayID#", Channel = "#=ChannelID#"}))

)

.ToClientTemplate()

)

</script

In the last one (Grid Room) I cannot access DayID property. How can I accomplish this?

Grid

answered on 24 Mar 2015

1 answer

168 views

Prepopulating Grid with Filter

I have a grid in an MVC view, and upon a button click i am sending its DataSource info to the controller via the parameterMap() and an ajax() posting. something like this:

function sendData() {

var grid = $("#Grid").data("kendoGrid"),

parameterMap = grid.dataSource.transport.parameterMap;

var data = parameterMap({ sort: grid.dataSource.sort(), filter: grid.dataSource.filter(), group: grid.dataSource.group() });

$.ajax({

url: "/Home/UpdateCreateDelete",

data: data,

type: "POST",

This works great, the controller gets the datasourcerequest info. I can use the DataSourceRequest fields to send them later on back to a view with a grid and i can initialize that grid to use the DataSourceRequest fields like this:

// note grid.autobind() set to false, so we can load upon dom ready below:

$(function() {

@{ var request = TempData["request"] as DataSourceRequest; }

    var grid = $("#mygrid").data("kendoGrid");

grid.dataSource.query({

page:  @request.Page,            // WORKS PERFECTLY!

pagesize: @request.PageSize,      // WORKS PERFECTLY!

filter: null, // FAILS IF I use filter: @request.Filter

sort: null, // FAILS IF I use sort: @request.Sort

group: null, // FAILS IF I use group: @request.Group

});

}

The problem is that the loading does not support the filters, sorts, or groups fields from the DataSourceRequest object. How do i convert those DataSourceRequest fields into something that is in proper format for the the Grid.query() function?

Bottom line is that i want to be able to initialize my grid with the filters, sorts, and groupings that were saved from a previous DataSourceRequest.

Grid

answered on 23 Mar 2015

4 answers

168 views

PDF417

Please let me know when or if the PDF417 2-D barcodes plan to be supported in UI for ASP.NET MVC or Kendo UI. Thanks!

QRCode

answered on 23 Mar 2015

1 answer

459 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

858 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

231 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

311 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

98 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