<script type="text/x-kendo-template" id="feedTemplate"> <div style="float:right"> > </div> <img class="item-image" src="${ImageUrl}" /> <h3 class="item-title">${Title}</h3> <p class="item-description">${Description}</p> <a href="\\#" data-role="button" class="delete">Delete</a> </script>I'm having a few problems while using kendo grid.
I'm trying to add an empty where the user can add rows to it.
The grid only have 2 rows (ProductCode and ProductQuantity).
On insert new row, or on editing an existence one, the user should only be able to introduce vales in the ProductCode. The ProductQuantity will be updated using a service.
The following code represents what I've done so far.
I've added required: false and editable: false to the ProductQuantity.
I've tried to catch the add event but nothing seems to work.
var dataSource = new kendo.data.DataSource({ batch: false, autoSync: false, data: [], pageSize: 20, schema: { model: { id: "ProductID", fields: { ProductCode: { type: "string", validation: { required: true } }, ProductQuantity: { type: "number", validation: { required: false, editable: false } } } } }, edit: function (e) { if (e.model.isNew() == false) { $('[name="ProductQuantity"]').attr("readonly", true); } }, change: function (e) { if (e.action == "itemchange") { //do something } }});$("#ap-grid").kendoGrid({ dataSource: dataSource, pageable: false, height: 550, toolbar: ["create"], columns: [ { field: "ProductCode", title: "Product Code" }, { field: "ProductQuantity", title: "Quantity" }, { command: ["edit", "destroy"], title: " ", width: "250px" }], editable: "inline",});How can Iachieve this?
Thanks In advance
Hi,
I have the following Problem: I have a Grid with remote Data Binding via Ajax request. When the Parameters for the Request Change and I call the read() Function again I also have to change the total Value, but the Data Request doesn't send the Total. This is done by a second Request that I send with a angular $http request. When I then call The Total Function it doesnt update and has some strange behaviour:
Total Method:
total: () => return $scope.collectionSizesuccess Callback of getTotal request:
$scope.collectionSize = response.dataconsole.log "next log should be: " + $scope.collectionSizeconsole.log "but is: " + $scope.grid.dataSource.total()and the Console log on initial and second requests:
next log should be: 53but is: 0next log should be: 3but is: 53If I Call a $apply in the getTotal it says digest already in Progress. The Grid is initialised with the angularjs feature.
On initial load the Grid says ... of 53 Items.
On second Data load it says ...of 53 Items again.
And on the third call it then says ... of 3 Items.
So it is always one load behind, except on the initial load.
Hi,
I'm trying to append an "opened" class to the k-master-row tr when it's clicked and remove it when it's closed so I can do some css styling to the nested grid's parent row. Is there a way to fire a javascript function when you expand or collapse a hierarchical grid or an easier way to do this?
Hello.
Is it possible to incorporate the pager into the grid toolbar, via template, and still keep all the functionality of the pager (i.e. not having to write the functions for changing pages etc.).
Best regards,
Kalli

Hi KendoUI Team,
I'm using Kendo Grid, but found and error
Uncaught TypeError: e.slice is not a function
01.var data = new kendo.data.DataSource({02. transport: {03. read: {04. url: "/admin/api/tenant/list",05. },06. schema: {07. data: "list",08. total: "total"09. }10. }11. });12. 13. $scope.gridOptions = {14. sortable: true,15. pageable: true,16. dataSource: data,17. height: 350,18. sortable: true,19. selectable: "row",20. columns: [21. {22. field: "tenant_code",23. title: "Tenant Code"24. }, {25. field: "tenant_name",26. title: "Tenant Name"27. }28. ]29. };The JSON Response is something like this
{"list":[{"tenant_id":10,"tenant_code":"PX","description":"PX","tenant_key":"cf4f483867e0c770dda73062a492b370","tenant_name":"PX","email":"admin@px.com","host":"","create_datetime":"20150729163732","create_user_id":-1,"update_datetime":"20150729163732","update_user_id":-1,"version":0,"active":"Y","active_datetime":"20150729163732","non_active_datetime":" "},{"tenant_id":11,"tenant_code":"ST","description":"ST","tenant_key":"d41d8cd98f00b204e9800998ecf8427e","tenant_name":"ST","email":"admin@st.com","host":"www.st.com","create_datetime":"20160322035919","create_user_id":-1,"update_datetime":"20160322035919","update_user_id":-1,"version":0,"active":"Y","active_datetime":"20160322035919","non_active_datetime":" "}],"total":2}I am having a problem with a simplest of forms that uses a list view to contain fields. I have two NumericTextBox fields with format set to 'c0' (currency), one outside of the listview and another inside. I want both to look same like the one outside of the list. What's wrong and how can I fix that? Thanks a lot!
HTML:
<div data-role="view" data-title="Home" data-model="app.home" data-show="app.home.onShow" data-after-show="app.home.afterShow">
<div id="homeModel" class="form-view">
<form>
<div class="form-content-item">
<label>
<span>Income 2</span>
<input id="income2" data-bind="value: homeModel.fields.income" type="number">
</label>
</div>
<ul class="form-content" data-role="listview" data-style="inset">
<li>
<label>
<span>Income</span>
<input id="income" data-bind="value: homeModel.fields.income" type="number">
</label>
</li>
</ul>
<div class="button-group">
<a class="primary" data-role="button" data-bind="events: { click: homeModel.submit }">Results</a>
</div>
</form>
</div>
</div>
Script:
app.home = kendo.observable({
onShow: function () {
$("#income").kendoNumericTextBox({
format: "c0",
});
$("#income2").kendoNumericTextBox({
format: "c0",
});
},
afterShow: function () {}
});