As I understand, there are two (equal ?) ways to declare widget initialization: constructor and data attributes.  However, I am seeing two different behaviors (in regard to templates specifically) depending on how I initialized say the ListView widget.

Constructor:

vs. Declarative:

See my jsFiddle it shows both flavors of ListView's above: 
The listview via constructor renders the LastName as undefined from the template span data-bind? 


I think this is related, as the demo for editing a listview uses two templates (display and edit) and constructor initialization.  The edit template does use data-bind elements, but it only works while in edit mode?.  If you try the same on the display template, that does not work - not sure what or why the difference is to the control or data?

Thanks for any insight!
Jim 

Hi,

Are there any plans to have an Office-Like Ribbon for the ASP.NET MVC components / Kendo UI?

Thanks,
Klaus 

I've spent all the ask-for-a-feature points grandma gave me.

Let me say up front I do understand that using the Calendar as a wall-calendar in full-screen mode is unsupported at this time, but I am looking to the future, because it is a very useful data-driven wall-calendar widget. The data-value custom attribute makes it easy to bind the calendar cells to a hashed object whose keys take the form "2013/0/12", i.e. year/javascript month ordinal/day of month.

DAYNAMES
When using the Calendar in full-screen mode, like a wall-calendar, with cells capacious enough to fit snippets of text, it makes sense to use full day names (Monday, Tuesday, Wednesday...) instead of the day abbreviations, Su Mo Tu We Th Fr Sa as the column-header value.  This would be much easier if the day-names array could be integrated into the configuration. I am using the following workaround to accomplish this now.  The value in the header column's title attribute is simply substituted for the abbreviation. But the code must be executed at several points in the program, and the workaround is timing-dependent—it must be called after the calendar has been rendered—and so one must experiment with setTimeout() delays.


WALL-CALENDAR MODE: OCCUPY FULL HEIGHT/WIDTH OF BROWSER WINDOW
I have the calendar expanding to occupy the full width and height of the browser window (expand height is not working in IE9 yet).
UNDESIRABLE BEHAVIOR IN ALL BROWSERS:  after navigating to a different month, the calendar becomes fixed dimension.

By default the value of a boolean field is displayed as the text "true" or "false". But I want a checkbox to be displayed.
So I want to add a template on the column:

<input type="checkbox" checked="checked" disabled="disabled" /> 

My problems is how add the checked="checked" conditionally depending on the value of the field.
Any idea how to do that?

Thanks, Jaap

This is going to be very long..... hang in tight. For all the developers out there, this is my communication with Telerik support staff. They say what I am asking them is a custom solution. Is it? I don't think so........
-------------------------------------------------------------------------------
Andy
Posted on 0 minutes ago

Ok, I am out of patience. So, I am going to lash out right now. Your acting like a cry baby saying 'Providing Custom Solution Blah...' is becoming irritating now for the 'n'th time including other tickets. I have kept quite so far, but not any more. You dictate the terms of what is and what is not called a custom solution. I am still claiming that what I am asking you is not a custom solution. You are saying this is a custom solution, while I am saying that this is not a custom solution. We have an conflict here, so tell me who is going to solve this conflict. Would you like me to put our conversation on YouTube or social forums, and let people decide if what I am asking you is a custom solution or not? Custom solution is a usable product that can be deployed in production system, like Accounting System, Payroll System, Billing System, that's what is called a custom solution. I have already separated a very specially created solution just for you so that you can see an isolated problem. How is modifying that solution to show me the feature work a custom solution now? Tell me? Are you out of your freakin mind dear? Or has your brain completely seized to think analytically and take decision about what is and what's not a custom solution. Once I have isolated the solution to represent the issue I am facing, that should not be considered custom anymore. Where is the scale? What's custom? Wha'ts not custom? Do you have a unit of measurement? Or is it pure human decision? If its a pure human decision, I would like to put our communication live on the internet, and let people decide if what I am asking you is a custom solution or not. I will have to ask my manager talk to you on the phone, because I don't have time to deal with this. I need the solution ASAP, because I have paid you $1000. Gimme my service!
Kendo Admin
Posted on 18 hours ago

