Questions on UI for ASP.NET MVC Forum

0 answers

183 views

obtaining value from Numeric TextBox not working

Hello!
ex: I have field in Model
I use this:

<tr

<td>

@Html.LabelFor(model => model.ThicknessDry)

</td>

<td>

@Html.EditorFor(model => model.ThicknessDry

</td>

</tr

.HtmlAttributes(new { id = Guid.NewGuid().ToString() })

but I can't call to my ThicknessDry (thicknessDry.png), because I use new Id ( this need to me)
P.S. I can't delete this code: .HtmlAttributes(new { id = Guid.NewGuid().ToString() }) ( in EditorTemplates)

....later
This code help me!

$("input[name=ThicknessDry]").val();

NumericTextBox

asked on 11 May 2013

12 answers

379 views

[Solved] Kendo UI with WebAPI and MVC Wrapper

<section id="maincontent">

<div class="container">

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

.Name("Grid")

.Columns(columns =>

{

columns.Bound(s => s.PersonID);

columns.Bound(s => s.FirstName);

columns.Bound(s => s.Surname);

columns.Bound(s => s.IsEmployed);

columns.Command(c =>

{

c.Edit();

c.Destroy();

});

})

.ToolBar(tools =>

{

tools.Create();

})

.Sortable()

.Pageable()

.Filterable()

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

model.Id(s => s.PersonID);

})

.Read(read => read.Url("api/Person").Type(HttpVerbs.Get))

.Create(create => create.Url("api/Person").Type(HttpVerbs.Post))

.Update(update => update.Url("api/Person").Type(HttpVerbs.Put))

.Destroy(destroy => destroy.Url("api/Person").Type(HttpVerbs.Delete))

)

</div>

</section>

<script>

$(function() {

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

// WebAPI needs the ID of the entity to be part of the URL e.g. PUT /api/Person/PutPerson/80

grid.dataSource.transport.options.update.url = function(data) {

return "api/Person/PutPerson/" + data.personID;

};

// WebAPI needs the ID of the entity to be part of the URL e.g. DELETE /api/Person/DeletePerson/80

grid.dataSource.transport.options.destroy.url = function(data) {

return "api/Person/DeletePerson/" + data.personID;

};

});

</script>

Hi,
I'm trying to accomplish following Task as this example shows :

Binding to a Web ApiController
http://www.kendoui.com/code-library/mvc/grid/binding-to-a-web-apicontroller.aspx

The problem is that without giving any error the DataGrid simply doesn't show/Bind the data. When checking the Traffic and the data which is retrieved everything looks fine.

Any ideas?
thanks in advance

, here the return json data:

....

[{"personID":"3123","firstName":"231","surname":"312321","isEmployed":null},{"personID":"999","firstName":"The","surname":"Best Employee","isEmployed":"Master"},{"personID":"P001","firstName":"XXX","surname":"XXX","isEmployed":null},{"personID":"P002","firstName":"XXX","surname":"XXX","isEmployed":null},{"personID":"P003","firstName":"XXX","surname":"XXX","isEmployed":null},{"personID":"P004","firstName":"XXX","surname":"XXX","isEmployed":null},{"personID":"P005","firstName":"XXX","surname":"XXX","isEmployed":null},{"personID":"P006","firstName":"XXX","surname":"XXX","isEmployed":null},{"personID":"P007","firstName":"XXX","surname":"XXX","isEmployed":null},{"personID":"P008","firstName":"XXX","surname":"XXX","isEmployed":null}]

....

and here my View:

and here my ApiController:

namespace KiScope.RemoteClient.WebAPI.Controllers.Apis

