or
2 answers
208 views
I want to implement a generic form field binding with kendo MVVM. This means that my model shouldn't contain any hard-wired field IDs in its bindings, instead it should be able to bind to any form rendered by the server. Here is what I've got so far:
This code iterates through all input fields, attaches the necessary data-bind attributes to them and sets up the model binding for each field. Finally all field objects are stored in the global genericModel object.
Unfortunately, this approach doesn't seem to work - changes aren't updated in both directions. I also tried the "nested binding" approach mentioned in the docs but had no luck either. I'm using KendoUI v2012.2.531
Any idea?
Thanks,
Franz
var genericModel = {};function bindField($field) { var viewModel = kendo.observable({ value: "John Doe" }); $field.attr('data-bind', 'value: value'); kendo.bind($field, viewModel); genericModel[$field.attr('id')] = viewModel;}$(function () { var $inputs = $('input').not('.datetimepicker, .autocomplete'); $inputs.each(function () { bindField($(this)); });});This code iterates through all input fields, attaches the necessary data-bind attributes to them and sets up the model binding for each field. Finally all field objects are stored in the global genericModel object.
Unfortunately, this approach doesn't seem to work - changes aren't updated in both directions. I also tried the "nested binding" approach mentioned in the docs but had no luck either. I'm using KendoUI v2012.2.531
Any idea?
Thanks,
Franz
Peter Bulloch
Top achievements
Rank 1
Rank 1
answered
on
22 Jun 2012
0 answers
87 views
I have several people editing the same grid, and I would like their updates to push out to the everyone else as they save the grid. Do you support server push in updates?
This is a very common pattern these days with twitter feeds and such.
This is a very common pattern these days with twitter feeds and such.
1 answer
89 views
Am I blind or do your forums not have search functionality? This would be very helpful. I'm using google's site: search to search your forums, but have no confidence that google is truly up to date.
Thanks,
Jeff
Thanks,
Jeff
Dimitar
Telerik team
answered
on
22 Jun 2012
2 answers
142 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
266 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
189 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
139 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
169 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
653 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
195 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 .
