Questions on UI for ASP.NET MVC Forum

0 answers

157 views

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

501 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

239 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

332 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.0K+ 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

128 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

answered on 13 Nov 2012

9 answers

203 views

Grid Column Template links on redner all links not bound in column.

Here is my mvc view:

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

.Name("MaintenanceTickets") _

.Columns(Function(modelItem) modelItem.Bound(Function(p) p.CreateDate).Format("{0:d}").Title("Created")) _

.Columns(Function(modelItem) modelItem.Bound(Function(p) p.Originator).Width(100)) _

.Columns(Function(modelItem) modelItem.Bound(Function(p) p.CustomerName).Title("Customer").Width(100)) _

.Columns(Function(modelItem) modelItem.Bound(Function(p) p.Description)) _

.Columns(Function(modelItem) modelItem.Bound(Function(p) p.OntimeAssignedTo).Title("Assigned").Width(100)) _

.Columns(Function(modelItem) modelItem.Bound(Function(p) p.Description)) _

.Columns(Function(modelItem) modelItem.Bound(Function(p) p.Priority.Name).Title("Priority").Width(75)) _

.Columns(Function(modelItem) modelItem.Bound(Function(p) p.Status.Name).Title("Status").Width(75)) _

.Columns(Function(modelitem) modelitem.Bound("Id").Title("Actions").Template(Sub(item)@<text>

<a href="@url.Action("Details", "Ticket")/@item.Id">Details</a> <a href="/Ticket/Edit/@item.Id">Edit</a>

</text

End Sub)) _

.Pageable(Function(page) page.PageSizes(5)) _

.Sortable() _

.Filterable() _

.Resizable(Function(resize) resize.Columns(True)) _

.ColumnMenu()

)

What is odd is that when it renders, I see the column, but it moves all the links out of the bound column and renders them across the top of the grid. Attached screenshot.

Grid

answered on 13 Nov 2012

1 answer

171 views

Grid with batch editng enabled question

I have a grid with batch editing enabled and have got it working very well. This particular gird deals with line items in an order.

So when the user clicks Add New item they enter the part number description and other pertinent info and click save. No problem.

The problem is that once we save the item, we do not want to have the part number field to be editable. If they need to change the part number they should have to delete the line item and add it again.

I am trying to figure out how to make this field not editable on the on edit event but can't figure it out. I have some java script for the edit event commented out in my code that was suppose to deal with another issue but it crashes. I know I am on the right path but can't take it in for the score. The java script I have commented out is in the next code block.

Any help is appreciated...

@(Html.Kendo().Grid<BuyItNow.Models.LineItemViewModel>().HtmlAttributes(htmlAttributes)

.Name("kendoGrid")

.EnableCustomBinding(true)

.BindTo(Model.Data)

.Events(events => events.DataBound("dataBound"))

.Columns(columns =>

{

columns.Bound(p => p.lineNumber);

columns.Bound(p => p.partNum).Title("Part#").EditorTemplateName("PartNumber");

columns.Bound(p => p.partDescription).EditorTemplateName("Description");

columns.Bound(p => p.unitOM).EditorTemplateName("UOM").Equals("EA");

columns.Bound(p => p.partQuant).EditorTemplateName("Number").Format("{0:n0}");