Hello Andy,
I would like to remind you that providing custom solutions is out of the scope of our standard support service. 
As a possible solution to implement the scenario that you described, I can suggest to include the Grid directly to the editor template and show/hide the element dynamically via JavaScript. In order to update the field when a row is selected, you could use the Grid change event to find the master model and set the new value with its set method e.g.

function change(){
//get the selected item
var item = this.dataItem(this.select());
//find the model for the master Grid that is currently in edit mode
var masterGrid = $("#masterGridID").data("kendoGrid");
var masterModel = masterGrid.editable.options.model;
//update the value
masterModel.set("MyField", item.MyField);
}
Kind regards,
Daniel 
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Kendo Admin
Posted on 18 hours ago

Hello Andy,
I would like to remind you that providing custom solutions is out of the scope of our standard support service. 
As a possible solution to implement the scenario that you described, I can suggest to include the Grid directly to the editor template and show/hide the element dynamically via JavaScript. In order to update the field when a row is selected, you could use the Grid change event to find the master model and set the new value with its set method e.g.

function change(){
//get the selected item
var item = this.dataItem(this.select());
//find the model for the master Grid that is currently in edit mode
var masterGrid = $("#masterGridID").data("kendoGrid");
var masterModel = masterGrid.editable.options.model;
//update the value
masterModel.set("MyField", item.MyField);
}
Kind regards,
Daniel 
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Andy
Posted on 1 day ago

Well that's too bad. Ok, then please let me know is the following possible? Forget the Window. Is the UI logic/flow described by me possible without the Window then? Everything remains the same except that the grid I'll be selecting from does not appear inside a window. The selecting grid can appear just at the very bottom of the edit pop-up template. Please let me know if that's possible, and the code for it. So, here is what happens. User click to edit the main grid -> Edit Template pops up -> User clicks on one of the links or k-button class link -> A grid pops up at the bottom from where the user can select any row -> Based on the user's selection of a row the value of the k-button class is updated -> Finally user clicks update and the date gets updated. Please let me know if this is possible? and please let me know the code for it in a sample project.
Kendo Admin
Posted on 1 day ago

Hello Andy,
I am afraid that this is not supported. The Window widget cannot be limited to a certain parent.

Regards,
Daniel 
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Andy
Posted on on Feb 15, 2013

Ok, I am gong to say it 1 more time. I want to window/Grid INSIDE the edit pop-up. INSIDE.... INSIDE the edit popup. Your's is OUTSIDE. It did come to the foreground, but only for the first time. So, here is the behavior. When the master grid edit button on the top is clicked, the edit pop-up template appears, and the Window/Grid appear besides it, OUTSIDE. Of course its in the foreground and is clickable. When I close down both the pop-up edit template, and the Window/Grid. Next time when I click on the master grid edit button on the top, now, same thing happens, but the Window/Grid is not in the foreground anymore, it is in the background. And this behavior repeats on all subsequent clicks. So, here is what I want.
1) I want the the window/grid INSIDE the edit pop-up template.
2) I want the window/grid to remain in foreground at all the times, and clickable all the times, no matter how many time, I click on the master grid edit button to repeat the Process. If you put window/grid INSIDE the popup edit template, it will of course remain in the foreground and clickable. If you put it separate and OUTSIDE the edit popup template, chances are that it might go into the background thus becoming non-clickable. 
Kendo Admin
Posted on on Feb 15, 2013

Hello Andy,
The Window with the Grid is shown behind because it will be initialized before the Grid edit Window(the content is placed first). In order to be able to select the rows from the Grid, you could use the Window toFront method in the edit event.
I am not sure if I understand correctly the issue with the controller name. I added the method in the HomeController and changed the Grid read configuration in order to test if the Grid was working as expected which seemed to be the issue from your last description. You could modify or add the controllers as needed.

Regards,
Daniel 
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Attached files
KendoUISampleProject.zip
Andy
Posted on on Feb 14, 2013

OK, I think I know what the issue is. We will need to specify the client template in the grid that we want to make appear inside the pop-up template. However, here is an issue with that. Pop-up template takes as a strongly typed ViewModel of Type TicketCreate, and The grid we are trying to display in the template is of type SkillSetViewModel, and I think we need to combine the two into single ViewModel. This is just an hint. Please let me know the working example, where the Grid appears INSIDE the client window, not in the background/outside.
Andy
Posted on on Feb 14, 2013

