Questions on UI for ASP.NET MVC Forum

2 answers

231 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

326 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

125 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

198 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

170 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}");

})

.ToolBar(toolbar =>

{

toolbar.Create();

toolbar.Save();

})

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

.Pageable()

.Sortable()

// .Scrollable()

.Navigatable()

.DataSource(dataSource => dataSource

.Ajax()

.Total(Model.Total)

.Batch(true)

.ServerOperation(false)

.Events(events => events.Error("error_handler"))

.Model(model =>

{

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

model.Field(p => p.lineNumber).Editable(false).DefaultValue("0000");

})

.Create(update => update.Action("_Create", "LineItems"))

.Read(read => read.Action("_Read", "LineItems"))

.Update(update => update.Action("_Update", "LineItems"))

)

.Resizable(resize => resize.Columns(true))

$(document).ready(function() {

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

// bind to the edit event

grid.bind("edit", function (e) {

debugger;

e.preventDefault();

e.container.find('input:last').focus()

}

});

Grid

answered on 13 Nov 2012

1 answer

272 views

View HTML KendoUI MVC

Hello,

In the attached screen print I added the HTML version 2012.2 913 of editor and MVC version code snippet from the view all http://demos.kendoui.com/web/editor/all-tools.html. The HTML version has the (View HTML) the MVC version does not have this button. I also tried the latest internal build 2012.2.1029 this did not have the feature. In the Razor file when I add .Tools(tools => tools . viewHtml is not listed as a tool.

Below is the sample code I used to generate this. And attached is a screen print.

With regards,

Matthew

Sample Index.cshtml file

@{

ViewBag.Title = "Index";

}

<h2>HTML Editor</h2>

<p>

Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.<br />

In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,

and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers, follows

accessibility standards and provides API for content manipulation.

</p>

<p>Features include:</p>

<ul>

<li>Text formatting & alignment</li>

<li>Bulleted and numbered lists</li>

<li>Hyperlink and image dialogs</li>

<li>Cross-browser support</li>

<li>Identical HTML output across browsers</li>

<li>Gracefully degrades to a <code>textarea</code> when JavaScript is turned off</li>

</ul>

<p>

Read <a href="http://docs.kendoui.com">more details</a> or send us your

<a href="http://www.kendoui.com/forums.aspx">feedback</a>!

</p>

</textarea>

$("#editor").kendoEditor({

tools: [

"bold",

"italic",

"underline",

"strikethrough",

"fontName",

"fontSize",

"foreColor",

"backColor",

"justifyLeft",

"justifyCenter",

"justifyRight",

"justifyFull",

"insertUnorderedList",

"insertOrderedList",

"indent",

"outdent",

"formatBlock",

"createLink",

"unlink",

"insertImage",

"subscript",

"superscript",

"viewHtml"

]

});

</script>

</div>

<h2>MVC Editor</h2>

@(Html.Kendo().Editor()

.Name("Editor")

.HtmlAttributes(new { style = "width: 740px;height:440px" })

.Tools(tools => tools

.SubScript()

.SuperScript()

)

.Value(@<text>

<p>

</p>

<p>

Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.<br />

In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,

and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers, follows

accessibility standards and provides API for content manipulation.

</p>

<p>Features include:</p>

<ul>

<li>Text formatting & alignment</li>

<li>Bulleted and numbered lists</li>

<li>Hyperlink and image dialogs</li>

<li>Cross-browser support</li>

<li>Identical HTML output across browsers</li>

<li>Gracefully degrades to a <code>textarea</code> when JavaScript is turned off</li>

</ul>

<p>

Read <a href="http://www.kendoui.com/documentation/introduction.aspx">more details</a> or send us your

<a href="http://www.kendoui.com/forums.aspx">feedback</a>!

</p>

</text>)

)

Editor

answered on 13 Nov 2012

0 answers

177 views

Adding Command Buttons dynamically depending on Security

I have a Kendo Grid using Server binding and defined in a Razor view like @(Html.Kendo().Grid etc...

I'm using inline editing and it works find however I'd like to only show the destroy button if the user belongs to a certain role.

Any ideas about the best way to achieve this ? Ideally I'd like to write some sort of extension method so I could do something like :

columns.Command(command => { command.Destroy().If(IsInRole("Admin")) };

Any pointers would be very helpful.

Thanks

John

Grid

asked on 13 Nov 2012