Questions on Kendo UI for jQuery Forum

0 answers

129 views

Grid - no row update with DropDownList component as editor

Hi,

First of all, let me congratulate you about these really nice set of controls, methods and properties !
Great work.

Now, about what brings me here is the following :

Situation :
One grid, inline row editing, server sorting, server paging
4 columns : 3 string, 1 bool
Straight forward.

$(document).ready(function()

{

$("#gridStatus").kendoGrid({

dataSource: {

transport: {

read: "/content/reference_tables/status/json.status.list.php",

update: {

url: "/content/reference_tables/status/json.status.update.php",

type: "POST"

},

destroy: {

url: "/content/reference_tables/status/json.status.delete.php",

type: "POST"

},

create: {

url: "/content/reference_tables/status/json.status.create.php",

type: "POST"

}

},

error: function(e) {

alert(e.responseText);

},

schema: {

data: "data",

total: "total",

model: {

id: "id",

fields: {

table_name: {

type: "string",

validation: { required: true}

},

status_name: {

type: "string",

validation: { required: true}

},

description: {

type: "string",

validation: { required: true}

},

active: {

type: "boolean"

}

},

pageSize: 10,

serverPaging: true,

serverSorting: true,

sort: { field: "table_name", dir: "asc" }

},

sortable: { mode: "single", allowUnsort: false },

pageable: true,

editable: "inline",

toolbar: ["create"],

columns: [{

field: "table_name",

title: "Table",

width: "25%"

}, {

field: "status_name",

title: "Name",

width: "20%"

}, {

field: "description",

title: "Description",

width: "35%"

}, {

field: "active",

title: "Active",

width: "100px",

template: "<div align=center>#= active #</div>"

},

{ command: ["edit", "destroy"], title: " ", width: "210px" }

]

});

Working situation :
All string columns are edited as a textbox. Works fine, row is updated, .. nice and smooth as designed.
In fireBug, on updating, I see that the update PHP page is called as it has to be.

Not working :
But the issue happens when I turn the first row editing is a drop down list

(...)

columns: [{

field: "table_name",

title: "Table",

editor: tableNameDropDownEditor,

width: "25%"

}, {

field: "status_name",

title: "Name",

width: "20%"

}, {

field: "description",

title: "Description",

width: "35%"

}, {

field: "active",

title: "Active",

width: "100px",

template: "<div align=center>#= active #</div>"

},

{ command: ["edit", "destroy"], title: " ", width: "210px" }

]

});

function tableNameDropDownEditor(container, options)

{

$.ajax({

url: "/content/reference_tables/status/json.status.table_names.php",

dataType: 'json',

success: function(items) {

$('<input id="idEditDropDown" data-bind="value:' + options.field + '"/>')

.appendTo(container)

.kendoDropDownList({

dataSource: items,

dataTextField: "table_name",

dataValueField: "table_name"

});

$("#idEditDropDown").data('kendoDropDownList').value(options.model.table_name);

},

error: function(data){

console.log('error occured loading the JSON');

}

});

}

This is the JSON returned by json.status.table_names.php :
(returns the list of the database table names filtered (select * except the one starting with .. bla bla and bla bla) )

[{"table_name":"audit_create"},{"table_name":"audit_visible"},{"table_name":"links"},{"table_name":"links_activity"},{"table_name":"msg_content"},{"table_name":"msg_flow"},{"table_name":"msg_status"},{"table_name":"ratings"},{"table_name":"shortlists"},{"table_name":"site_settings"},{"table_name":"users"},{"table_name":"vendor_websites"},{"table_name":"vendors"},{"table_name":"visitors"},{"table_name":"visitors_history"}]

Looks fine as the drop down populates the list.
So far so good, list is populated.

BUT .. the problem is that when I want to UPDATE the row !

As soon as I put a drop down list component, it does not update at all !
FireBug does not event show me the update PHP page called. It acts as no data has changed so it does not trigger the update process.
I am probably missing some things in the definition of the drop down ...
I tried with fixed values instead of filling it in with JSON .. but same behavior

If you please could assist a bit. It is propably a piece of cake but this starts to drive me crazy ;-)

Any help is welcome, obviously.

Wbr,

/Olivier

Grid

asked on 22 Jun 2012

0 answers

161 views

Popup editor: Save Changes

Hi,

I am using grid with custom popup editor template. When I press UPDATE button CRUD update request is working properly. However when I keep edit the other rows it is posting all data from the previous rows. And the data is growing after every UPDATE.

If grid is posting the update request when I click the Update button on popup editor, I think it doesn't need to send the data from previous row that already updated in the server.

What do you think?

Thanks!

Grid

asked on 22 Jun 2012

1 answer

632 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

187 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

929 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

374 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

123 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

77 views

Open Frame

How script to open target the frame using treeview ?

TreeView

asked on 21 Jun 2012

6 answers

376 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

168 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