Questions on UI for ASP.NET MVC Forum

1 answer

654 views

[Solved] Unable to get property 'DataSource' of undefined or null reference

I want to bind to a controller called articles but am getting an exception as follows
0x800a138f - JavaScript runtime error: Unable to get property 'DataSource' of undefined or null reference

<!DOCTYPE html >

<HTML>
<head>
    <title>content</title>
    <link href="~/Content/kendo/2012.2.710/kendo.common.min.css" rel="stylesheet" />
    <link href="~/Content/kendo/2012.2.710/kendo.default.min.css" rel="stylesheet" />

</head>
<body>
<div id="articlesgrid"> </div>

</script>
</body>
</HTML>

#''''''''''''''''''''''''''''''''''''''''''''''''''''''''

public class ArticlesController : Controller
    {
       public List<Article> Get()
        {
            List<Article> lst = new List<Article>();
            lst.Add(new Article() { ID = 1, Name = "AAA", Price1 = 1.22m });
            lst.Add(new Article() { ID = 1, Name = "BBB", Price1 = 1.32m });
            lst.Add(new Article() { ID = 1, Name = "CCC", Price1 = 1.42m });

            return lst;
        }
    }
}

Grid

answered on 15 Nov 2012

2 answers

125 views

All JS-Libs bottom of body

Hi,

there is no problem when using KendoUI only with HTML and jQuery. I have the control where on the page my scripts and functions are executed.

When using the HTML-Helper in Razor all function are written in the middle of the DOM and I get the famous "jquery is not defined" exception.

InlineScripts or InlineStyles are a bad style for webperformance.
So I ask if there is a way to use HTML-Helper without writing all scriptlibraries in the head?

Installer and VS Extensions

answered on 15 Nov 2012

0 answers

172 views

Error loading chart

folks
My company has paid for a 3 license copy of KendoUI
I am posting here and not under the company registered user name as no one monitors that email

I am using

