or
2 answers
652 views
I'v finally been able to do som more work with Kendo and have been fiddling more with my ManyToMany relations. I'v set ut a test project with a two really simple models Movies and Actors
And
Code first migrations have kindly generated a ActorMovie table for me in the database and using normal MVC4 controllers and views this is working as expected. I'm able to both add one or more actors to a movie. And add one or movie to an actors.
Now, I would like to be able to display the lists of Actors or Movies in the row of the respective Movie or Actor in a Grid.
I'd also like to be able to add both Actors and Movies (one or more) using an editable Grid.
Since the Grid build up and controllers will be the same for both I'm only going to add the code for the movies.
This is my Grid so far:
And this is my controller:
And finally the MovieViewModel(I realize that as the code is now, the MovieViewModel isn't necessary:
Since the logic to add ManyToMany relations are the same for MVC4 controllers using normal Views I assume I'm going to be able to use that code for this too.
I just need som guidance into what changes I need to do to the actual Grid code and ViewModel to be able to retrieve the data needed from the Grid to add/remove objects in the controller.
[Table("Movies")] public class Movie { [Key] [DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)] public int MovieId { get; set; } public string Name { get; set; } public List<Actor> Actors { get; set; } }[Table("Actor")] public class Actor { [Key] [DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)] public int ActorId { get; set; } public string Name { get; set; } [ScriptIgnore] public List<Movie> Movies { get; set; } }Now, I would like to be able to display the lists of Actors or Movies in the row of the respective Movie or Actor in a Grid.
I'd also like to be able to add both Actors and Movies (one or more) using an editable Grid.
Since the Grid build up and controllers will be the same for both I'm only going to add the code for the movies.
This is my Grid so far:
@(Html.Kendo().Grid<KendoUi.ViewModels.MovieViewModel>() .Name("Grid") .Columns(columns => { columns.Bound(p => p.MovieId); columns.Bound(p => p.Name); columns.ForeignKey(p => p.Actors, (System.Collections.IEnumerable)ViewBag.Actors, "ActorId", "Name"); columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180); }) .ToolBar(toolbar => toolbar.Create()) .Editable(editable => editable.Mode(GridEditMode.InLine)) .Pageable() .Sortable() .Scrollable() .DataSource(dataSource => dataSource .Ajax() .Events(events => events.Error("error_handler")) .Model(model => { model.Id(p => p.MovieId); model.Field(p => p.MovieId).Editable(false); }) .Create(update => update.Action("EditingInline_Create", "Movie")) .Read(read => read.Action("EditingInline_Read", "Movie")) .Update(update => update.Action("EditingInline_Update", "Movie")) .Destroy(update => update.Action("EditingInline_Destroy", "Movie")) ))public class MovieController : Controller { private readonly KendoContext context; public MovieController() { context = new KendoContext(); } public ActionResult Index() { ViewBag.Actors = context.Actors; return View(); } public ActionResult EditingInline_Read([DataSourceRequest] DataSourceRequest request) { return Json(context.Movies.Include("Actors").ToDataSourceResult(request)); } [AcceptVerbs(HttpVerbs.Post)] public ActionResult EditingInline_Create([DataSourceRequest] DataSourceRequest request, MovieViewModel movie) { if (movie != null && ModelState.IsValid) { var toAdd = new Movie() {Name = movie.Name}; context.Entry(toAdd).State = EntityState.Added; context.SaveChanges(); } return Json(new[] { movie }.ToDataSourceResult(request, ModelState)); } [AcceptVerbs(HttpVerbs.Post)] public ActionResult EditingInline_Update([DataSourceRequest] DataSourceRequest request, MovieViewModel movie) { if (movie != null && ModelState.IsValid) { var target = context.Movies.Single(x => x.MovieId == movie.MovieId); if (target != null) { target.Name = movie.Name; context.Entry(target).State = EntityState.Modified; context.SaveChanges(); } } return Json(ModelState.ToDataSourceResult()); } [AcceptVerbs(HttpVerbs.Post)] public ActionResult EditingInline_Destroy([DataSourceRequest] DataSourceRequest request, MovieViewModel movie) { if (movie != null) { var target = context.Movies.Single(x => x.MovieId == movie.MovieId); context.Entry(target).State = EntityState.Deleted; context.SaveChanges(); } return Json(ModelState.ToDataSourceResult()); } }public class MovieViewModel { public int MovieId { get; set; } public string Name { get; set; } public List<Actor> Actors { get; set; } }Since the logic to add ManyToMany relations are the same for MVC4 controllers using normal Views I assume I'm going to be able to use that code for this too.
I just need som guidance into what changes I need to do to the actual Grid code and ViewModel to be able to retrieve the data needed from the Grid to add/remove objects in the controller.
5 answers
805 views
My users would like a full-screen calendar-view, with cells capacious enough to display short blurbs of text, rather like a personal wall-calendar. It would occupy 100% of its container div, like a grid, so it could grow as wide as the browser window. Is it possible for the developer to modify the Kendo calendar to behave like this, or would it be better to search for such a dedicated widget?
Alexander Valchev
Telerik team
answered
on
20 Feb 2013
5 answers
785 views
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
Constructor:
$('#listView_C').kendoListView({ selectable: true, template: kendo.template($("#template").html()), change: viewModel.onChange, mousedown: viewModel.onMouseDown, dataSource: { data: viewModel.listSource, pageSize: 10 }});vs. Declarative:
<div id="listView_D" data-role="listview" data-selectable="true" data-bind="source: listSource, events: { change: onChange, mousedown: onMouseDown }" data-template="template"></div>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?
<script type="text/x-kendo-tmpl" id="template"> <div class="customers"> <dl> <dt>First Name</dt> <dd>#=FirstName#</span></dd> <dt>Last Name</dt> <dd><span data-bind="text: LastName" ></span></dd> </dl> </div></script>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?
<!-- editTemplate works --><dd> <input type="text" data-bind="value:ProductName" name="ProductName" required="required" validationMessage="required" /> <span data-for="ProductName" class="k-invalid-msg"/></dd><!-- template - works --><dd>${ProductName}</dd><!-- template - change to data-bind does not work --><input type="text" data-bind="value:ProductName" name="ProductName" />Thanks for any insight!
Jim
Atanas Korchev
Telerik team
answered
on
20 Feb 2013
1 answer
136 views
Hi,
Are there any plans to have an Office-Like Ribbon for the ASP.NET MVC components / Kendo UI?
Thanks,
Klaus
Are there any plans to have an Office-Like Ribbon for the ASP.NET MVC components / Kendo UI?
Thanks,
Klaus
Sebastian
Telerik team
answered
on
20 Feb 2013
1 answer
80 views
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.
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.
function changeDayHeaders() { $("#calendar table thead tr:eq(0) th").each(function (i, elem) { var $elem = $(elem); $elem.text($elem.attr('title')); });}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.
Georgi Krustev
Telerik team
answered
on
20 Feb 2013
2 answers
8.4K+ views
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:
My problems is how add the checked="checked" conditionally depending on the value of the field.
Any idea how to do that?
Thanks, Jaap
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
Rosen
Telerik team
answered
on
20 Feb 2013
0 answers
41 views
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"))
)
)
-------------------------------------------------------------------------------
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"))
)
)
2 answers
216 views
Hi
I have 2 questions:
I have 2 questions:
- 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).
- Is there a way to dynamically update the number of decimals with javascript after the NumericTextBox has been defined?
Thanks
UPDATE: I figured out the first one by going to http://docs.kendoui.com/getting-started/framework/globalization/numberformatting. The following did the trick:
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?UPDATE: I figured out the first one by going to http://docs.kendoui.com/getting-started/framework/globalization/numberformatting. The following did the trick:
var numericTextBox = $(el).width(100).kendoNumericTextBox({ format: "#.############", decimals: 10, spinners: false }).data("kendoNumericTextBox");
Clinton Smyth
Top achievements
Rank 1
Rank 1
answered
on
19 Feb 2013
3 answers
671 views
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
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
Alexander Valchev
Telerik team
answered
on
19 Feb 2013
3 answers
87 views
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.
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.
Sebastian
Telerik team
answered
on
19 Feb 2013
