Questions on Kendo UI for jQuery Forum

1 answer

701 views

Grid Grouping - Default a group as Collapsed

Hey All
When using a Grid and a grouped Data Source; is there anyway to make a group be collapsed by default (rather than expanded).

DataSource parameter ...

group: [{ field: "DepartmentName" }, { field: "EmployeeName"}],

I would love it if there was something like

group: [{ field: "DepartmentName", status: "exp" }, { field: "EmployeeName", status: "col"}],

I could always collapse each on load, but that seems cumbersome

Grid

answered on 21 Jun 2012

0 answers

206 views

Kendo Cascading combo box with asp.net web methods. (Filter not happening)

hi, i am trying to use cascading combo box in asp.net. this is the code which i am tried. but problem is filter is not happening .

<div id="example" class="k-content">

<p>

<label for="categories">Catergories:</label>

<input id="categories" />

</p>

<p>

<label for="products">Products:</label>

<input id="products" disabled="disabled" />

</p>

<p>

<label for="orders">Orders:</label>

<input id="orders" disabled="disabled" />

</p>

<style scoped>

.k-readonly

{

color: gray;

}

</style>

<script>

$(document).ready(function () {

var productsDataSource = new kendo.data.DataSource({

serverFiltering: true,

transport: {

read: {

url: "WebForm1.aspx/GetProductsList", //specify the URL which data should return the records. This is the Read method of the Products.asmx service.

contentType: "application/json; charset=utf-8", // tells the web method to serialize JSON

type: "POST" //use HTTP POST request as the default GET is not allowed for web methods

}, parameterMap: function (options) {

return JSON.stringify(options);

}

}, schema: {

// the data which the data source will be bound to is in the "results" field

data: "d"

}

});

var ordersDataSource = new kendo.data.DataSource({

serverFiltering: true,

transport: {

read: {

url: "WebForm1.aspx/GetOrdersList", //specify the URL which data should return the records. This is the Read method of the Products.asmx service.

contentType: "application/json; charset=utf-8", // tells the web method to serialize JSON

type: "POST"

}, parameterMap: function (options) {

return JSON.stringify(options);

}

}, schema: {

// the data which the data source will be bound to is in the "results" field

data: "d"

}

});

$("#categories").kendoComboBox({

placeholder: "Select category...",

dataTextField: "CategoryName",

dataValueField: "CategoryID",

dataSource: {

serverFiltering: true,

transport: {

read: {

url: "WebForm1.aspx/GetCategoryList", //specify the URL which data should return the records. This is the Read method of the Products.asmx service.

contentType: "application/json; charset=utf-8", // tells the web method to serialize JSON

type: "POST" //use HTTP POST request as the default GET is not allowed for web methods

}, parameterMap: function (options) {

return JSON.stringify(options);

}

}, schema: {

// the data which the data source will be bound to is in the "results" field

data: "d"

}

},

change: function () {

var value = this.value();

if (value) {

value = parseInt(value);

if (isNaN(value)) {

return;

}

products.data("kendoComboBox").dataSource.filter({ field: "ProductID", operator: "eq", value: parseInt(value) });

products.enable();

} else {

products.enable(false);

}

products.value("");

orders.value("");

orders.enable(false);

}

})

var products = $("#products").kendoComboBox({

autoBind: false,

placeholder: "Select product...",

dataTextField: "ProductName",

dataValueField: "ProductID",

dataSource: productsDataSource,

change: function () {

var value = this.value();

if (value) {

value = parseInt(value);

if (isNaN(value)) {

return;

}

ordersDataSource.filter({ field: "ProductID", operator: "eq", value: parseInt(value) });

orders.enable();

} else {

orders.enable(false);

}

orders.value("");

}

}).data("kendoComboBox");

var orders = $("#orders").kendoComboBox({

autoBind: false,

placeholder: "Select order...",

dataTextField: "OrderID",

dataValueField: "OrderID",

dataSource: ordersDataSource

}).data("kendoComboBox");

});

</script>

</div>

this are the c# methods to retrive the data. retrival is no problem. i need to filter the data.

[WebMethod]

public static IEnumerable GetCategoryList()

{

return dbContext.Categories.Select(e => new { CategoryID = e.CategoryID, CategoryName=e.CategoryName }).ToArray();

}

[WebMethod]

public static IEnumerable GetProductsList(int filter)

{

return dbContext.Products.Select(e => new  { ProductID = e.ProductID, ProductName = e.ProductName, CategoryID = e.CategoryID }).ToArray();

}

[WebMethod]

public static IEnumerable GetOrdersList(int filter)

{

return dbContext.Orders.Select(e => new OrderViewModel { OrderID = e.OrderID, OrderName = e.OrderID, ProductID = e.ProductID }).ToArray();

}

public class ProductViewModel

{

public int ProductID { get; set; }

public string ProductName{ get; set; }

[ScriptIgnore]

public int CategoryID { get; set; }

}

public class OrderViewModel

{

public int OrderID { get; set; }

public int OrderName{ get; set; }

[ScriptIgnore]

public int ProductID { get; set; }

}