{

// Specify on Controller level that the user has to authorize before he can start

// The actual implementation of the Redirect to Login functionality has to be done on the client side

// here is a video explaining this: http://www.asp.net/web-api/videos/getting-started/authorization

//[Authorize]

public class PersonController : ApiController

{

// Remember that the UOW disposes itself after usage, so no need to handle this manually

private readonly IRemoteClientUoW uow;

// Ninject Initialization

public PersonController(IRemoteClientUoW _uow)

{

uow = _uow;

}

public DataSourceResult GetPeople([ModelBinder(typeof(ModelBinders.DataSourceRequestModelBinder))] DataSourceRequest request)

{

var seaman = uow.Person.GetAll();

return seaman.ToDataSourceResult(request,s => new

{

s.PersonID,

s.FirstName,

s.Surname,

s.IsEmployed

}

);

}

// ... MORE CODE

General Discussions

answered on 10 May 2013

2 answers

150 views

templates

i keep see in code examples, a template like this
columns.Template(t => { }).HeaderTemplate("").ClientTemplate(@"
< a href='javascript: void(0)' class='abutton edit' onclick='editRow(this)' title='button edit'>button edit</a>
< a href='javascript: void(0)' class='abutton delete' onclick='deleteRow(this)' title='button delete'>button delete</a>")

if i have to give other parameters to that editRow javascript function or multiple,for example a string something like editRow(this,2,'text',g) can i do it ? and how do i format this in that template context?
from the above example some parameters are given by value,some by reference.

and if i write "this" ,always it is interpreted as the sender of that event?it's very insteresting,i write something as a text and it is interpreted as a valid value,in this case a reference.

Regards,
Daniel

Grid

answered on 10 May 2013

2 answers

207 views

[Solved] Selected row date column not displaying long date format

Hi I have a column in my grid that is a DateTime field with long format date e.g. Friday, May 10, 2013

This is how it is defined in the ViewModel

[Required]

[DataType(DataType.Date)]

[DisplayFormat(DataFormatString = "{0:D}")]

[Display(Name = "Visit Date")]

public DateTime VisitDate { get; set; }

The column is displayed correctly with what I want e.g. Friday, May 10, 2013 but when I get the selected row data for that column it is coming back with the following:

[17:39:18.580] VisitDate: Fri May 10 2013 00:00:00 GMT-0400 (Eastern Daylight Time)

Here is the code on the view to get the selected row.

function deleteRow() {

var grid = $('#scheduleGrid').data('kendoGrid');

var rows = grid.select();

if (rows.length > 0) {

var dataItem = grid.dataItem(rows);

console.log("VisitDate: " + dataItem.VisitDate);

}

How do I change it to get the long format date that is displayed in the grid? Any help greatly appreciated.

Grid

answered on 10 May 2013

1 answer

69 views

Editor not posting back in IE10

I have just returned to using Kendo and put a simple editor on an MVC view. Works fine in Firefox and in IE 10 with compatibility view turned on. With compatibility view turned off the post data for that field is empty.

Is there a specific setting or version that would affect this ?

-Robert

Editor

answered on 10 May 2013

1 answer

159 views

[Solved] Wrong Data displayed after Insert

Hello dear KendoUI Team!
I've got the following problem:
In one grid, after I insert e new row and click update, the grid does not show the new row. Instead it shows the former first row twice.
After a refresh the new row is shown, so the data is entered correctly on server side.
The grid is ajax bound and inside a tabstrip.
Any Ideas what is going wrong?

brgds
Malcolm Howlett

Grid

answered on 10 May 2013

2 answers

390 views

Aggregate function within Kendo grid header template

Hi Team
I have a column as shown in the attached excel. I am not finding a way to find the aggregates of the columns 'Fixed' and 'Variable' as mentioned in the excel. Could you please provide with suitable inputs.

-Nikhila

Grid

answered on 10 May 2013

1 answer

506 views

Validation problems with form inside Window

I have a kendo grid with a custom toolbar template that has a button to open a kendo window.

This is the code I use to open my window when the above mentioned button is clicked:

var openAssetEditor = function (e) {

var window = $('#AssetEditorPopUp').data("kendoWindow");

window.wrapper.css({

height: 450

});

window.refresh({

url: "/Asset/AssetPopup",

data: { assetId: 0 }

});

window.center();

window.open();

};

Right below the grid I have my Window:

@(Html.Kendo().Window()

.Name("AssetEditorPopUp")

.Title("Asset Editor")

.Content("loading asset info...")

.Draggable(true)

.Modal(true)

.Visible(false)

.Width(950)

)

My controller for the Popup window:

public ActionResult AssetPopup([DataSourceRequest] DataSourceRequest request, int? assetId)

{

return PartialView("~/Views/Asset/AssetPopup.cshtml");

}

I can't seem to validate the form. I always get back that the form is valid even if all the fields are left blank.

Window

answered on 09 May 2013

2 answers

771 views

[Solved] Using CDN

I am trying to use CDN for my project however when I use the CDN links instead of my kendo files, nothing displays correctly. I also use a custom Kendo css file which I list after at the end.

<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />

<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />

<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />

<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>

<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.aspnetmvc.min.js"></script>

<script src="<%= Url.Content("~/Scripts/jquery.cookie.js") %>"></script>

<link href="<%= Url.Content("~/Content/CustomKendo.css") %>" rel="stylesheet" type="text/css" />

My grids are not returning data or displaying correctly. My drop down list looks like a text box, and my charts are not showing at all. Example of how my grid looks attached. Please help!

General Discussions

answered on 09 May 2013

5 answers

1.0K+ views

[Solved] Add and Update still show entry even when model errors are returned

I am having problems with InLine add and update. If I enter a item that fails the server side validation then the item is still shown as entered/updated. I have followed your examples and looked for threads on this issue, but only found things on PopUp which don't seem to apply here:

The code for add in MVC4 is given below (note: it fails on the ModelState.IsValid, which is correct

[Authorize]

[AcceptVerbs(HttpVerbs.Post)]

[ValidateAntiForgeryToken]

public ActionResult AjaxServiceCreate([DataSourceRequest] DataSourceRequest request, ISmServiceDto newItem, ICreateSmService service)

{

if (newItem != null && ModelState.IsValid)

{

var response = service.Create(newItem);

if (!response.IsValid)

response.CopyErrorsToModelState(ModelState);

}

return Json(new[] { newItem }.ToDataSourceResult(request, ModelState));

}

My razor view is:

@model bool

@{

ViewBag.Title = "Services";

}

<h2>Services</h2>

@*<div id="message" class="Message"></div>*@

@Html.AntiForgeryToken()

@(Html.Kendo().Grid<ServiceLayer.Models.DTOs.SmServiceDto>()

.Name("Services")

.Columns(columns =>

{

columns.Bound(p => p.SmServiceId).Hidden();

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

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

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

if (@Model)

{

columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);

}

})

.ToolBar(toolbar =>

{

if (@Model)

{

toolbar.Create();

}

})

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

.Pageable()

.Sortable()

//.Scrollable()

//.HtmlAttributes(new {style = "height:430px;"})

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(10)

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

.Model(model =>

{

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

model.Field(x => x.SmServiceId).Editable(false);

model.Field(x => x.Locked).Editable(false);

})

.Create(x => x.Action("AjaxServiceCreate", "Model").Type( HttpVerbs.Post).Data("sendAntiForgery"))

.Read(read => read.Action("AjaxServiceRead", "Model"))

.Update(x => x.Action("AjaxServiceUpdate", "Model").Type( HttpVerbs.Post).Data("sendAntiForgery"))

.Destroy(x => x.Action("AjaxServiceDelete", "Model").Type( HttpVerbs.Post).Data("sendAntiForgery"))

))

@section scripts {

<script type="text/javascript">

function error_handler(e) {

if (e.errors) {

e.preventDefault(); // cancel grid rebind if error occurs

var message = "Errors:\n";

$.each(e.errors, function (key, value) {

if ('errors' in value) {

$.each(value.errors, function () {

message += this + "\n";

});

}

});

alert(message);

}

function sendAntiForgery() {

return { "__RequestVerificationToken": $('input[name=__RequestVerificationToken]').val() };

}

</script>

}

Your help on this matter would be appreciated.

Grid

answered on 09 May 2013