Questions on Kendo UI for jQuery Forum

2 answers

275 views

Foreign key with the "values" property of the column

I see the grid demo has a "foreign key" option where the "values" property of the grid column can point to a data-source, and will automatically build a drop-down widget for that column. I also saw in a forum post where Telerik says the values object must have 2 properties (value and text).

The grid documentation page mentions nothing about the values property. Is it documented anywhere???

Grid

answered on 24 Oct 2012

0 answers

127 views

cascadindg combobox of tree input dont work

hi i have a proble with cascadinding in the 3 input hel please her is my code, i use postgres for the database:

<div id="example" class="k-content">
            <p>
                <label for="especie">Especie:</label>
                <input id="especie" style="width: 199px"/>
            </p>
            <p>
                Cepa:<span lang="es-mx">    </span> <input id="cepa" disabled="disabled" style="width: 199px" />
            </p>
            <p>
                <label for="grupo">Grupo:<span lang="es-mx">  </span></label> <input id="grupo" disabled="disabled" style="width: 199px" />
            </p>

            <style scoped>
                .k-readonly
                {
                    color: gray;
                }
            </style>

            <script>
                var MYAPP = (function($, kendo) {

                    $("#especie").kendoComboBox({
                       dataSource: new kendo.data.DataSource({
                                serverFiltering: true,
                            transport: {
                                read: "http://localhost/bioterio/Especie.php"
                            },
                            schema: {
                               data: "data"
                           }
                        }),
                        placeholder: "Seleccionar Especie...",
                        dataTextField: "Especie",
                        dataValueField: "Especie"
                    });

                    $("#cepa").kendoComboBox({
                          dataSource: new kendo.data.DataSource({
                           serverFiltering: true,
                            transport: {
                                read: "http://localhost/bioterio/cepa.php",
                                parameterMap: function(options, operation) {
                                   return {
                                       Especie: options.filter.filters[0].value
                                           }
                                       }
                            },
                            schema:{
                               data:"data"

                            }
                        }),
                        placeholder: "Selecionar Cepa...",
                        dataTextField: "Cepa",
                        dataTextValue: "Cepa",
                        cascadeFrom: "especie",
                        autoBind: false
                    });

                   $("#grupo").kendoComboBox({
                          dataSource: new kendo.data.DataSource({
                           serverFiltering: true,

                            transport: {
                                read: "http://localhost/bioterio/Grupo.php",
                                parameterMap: function(options, operation) {
                                   return {
                                       Cepa: options.filter.filters[0].value
                                           }
                                       }
                            },
                            schema:{
                               data:"data"

                            }
                        }),
                        placeholder: "Selecionar Grupo...",
                        dataTextField: "ID_Grupo",
                        dataTextValue: "ID_Grupo",
                        cascadeFrom: "cepa",
                        autoBind: false
                    });



               })(jQuery, kendo);
             </script>

        </div>

DropDownList

asked on 23 Oct 2012

0 answers

103 views

Inline editing of UK date in grid

I have a grid which takes a date from a MySQL database in the format year-month-day hour:minute:second and displays it as a UK date in a datepicker in the grid. This seems to work fine.

As soon as I go to edit the date in the inline editor though, I can make the change but it the editor immediately exits, taking me back to the original grid.

It is worth noting though that I am using jQuery 1.8.2

Just wondering if anyone else has seen this before?

My grid along with all of the code is here:
http://dev.openbill.co.uk/admin/viewproject.php?id=9

Grid

asked on 23 Oct 2012

0 answers

146 views

Modal does not do anything; windows do not show from hidden div

I don't want my DIV that I am using for my Kendo window to flash on the screen. If I allow it to be displayed, it shows (quickly), then dissapears when I initialize the Kendo window on the document ready. That flash is fairly annoying. So I have the CSS set to "display: none;". Do this, and the window never shows when I call open:

win = $("#window").kendoWindow({
actions: ["Close"],
height: "300px",
modal: true,
title: "RO / Documents",
visible: false,
width: "400px"
}).data("kendoWindow");
win.center();
win.open();