2012.2.710 release (because I can't upgrade

I get a error when the Chart is rendered
Error(see attachment):
0x800a01b6 - Microsoft JScript runtime error: Object doesn't support this property or method

Rendered chart HTML(5.0/4.1)/jquery(1.7.2):

<div class="k-widget k-chart" id="chart"></div><script>

jQuery(function(){jQuery("#chart").kendoChart({series:[{name:"Sale Value",type:"area",field:"SaleValue"}],categoryAxis:{categories:["2007","2008","2009","2010","2011"]},dataSource:{data:[{"Year":2007,"SaleValue":250000.0000},{"Year":2008,"SaleValue":500000.0000},{"Year":2009,"SaleValue":250000.0000},{"Year":2010,"SaleValue":500000.0000},{"Year":2011,"SaleValue":250000.0000}]}});});

</script>

Browser must IE8: nearly the biggest forgein client base, well be soon

code that made it happen ,includes commented out Telerik code that works with this model




@(Html.Kendo().Chart(Model.AnnualSalesList) 
    .Name("chart") 
    .Series(series => 
    { 
        series.Area(s => s.SaleValue); 
    }) 
    .CategoryAxis(axis => axis 
    .Categories(s => s.Year))  
        ) 
@* 
@(Html.Telerik().Chart(Model.AnnualSalesList) 
    .Name("chart") 
    .Legend(false) 
    .Series(series => 
    { 
        series.Area(s => s.SaleValue).Name("Sales by Year"); 
    }) 
    .CategoryAxis(axis => axis 
    .Categories(s => s.Year)) 
    .ValueAxis(axis => axis 
    .Numeric().Labels(labels => labels.Format("${0:#,##0}"))) 
    .Theme("Metro") 
    .HtmlAttributes(new { style = "width: 450px; height: 200px; margin: auto;" }) 
        ) 
*@

Regards

Greg

Chart

asked on 15 Nov 2012

1 answer

510 views

Passing Id to sub grid ajax's read method

I have a Grid with Employes. There is a Edit button and the edit mode is set to Popup. In the EditorTemplate of the entity I want to edit, there is another grid that has a history of Salary with a incell or inline edit mode.

Both grids uses Ajax datasources. The problem is with the inner grid binding. The controller action feeding a Json result to the ajax call requires the ID of the employe we are editing to return the appropriate Salary history. However, Kendo UI ASP.NET MVC wrapper will render some sort of template of the editor before knowing which employee we want to edit, then it will edit it when we are requesting the popup.

How can I feed the Employe ID in the Read Ajax call?

Main Grid

@(Html.Kendo().Grid<MyProject.Business.Models.EmployeDTO>().Name("EmployeGrid")

.ToolBar(toolbar => toolbar.Create())

.Columns(cols =>

{

cols.Bound(o => o.someData).Title("Some Data");

cols.Bound(o => o.moreData).Title("More Data");

cols.Command(o =>

{

o.Edit();

o.Destroy();

}).Title(" ");

})

.Editable(editor => editor

.Mode(GridEditMode.PopUp)

.Window(window => window.Draggable().Resizable().HtmlAttributes(new { @style = "width:700px;" })))

.Sortable()

.Filterable()

.Groupable()

.DataSource(datasource => datasource

.Ajax()

.Model(model => model.Id(o => o.id))

.Read(read => read.Action("GetAll", "EmployesAjax"))

.Update(update => update.Action("Update", "EmployesAjax"))

.Create(create => create.Action("Create", "EmployesAjax"))

.Destroy(destroy => destroy.Action("Destroy", "EmployesAjax"))

)

Inner Grid (In Views/Shared/EditorTemplates/EmployeDTO.cshtml)

@Html.Kendo().Grid<MyProject.Business.Models.SalairyDTO>().Name("SalaryGrid")

.Columns(cols =>

{

cols.Bound(o => o.someInfo).Title("Some Info");

})

.DataSource(datasource => datasource

.Ajax()

.Model(model =>

{

model.Id(o => o.id);

model.Field(o => o.employe_id).DefaultValue(Model.id);

})

// NEED THE ID HERE

.Read(read => read.Action("GetByEmployeId", "SalairyAjax", new { id = "" }))

.Update(update => update.Action("Update", "SalairyAjax"))

.Create(create => create.Action("Create", "SalairyAjax"))

.Destroy(destroy => destroy.Action("Destroy", "SalairyAjax"))));

Grid

answered on 14 Nov 2012

2 answers

260 views

EditorForTemplate in a Window not posting data

I have an EditorFor template that renders fine inside a Kendo Window but posts an empty (null). ViewModel back when the form is submited.

This only happens when the EditorFor template is rendered inside the Window control. The ViewModel is not empty when the EditorFor is outside of the Window.

Yes, I verified

@using (Html.BeginForm()) is working correctly.

ListofChoices is an IEnumerable of the Choice ViewModel.

___VIEW_______________________________________________

@(Html.Kendo().Window()

.Name("window")

.Title("Profile:")

.Content(@<text>

<div>Test</div>

@Html.EditorFor(y => y.ListofChoices);

</text>)

)

<button id="get1" type="submit" >CONTINUE</button>

____EDITOR TEMPLATE___________________________________

@model ViewModels.Choice

@Html.CheckBoxFor(x=>x.IsSelected)

@Html.HiddenFor(x=>x.AccountResponsibilityId)

@Html.LabelFor(x=>x.IsSelected, Model.AccountResponsibilityName)

Window

answered on 14 Nov 2012

1 answer

344 views

Override Grid edit button

The edit button goes back to my controller as a 'Get' but I would like to change it to a 'Post'. Is this possible?

@(Html.Kendo().Grid(Model)

.Name("Grid")

.Columns(columns =>

{

columns.Bound(p => p.Id).Width(25);

columns.Bound(p => p.Name).Width(240);

columns.Bound(p => p.City).Width(170);

columns.Bound(p => p.State).Width(170);

columns.Command(command =>

{

command.Edit();

command.Custom("Delete").Click("deleteIt");

}).Width(166);

})

.Scrollable()

.Editable(editable => editable.Mode(GridEditMode.InLine))

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => model.Id(p => p.Id))

//.Read("PropertyRead", "Property"))

.Read(read => read.Action("PropertyRead", "Property"))

.Update(update => update.Action("Update", "Property"))

.Destroy(destroy => destroy.Action("Delete", "Property"))

)

Grid

answered on 14 Nov 2012

3 answers

1.5K+ views

[Solved] Change name button edit and destroy in grid

Hello, How change name button edit and destroy in kendogrid, i need display "editar" or "eliminar", not "edit" and "delete".
And, how change display text on button in popup, and display text button "Add New Record"
Thanks,

Giancarlo

