or
4 answers
141 views
I have two modals. One modal opens on top of the other. If I click anywhere on the screen after the second modal opens, the first modal closes. This is very undesirable. Does anyone know a workaround?
3 answers
752 views
Using Razor syntax with the Grid Data Source, I am trying to specify a valid URL.
I see the documentation recommends the syntax of
.Read(read => read.Action("Orders_Read", "Grid"))
I want to use a url for an API that I use in the app that looks like "/Orders_read/Grid/id/1/office/2"
Do you have any razor examples of passing in the URL instead of the Action/Controller?
I see the documentation recommends the syntax of
.Read(read => read.Action("Orders_Read", "Grid"))
I want to use a url for an API that I use in the app that looks like "/Orders_read/Grid/id/1/office/2"
Do you have any razor examples of passing in the URL instead of the Action/Controller?
Alexander Popov
Telerik team
answered
on
04 Dec 2013
3 answers
208 views
If you have a View Model that has a property that is an array and you bind it via "kendo.bind", whenever you change any input bound to the array, it refreshes/rebinds the ENTIRE ARRAY. Is this by design or a bug? It is definitely a performance issue when you have a big array. Below is a sample project I made to demonstrate. If you type a character in any of the inputs, it will auto-tab to the next input. However, due to performance issue, it takes a long time for it to do so. I am logging the "get" event to the console, and you will see that after you type into one of the inputs, every property of every item in the array is gotten again; hence the horrible performance.
================================================================
@{
ViewBag.Title = "Test";
}
<div id="placeholder"></div>
<script type="text/x-kendo-template" id="template">
<table id="scorecard">
<caption>#= TeamName #</caption>
# for (var i = 0; i < Scores.length; i++) { #
<tr>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H1', i) #" value="#= Scores[i].H1 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H2', i) #" value="#= Scores[i].H2 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H3', i) #" value="#= Scores[i].H3 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H4', i) #" value="#= Scores[i].H4 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H5', i) #" value="#= Scores[i].H5 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H6', i) #" value="#= Scores[i].H6 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H7', i) #" value="#= Scores[i].H7 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H8', i) #" value="#= Scores[i].H8 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H9', i) #" value="#= Scores[i].H9 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H10', i) #" value="#= Scores[i].H10 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H11', i) #" value="#= Scores[i].H11 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H12', i) #" value="#= Scores[i].H12 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H13', i) #" value="#= Scores[i].H13 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H14', i) #" value="#= Scores[i].H14 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H15', i) #" value="#= Scores[i].H15 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H16', i) #" value="#= Scores[i].H16 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H17', i) #" value="#= Scores[i].H17 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H18', i) #" value="#= Scores[i].H18 #" /></td>
</tr>
# } #
</table>
</script>
@section Scripts
{
<script>
$(function () {
var
score, template, placeholder,
randomScore = function () { return Math.floor((Math.random()*10)+1); },
model = { TeamName: 'John Doe', Scores: [] };
for (var i = 0; i < 500; i++) {
score = { Number: i };
for (var j = 1; j <= 18; j++)
score['H' + j] = randomScore();
model.Scores.push(score);
}
model = kendo.observable(model);
model
.bind('get', function (e) {
console.log('getting...' + e.field);
})
.bind('set', function (e) {
console.log('setting...' + e.field);
});
template = kendo.template($('#template').html());
placeholder = $('#placeholder');
placeholder.html(template(model));
kendo.bind(placeholder, model);
$('#scorecard')
.on('focus', 'input', function (e) {
setTimeout(function () {
$(e.target).select();
})
})
.on('input', 'input', function (e) {
var next = $(this).closest('td').next().find('input').focus();
if (!next.length)
$(this).closest('tr').next().find('input:first').focus();
});
});
</script>
}
@section Styles
{
<style>
#scorecard input { width: 2em; }
</style>
}
================================================================
================================================================
@{
ViewBag.Title = "Test";
}
<div id="placeholder"></div>
<script type="text/x-kendo-template" id="template">
<table id="scorecard">
<caption>#= TeamName #</caption>
# for (var i = 0; i < Scores.length; i++) { #
<tr>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H1', i) #" value="#= Scores[i].H1 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H2', i) #" value="#= Scores[i].H2 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H3', i) #" value="#= Scores[i].H3 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H4', i) #" value="#= Scores[i].H4 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H5', i) #" value="#= Scores[i].H5 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H6', i) #" value="#= Scores[i].H6 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H7', i) #" value="#= Scores[i].H7 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H8', i) #" value="#= Scores[i].H8 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H9', i) #" value="#= Scores[i].H9 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H10', i) #" value="#= Scores[i].H10 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H11', i) #" value="#= Scores[i].H11 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H12', i) #" value="#= Scores[i].H12 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H13', i) #" value="#= Scores[i].H13 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H14', i) #" value="#= Scores[i].H14 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H15', i) #" value="#= Scores[i].H15 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H16', i) #" value="#= Scores[i].H16 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H17', i) #" value="#= Scores[i].H17 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H18', i) #" value="#= Scores[i].H18 #" /></td>
</tr>
# } #
</table>
</script>
@section Scripts
{
<script>
$(function () {
var
score, template, placeholder,
randomScore = function () { return Math.floor((Math.random()*10)+1); },
model = { TeamName: 'John Doe', Scores: [] };
for (var i = 0; i < 500; i++) {
score = { Number: i };
for (var j = 1; j <= 18; j++)
score['H' + j] = randomScore();
model.Scores.push(score);
}
model = kendo.observable(model);
model
.bind('get', function (e) {
console.log('getting...' + e.field);
})
.bind('set', function (e) {
console.log('setting...' + e.field);
});
template = kendo.template($('#template').html());
placeholder = $('#placeholder');
placeholder.html(template(model));
kendo.bind(placeholder, model);
$('#scorecard')
.on('focus', 'input', function (e) {
setTimeout(function () {
$(e.target).select();
})
})
.on('input', 'input', function (e) {
var next = $(this).closest('td').next().find('input').focus();
if (!next.length)
$(this).closest('tr').next().find('input:first').focus();
});
});
</script>
}
@section Styles
{
<style>
#scorecard input { width: 2em; }
</style>
}
================================================================
Petur Subev
Telerik team
answered
on
04 Dec 2013
1 answer
273 views
Hi I have a kendo grid which works well in firefox and internet explorer. 2013.2.716 is the version of the kendo I am currently using . When I call the grid edit in the popup mode the popup window does not appear in Chrome. The google chrome version is 31.0.1650.57 m. I am running a windows 8 64 bit machine.
The kendo Grid Code is as below
@(Html.Kendo().Grid<MyAssembly>()
.Name("ListGrid")
.DataSource(dataSource => dataSource // Configure the grid data source
.Ajax() // Specify that ajax binding is used
.Read(read => read.Action("Method1", "ControllerName").Type(HttpVerbs.Post))
.Update(update => update.Action("Method2", "ControllerName")) // Action invoked when the user saves an updated data item
.Destroy( delete => delete.Action("Method3" ,"ControllerName"))
.Model(model =>
{
model.Id(item => item.ID);
model.Field(item => item.ID).Editable(false);
})
)
.Columns(columns =>
{
columns.Bound(o => o.ID)
.HeaderTemplate(@<text>
<input type="checkbox" title="check all records" id="checkAllRecords" onclick = "checkAssemblyRows()"/> </text>)
.ClientTemplate("<input type='checkbox' title='check record' name='checkedRecords' onclick= 'checkRecords(this)' value='#=ID#' />")
.Sortable(false)
.Width("2%");
columns.Bound(o => o.No).Width("15%");
columns.Bound(o => o.ShortDesc).Width("15%");
columns.Command(commands =>
{
// commands.Edit();
//commands.Destroy(); // The "destroy" command removes data items
}).Title("Commands").Width(200);
})
.Events(e => e.Edit("AssemblyListGrid_OnEdit_Kendo")
)
.Filterable()
.Sortable()
.Pageable(p => p.Refresh(true))
.Scrollable()
.ColumnMenu(col => col.Sortable(false))
.Groupable()
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.Editable(edit => edit.Mode(Kendo.Mvc.UI.GridEditMode.PopUp).DisplayDeleteConfirmation(false))
)
I have attached the error screen shot and the screen shot I took while I do the inspect element in chrome. It looks like it is working partly and the modal edit window fails to display.
Works perfectly in firefox and IE.
This project has both the telerik and kendo controls.
Thanks
The kendo Grid Code is as below
@(Html.Kendo().Grid<MyAssembly>()
.Name("ListGrid")
.DataSource(dataSource => dataSource // Configure the grid data source
.Ajax() // Specify that ajax binding is used
.Read(read => read.Action("Method1", "ControllerName").Type(HttpVerbs.Post))
.Update(update => update.Action("Method2", "ControllerName")) // Action invoked when the user saves an updated data item
.Destroy( delete => delete.Action("Method3" ,"ControllerName"))
.Model(model =>
{
model.Id(item => item.ID);
model.Field(item => item.ID).Editable(false);
})
)
.Columns(columns =>
{
columns.Bound(o => o.ID)
.HeaderTemplate(@<text>
<input type="checkbox" title="check all records" id="checkAllRecords" onclick = "checkAssemblyRows()"/> </text>)
.ClientTemplate("<input type='checkbox' title='check record' name='checkedRecords' onclick= 'checkRecords(this)' value='#=ID#' />")
.Sortable(false)
.Width("2%");
columns.Bound(o => o.No).Width("15%");
columns.Bound(o => o.ShortDesc).Width("15%");
columns.Command(commands =>
{
// commands.Edit();
//commands.Destroy(); // The "destroy" command removes data items
}).Title("Commands").Width(200);
})
.Events(e => e.Edit("AssemblyListGrid_OnEdit_Kendo")
)
.Filterable()
.Sortable()
.Pageable(p => p.Refresh(true))
.Scrollable()
.ColumnMenu(col => col.Sortable(false))
.Groupable()
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.Editable(edit => edit.Mode(Kendo.Mvc.UI.GridEditMode.PopUp).DisplayDeleteConfirmation(false))
)
I have attached the error screen shot and the screen shot I took while I do the inspect element in chrome. It looks like it is working partly and the modal edit window fails to display.
Works perfectly in firefox and IE.
This project has both the telerik and kendo controls.
Thanks
Vladimir Iliev
Telerik team
answered
on
04 Dec 2013
1 answer
218 views
<div data-role="window" data-append-to="#my-form" data-modal="true" data-visible="false" data-width="100%"></div>kendo.ui.Window.fn.options.appendTo = null;
Kiril Nikolov
Telerik team
answered
on
04 Dec 2013
4 answers
195 views
how do i listen to a selected date when pre-selected
11 answers
884 views
Hi everyone. I just started using the Kendo UI, and so far it's awesome.
I was previously using highcharts, but kendo is great, because it's a combo of highcharts and jquery UI. So I only need to load one set of scripts!
Anyway, I'm having some issues with formatting my charts.
I'm trying to create a small thumbnail chart for several instances on one page. The chart is supposed to track progress as a percent over a period of a quarter.
You can view what I've got so far here:
http://jmillspaysbills.com/clients/radolo/rockhabits/daily-huddle.html
Obviously right now each chart is loading the same data.
So, I'm having some problems with styling this chart. I have the category axis set up to have 65 points, wich would be the average business days in a quarter (it doesn't need to be exact). And I have the value axis as the points that will be recorded daily as a percentage. This works fine.
First thing I can't get right is trying to skip the major grid lines by 10. Currently it has all 65 lines, but as you can see that looks terrible.
Second, I have this huge padding on the top, left and bottom that I can't seem to get rid of.
Here is my code:
Regarding the Major Grid lines, I've tried majorunit: 10 with no luck. Any ideas what I'm doing wrong?
As for the padding issue, I've tried adding margin of 0 to the plotarea, but that didn't seem to do anything.
Thanks in advance for any help you can give. I certainly appreciate it.
I was previously using highcharts, but kendo is great, because it's a combo of highcharts and jquery UI. So I only need to load one set of scripts!
Anyway, I'm having some issues with formatting my charts.
I'm trying to create a small thumbnail chart for several instances on one page. The chart is supposed to track progress as a percent over a period of a quarter.
You can view what I've got so far here:
http://jmillspaysbills.com/clients/radolo/rockhabits/daily-huddle.html
Obviously right now each chart is loading the same data.
So, I'm having some problems with styling this chart. I have the category axis set up to have 65 points, wich would be the average business days in a quarter (it doesn't need to be exact). And I have the value axis as the points that will be recorded daily as a percentage. This works fine.
First thing I can't get right is trying to skip the major grid lines by 10. Currently it has all 65 lines, but as you can see that looks terrible.
Second, I have this huge padding on the top, left and bottom that I can't seem to get rid of.
Here is my code:
function createChart() { $(".chart").kendoChart({ theme: $(document).data("kendoSkin") || "default", legend: { position: "bottom", visible: false, }, chartArea: { background: "", margin: 0, }, plotArea: { margin: 0, border: { width: 0 } }, seriesDefaults: { type: "line" , border: { width: 1 }, margin: 0, width: 1, markers: { visible: false, } }, series: [{ data: [0, 5, 5, 6, 8, 12, 16, 19, 20, 20, 23, 25, 28, 29, 29, 29, 32, 35, 35], }], valueAxis: { majorUnit: 25, max: 100, min: 0, majorGridLines: { dashType: "dash", } }, categoryAxis: { max: 65, min: 0, line: { dashType: "dash" //or "dash", "longdash", "dashdot", "longdashdot" and "longdashdotdot" }, majorGridLines: { width: 1, }, categories: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65 ], majorUnit: 10, }, tooltip: { visible: true, format: "{0}%", }, axisDefaults: { labels: { visible: false }, majorTickType: "none", majorGridLines: { width: 1, }, } }); } $(document).ready(function() { setTimeout(function() { createChart(); // Initialize the chart with a delay to make sure // the initial animation is visible }, 400); $(document).bind("kendo:skinChange", function(e) { createChart(); }); });Regarding the Major Grid lines, I've tried majorunit: 10 with no luck. Any ideas what I'm doing wrong?
As for the padding issue, I've tried adding margin of 0 to the plotarea, but that didn't seem to do anything.
Thanks in advance for any help you can give. I certainly appreciate it.
Hristo Germanov
Telerik team
answered
on
04 Dec 2013
2 answers
141 views
Please take a look at the below jsbin example
http://jsbin.com/oGaZukih/1/edit?html,css,js,output
You can see that I have told the menu to open below the menu bar (data-direction="bottom") but because the resulting menu item will be taller than the remaining height of the page it opens above the menu instead.
Is there a way to force the menu to open below the menu bar and force the page to show a scroll bar. We're trying to use the menu like the kendo tabstrip but use the popover / absolute position of the menu.
Neil
http://jsbin.com/oGaZukih/1/edit?html,css,js,output
You can see that I have told the menu to open below the menu bar (data-direction="bottom") but because the resulting menu item will be taller than the remaining height of the page it opens above the menu instead.
Is there a way to force the menu to open below the menu bar and force the page to show a scroll bar. We're trying to use the menu like the kendo tabstrip but use the popover / absolute position of the menu.
Neil
1 answer
86 views
Hello. I would like to implement a stacked bar chart inside a PhoneGap app. I want to keep the app as small as possible, therefore I only want to import what is absolutely necessary only for the stacked bar chart. Your example for the stacked bar chart suggests that I link and load the following css and js files:
<link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
<link href="../../../styles/kendo.common.min.css" rel="stylesheet">
<link href="../../../styles/kendo.default.min.css" rel="stylesheet">
<link href="../../../styles/kendo.dataviz.min.css" rel="stylesheet">
<link href="../../../styles/kendo.dataviz.default.min.css" rel="stylesheet">
<script src="../../../js/jquery.min.js"></script>
<script src="../../../js/kendo.dataviz.min.js"></script>
<script src="../../content/shared/js/console.js"></script>
But, when I download the library, I see some files that look like they may contain only the requirements for the chart instead of the whole dataviz library. For example, I see a javascript file called kendo.dataviz.chart.min. Is it possible to only import what is necessary for the chart so that I can keep my app size down?
Thank you!
<link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
<link href="../../../styles/kendo.common.min.css" rel="stylesheet">
<link href="../../../styles/kendo.default.min.css" rel="stylesheet">
<link href="../../../styles/kendo.dataviz.min.css" rel="stylesheet">
<link href="../../../styles/kendo.dataviz.default.min.css" rel="stylesheet">
<script src="../../../js/jquery.min.js"></script>
<script src="../../../js/kendo.dataviz.min.js"></script>
<script src="../../content/shared/js/console.js"></script>
But, when I download the library, I see some files that look like they may contain only the requirements for the chart instead of the whole dataviz library. For example, I see a javascript file called kendo.dataviz.chart.min. Is it possible to only import what is necessary for the chart so that I can keep my app size down?
Thank you!
Iliana Dyankova
Telerik team
answered
on
04 Dec 2013
1 answer
107 views
Hi,
I'm using version 2013.3.1119 to create a basic TreeView. Please refer to http://jsfiddle.net/fDrvP/
I've tried running this fiddle in Chrome 31/Firefox 25/IE 9 on Windows 7 with the same result.
When I try expanding Item 3 (clicking the arrow or double clicking the text), no child items are shown. If I inspect the li element, I can see some attributes changing to expanded="true" but no child items appended.
Is there something I've overlooked?
I'm using version 2013.3.1119 to create a basic TreeView. Please refer to http://jsfiddle.net/fDrvP/
I've tried running this fiddle in Chrome 31/Firefox 25/IE 9 on Windows 7 with the same result.
When I try expanding Item 3 (clicking the arrow or double clicking the text), no child items are shown. If I inspect the li element, I can see some attributes changing to expanded="true" but no child items appended.
Is there something I've overlooked?
Alex Gyoshev
Telerik team
answered
on
04 Dec 2013
