or
4 answers
1.0K+ views
I am having an issue with the pivotgrid initially rendering to the browser size. It looks fine if I start out in full screen and then resize the browser as the pivotgrid resize event fires. My problem is when I start with a small screen resolution. The grid loads with its width set to match the width of the browser instead of rendering with a horizontal pivot scrollbar. The height also renders without the vertical scrollbar. Once I expand the browser to full and back to the small resolution everything looks fine. I believe this is due to the resize event firing before the pivotdatasource and pivotgrid have rendered the data on the initial load. Is there a way of resizing the pivotgrid once it has been rendered with async data?
3 answers
1.2K+ views
I have a grid where I have inline editing. The first column has a dropdown editor. On the change event of the dropdown editor I want to update the second column with a default value from the selected option in column 1.
A row has represents an equipment model.
Name, Unit, Price.
When I select the Name (dropdown) I want to update the Unit and Price with default values.
My editor is:
function EquipmentModelDropDownEditor(container, options) {
$('<input required data-text-field="FriendlyName" data-value-field="EquipmentModelId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "FriendlyName",
dataValueField: "EquipmentModelId",
autoBind: true,
dataSource: new kendo.data.DataSource({
schema: {
model: {
id: "EquipmentModelId"
}
},
transport: {
read: {
url: "/CostSheet/GetEquipomentModelsByCategory",
dataType: "json",
data: {
catId: options.model.CostSheetCategoryId
}
}
}
}),
optionLabel: "--Select Value--",
change: function (e) {
var equipmentModel = this.dataItem(e.item);
options.model.Unit = equipmentModel.DefaultUnit;
options.model.Price = equipmentModel.DefaultPrice;
alert(equipmentModel.DefaultUnit);
}
});
}
My grid is:
$("#@gridName").kendoGrid({
dataSource: new kendo.data.DataSource({
schema: {
model: {
id: "CostSheetDetailId",
fields: {
CostSheetDetailId: { editable: false },
FriendlyName: { nullable: false, type: "string", defaultValue: "" },
EquipmentModelId: { editable: true, nullable: false},
Unit: { type: "number" },
Price: { type: "number" },
Budget: { type: "number", editable: false },
Actual: { type: "number" },
CostSheetCategoryId: {nullable: false, type: "number", defaultValue: @Model.Category.CostSheetCategoryId}
}
}
},
transport: {
read: {
url: "/CostSheet/CostSheetCategoryDetailGet",
dataType: "json",
data: {
Id: @Model.CostSheetId,
CostSheetCategoryId: "@Model.Category.CostSheetCategoryId",
IsFixed: "@Model.Category.IsFixed"
}
},
create: {
url: "/CostSheet/CostSheetCategoryDetailCreate",
dataType: "json",
type: "POST",
data: {
__RequestVerificationToken: getAntiForgeryToken()
}
},
update: {
url: "/CostSheet/CostSheetCategoryDetailEdit",
dataType: "json",
type: "POST",
data: {
__RequestVerificationToken: getAntiForgeryToken()
}
},
destroy: {
url: "/CostSheet/CostSheetCategoryDetailDelete",
dataType: "json",
type: "POST",
data: {
__RequestVerificationToken: getAntiForgeryToken()
}
}
}
}),
toolbar: ["create"],
sortable: true,
columns: [
{ field: "EquipmentModelId", title: "Name", template: "#=FriendlyName#", editor: EquipmentModelDropDownEditor },
{ field: "Unit", title: "Unit", width: "180px" },
{ field: "Price", title: "Price", width: "180px" },
{ field: "Budget", title: "Budget", width: "180px" },
{ field: "Actual", title: "Actual", widht: "180px" },
{ command: ["edit", "destroy"], title: " ", width: "211px" }
],
editable: "inline"
});
So. when I select from a dropdown I want to update the editor for the Unit and Price to reflect the default prices. The backend model seems to be updated however the editor itself doesn't reflect the change.
11 answers
376 views
Hello, I found a bug with the rendering if the switch. It renders off by exactly one pixel.
Please see the attached image. The top switch has the fix in place, the bottom one does not. You'll notice the underside shows one pixel column on the right.
The javascript was rendering the km-switch-handle class with an inline transformX, for 37px. It needs to be 38px to cover up the underside of the switch fully.
To fix this, I edited kendo.all.min.js. I replaced this line:
function(e){var t=this;t.position=e,t.handle.css(f,"translatex("+e+"px)"),t._animateBackground&&t.background.css(d,t.origin+e)}
with this line:
function(e){var t=this;t.position=e,t.handle.css(f,"translatex("+(e+1)+"px)"),t._animateBackground&&t.background.css(d,t.origin+e)}
However, while this fixed it when the switch was in the "on" state, it now has broken it by one pixel when the switch is in the "off" switch (see second attachment). Is there a permanent fix I can implement?
Thanks!!
-Chris
P.S. the only modifications I made to the default moonlight css is to change the on/off colors. Everything else is unchanged.
Iliana Dyankova
Telerik team
answered
on
06 May 2015
3 answers
639 views
I have the following:
@(Html.Kendo().DropDownListFor(model => model.RecurringTypeID)
.SelectedIndex(0) //Select 1st item.
.DataTextField("Text")
.DataValueField("Value")
.BindTo(Model.RecurringType)
.HtmlAttributes(new { style = "font-size:11px;width: 175px;" })
.Events(e =>
{
e.Change("OnChangeRecurringType");
})
)
Why .SelectedIndex(0), .SelectedIndex(1), or .SelectedIndex(2) always return the 1st value on the dropdownlist.
Atanas Korchev
Telerik team
answered
on
06 May 2015
1 answer
133 views
Hi All,
How would I achieve the following in Kendo Grid? I have the following data return from a json call.
[Data]
- Id (1)
- Name (Test)
[SubData] : Array[3]
0: Object
- NumberX (999)
- NumberY (888)
1: Object
- NumberX (123)
- NumberY (456)
2: Object
- NumberX (789)
- NumberY (222)
and I would like to display them in the following
Id Name NumberX Number Y
1 Test 999 888
1 Test 123 456
1 Test 789 222
A sample would be appreciated.
TIA
Dimiter Madjarov
Telerik team
answered
on
06 May 2015
1 answer
588 views
I have grouped by my report using User Name and using grouping that is done nicely. But I want to show User Image with user name in group header. I have read document but does not find any thing. It show we can use only one group at time and no other way to access other column value. How would I achieve this using Kendo grid? Note: Each user has unique image so we don't have any problem. But not able to access that Image URL in group header template.
Alexander Popov
Telerik team
answered
on
06 May 2015
1 answer
351 views
I'm trying to bind the nested object data to the grid control. Data binding is working fine. But I'm facing problem in filtering row.
In the filter, the controls are not loading/binding based on the field type.
E.g.
From the below code snippet. I'm binding data and applying filter row for the same. But I'm not getting the data-picker as we have it in the demo. Attached the screenshot for your reference.
JSON:var reportSummary = [{ "schedule": { "id": 47, "name": " Schedule12", "description": "Blasting", "startDate": "2015-03-14", "endDate": "2015-03-17" }, "frequency": { "id": 19, "scheduleId": 47, "frequency": "Daily", "interval": 1 }, { "schedule": { "id": 45, "name": " Schedule15", "description": "Test", "startDate": "2015-03-15", "endDate": "2015-03-20" }, "frequency": { "id": 19, "scheduleId": 45, "frequency": "Monthly", "interval": 1 } }] Script:$(document).ready(function () { $("#grid").kendoGrid({ dataSource: { data: reportSummary, schema: { model: { fields: { schedule: { name: {type: "string"}, description: {type: "string"}, startDate: {type: "date"} } } } }, pageSize: 20 }, height: 550, scrollable: true, sortable: true, filterable: { mode: "row" }, pageable: { input: true, numeric: false }, columns: [ {field: "schedule.name", title: "Name", format: "{0:c}", width: "130px"}, {field: "schedule.description", title: "Description", width: "130px"}, {field: "schedule.startDate", title: "Start Date", width: "130px"} ] }); });Appreciate your support on this issue.
Atanas Korchev
Telerik team
answered
on
06 May 2015
2 answers
91 views
Hello,
in my grid I activated the column menu feature (http://demos.telerik.com/kendo-ui/grid/column-menu). But I have some hidden fields which I not want to be shown in the "Columns" menu item. So, is it possible to restrict the items listed under the "Columns" menu item?
Regards
Sebastian
3 answers
146 views
Hello,
I made a grid with basic filtering on it and when adding 'kendo.all.min.js' to my html, all works fine but as soon as I try to add only partial files it crashes. I'll attach the js files I have added in case I'm missing something:
'vendor/kendo-ui/js/kendo.core.min.js',
'vendor/kendo-ui/js/kendo.angular.min.js',
'vendor/kendo-ui/js/kendo.calendar.min.js',
'vendor/kendo-ui/js/kendo.popup.min.js',
'vendor/kendo-ui/js/kendo.datepicker.min.js',
'vendor/kendo-ui/js/kendo.userevents.min.js',
'vendor/kendo-ui/js/kendo.numerictextbox.min.js',
'vendor/kendo-ui/js/kendo.data.min.js',
'vendor/kendo-ui/js/kendo.list.min.js',
'vendor/kendo-ui/js/kendo.dropdownlist.min.js',
'vendor/kendo-ui/js/kendo.filtermenu.min.js',
'vendor/kendo-ui/js/kendo.menu.min.js',
'vendor/kendo-ui/js/kendo.columnmenu.min.js',
'vendor/kendo-ui/js/kendo.pager.min.js',
'vendor/kendo-ui/js/kendo.selectable.min.js',
'vendor/kendo-ui/js/kendo.draganddrop.min.js',
'vendor/kendo-ui/js/kendo.reorderable.min.js',
'vendor/kendo-ui/js/kendo.resizable.min.js',
'vendor/kendo-ui/js/kendo.ooxml.min.js',
'vendor/kendo-ui/js/kendo.excel.min.js',
'vendor/kendo-ui/js/kendo.columnsorter.min.js',
'vendor/kendo-ui/js/kendo.grid.min.js'
T. Tsonev
Telerik team
answered
on
06 May 2015
8 answers
325 views
I need to make some of the task in a Gantt Chart uneditable ( non draggable) while allowing others to be edited (can be dragged). Please help
Bozhidar
Telerik team
answered
on
06 May 2015