I found that if I modify the top line as follows this works:
win = $("#window").css("display", "block").kendoWindow({

Just wanted to report that. Possibly it's been fixed.

Please ignore the "modal" comment in the header. That was a separate issue I was asking about; however I found and fixed the problem. I am unable to edit the title, just this post.

Window

asked on 23 Oct 2012

3 answers

933 views

Button to pass data to another page in a grid

Hello,

I'm in the process of upgrading some Telerik controls to KendoUI but am trying to only use javascript.

I have a kendo UI grid that shows some data including an edit button for each. When an edit button for a row is pressed I'd like a new page to be displayed showing that row's data in a form so it can be edited. I'm having problems creating the button though. The telerik version of the page (written with MVC) renders this HTML:

<a class="t-button t-grid-Edit" href="/BMDE/FI/Edit/13?Id=13">Edit</a>

And, ideally, this is what I'd like to replicate using Kendo UI with javascript.

At, the moment I've got this:

<script type="text/javascript">

var modelDataSource = new kendo.data.DataSource({
data: $.parseJSON('@modelString')
});

$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: modelDataSource,
columns:
[
{ title: "Name", field: "Name"},
{ title: "Age", field: "Age"},
{ title: " ", command: { text: "Edit"}},
]
});
});
</script>

Can anyone let me know what I need to do to redirect the page when pressing the edit button?

Cheers,

Adam

Grid

answered on 23 Oct 2012

3 answers

390 views

Strange Forms values behavior with complex objects

I am using a Kendo UI DropDownList to allow users to choose a State on 2 different pages. On page A, the StateId property being edited is on the core model object. On page B, the StateId property is 1 object deeper. The 2 pages are for editing TaxRules and Customers, with the Model classes as follows:

public class TaxRuleModel {
public int StateId {get; set;}
}
public class CustomerModel {
public AddressModel Address {get; set;}
}
public class AddressModel {
public int StateId {get; set;}
}

Both pages create a drop down list as follows, with the selector being the only difference:
input[name='StateId'] vs input[name='Address.StateId']

$(selector).kendoDropDownList({
dataTextField: "DisplayText",
dataValueField: "Value",
optionLabel: "Select One",
dataSource: {
type: "json",
error: handleKendoGridCrudError,
transport: { read: {Url: url, dataType: "json"}},
schema: {
model:
{
fields:
{
Value: { type: "number" },
DisplayText: { type: "string" }
}
}
}
}
});

The URL returns a JSON list of :

public class StateModel
{
public int Value {get; set;}
public String DisplayText {get; set;}
}

The MVC methods to handle saving the models on each page have the following signatures:

public ActionResult Edit([DataSourceRequest] DataSourceRequest dataSourceRequest, TaxRule model);
public ActionResult Edit([DataSourceRequest] DataSourceRequest dataSourceRequest, Customer model);

The drop down list appears as expected on both pages. On page A, when editing the TaxRule objects, the Form key with the value of the StateId is "StateId" as expected. This allows the StateId value to automatically bind to the TaxRule model as expected and be available in the action method on the model instance. However, on page B, when editing the Customer object, the Form has 2 keys related to the StateId: "Address.StateId.Value" and "Address.StateId.DisplayText". Because of this, the StateId never binds to the Customer.Address.StateId property of the model in MVC. Clearly the problem is that Kendo is attaching the entire lookup list State object to Address.StateId. But I can't figure out why it would behave differently in these 2 different cases. My schema model for the TaxRule and Customer objects look like this:

model: // TaxRule
{
id: "Id",
fields:
{
Id: { defaultValue: 0 },
StateId: {}
}
}

model: // Customer
{
id: "Id",
fields:
{
Id: { type: "number", defaultValue: 0 },
Address:
{
defaultValue: {},
Id: { type: "number", defaultValue: 0 },
StateId: {}
}
}
}

How can I get this to work properly?

DropDownList

answered on 23 Oct 2012

1 answer

201 views

Grid not refreshing in Safari on IPad

I have a need for a grid to be auto updated via ajax on an interval running on multiple platforms. It does not update\refresh on the IPad\IPhone in Safari. I've tested and it works in IE 9 on Win7, Safari 5 on Win7, FireFox on Win7, Android default browser.
I began altering the ajaxbinding example in the Kendo.Mvc.Examples solution. The grid is refreshed every second.