Couple of more things. You put the Read method ReadSkillSet inside my main controller Home, however did not change the Controller name itself to Home. The controller name remains SkillSet. It is ignorring the controller name totally. How do you explain that?
Andy
Posted on on Feb 14, 2013

Ok, not helpful. The grid and the Window, both have to show up in the pop-up window, with grid inside the window. Idea is to select from the grid while you are in edit template. In your example, I can't select or touch the grid, because its in the background, and the pop-up window is in the foreground. I want the grid and the window both within the popup, so that I can interact with the grid and fire events on click. Please help me with that.
Kendo Admin
Posted on on Feb 14, 2013

Hello Andy,
At least in the sample project the data is not loaded because the specified action and controller does not exist. Once I added an action in the Home controller and changed the dataSource configuration, the data was loaded as expected in the Grid. I attached the project without the packages so that it will fit the maximum allowed file size. Check it and let me know if it works on your side.

Regards,
Daniel 
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Attached files
KendoUISampleProject.zip
Andy
Posted on on Feb 13, 2013

Ok, I modified a solution a bit, and renamed it MODIFIED_.... Now, I am able to make grid appearing below the main grid. And I am able to display the grid inside EditTemplate upon edit. However, the grid is empty. The data is not loading. I went to the Read() function and control is not hitting that place. Please let me know, what else might be wrong.
Andy
Posted on on Feb 13, 2013

Oh. BTW the complete solution called AptMaint.Web is also attached, that uses actual SQL DB. The sample solution uses SQL CE, that should be built into the App_Data folder. All you need to do is, unzip the sample project and run it from here: [....EDITED....]
Andy
Posted on on Feb 13, 2013

Ok. Some issues here, hence re-opening this ticket. I did what you told me to, but its not working. Here is the setup of what I need. Once user clicks on Edit, the custom Editor Template pops up. Inside the popup, there is a KendoUI Window, and inside the KendoUI Window there is a grid that should appear via include. The moment I say .ToClientTemplate() an empty grid appear right below my main grid. When I click on Edit button on the top grid, the edit template does popup, but there is no KendoUI window and the gird in there. I know you are going to ask me to isolate the problem and make a sample solution. I have already made one for you here: [....EDITED....] Please let me know what am I missing, or if you can please make my solution work and upload the working it will be great.
Kendo Admin
Posted on on Jan 29, 2013

Hello Andy,
The content will appear below if there is a JavaScript error thrown when entering edit mode. Since when popup editing is used the editor template is used as template on the client you should use the ToClientTemplate method on the Grid e.g.

@(Html.Kendo().Grid<AptMaint.Web.Models.TreeSkillSetViewModel>() 
.Name("skillSetGrid") 
......
.ToClientTemplate()
)
The rest of the code looks correct. If the problem persists please check if there are any errors thrown. Kind regards,
Daniel 
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Andy
Posted on on Jan 28, 2013

How do I display a grid inside an edit template? I tried, but pop does not appear, the popup contents appear below my page as non-popup contents. Following is my attempt to display grid in a pop-up template. Following is my pop-up template which brings the grid from a partial view. When I copy and paste the partial view code instead of calling partial view, still the problem persists.
-------------------------
@using AptMaint.BLL
@using AptMaint.Web.AppLib
@model AptMaint.Web.Models.MatchTreeSkillSetTreeIssueViewModel
@Html.HiddenFor(model => model.ID)
@{
var _unitOfWork = UnitOfWorkFactory.unitOfWork;
List<SelectListItem> skillSetList = new List<SelectListItem>();
foreach (var item in _unitOfWork.TreeSkillSetRepository.All)
{
skillSetList.Add(
new SelectListItem
{
Text = item.SkillSetName,
Value = item.ID.ToString()
});
}

List<SelectListItem> issueList = new List<SelectListItem>();
foreach (var item in _unitOfWork.TreeIssueRepository.All)
{
issueList.Add(
new SelectListItem
{
Text = item.IssueName,
Value = item.ID.ToString()
});
}
}

<script>
function setSkill() {
alert('Skill Clicked');
}

function setIssue() {
alert('Issue Clicked');
}
</script>

