Questions on UI for ASP.NET MVC Forum

1 answer

67 views

Controller getting blank model? White belt question.

Hello,

Spent hours trying to get this simple update sample to work. Firefox shows that my model is being sent to my controller on an update but my controller receives a null model. I must be missing something basic. Thank you in advance. VS2012.

Firefox debug info:

Parametersapplication/x-www-form-urlencoded

models
[{"OnTimeID":123,"Description":"Altamed staging issue","Status":"closed"}]

View:

<!doctype html>

<html>

@{

ViewBag.Title = "OnTime Sample";

}

<head>

<title>Kendo UI Web</title>

<link href="~/styles/kendo.common.min.css" rel="stylesheet" />

<link href="~/styles/kendo.default.min.css" rel="stylesheet" />

<script src="~/js/jquery.min.js"></script>

<script src="~/js/kendo.web.min.js"></script>

</head>

<body>

<div class="form">

<div class="selector">

Edit Product:

<input type="text" id="onTimeIDs" />

</div>

<div id="container" class="container">

<ul>

<li>

<label>

OnTime ID</label>

<span data-bind="text:OnTimeID"></span></li>

<li>

<label>

Description</label>

<input type="text" class="k-textbox" data-bind="value: Description" /></li>

<li>

<label>

Status</label>

<input type="text" class="k-textbox" data-bind="value: Status" /></li>

</ul>

<button id="save">

Save</button>

</div>

<script>

var crudServiceBaseUrl = "/Services",

