Questions on Kendo UI for jQuery Forum

1 answer

1.1K+ views

How to use Kendo Grid Ajax Read event on demand

Hi All,

I have page with DropDownList and Telerik's Kendo UI Grid Control. When first time page is opened DropDownList has no item selected in it. When user selects value in DropDownList only then Grid should make Ajax call to the server and load corresponding data.

My code works fine when user selects item in DropDownList, but the problem is that first time when page is opened I there is no value in DropDownList and Grid should not make a call to the server.

My question is how can I prevent grid not to make a call to the server if there is no item selected in DropDowList?

Thanks a lot.

<div>

@Html.Kendo().DropDownList().Name("broker").DataTextField("GrandParentName").DataValueField("Id").BindTo(Model).SelectedIndex(@selectedIndex).Events(e => e.Change("brokerChanged"))

</div>

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

.Name("Orders")

.HtmlAttributes(new {style = "height: 500"})

.Columns(c =>

{

c.Bound(p => p.Id)

.Width(50)

.Title("")

.Sortable(false)

.IncludeInMenu(false)

.ClientTemplate((@Html.ActionLink("Edit", "Index", "Splits", new {Id = "OrderId"}, null).ToHtmlString().Replace("OrderId", "#=Id#")));

c.Bound(p => p.TradeDate)

.Title("Trd Dt")

.Format("{0:d}")

.Width(90)

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

c.Bound(p => p.Price)

.Title("Price")

.Format("{0:n}")

.Width(100)

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

c.Bound(p => p.Status)

.Title("Status");

c.Bound(p => p.Notional)

.Title("Notional")

.Format("{0:n}")

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

})

.Sortable()

.Scrollable()

.ColumnMenu()

.Pageable(x =>

{

x.Enabled(true);

x.PreviousNext(false);

x.PageSizes(false);

x.Info(true);

x.Input(false);

x.Numeric(false);

x.Refresh(true);

x.Messages(y => y.Display("{2} Order(s)"));

})

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

.Reorderable(reoder => reoder.Columns(true))

.DataSource(ds => ds.Ajax()

.ServerOperation(false)

.Read(read => read.Action("Action", "MyController").Data("selectedBrokerId")))

)

<script type="text/javascript">

function brokerChanged() {

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

grid.dataSource.read();

}

function selectedBrokerId() {

var obj = { brokerId: $("#broker").data("kendoDropDownList").value() };

return obj;

}

</script>

Grid

answered on 24 Oct 2012

0 answers

188 views

Application using Kendo UI for Android Tablet

Hi,

We are developing an application for Android Tablet using Kendo UI. Grid and Drop down lists are the commonly used components in our application. We are populating data in the grid and drop down lists from the Android inbuilt SQLITE database. For that we are currently switching from the .html file to the .java file where I have written the query for fetching the data and return back to html page for rendering the data on the screen. The screen transition seems to be very slow. Also we have link templates for the fields in the grid using which navigation to pages is done. Can you please help me to reduce the time it takes to navigate between pages.. ?

Thanks for the help in advance.

Application

asked on 24 Oct 2012

2 answers

319 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

159 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

136 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

191 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

1,000 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

452 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

249 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

104 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