I need to know why it isn't working on IPad\IPhone devices.

ajaxbinding.cshtml:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()

.Name("Grid")

.Columns(columns => {

columns.Bound(p => p.ProductID).Groupable(false).Width(140);

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

columns.Bound(p => p.UnitPrice)

.HtmlAttributes(new { style = "text-align: right" })

.Width(140);

columns.Bound(p => p.UnitsInStock).Width(160);

}).Pageable()

.Sortable()

.Scrollable().Selectable(row => row.Mode(GridSelectionMode.Single).Type(GridSelectionType.Cell))

.Groupable()

.DataSource(dataSource => dataSource.Ajax().Read(read => read.Action("Products_Read", "Grid"))))

<button id="refreshButton" onclick="refreshGrid()">Start the Refresh</button>

<script>

var myGrid;

$(function () {

myGrid = $('#Grid').data('kendoGrid');

});

function refreshGrid() {

$('#refreshButton').attr("disabled", "disabled");

setInterval(DoWork, 1000);

}

function DoWork() {

myGrid.dataSource.read();

}

</script>

Here is the modified controller to return data. The GetProducts() method was altered to return random product values.

IndexController.cs:

using System.Collections.Generic;

using System.Data.Linq;

using System.Linq;

using System.Web.Mvc;

using Kendo.Mvc.Examples.Models;

using Kendo.Mvc.Extensions;

using Kendo.Mvc.UI;

using System;

namespace Kendo.Mvc.Examples.Controllers