dataSource = new kendo.data.DataSource({

transport: {

read: {

url: crudServiceBaseUrl + "/OnTimeIDs_Get",

dataType: "json"

},

update: {

url: crudServiceBaseUrl + "/OnTimeIDs_Update",

type: "POST",

dataType: "json"

},

parameterMap: function (options, operation) {

if (operation !== "read" && options.models) {

return {

models: kendo.stringify(options.models)

};

}

},

batch: true,

schema: {

model: {

id: "OnTimeID",

fields: {

OnTimeID: {

editable: false,

nullable: true

},

Description: { type: "string" },

Status: { type: "string" }

}

);

$("#onTimeIDs").kendoDropDownList({

dataSource: dataSource,

dataTextField: "Description",

dataValueField: "OnTimeID",

change: function () {

var model = dataSource.get(this.value());

kendo.bind($("#container"), model);

}

}).data("kendoDropDownList")

.one("dataBound", function () {

kendo.bind($("#container"), dataSource.view()[0]);

});

$("button").click(function () {

dataSource.sync();

});

</script>

</body>

</html>

Controller:

Why does OnTimeIDs_Update() receive a null parameter?

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using MVCTimeCard.Models;

namespace MVCTimeCard.Controllers

{

public class ServicesController : Controller

{

public ActionResult OnTimeIDs_Get()

{

List<OnTimeItem> otiList = new List<OnTimeItem>() {

new OnTimeItem {OnTimeID = 123, Description = "Altamed staging issue", Status = "Open"},

new OnTimeItem {OnTimeID = 456, Description = "HILL staging issue", Status = "Open"},

new OnTimeItem {OnTimeID = 789, Description = "PPMSI staging issue", Status = "Open"}

};

return Json(otiList, JsonRequestBehavior.AllowGet);

}

[HttpPost]

public ActionResult OnTimeIDs_Update( IEnumerable< OnTimeItem> otis)

{

return Json(otis, JsonRequestBehavior.AllowGet);

}

General Discussions

answered on 24 Apr 2013

1 answer

135 views

Individual Column Filters set as 'extra' with MVC helpers

Hi,

I'm currently working on a kendo grid using MVC helpers, and I've been having a bit of a hard time to find a way to set a individual filter as extra = true.

Here is the code that I'm using to disable the extra filters for the grid:

.Filterable(fltr => fltr.Extra(false).Messages(m => m.IsTrue(" Yes").IsFalse(" No")).Operators(op => op.ForString(str => str.Clear()))))

This is at the end of the grid and works just fine.
However I want to have a single column as extra (the date column to be precise), however the column Filterable only takes a bool (whether it's filterable or not at all).

I would be very grateful if you could point me in the right direction regarding this.

Thanks,

W. Akram

Grid

answered on 23 Apr 2013

6 answers

1.5K+ views

Problems with user grid and .ClientTemplate()

I'm using the kendo grid to display users. I want to have a button for each user that can be clicked on to link to a page to edit user details.
I have the following code to display the required fields and use the ClientTemplate method to display the button that links to the edit user page.

@(Html.Kendo().Grid<Extranet.Web.Models.UserListViewModel.UserList>(Model.Users)

.Name("Grid")

.Columns(columns =>

{

columns.Bound(u => u.UserView.UserName);

columns.Bound(u => u.UserView.Name);

columns.Bound(u => u.UserView.UserRole);

columns.Bound(u => u.UserView.CreatedOn);

columns.Template(@<button class="k-button" value="@Url.Action("EditUser")/@item.UserView.ID">Edit</button>)

.ClientTemplate("<button value='" + Url.Action("EditUser", "Admin") + "/#=ID#>Edit</button>");

})

.Pageable()

.Filterable()

.Sortable()

.Selectable()

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

.Read(read => read.Action("AllUsers", "Admin"))

)

When the page is rendered in a browser it shows all the columns as expected and the button that I can use to link to the appropriate page. However the grid goes in to limp mode and will not change page, sort or filter.

If I take the following line of code out then the grid works fine.

columns.Template(@<button class="k-button" value="@Url.Action("EditUser")/@item.UserView.ID">Edit</button>)

.ClientTemplate("<button value='" + Url.Action("EditUser", "Admin") + "/#=ID#>Edit</button>");

Am I doing something wrong or is there an alternative way to achieve what I am trying to do?

Grid

answered on 23 Apr 2013

4 answers

266 views

Nodes lose custom HtmlAttributes when dragged and dropped

I've assigned an ID attribute to each of my tree nodes to keep a hold of information I need on the controller so that I can save a modified Hierarchy.

However, when I drop a node, the Id attribute is removed. I'm not sure if this is a bug, if I'm doing something wrong, or this is working as intended by the developers.

I've attached a screenshot of my alert window (code below), and two shots of the Html generated from Firebug. One is before the Drop and one is from after.

@(Html.Kendo().TreeView()

.Name("CompanyHierarchy")

.Events(events => events

.DragEnd("HierarchyDragEnd")

)

.BindTo(Model.Hierarchy as System.Collections.IEnumerable, mappings =>

{

mappings.For<BlueGrace.BlueShip.MVC.Models.EnterpriseChildModel>(binding => binding

.Children(c => c.Children)

.ItemDataBound((item, c) =>

{

item.Text = c.Name;

item.HtmlAttributes.Add("Id", c.EnterpriseID.ToString() + "|" + c.EnterpriseID.ToString());

})

);

})

.DragAndDrop(true)

)

<script>

function HierarchyDragEnd(e) {

setTimeout(function () {

var originNode = e.sourceNode.id;

var destinationNode = e.destinationNode.id;

var loc = e.dropPosition;

alert("Origin ID: " + originNode + "\nDestination ID: " + destinationNode + "\nDrop Position: " + loc);

}, 100);

}

</script>

TreeView

answered on 23 Apr 2013

3 answers

554 views

when i click the edit button in the grid view it row extends vigorously.

When I click the edit button in the grid view the row extends vigorously, which overlaps my other control horizontally. I want to fix the size of the grid row same as the non editable mode when i will be in editable mode.

Grid

answered on 23 Apr 2013

1 answer

62 views

Charts default massage

where to add default massage, if data not available for charts, for blank chart, like "No data points are available" and
if data is not available, right & left axis are coming close, i want to show that massage in between this two axis.

Chart

answered on 22 Apr 2013

18 answers

2.4K+ views

Grid 100% height

I can get a Grid to be 100% high by setting parent containers to be 100% as well.

But inside an MVC splitter pane this does not work and the grid seems to expand to 100% of the browser rather than the DIV of the splitter pane it is in.

What methods are people using to get 100% height in all situations and browser resizes?

Grid

answered on 22 Apr 2013

5 answers

964 views

Add to array property of grid dataSource

Build: 2012.3.1413

When my batch grid is saved, I am trying to add items to a list property that is present on the grid's dataSource. I am getting an accurate quantity of items inserted into this list property, but I am not getting any of the data that should be present with it. The strange thing is that the values DO appear to be present when I use firebug to look at what is being sent to the server, but the data disappears on the object on the controller side (except for the appropriate number of entries)

ItemModel

public class ItemModel

{

public ItemModel()

{

ServiceBookList = new List<ServiceModel>();

}

public List<ServiceModel> ServiceBookList { get; set; }

}

ServiceModel

public class ServiceModel

{

public ServiceModel() { }

public int RefServiceID { get; set; }

public string Value { get; set; }

public string Code { get; set; }

public long EnterpriseProductServiceBookID { get; set; }

public long AppUserProductServiceBookID { get; set; }

public bool IsDeleted { get; set; }

}

Script

function SaveProductBook() { 

       //This is called when the "Save" button on the parent grid is clicked

var productBook = $("#AdminProductBookGrid").data("kendoGrid");

SaveProductDetailViews(productBook); //Save items located in detail template

productBook.dataSource.sync();

}

function SaveProductDetailViews(itemGrid) {

//For each row in grid, grab the latest data from the fields within the detail templates

//and update the row's dataSource prior to sync

$.each($("#AdminProductBookGrid tbody tr"), function (index, row) {

var dataItem = itemGrid.dataItem(row);

var detailRow = $(row).next();

if (dataItem != null && detailRow.has('.k-detail-cell').length > 0) {

SaveServiceDetailViews(dataItem, detailRow, type);

}

});

}

function SaveServiceDetailViews(dataItem, detailRow, type) {

var serviceGrid = $(detailRow).find("div[id=ServiceGrid_" + dataItem.uid + "]").data("kendoGrid");

//data is the item's added in the detail template's grid for that parent row

var data = serviceGrid.dataSource._data;

for(var i = 0; i < data.length; i++) {

//Add to the parent row's dataSource list

dataItem.ServiceBookList.push(data[i]);

}

DataSource state prior to grid sync() - From Firebug
See image below, but the 1 attribute that should be populated is RefServiceID, and it is.

Result on POST -from Firebug
See image below, but same as DataSource (ie. RefServiceID should be the only attribute populate in the sub list items and it is.
***Issue is possible here because the full path of the data in the list is written strangely, but I'm not sure if it is correct.
Full path to RefServiceID (after push function) is:
models[0].ServiceBookList[0][RefServiceID]
I figure it should look list other arrays and be like this (but not sure):
models[0].ServiceBookList[0].RefServiceID

Controller values
See Image Below

In case my description was insufficient, I have also included a screenshot of how everything is laid out in the application.

Please let me know if further code is needed. Also, I began this when there was no out of the box support for saving editable fields in a grid's detail template. Please let me know if this has changed and how I might go about doing it in a supported way.

Thanks!

Grid

answered on 22 Apr 2013

1 answer

237 views

Upload widget inside jQueryUI dialog box problems

Hi,

I have 2 problems with the code bellow.

1) If I don't set the z-index in the CSS below, the "Select..." button does not do anything when clicked on. With the CSS in place the click event works until I upload something, after which it no longer respond. I'd have to reload the page to get it to work again. Drag/drop files to the drop zone works fine and the files are uploaded properly.

2) When uploading, instead of uploading each file once, it uploads each file it at least 4 times (see attached image).

HTML:

<div id="dlgUpload" style="display:none">

<p><span class="ui-icon ui-icon-info" style="float: left; margin: 0 7px 20px 0;"></span>Photo Upload</p>

<div style="width:100%;max-height:300px;">

@(Html.Kendo().Upload()

.Name("fileUpload")

.Async(a => a

.Save("Save", "Upload")

.Remove("Remove", "Upload")

.AutoUpload(true)

)

.Events(e => e

.Upload(@<text>

function(e) {

e.data = { jobNumber: $("#Customer_Number").val(), mode:"photos" };

}

</text>)

.Remove(@<text>

function(e) {

e.data = { jobNumber: $("#Customer_Number").val(), mode:"photos" };

}

</text>)

)

</div>

</div

function uploadPhotos(customerId) {

$("#dlgUpload").dialog({

autoOpen: false,

resizable: false,

draggable: true,

modal: true,

width: 470,

title: "Upload Photos for Customer " + customerId,

buttons: {

"Close": function () {

$(this).dialog("close");

}

},

});

$('#dlgUpload').dialog('open');

}

funtion uploadPhotos is called by buttons on a kendoGrid.

CSS:

.ui-dialog .k-upload-button input

{

z-index:auto !important;

}

When I take the upload widget out of the dialogbox everything works fine.

Update:
I seem to remember something about the widget being initialize twice when running inside a dialog box!
If you look at the second image, notice there are 2 drop zones (1 in red and 1 in yellow.) When dropping on the red zone the file uploads 4 times, on the yellow zone it uploads 8 times!

Help!!

Thanks,
PT

Upload

answered on 22 Apr 2013

2 answers

149 views

How to use the upload control in Kendo grid in MVC Wrapper

I follow the examble on here , add the custom column which contain the Upload control , but when I add new row , the file which I selected before is removed.
The main idea is i want to post the form with all file that i select by Upload control in Kendo grid and the data source of grid in server(it was success) by manual

Sorry because the souce file > 2m so i upload the file on mediafire
http://www.mediafire.com/?box80su08io5i64

Grid

answered on 22 Apr 2013