kindly help me .

ComboBox

asked on 21 Jun 2012

4 answers

997 views

pageSize()

I have a dataSource that is configurable by the user. Programmatically, that means I want to set the pageSize each time before I do the .read() on the dataSource.

But I am finding (version 515) using Fiddler that when I change the pageSize (the datasource fires off a read (with no parameters) and then when the read() happens a few lines later there is a second getURL request:

I want to configure the DataSource so that it is only fired manually.

Here is another oddity, this double HTTP Get only happens once. The next time I proceed through the code, setting pageSize() does not cause an HTTP Get, (only the .read() does).

Just to make this more clear the setting .pageSize() fires this request
GET /SearchBoxInRange HTTP/1.1

and two lines later the searchData.read() fires of this request:

GET /SearchBoxInRange?requestBox=((42.23903905725251%2C+-71.22695843505858)%2C+(42.49270487579739%2C+-70.90904156494139))&within=false HTTP/1.1

The second is the correct one. The first is spurious.

var pagesize = $("#PageSizeSelect").data("kendoDropDownList").value();

alert("page size is now: " + pagesize);

searchData.pageSize(parseInt(pagesize));

// makes a second request - which works and has the new pagesize set

// searchData is a kendo dataSource object

searchData.read(searchBox);

Data Source

answered on 21 Jun 2012

1 answer

441 views

How to set the Drop Down List's List Area Height?

Could any body tell me how to set the height of the Popup area of a drop-down list box? And that of a Customized template?

DropDownList

answered on 21 Jun 2012

1 answer

153 views

Grid not editable when using editable: {update: true}

I have an editable Grid.
When using just editable: true, the edit function behaves as expected.
However, when using editable: {update: true} the grid is not editable.

Is this a bug? If not, I'm posting my code below:

var dataSourceStatistics = new kendo.data.DataSource({

batch: true,

transport: {

read: {

data: {

f:'getOrderSuggestion'

}

},

schema: {

data: function(data) {

return data.result.custStats.Record;

},

total: function(data) {

return data.result.custStats.Record.length;

},

model:{

// TODO: id should be EmployeeId

id: "Employee",

fields: {

Employee: {

},

EmployeeId: {

},

ValueCultureAndExercise: {

type: "number",

defaultValue: "0",

validation: {

}

},

ValueExercise: {

type: "number",

defaultValue: "0"

},

Company: {

editable: false,

defaultValue: function() {

return "apa";

}

},

CompanyNo: {

editable: false

},

Department: {

},

Total: function () {

return this.ValueExercise * 10;

}

});

$("#orderGrid").kendoGrid({

dataSource: dataSourceStatistics,

editable: {

update: true,

destroy: true

},

sortable: true,

selectable: true,

toolbar: [{name: "create", text: "Lägg till rad"}],

columns: [

{

field: "Employee",

title: "Namn"

},

{

field: "EmployeeId",

title: "Anställningsnummer"

},

{

field: "ValueExercise",

title: "Värde träning"

},

{

field: "ValueCultureAndExercise",

title: "Värde träning och kultur"

},

{

field: "null",

title: "Totalt",

template: "#= ValueCultureAndExercise + ValueExercise#"

},

{

command: "destroy",

title: "Ta bort"

}

]

});

Grid

answered on 21 Jun 2012

0 answers

98 views

Open Frame

How script to open target the frame using treeview ?

TreeView

asked on 21 Jun 2012

6 answers

424 views

Swipe scrolling tabstrip

Is there any way to get the tabstrip to scroll left and right with swipes instead of stacking when the viewport is too narrow to display all of them?

Thanks/Anker

TabStrip (Mobile)

answered on 21 Jun 2012

3 answers

213 views

BUG: Grid with Virtual scrolling and Batch Editing = k-dirty cells turns fixed

Hi

When I create a grid with Virtual scrolling + Batch Editing, I edit a few fields and I do scroll, the k-dirty cells remain fixed in the grid instead of following the edited cells.

You can try it in this example of code:
http://jsfiddle.net/M6VmL/3/

I think I've solved it by modifying the k-dirty CSS class.
http://jsfiddle.net/M6VmL/4/

Greetings

Grid

answered on 21 Jun 2012

2 answers

1.1K+ views

json stringify and DatePicker value

I am using JSON.stringify to create a value stored in a database on the server side. When the value comes back and is placed in datepicker the value does not look right.

This fiddle mimics the process.
http://jsfiddle.net/RichardAD/jfugG/
Something wonky is up because the datepicker icons don't appear and the css is barfed.

I also tried using obj.data('kendoDatePicker').value().getTime() for storage and that didn't not work either.

How do YOU serialize and deserialize dates used with DatePickers ?

DatePicker

answered on 21 Jun 2012

0 answers

115 views

vertical center in kendo mobile page

Hi,
I need to vertically center a div in a mobile page (data-role="view"). I've tryed lot of solutions from google but no one do it :(
please help me!
thanks a lot

mauro

General Discussions

asked on 21 Jun 2012