Questions on Kendo UI for jQuery Forum

0 answers

153 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

949 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

400 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

210 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

60 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

211 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

759 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

1 answer

137 views

Licensing issue

1. Can I use KendoUIWeb package from nuget, or Kendo UI Web archive (gpl3), downloaded from this site

in internal project for free, without any charge.

2. Both these packages (nuget and archive) doesn't contains kendo.aspnetmvc.*.js script file, which is included into trial package

Is it means that I cannot use kendo.aspnetmvc.*.js in project without charge?

3. Same question regarding kendo.mvc.dll (where html helpers is situated)

Thank you for your answer.

General Discussions

answered on 23 Oct 2012

0 answers

103 views

Endless scroll won't work on GET twitter user_timeline!

Hi,

I'm trying to get a user's timeline from twitter and display it in a list view. Currently I have a list view that displays the first 10 tweets in a user's timeline. However the endless scrolling feature doesn't work! No animation is shown when you get to the bottom of the page and no call to twitter is made via http request either (I have looked using wireshark). Below is my source code:

function loadTwitterFeed() {

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "http://api.twitter.com/1/statuses/user_timeline.json", // the remove service url

dataType: "jsonp" // JSONP (JSON with padding) is required for cross-domain AJAX

},

parameterMap: function(options) {

return {

screen_name: "USER_NAME",

count: 10,

since_id: options.since_id, //additional parameters sent to the remote service

max_id: options.max_id //additional parameters sent to the remove service

};

}

});

$("#twitter-feed").kendoMobileListView({

dataSource: dataSource,

template: $("#twitter-template").text(),

appendOnRefresh: true,

pullToRefresh: true,

//addition parameters which will be passed to the DataSource's read method

pullParameters: function(item) { //pass first data item of the ListView

return {

since_id: item.id_str

};

},

endlessScroll: true,

//addition parameters which will be passed to the DataSource's next method

endlessScrollParameters: function(firstOrigin) {

if (firstOrigin) {

return {

max_id: firstOrigin.id_str

};

}

});

}

It is similar to the twitter search demo but I have removed the serverPaging from the code as Twitter is getting rid of pages soon and is instead only using max_id and since_id. I've searched the documentation with no luck, it should work!

Does anybody know what's wrong?

Thanks,
Thomas

Link to twitter page on user_timeline: https://dev.twitter.com/docs/api/1/get/statuses/user_timeline

Example Json request which works when copied and pasted into browser (just replace USER_NAME with valid one): http://api.twitter.com/1/statuses/user_timeline.json?screen_name=USER_NAME&count=10

ListView (Mobile)

asked on 23 Oct 2012

0 answers

78 views

How to add a dropdown in grid and on selection I want to display some selected data in different grid?

I am trying this codeto add the dropdown in the template:-

$( "#grdTrading" ).kendoGrid( {
            dataSource: grddataSource,   // static data source
            scrollable: true,
            height: 180,
            columns: [
           "Code", "Level",
        {
            field: "Flag",
            template: "#=Flag.Name#",
            width: "150px",
            editor: TradingDropDownEditor
        }

        ],
            editable: true,
            sortable: true,
            selectable: true

} );

function TradingDropDownEditor( container, options )
{

            $( '<input data-text-field="Name" data-value-field="FlagID" id="Category" data-bind="value:' + options.field + '"/>' ).appendTo( container ).kendoDropDownList( {
                autoBind: false,
                change: function ( e )
                {

                    var grid = $( "#grdTrading" ).data( "kendoGrid" );
                    var dataItem = null;
                    grid.select().each( function ( e )
                    {
                        dataItem = grid.dataItem( $( this ) );
                        var id = dataItem.Code;
                        var DropdownText = dataItem.Flag.Name;
                        alert( DropdownText );
                        if ( id == "ABC" && DropdownText == "No" )
                        {

//Adding dropdown to the second grid
AssociatedData = [{ text: "No", value: "No"}];

                                $( "#grdAssociated" ).find( "#ddlAssoPort" ).kendoDropDownList( {
                                dataTextField: "text",
                                dataValueField: "value",
                                autoBind: true,
                                enable: false,
                                dataSource: AssociatedData

} );

                        }
                        else
                        {
                           return;
                        }

} );

},

dataSource: ddlFlag

} );

}

I am able to add the dropdown but on change event if I select the dropdown it vanishes the the dropdown in the other grid.
Please look at the code and please help..!

Grid

asked on 23 Oct 2012