or
2 answers
155 views
Not sure if this should go in the Beta Forum or here, but just downloaded the 2Q2012 beta, and would like to try out the SplitView.
I did not see anything that looked related in the Examples folder, where should I look for more information on how to use this new feature?
Thanks
I did not see anything that looked related in the Examples folder, where should I look for more information on how to use this new feature?
Thanks
1 answer
285 views
I have a problem. I want to change dataSource of my Autocomplete on the fly. Here is the problem :
I have a dropdown which has "ItemID" and "ItemName" for its element.
When i select ItemID on the dropdown, i want my autocomplete to select "ItemID" data from the server for its dataSource.
And when i select ItemName on the dropdown, i want my autocomplete to select "ItemName" data from the server for its dataSource.
Please help me..
I have a dropdown which has "ItemID" and "ItemName" for its element.
When i select ItemID on the dropdown, i want my autocomplete to select "ItemID" data from the server for its dataSource.
And when i select ItemName on the dropdown, i want my autocomplete to select "ItemName" data from the server for its dataSource.
Please help me..
Jesse
Top achievements
Rank 2
Rank 2
answered
on
22 Jun 2012
2 answers
236 views
I'm trying to change the Editors textarea cols property using the following
var onCollapse = function(e) {
$('#editor').attr("cols", 200);
var editor = $("#editor").data("kendoEditor");
editor.update();
};
$('#Splitter').kendoSplitter({
collapse: onCollapse,
panes: [
{ size: "300px", min: "100px", max: "300px", collapsible: true},
{ size: "400px" }
]
});
I know the event is firing and that the value is getting changed, but the editor size stays the same. Also I have try changing the editors css width property to no avail. Thanks
var onCollapse = function(e) {
$('#editor').attr("cols", 200);
var editor = $("#editor").data("kendoEditor");
editor.update();
};
$('#Splitter').kendoSplitter({
collapse: onCollapse,
panes: [
{ size: "300px", min: "100px", max: "300px", collapsible: true},
{ size: "400px" }
]
});
I know the event is firing and that the value is getting changed, but the editor size stays the same. Also I have try changing the editors css width property to no avail. Thanks
0 answers
149 views
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
0 answers
182 views
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!
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!
1 answer
688 views
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
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
0 answers
201 views
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 .
this are the c# methods to retrive the data. retrival is no problem. i need to filter the data.
kindly help me .
<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 .
4 answers
988 views
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.
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);
Dr.YSG
Top achievements
Rank 2
Rank 2
answered
on
21 Jun 2012
1 answer
422 views
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?
Sakthivel
Top achievements
Rank 1
Rank 1
answered
on
21 Jun 2012
1 answer
147 views
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:
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" } ]});