{

public partial class GridController : Controller

{

public ActionResult Index()

{

return View(GetProducts());

}

public ActionResult Remote_Data()

{

return View("AjaxBinding");

}

public ActionResult Products_Read([DataSourceRequest] DataSourceRequest request)

{

return Json(GetProducts().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

}

private static IEnumerable<OrderViewModel> GetOrders()

{

var northwind = new NorthwindDataContext();

var loadOptions = new DataLoadOptions();

loadOptions.LoadWith<Order>(o => o.Customer);

northwind.LoadOptions = loadOptions;

return northwind.Orders.Select(order => new OrderViewModel

{

ContactName = order.Customer.ContactName,

OrderDate = order.OrderDate,

OrderID = order.OrderID,

ShipAddress = order.ShipAddress,

ShipCountry = order.ShipCountry,

ShipName = order.ShipName,

EmployeeID = order.EmployeeID

});

}

private static IEnumerable<ProductViewModel> GetProducts()

{

//var northwind = new NorthwindDataContext();

var list = new List<ProductViewModel>();

var randomGen = new Random(DateTime.Now.Second);

for (var i = 500; i >= 1; i--)

{

list.Add(

new ProductViewModel

{

ProductID = i,

ProductName = "ProductName-" + i,

UnitPrice = Convert.ToDecimal(randomGen.NextDouble()),

UnitsInStock = randomGen.Next(),

UnitsOnOrder = (short)randomGen.Next(),

Discontinued = (i % 2) == 0 ,

LastSupply = DateTime.Today.AddDays(i)

}

);

}

return list.AsEnumerable();

//return northwind.Products.Select(product => new ProductViewModel

//{

// ProductID = product.ProductID,

// ProductName = product.ProductName,

// UnitPrice = product.UnitPrice ?? 0,

// UnitsInStock = product.UnitsInStock ?? 0,

// UnitsOnOrder = product.UnitsOnOrder ?? 0,

// Discontinued = product.Discontinued,

// LastSupply = DateTime.Today

//});

}

private static IEnumerable<EmployeeViewModel> GetEmployees()

{

var northwind = new NorthwindDataContext();

return northwind.Employees.Select(employee => new EmployeeViewModel

{

EmployeeID = employee.EmployeeID,

FirstName = employee.FirstName,

LastName = employee.LastName,

Country = employee.Country,

City = employee.City,

Notes = employee.Notes,

Title = employee.Title,

Address = employee.Address,

HomePhone = employee.HomePhone

});

}

Grid

answered on 23 Oct 2012

1 answer

56 views

Grid won't scroll vertically on Andriod

http://www.kendoui.com/forums/ui/dropdownlist/unable-to-scroll-on-ipad.aspx#1997491

Hi I am using the Kendo UI web but when I open the page on Android the grid won't scroll.

Should i follow the idea in the link above?
If so do I require to buy your mobile suit ? The problem I see is that your mobile package do not have grid right?

So, how should I go on from here?

Best,

Grid

answered on 23 Oct 2012

2 answers

206 views

ListView text alignment error

I am having problems with aligning an input to the left.

Attached is the code.

The buttons and other stuff is aligned OK, but for some reason I cannot get the inputs (event and screening) to align to the left.

I have tired all of the styles but to no avail.

Here is a jsfiddle link

http://jsfiddle.net/7WVqL/170/

And the source is below

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<a href="app/venue.html" class="button" id="venue-button" data-role="button" type="button">Select a Venue</a>

</li>

</li>

</ul>

<a href="app/screening.html" class="button" id="screeninge-button" data-role="button" type="button">Select a Screening</a>

</li>

</li>

</ul>

</div>

</div>

<p class="listvalue">#:infoName#</p>

</script>

<a class="nav-button" data-role="backbutton" data-align="left" href="app/logon.html">Logout</a>

</div>

</header>

<p>TabStrip</p>

<a href="#validatetab" data-icon="toprated">Validate</a>

<a href="#infotab" data-icon="info">Information</a>

</div>

.listvalue

{

float: left;

font-size: medium;

line-height: .5em;

}

</style>

</body>

</html>

ListView (Mobile)

answered on 23 Oct 2012

4 answers

742 views

Issue with DateTime fields being Null

Greetings,

I'm currently in the process of creating a grid to display comments on a product. There is some data migration that has forced two DateTime fields to be required Null and the grid seems to be throwing fits about it. I get the following error when it happens:

The model item passed into the dictionary is null, but this dictionary requires a non-null model item of type 'System.DateTime'.

I have been researching the topic and had little success on solving the problem. Here is a sample of my code thus far.

View

@(Html.Telerik().Grid<ProductModel.ProductCommentsModel>()

.Name("productcomments-grid")

.DataKeys(keys =>

{

keys.Add(x => x.Id);

})

.DataBinding(dataBinding =>

{

dataBinding.Ajax()

.Select("ProductCommentsList", "Product", new { productId = Model.Id })

.Update("ProductCommentUpdate", "Product")

.Delete("ProductCommentDelete", "Product");

})

.Columns(columns =>

{

columns.Bound(x => x.Id)

.Hidden(true);

columns.Bound(x => x.ProductId)

.Hidden(true);

columns.Bound(x => x.CustomerId)

.Hidden(true);

columns.Bound(x => x.CustomerName)

.Width(200)

.ReadOnly(true);

columns.Bound(x => x.CreatedDate)

.Width(100)

.ReadOnly(true);

columns.Bound(x => x.LastModifiedDate)

.Width(100)

.ReadOnly(true);

columns.Bound(x => x.Comment);

columns.Command(commands =>

{

commands.Edit().ButtonType(GridButtonType.Text);

commands.Delete().ButtonType(GridButtonType.Text);

});

})

.Editable(edit => edit.Mode(GridEditMode.PopUp))

.EnableCustomBinding(true))

Model

public partial class ProductCommentsModel : BaseNopEntityModel

{

public int ProductId { get; set; }

public int CustomerId { get; set; }

public string CustomerName { get; set; }

[Required(AllowEmptyStrings=true)]

[DisplayFormat(NullDisplayText = "", DataFormatString = "0:MM/dd/yyyy")]

public DateTime? CreatedDate { get; set; }

[Required(AllowEmptyStrings = true)]

[DisplayFormat(NullDisplayText = "", DataFormatString = "0:MM/dd/yyyy")]

public DateTime? LastModifiedDate { get; set; }

public DateTime? SentForRepair { get; set; }

public string Comment { get; set; }

}

Any help would be appreciated. Thank you.

Kindest Regards,
Chad Johnson

Grid

answered on 23 Oct 2012