Telerik Forums
UI for ASP.NET MVC Forum
1 answer
467 views
Hi,

I'm kind of new to Kendo UI, and I'm now trying to put a Panel Bar inside of a Tab Strip with the following code. The error I get is "Inline markup blocks (@<p>Content</p>) cannot be nested.  Only one level of inline markup is allowed." It seems to get stuck on the .Content-part under "UnitLogInfo". Any help is really appreciated.

Thanks,
Peter
@(Html.Kendo().TabStrip()
        .Name("SettingsTabStrip")
        .Items(tabstrip =>
        {
            tabstrip.Add()
                .Text("Phone")
                .Selected(true)
                .Content(@<text>
                    @(Html.Kendo().PanelBar()
                        .Name("IntroPanelBar")
                        .Items(panelItems =>
                        {
                            panelItems.Add()
                                .Text("OrtSettings")
                                .Selected(true)
                                .Expanded(true)
                                .Content(@<text>
                                    <p style="padding:0 1em">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                        Donec egestas nisi at hendrerit molestie. Nunc sed lectus vel
                                        enim accumsan faucibus ut vel erat. Quisque pharetra ante mi,
                                        vitae volutpat odio tincidunt sed. Nam et elementum tellus.
                                        Nunc non tellus nisi. Aliquam vitae est ut mi gravida cursus
                                        ut in erat. Praesent eu sollicitudin dui.                                    
                                    </p>
                                </text>);
                            panelItems.Add()
                                .Text("UnitLogInfo")
                                .Content(@<text>
                                    <p style="padding:0 1em">
                                        Aliquam tincidunt luctus augue, vitae tempus tortor ultrices a.
                                        Donec turpis lorem, tempor sed orci ut, volutpat sodales augue.
                                        In egestas, tellus ac vestibulum pharetra, erat lectus facilisis
                                        ligula, eu sollicitudin felis leo sed nibh.                                    </p>
                                </text>);
                        })
                    )
                </text>)
                .ContentHtmlAttributes(new { style = "min-height: 200px" });
            tabstrip.Add()
                .Text("Email")
                .Content(@<text>
                    <p>
                        <span class="label">Support:</span>
                        <span><a href="mailto:Support@example.com">Support@example.com</a></span>
                    </p>
                    <p>
                        <span class="label">Marketing:</span>
                        <span><a href="mailto:Marketing@example.com">Marketing@example.com</a></span>
                    </p>
                    <p>
                        <span class="label">General:</span>
                        <span><a href="mailto:General@example.com">General@example.com</a></span>
                    </p>
                </text>)
                .ContentHtmlAttributes(new { style = "min-height: 200px" });
            tabstrip.Add()
                .Text("Address")
                .Content(@<text>
                    <p>
                        One Microsoft Way<br />
                        Redmond, WA 98052-6399
                    </p>
                </text>)
                .ContentHtmlAttributes(new { style = "min-height: 200px" });
        })
)

Peter
Top achievements
Rank 1
 answered on 19 Dec 2013
2 answers
565 views
I'm trying to set a numeric textbox without decimals formatted for currency.
@(Html.Kendo().NumericTextBoxFor(model => model.EstimatedRevenue).Format("C").Spinners(false).Decimals(0))
I want the value to be displayed in whole dollars, is this possible?
Jonathan Travis
Top achievements
Rank 1
 answered on 19 Dec 2013
1 answer
288 views
Hey Sup

Iam playing around with the scheduler from Kendo UI - and the scheduler is working fine atm. 
but but.. Iam trying to use some from the API demo at. 
API Demo

I have a html 'tool bar' as 
<div class="schedulerHeader">
    <p>
        <label>Current Date:</label><input id="currentDate" />
    </p>
    <p>
        <label>Current View:</label>
        <select id="views">
            <option value="agenda">Agenda</option>
            <option value="day">Day</option>
            <option value="month">Month</option>
            <option value="week">Week</option>
            <option value="workWeek">Work Week</option>
        </select>
    </p>
</div>

and javascript:
<script type="text/javascript">
    $(function () {
        var scheduler = $("#myScheduler").data("kendoScheduler");

        $("#currentDate").kendoDatePicker({
            value: new Date("2013/12/24"),
            change: function () {
                scheduler.date(this.value());
            }
        });


        $("#views").kendoDropDownList({
            value: scheduler.view(),
            change: function () {
                scheduler.view(this.value());
            }
        });

    });