<div id="body" style='@WebConstants.WebConfigValues.TemplateStyle'>
<table>
<tr>
<td>
Skill Set
</td>
<td class="editor-field">
<span id="skillSet" data-bind="text: SkillSetName" class="k-button" onclick="setSkill()"></span>
</td> 
</tr>
<tr>
<td>
Issue
</td>
<td class="editor-field">
<span id="Issue" data-bind="text: IssueName" class="k-button" onclick="setIssue()"></span>
@Html.ValidationMessageFor(model => model.IssueTree_ID)
</td> 
</tr>
</table>
@Html.Partial("WindowTemplates/_SkillSetWindow")
</div>
--------------------------------Partial View COde: _SkillSetWindow.cshtml-----------------------
@(Html.Kendo().Grid<AptMaint.Web.Models.TreeSkillSetViewModel>() 
.Name("skillSetGrid") 
.HtmlAttributes(new { style = "width: 1300px;" }) 
.Columns(columns => {
columns.Bound(x => x.ID).Width(10);
columns.Bound(x => x.SkillSetName).Width(30);
columns.Bound(x => x.SkillSetDescription).Width(60);
columns.Bound(x => x.CreatedOn).Width(80);
columns.Bound(x => x.CreatedBy).Width(30);
columns.Bound(x => x.LastUpdatedBy).Width(30);
columns.Bound(x => x.LastUpdatedOn).Width(80);
})
.Events(e => e.Change("SkillChange"))
.Pageable(p => p.PageSizes(true))
.Pageable
(
p => 
{
p.Messages
(
m =>
{
m.ItemsPerPage("Records Per Page");
m.First("First Page");
m.Last("Last Page");
}
);
}
)
.Pageable
(
p => 
{
p.PageSizes(new int[4] { 3, 7, 9, 12 });
p.Info(true);
}
)
.Sortable()
.Scrollable(scrollable => scrollable.Virtual(true).Height(100))
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.Filterable()
.DataSource(dataSource => dataSource 
.Ajax() 
.PageSize(5)

.Model(model => model.Id(p => p.ID))
.Read(read => read.Action("ReadSkillSet", "SkillSet"))
)
)

Hi

I have 2 questions:

1. How can I allow a variable number of decimals?  The user needs to be able to enter values such as: 1.23   or   1.236654   or  56.  I need to disable/prevent any reformatting - it must just accept the number the user enters (of course still preventing non-numeric characters).
2. Is there a way to dynamically update the number of decimals with javascript after the NumericTextBox has been defined?

As a refinement to question 1, I would like to enforce a minimum number of decimal places (say 3).  e.g. if the user enters: 3.4, it'll update it to 3.400, if the user enters 3.12345, then it should be left as is.  I expected the format "0.000#################" to do this.  It adds the zeros as required but it then goes on to round the number to 3 decimal places as well (as if I'd given the format "0.000").  This appears to be a bug?

Hello,

I tried to manually remove a row from grid, something like: 

grid.dataSource.remove(dataItem);
grid.dataSource.sync();
grid.dataSource.read() 

If the removal is successful, everything seems ok.
If server side error occurs (throw exception, which could be caught in client error event), the grid looks OK after read(), but when I try to delete the row again, same custom error will be triggered twice, and more if click delete button more times.
I guess the custom errors or destroyed rows are accumulated. I have to reload the page to clear the errors.

What I want to achieve is:
1) When click a custom Delete button,  delete current selected row
2) If deleting is successful, hide the row (or refresh the grid)
3) If deleting is not successful, show error and restore the row (or refresh the grid)

Please help to advice how to refresh the grid and clear destroyed rows/custom errors completed after server side removal error?

Thanks
Wicky

There are times when I want to override the default css on different widgets but am unsure how to do this.  Is there a way to view the generated code that kendo creates?  This would help in determining which styles I need to override.

For instance I would like to set the background of the Tabstrip to transparent and not have the border around the outside.  Which styles would I need to override in this case?

Thanks for any pointers.

Is there an mvc timeline control that I can place in an mvc4 web grid?

Hello, I'm adding Label tags for all input controls.

This works for almost all input controls, even for a dropdown, although I didn't expect that because the original input element is not visible in that case.

But in the case of a NumericTextBox, the original input element is also not visible, but the label does not work.

See this fiddle: http://jsfiddle.net/JaapM/d4Y7x/

Any clues?



Thanks, Jaap