Grid

answered on 14 Nov 2012

1 answer

1.1K+ views

POST vs GET request

Hi there,

the company I am working for is close to purchase the Kendo UI Complete for ASP.NET MVC, but there is some prerequisite points.
The first one is the read method to build the grid. It has to be a GET method instead of a POST one. Is there a way to change it? I did it in kendo.aspnetmvc.min.js directly

var n = window.kendo, r = /'/ig, i = e.extend;

[...]

options: {read: {type: "GET"},update: {type: "POST"},create: {type: "POST"},destroy: {type: "POST"},parameterMap: s,prefix: ""}})}})...

and this one:

var n = window.kendo, r = n.ui, i = e.extend, s = e.isFunction;

[...]

options: {read: {type: "GET"},update: {type: "POST"},create: {type: "POST"},destroy: {type: "POST"}...

the grid seems to work fine, I just want to make sure that there will not be any issue later because of this change.

In case of this is not the proper way to do it, is there any other way?

Thank you for your help,

Grid

answered on 14 Nov 2012

1 answer

139 views

KendoUI window is affecting my dropdownlists

In my _layout.cshtml(based on twitter bootstrap), I have the following code as my nav bar:

    <div id="user-nav" class="navbar navbar-inverse">
        <ul class="nav btn-group">
            <li class="btn btn-inverse"><a title="" href="#"><i class="icon icon-user"></i><span
                class="text">Profile</span></a></li>
            <li class="btn btn-inverse dropdown" id="menu-messages"><a href="#" data-toggle="dropdown"
                data-target="#menu-messages" class="dropdown-toggle"><i class="icon icon-envelope">
                </i><span class="text">Messages</span> <span class="label label-important">5</span>
                <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a class="sAdd" title="" href="#">new message</a></li>
                    <li><a class="sInbox" title="" href="#">inbox</a></li>
                    <li><a class="sOutbox" title="" href="#">outbox</a></li>
                    <li><a class="sTrash" title="" href="#">trash</a></li>
                </ul>
            </li>
        </ul>
    </div>

This works fine, I'm able to see the dropdown menu (see dropdown.jpg)

However, in pages where I have included the KendoUI window component, it completely breaks the dropdown function. No dropdown menu appears when I click on the button.

This is the code I'm using

@(Html.Kendo().Window()
           .Name("window")
           .Title("Role")
           .Content("loading...")
           .LoadContentFrom("Create", "RolesPermissions", Model.Role)
           .Modal(true)
           .Width(550)           
           .Height(300)           
           .Draggable()
           .Visible(false)
          )

The dropdown functionality goes back to normal the moment I remove this.

Window

answered on 14 Nov 2012

13 answers

1.1K+ views

[Solved] Grid paging not working

I have a grid with server binding. I have followed the example, but for some reason the paging is not working. The first page populates fine, but when I hit the next page, no rows appear and the page number goes to 0. I have the latest Kendo for MVC and I have jquery v1.8.1. I am using Razor and C#. I need to hvae this small project working ASAP. Any help and/or advice anyone can give is very much appreciated. Thank you in advance! Is there something I'm missing? Here is the code:
Razor page with grid:

@model IEnumerable<TrackGridModel>

<div>

@(Html.Kendo().Grid(Model).Name("TrackGrid")

.Columns(columns =>

{

columns.Bound(t => t.rowIndex).Visible(false);

columns.Bound(t => t.trackNumber).Title("Tracking Number").Template(@<text><a href="#" onclick="getTrackDetail(@item.rowIndex)">@item.trackNumber</a></text>);

columns.Bound(t => t.shipDate).Title("Ship Date");

columns.Bound(t => t.originalABFlag).Title("Original/Accessorial");

columns.Bound(t => t.refNotes).Title("Reference");

columns.Bound(t => t.billToAccount).Title("Bill To Account");

columns.Bound(t => t.shipperName).Title("Shipper Name");

columns.Bound(t => t.shipperAddress).Title("Shipper Address");

columns.Bound(t => t.recipientName).Title("Recipient Name");

columns.Bound(t => t.recipientAddress).Title("Recipient Address");

columns.Bound(t => t.PODDate).Title("POD Date");

columns.Bound(t => t.service).Title("Service");

columns.Bound(t => t.packaging).Title("Packaging");

columns.Bound(t => t.billedWeight).Title("Billed Weight");

columns.Bound(t => t.actualWeight).Title("Actual Weight");

}).Pageable())

</div>

<div style="position:relative">

@(Html.Kendo().Window().Name("TrackDetailWindow").Title("Tracking Detail").HtmlAttributes(new { style = "font-size:1.5em;" })

.Width(1000).Height(700).Visible(false))

</div>

<script type="text/javascript">

getTrackDetail = function (n) {

var kendoWindow = $("#TrackDetailWindow").data("kendoWindow");

kendoWindow.refresh({ url: "/Home/GetTrackDetail/",

data: { ndx: n} });

kendoWindow.center();

kendoWindow.open();

}

</script>

Model:

using System.Collections.Generic;

public class TrackGridModel

{

public string trackNumber {get; set;}

public string shipDate {get; set;}

public string refNotes {get; set;}

public string billToAccount {get; set;}

public string shipperName {get; set;}

public string shipperAddress {get; set;}

public string recipientName { get; set; }

public string recipientAddress { get; set; }

public string PODDate {get; set;}

public string packaging {get; set;}

public string service {get; set;}

public string billedWeight {get; set;}

public string actualWeight {get; set;}

public int rowIndex {get; set;}

public char originalABFlag {get; set;}

}

Controller:

public ActionResult TrackItByAccount(string acctNumbers, DateTime begindate, DateTime enddate )

{

string[] strSplitArr = acctNumbers.Split(new string[] {"\n", "\r\n"}, StringSplitOptions.None);

List<string> acctNums = strSplitArr.ToList<string>();

ShipmentRetrieval shipmentRetrieval = new ShipmentRetrieval();

ShipmentInformation shipinfo = new ShipmentInformation();

List<ShipmentInformation> trackInfoList = new List<ShipmentInformation>();

TrackGridModel tgm = new TrackGridModel();

List<TrackGridModel> trackGridList = new List<TrackGridModel>();

ShipmentInformationList shipInfoList = new ShipmentInformationList();

List<ShipmentInformationList> shipInfoListAll = new List<ShipmentInformationList>();

foreach (string acct in acctNums)

{

shipInfoList = shipmentRetrieval.getVendorDetailListByAccountAndDate(acct, begindate, enddate);

shipInfoListAll.Add(shipInfoList);

shipInfoList = new ShipmentInformationList();

}

string custRef = "";

foreach (ShipmentInformationList sil in shipInfoListAll)

{

for (int i = 0; i < sil.ShipmentList.Count; i++)

{

shipinfo = sil.ShipmentList[i];

foreach (KeyValuePair<string, string> reference in shipinfo.CustomerReference)

{

custRef = (custRef == "" ? "" : custRef + ", ") + reference.Value;

}

tgm.rowIndex = i;

tgm.actualWeight = shipinfo.PackageInfo.ActualWeight.Weight.ToString() + " " + shipinfo.PackageInfo.ActualWeight.WeightUnit;

tgm.billedWeight = shipinfo.PackageInfo.BilledWeight.Weight.ToString() + " " + shipinfo.PackageInfo.BilledWeight.WeightUnit;

tgm.packaging = shipinfo.PackageInfo.PackageDescription;

tgm.PODDate = shipinfo.PODInfo.PODDate;

tgm.billToAccount = shipinfo.BillingInfo.BillToAccount;

tgm.recipientAddress = shipinfo.RecipientInformation.Address.City + ", " + shipinfo.RecipientInformation.Address.StateProvince + "  " + shipinfo.RecipientInformation.Address.PostalCode;

tgm.recipientName = shipinfo.RecipientInformation.Name;

tgm.refNotes = custRef;

tgm.service = shipinfo.PackageInfo.Service;

tgm.shipDate = shipinfo.ShipDate;

tgm.shipperAddress = shipinfo.ShipperInformation.Address.City + ", " + shipinfo.ShipperInformation.Address.StateProvince + "  " + shipinfo.ShipperInformation.Address.PostalCode;

tgm.shipperName = shipinfo.ShipperInformation.Name;

tgm.trackNumber = shipinfo.TrackingNumber;

tgm.originalABFlag = shipinfo.OriginalABFlag;

trackGridList.Add(tgm);

shipinfo = new ShipmentInformation();

tgm = new TrackGridModel();

custRef = "";

}

return PartialView("TrackGrid", trackGridList);

}

Grid