</script>
all on in the same view as my scheduler, where I can change the view and date from the 'toolbar' hurra. 
but on site load the $("x").kendoDropDownList({ value: scheduler.view()...  is not set. I think it because that the scheduler wrapper isnt done loading. so the schedulder object in my js is 'null' when it load.
How should I handle this ? or how are you doing it in your demo, I am looking at the example project, but cant see a clear answer.

yeah I can use a timer... but no thanks :) 

- Kasper 
Atanas Korchev
Telerik team
 answered on 19 Dec 2013
5 answers
2.0K+ views
There is a .Height property for the DropDownList, but no .Width property.  Why not?  The only way I've found this (see below) - and that took some rooting through other forum postings:

@(Html.Kendo().DropDownList()
          .Name("companyGroup")
          .DataTextField("Text")
          .DataValueField("Value")
... removed for brevity
          .HtmlAttributes(new { style = "width:250px"})
    )

Could not find ANY information on this in the documentation. It may be there, but it's not obvious. 

Is there a better way to set width?  Again, seems like this should be a fairly normal property to set.
Georgi Krustev
Telerik team
 answered on 19 Dec 2013
1 answer
87 views
The date picker control posts the date in display format back to the server. This causes issue with date parsing if the display format is not what is expected (i.e. configured) on the server.

I have attached an example project which reproduces the issue. The date format is set to dd/MM/yyyy. The example posts 8th December 2013 back to the server in in the display format as 08/12/2013 which is then misparsed as 12th August 2013 on the server.

Alexander Popov
Telerik team
 answered on 19 Dec 2013
3 answers
270 views
I have a very simple form with two inputs.
A drop down and a textarea.  When I try to submit the form with nothing entered, only the textarea validation fires.
If I type something in there, then the dropdown fires (after a post).

At this point, if I clear the text in the textarea, then the error message appears again for the textare, but the dropdown completely disappears (the error message stays).  Then I have to enter text into the textarea, submit the form.  Then the dropdown appears again.

Why isn't the dropdown validating client-side, and how can I avoid it disappearing?

@using CCReporting.Models
@using mvcReporting.Models
@model mvcReporting.Models.CalendarModels.CalendarCommentModel
@{
    ViewBag.Title = "Add Comment";
}
@using (Html.BeginForm())
{
    
    <div id="EventSelectorDiv">
        Select Event:<br />
        @Html.ValidationMessageFor(model => model.EventID)
        @(Html.Kendo().DropDownListFor(x => x.EventID).DataTextField("Text")
          .DataValueField("Value")
          .BindTo(@ViewBag.AllEvents).OptionLabel("Select Event...").HtmlAttributes(new { style = "width: 400px;" }))
        
    </div>
    
    <div>
        Comment Details:<br />
        @Html.ValidationMessageFor(model => model.CommentDetails)
        @Html.TextAreaFor(x => x.CommentDetails, new { @class = "k-textbox", style = "width: 400px; height: 150px;" })
        
    </div>
    @(Html.Kendo().Button()
    .Name("SaveButton")
    .HtmlAttributes(new { type = "submit" })
      .Content("Save Comment"))
}

I'm using data annotation for the validation

        public class CalendarCommentModel
        {
            public string CommentType { get; set; }
            [Required(ErrorMessage = "Event is required")]
            public string EventID { get; set; }
            [Required]
            public string CommentDate { get; set; }
            [Required(ErrorMessage = "Comment details are required")]
            [DataType(DataType.Text)]
            public string CommentDetails { get; set; }
        }
Jonathan Travis
Top achievements
Rank 1
 answered on 18 Dec 2013
7 answers
551 views

Greetings,

First, I'll start with the layout...  I'm using nested controls and windows on a form inside of MVC 4 partials.  The page the issue resides on is actually a partial inside of a panelbar->tabstrip.  That partial has a nesting hierarchy that goes like this: 
    PanelBar
                   Grid
                          Child Template
                                                    3 Grids with custom (Template) button in the toolbar

The "3 Grids with custom button" level is where I see the issue.  Each Grid's button loads a kendo window with a partial view.  Each partial view contains two grids (association pair).

Yes, I know, "complicated", but this is what I needed.

When I first click on a grid's custom "associate button", the window pops up and the grids load / initialize correctly.  The problem occurs if I click on a different grid's button.  The window pops up, the partial loads, I see the read request and response in Fiddler, but the grids don't populate visually.  If I go back to the initial grid's button and click it, the correct result is presented.   Now, I can refresh the page and click the second grid button and it will show, but the first grid has the problem... Basically, its whomever came first wins.  I have to refresh the page in order to bring up a different window.   I've checked the Ids and Names to make sure I didn't have any weird duplicates and I don't. 

Template Script: (3 grids)

<script id="template" type="text/kendo-tmpl">
        <h3>Servers</h3>
        @(Html.Kendo().Grid<Company.Web.AMDB.Models.ServerViewModel>
    ()
    .Name("ServerGrid_#=Id#")
    .Columns(columns =>
    {
        columns.Bound(serv => serv.Name).Width(150);
        columns.Bound(serv => serv.Description);
        columns.Bound(serv => serv.OS).Width(150);
        columns.Bound(serv => serv.Version).Width(150);
    })
 
    .ToolBar(toolbar =>
    {
        toolbar.Template(@<text>
        <div class="toolbar">
            <button class="k-button" id="cmdUpdateServers_#=Id#" title="Update Related Servers" onclick="prepDnsServerWindow('#=Id#', @Model.Id)"><span class="k-icon k-edit"></span>Update Related Servers</button>
        </div></text>);
    })
    .DataSource(dataSource => dataSource
    .Ajax()
    .Model(model =>
    {
        model.Id(a => a.Id);
    })
            .Read(read => read.Action("ReadDNSServers", "DNS", new { dnsId = "#=Id#" }))
    )               
    .Pageable()
    .Sortable()
    .ToClientTemplate()
        )
        <hr />
 
        <h3>Permissions</h3>
        @(Html.Kendo().Grid<Company.Web.AMDB.Models.PermissionViewModel>
    ()
    .Name("PermissionGrid_#=Id#")
    .Columns(columns =>
    {
        columns.Bound(p => p.Description).Width(150);
        columns.ForeignKey(
                a => a.AccessTypeId,
                (System.Collections.IEnumerable)ViewData["accessTypes"],
                "Id", "Name").Title("Access Type").Width(125);
        columns.ForeignKey(
               a => a.AuthAccountId,
               (System.Collections.IEnumerable)ViewData["authAccounts"],
               "Id", "Name").Title("Auth Account").Width(125);
    })
 
    .ToolBar(toolbar =>
    {
        toolbar.Template(@<text>
            <div class="toolbar">
                <button class="k-button" id="cmdUpdatePermissions_#=Id#" title="Update Related Permissions" onclick="prepDnsPermissionWindow('#=Id#', @Model.Id)"><span class="k-icon k-edit"></span>Update Related Permissions</button>
            </div></text>);
    })
    .DataSource(dataSource => dataSource
    .Ajax()
    .Model(model =>
    {
        model.Id(a => a.Id);
    })
            .Read(read => read.Action("ReadDNSPermissions", "DNS", new { dnsId = "#=Id#" }))
    )
    .Pageable()
    .Sortable()
    .ToClientTemplate()
    )
 
    <hr />
 
    <h3>Dependencies</h3>
    @(Html.Kendo().Grid<Company.Web.AMDB.Models.DependencyViewModel>
    ()
    .Name("DependencyGrid_#=Id#")
    .Columns(columns =>
    {
        columns.Bound(d => d.Name).Width(200);
        columns.Bound(d => d.Description);
        columns.Bound(d => d.Version).Width(200);
    })
 
    .ToolBar(toolbar =>
    {
        toolbar.Template(@<text>
            <div class="toolbar">
                <button class="k-button" id="cmdUpdateDependencies_#=Id#" title="Update Related Dependencies" onclick="prepDnsDependencyWindow('#=Id#', @Model.Id)"><span class="k-icon k-edit"></span>Update Related Dependencies</button>
            </div></text>);
    })
    .DataSource(dataSource => dataSource
    .Ajax()
    .Model(model =>
    {
        model.Id(a => a.Id);
    })
            .Read(read => read.Action("ReadDNSDependencies", "DNS", new { dnsId = "#=Id#" }))
 
    )
    .Pageable()
    .Sortable()
    .ToClientTemplate()
    )
 
</script>

The kendoWindow divs:

<div id="dnsServerWindow"></div>
<div id="dnsPermissionWindow"></div>
<div id="dnsDependencyWindow"></div>

The script to get the partials for the windows:

<script>
 var dnsServerWindow;
 var dnsPermissionWindow;
 var dnsDependencyWindow;
 
 function onServerWindowClose(id) {
 //alert("closed: " + id);
 $("#ServerGrid_" + id).data("kendoGrid").datasource.read();
 }
 
 function prepDnsServerWindow(id, envId) {
 if (!dnsServerWindow.data("kendoWindow")) {
 dnsServerWindow.kendoWindow({
 width: 1100,
 height: 600,
 visible: false,
 //close: onServerWindowClose(id)
 });
 }
 
 dnsServerWindow.kendoWindow({
 content: {
 url: "/DNS/GetServerPartial",
 data: { environmentId: envId, dnsId: id }
 },
 modal: true
 
 });
 
 dnsServerWindow.data("kendoWindow")
 .title("Edit Server Association");
 
dnsServerWindow.data("kendoWindow").center().open();
 
 return true;
 }
 
 function prepDnsDependencyWindow(id, envId) {
 if (!dnsDependencyWindow.data("kendoWindow")) {
 dnsDependencyWindow.kendoWindow({
 width: 1100,
 height: 600,
 visible: false,
 //close: onServerWindowClose(id)
 });
 }
 
 dnsDependencyWindow.kendoWindow({
 content: {
 url: "/DNS/GetDependencyPartial",
 data: { dnsId: id, environmentId: envId }
 },
 modal: true
 
 });
 
 dnsDependencyWindow.data("kendoWindow")
 .title("Edit Dependency Association");
 
 dnsDependencyWindow.data("kendoWindow").center().open();
 
 return true;
 }
 
function prepDnsPermissionWindow(id, envId) {
 if (!dnsPermissionWindow.data("kendoWindow")) {
 dnsPermissionWindow.kendoWindow({
width: 1200,
 height: 600,
 visible: false,
 //close: onServerWindowClose(id)
 });
 }
 
 dnsPermissionWindow.kendoWindow({
 content: {
 url: "/DNS/GetPermissionPartial",
 data: { permDnsId: id, permEnvironmentId: envId }
 },
 modal: true
 
 });
 
 dnsPermissionWindow.data("kendoWindow")
 .title("Edit Permission Association");
 
 
 
 dnsPermissionWindow.data("kendoWindow").center().open();
 
 
 return true;
 }
 $(document).ready(function () {
 var foo = $("#environmentPanelbar_@Model.Id").kendoPanelBar({ expandMode: "single" }).data("kendoPanelBar"); // - before data - .css({ marginRight: "220px" })
 
 //if (foo)
 // foo.destroy();
 dnsServerWindow = $("#dnsServerWindow");
 dnsPermissionWindow = $("#dnsPermissionWindow");
 dnsDependencyWindow = $("#dnsDependencyWindow");
 
 //$("[name^=DNSGrid_]").find(".k-grid-content").height(535);
 //$("[name^=DNSGrid_]").data("kendoGrid").refresh();
 })
 </script>



Example Partial

(all three are very similar, but all the names of elements/functions were changed to  reflect the particular window.  "server","permission","dependency")

<h2>@Model.Name Server Association</h2>
 
 <script>
 
 function addServer(e) {
 var foo = this.select();
 var dataItem = this.dataItem(foo[0]);
 //debugger;
 
 var dnsDataSource = $("#AssociatedGrid").data('kendoGrid').dataSource;
 //dataSource.add({Name:"foo", OS:"Bar"});
 dnsDataSource.add(dataItem);
 
var availDataSource = $("#AvailableGrid").data('kendoGrid').dataSource;
 availDataSource.remove(dataItem);
 
 $.post("../../DNS/AddServer", { dnsId:@Model.Id, environmentId:@Model.EnvironmentId, serverId:dataItem.Id})
 .done(function(data){
 window.parent.$("#ServerGrid_@Model.Id").data("kendoGrid").dataSource.read();
 });
 
return true;
 }
 
 function removeServer() {
 var foo = this.select();
 var dataItem = this.dataItem(foo[0]);
 //debugger;
 
 var dnsDataSource = $("#AssociatedGrid").data('kendoGrid').dataSource;
 //dataSource.add({Name:"foo", OS:"Bar"});
 dnsDataSource.remove(dataItem);
 
 var availDataSource = $("#AvailableGrid").data('kendoGrid').dataSource;
 availDataSource.add(dataItem);
 
 $.post("../../DNS/RemoveServer", { dnsId:@Model.Id, serverId:dataItem.Id})
 .done(function(data){
 window.parent.$("#ServerGrid_@Model.Id").data("kendoGrid").dataSource.read();
 });
 
 return true;
 }
 </script>
 
 <table>
 <tr>
 <td><h3>Available Servers</h3></td>
 <td></td>
 <td><h3>Associated Servers</h3></td>
 </tr>
 <tr>
 <td>
 @(Html.Kendo().Grid<Company.Web.AMDB.Models.ServerViewModel>()
 .Name("AvailableGrid")
 .Columns(columns =>
 {
 columns.Bound(s => s.Name).Width(150);
 columns.Bound(s => s.OS);
 columns.Bound(s => s.Version);
 columns.Command(command => command.Custom("Add").HtmlAttributes(new { @class = "k-i-arrow-e" }).Click("addServer")).Width(80);
 })
 .Sortable()
 .Pageable()
 .Selectable()
 .Scrollable()
 .Filterable()
 .HtmlAttributes(new { style = "height:425px;" })
 .DataSource(dataSource => dataSource
 .Ajax()
 .Read(read => read.Action("GetAvailableServers", "DNS", new { dnsId = Model.Id }))
 )
 
 )
 </td>
 <td> </td>
 <td>
 @(Html.Kendo().Grid<Company.Web.AMDB.Models.ServerViewModel>()
 .Name("AssociatedGrid")
 .Columns(columns =>
 {
 columns.Bound(s => s.Name).Width(150);
 columns.Bound(s => s.OS);
 columns.Bound(s => s.Version);
 columns.Command(command => command.Custom("Remove").HtmlAttributes(new { @class = "k-i-arrow-w" }).Click("removeServer")).Width(80);
 })
 .Sortable()
 .Pageable()
 .Selectable()
 .Scrollable()
 .Filterable()
 .HtmlAttributes(new { style = "height:425px;" })
 .DataSource(dataSource => dataSource
 .Ajax()
 .Read(read => read.Action("ReadDNSServers", "DNS", new { dnsId = Model.Id }))
 )
 
 )
 </td>
 </tr>
 </table>



Thanks in advance for the help on this.... I've been fighting it for a couple of days.

Bonus question... when setting the height of a Grid via style, why does the data in the grid step outside the bounds?  Meaning, the grid contents extend further than the containing div.

Dwayne
Top achievements
Rank 1
 answered on 18 Dec 2013
5 answers
366 views
Hi Team,

I want to create Dynamic template same as the below knockout url(knockout cart editor example).

http://knockoutjs.com/examples/cartEditor.html

Actually in this example first we need to select the category then based on the category products dropdown list will be populated.
In this example when we click the "Add product" button it automatically create the new row.

I want the same functionality in kendo ui template.I got the one reference in jsfiddle.net  

http://jsfiddle.net/kashyapa/hWXuF/embedded/result/

but my requirment is same as knockout cart editor example so i want to implement the same in kendo UI MVC application.
Could you please suggest how to crate this type of templates in MVC and If you have any samples could you please share?

Thank you,
Sahasra


 
Daniel
Telerik team
 answered on 18 Dec 2013
1 answer
126 views
If so which package is in a part of?

Thanks.

Kelso
Atanas Korchev
Telerik team
 answered on 17 Dec 2013
22 answers
455 views
Is the new version compatible with VS2013?
If not, do you have some roadmap to share?
I tried to use the Nuget Package to install on my project, but I´m getting null exception on code: @Html.Kendo()
Atanas Korchev
Telerik team
 answered on 17 Dec 2013
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?