I have a vertical splitter with 3 panels. The bottom panel is as wide as the window. I have a tabstrip with 3 tabs that don't fill it. There is a big white space on one side. I can change which side. But, I cannot figure out how to put information in that space. Like, maybe instructions. Or something.
I have searched this forum without success.
Maybe somebody knows how to do it.
Thanks,
Rick
Hi,
I am working on kendo ui grid with angular application. I use angular service and controller. Grid is displayed within first tabStrip and data for add/edit is displayed within second tabStrip. My grid dataSource contain JSON data which is within separated file.
This is my JSON data for grid:
[{ "Id": 1, "Date": "24.01.2015", "Description": "descr 1", "documentTypeId": 1 },{ "Id": 2, "Date": "26.01.2015", "Description": "description2", "documentTypeId": 2 },{ "Id": 3, "Date": "22.01.2015", "Description": "description3", "documentTypeId": 3 },{ "Id": 4, "Date": "24.01.2015","Description": "description4", "documentTypeId": 2 },{ "Id": 5, "Date": "29.01.2015", "Description": "description5", "documentTypeId": 4 },{ "Id": 6, "Date": "25.01.2015", "Description": "description6", "documentTypeId": 6 }]
This is my angular service:
angular.module("app").factory('myService', function ($http) { return { getAll: function (onSuccess, onError) { return $http.get('/Scripts/app/data/json/master/masterGridData.js').success(function (data, status, headers, config) { onSuccess(data); }).error(function (data, status, headers, config) { onError(data); }); }, getDocumentTypes: function (onSuccess, onError) { return $http.get('/Scripts/app/data/json/documentType.js').success(function (data, status, headers, config) { onSuccess(data); }).error(function (data, status, headers, config) { onError(data); }); } }});
This is my controller:
var app = angular.module("app", ["kendo.directives"]).controller("myController", function ($scope, myService) {$scope.tabStrip = null;$scope.$watch('tabStrip', function () { $scope.tabStrip.select(0);});$scope.dateConfig = { format: "dd.MM.yyyy" }$scope.masterDataSource = new kendo.data.DataSource({ transport: { read: function (options) { url = "/Scripts/app/data/json/master/masterGridData.js", myService.getAll(function (data) { options.success(data); }).error(function (data) { options.error(data); }) } }, schema: { model: { id: "Id", fields: { Id: { type: "number" }, Date: { type: "string" }, Description: { type: "string" }, DocumentTypeId: { type: "number" } } } }, pageSize: 16});$scope.gridMaster = { columns: [ { field: "Id", width: "70px" }, { field: "Date", title: "Date", width: "70px" }, { field: "Description", title: "Description", width: "170px" }, { field: "DocumentTypeId", hidden: true } ], dataSource: $scope.masterDataSource, selectable: true, filterable: true, scrollable: true, pageable: { pageSize: 16, pageSizes: ["50", "100", "200", "All"] }, toolbar: [{ name: "create" }], change: function () { var dataItem = this.dataItem(this.select()); $scope.id = dataItem.Id; $scope.date= dataItem.Date; $scope.description = dataItem.Description; $scope.documentTypeId = dataItem.DocumentTypeId; }};$scope.documentType = { dataSource: { transport: { read: function (options) { url = "/Scripts/app/data/json/documentType.js", myService.getDocumentTypes(function (data) { options.success(data); }).error(function (data) { options.error(data); }); } }, schema: { model: { id: "Id", fields: { Id: { type: "number" }, Name: { type: "string" } } } } }, dataTextField: "Name", dataValueField: "Id"}});This is my JSON which contain data for documentType:
[ { "Id": 1, "Name": "Document 1" }, { "Id": 2, "Name": "Document 2" }, { "Id": 3, "Name": "Document 3" }, { "Id": 4, "Name": "Document 4" }, { "Id": 5, "Name": "Document 5" }, { "Id": 6, "Name": "Document 6" }]<html><head> <!-- css and javaScript files --></head> <body ng-app="app" ng-controller="myController"> <div class="divH3Style"> <h3 class="h3LabelForm">Grid Master</h3> </div> <div id="tabstrip" class="k-tabstrip-wrapper" data-kendo-tab-strip="tabStrip"> <ul> <li>Overview</li> <li>Update</li> </ul> <div id="tabstrip-1"> <div id="gridMaster" kendo-grid k-options="gridMaster" k-data-source="masterDataSource"> </div> </div> <div id="tabstrip-2" > <div id="tabStrip2Half1"> <div class="datepickerStyle"> <label for="date" class="labelTextSize">Date:</label> <input id="date" kendo-date-picker class="k-datetimepickerMaster" k-options="dateConfig" name="date" ng-model="date" /> </div> <div class="divHeightStyle"> <label for="desccription" class="labelTextSize">Description:</label> <input id="desccription" type="text" class="k-textboxField" name="description" placeholder="Description" ng-model="description" /> </div> <div id="tabStrip2Half2"> <div class="divHeightStyle"> <label for="documentType" class="labelTextSize">Document Type:</label> <select kendo-drop-down-list class="k-dropdownField" k-options="documentType" ng-model="documentTypeId" ng-bind="documentTypeId"></select> </div> <div> <button type="button" id="saveDataMasterGrid" class="k-button buttonSaveCancel" ng-click="saveDataMasterGrid()">Save</button> <button type="button" id="cancelDataMasterGrid" class="k-button buttonSaveCancel" ng-click="cancelButtonMasterGrid()">Cancel</button> </div> </div> </div> </div></body></html>Hi
Please advise how I would add and additional button to the footer (as per screenshot below).
Regards
How to retain expanded grid's filter after dataitem.set()?
even after using detailExpand and detailCollapse, for restoring expanded rows, we can not keep sort order as it was.
here is the demo : http://dojo.telerik.com/@Ankita/AYOKA
Steps to reproduce:
1) Expand Row 1 - Product ID 1 -> that will expand sub grid
2) Sort sub grid -> keep company name desc ( you can see company name 5 on top row)
3) Click on button Update total price. ( function call's dataItem.set() method to update parent Rows' column value)
4) you can see Product ID 1 -> Total Price will change to $11.00, keeping sub grid expanded. but here we are lossing sort order of the sub grid. 1st row should be "Company Name 5" not "Company Name 1"
If we do not use dataItem.set and try to assign value as
"parentDataItem["TotalPrice"] = 10 + parentDataItem.TotalPrice", grid wont be updated with new value $11.00
Constrain : we have to use "dataItem.set()" to apply css changes to editable cell. we can not use "dataItem.field = value"
becuase it will introduce some other error.
Can you please help me out here?
Thanks in advance,
Ankita
Hi everyone, I have a .Net Core/MVC6 application. I get all the Kendo controls to render using the .Deferred() option, but I can't get the ClientTemplate Grids to work? Here is the code
[code]
@(Html.Kendo().Grid<UserViewModel>()
.Name("UserGrid")
.Columns(columns =>
{
columns.Bound(u => u.FirstName);
columns.Bound(u => u.LastName);
columns.Bound(u => u.Email);
})
.ClientDetailTemplateId("userOrders")
.Sortable()
.Pageable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(30)
.Read(read => read.Action("UserGrid_Read", "Admin"))
)
.Events(events => events.DataBound("userGridBind"))
.Deferred()
)
<script id="userOrders" type="text/kendo-tmpl">
@(Html.Kendo().Grid<UserOrderViewModel>()
.Name("UserOrders_#=UserId#")
.Columns(columns =>
{
columns.Bound(o => o.OrderVat);
columns.Bound(o => o.OrderTotal);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("UserGrid_Orders", "Admin", new { userId = "#=UserId#" }))
)
.Pageable()
.Deferred()
.ToClientTemplate()
)
</script>
[/code]
I receive a Syntax error, unrecognized expression: #UserOrders_#=UserId#
I have tried remove the deferred, then it doesn't render at all. I have also tried using \\#=UserId\\# but no change.
How do we get it to work using .Net Core/MVC6 and the deferred options?
Thank you.
Hello,
I'm trying to put a Kendo Upload control in a grid (which should display uploaded files), but I can't figure out how to do it.
I tried something like
var $upload = $('<input type="file" id="upload">').kendoUpload();('#files-grid').kendoGrid({ // Other configuration ... toolbar: [{template: $upload.html()}]});
but that doesn't seem to work. Any hint as to how to achieve this? I've seen references to `kendo.template`, but it's unclear how to use Kendo controls with it, and not just plain HTML.
Of course, later I'll want to further configure the upload control, but I left it blank for now.
Thank you.
Hi ,
Recently , we were handling a project assigned by Taiwanese(an east country) .
The problem we have is the different year.
e.g.(2016(A.D) = 105(Taiwan year))
which is A.D year minus 1911 then we get Taiwan year
We need to change every A.D year to Taiwan year just like the attached image
How do i implement it or is there any example ?
Thanks .
How can I add a custom footer with a simple unordered list of notes about the data being displayed?
Hello,
I was wondering if there is a way to adjust the space between events when a column has multiple events inside it? My design calls for the events to slightly overlap and a css style to apply a white left border to give a divide between each event.
Thanks!