Hi there, I have encountered an interesting issue that has left me stuck for days. I have used the datasource filtering configuration before but not in the current context. I am trying to create a User Profile view for my mobile app. Please see the attached image for the JSON that I am retrieving from the web services that I have created. And looking at the structure of my data, can someone help me point out if there is anything I have done wrong.
Below are the code snippets from my user-profile.js file.
1.app.profileView = kendo.observable({2. onShow: function() {}3.});
01.(function(parent) {02. var provider = app.data.woofBackend,03. init = function() {04. 05. },06. successHandler = function(data) {07. if (data && data.result) {08. app.user = data.result; 09. } else {10. init();11. }12. },13. userProfileViewModel = kendo.observable({14. userAccount: new kendo.data.DataSource({15. schema: {16. data: function(response) {17. var userDetails = _.where(response, { Username: app.user.Username});18. return userDetails[0];19. }20. },21. transport: {22. read: {24. dataType: "json" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests25. }26. }27. }),28. userProfile: new kendo.data.DataSource({29. schema: {30. data: function(response) {31. var userDetails = _.where(response, { Username: app.user.Username});32. return userDetails[0].UserProfile;33. }34. },35. transport: {36. read: {38. dataType: "json" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests39. }40. }41. })42. });43. 44. parent.set('userProfileViewModel', userProfileViewModel);45. 46. // This method below will bind the onShow function to the view when the screen is loaded.47. parent.set('onShow', function() {48. 49. // If the user already has a session, then automatically log them in. Otherwise, display the corresponding view.50. provider.Users.currentUser().then(successHandler, init);51. });52. 53.})(app.profileView);As you can see above, I had some trouble using the filter option for matching the Username of the user. So I have used a workaround by using underscore.js. I have tried using a debug to print the output into a javascript alert(), and it works fine for now.
The next challenge I am having is trying to bind the userProfileViewModel to my view in the HTML (see below).
In my User Profile View HTML file:
1.<div data-role="view" data-title="Profile" data-layout="main" data-model="app.profileView" data-show="app.profileView.onShow">2. <span data-bind="text: userProfileViewModel.userAccount.Firstname"></span>3.</div>JSFiddle: http://jsfiddle.net/rgelb/76sLggyL/18/
If you fire up Chrome on a regular computer or laptop, I can drag rows no problem. However, if I start Chrome on Surface 2 or 3, the drag event doesn't fire.
I tried it with a built in mouse, with a plugged in mouse, with touch - no luck.
I had to go to chrome://flags and set Enable touch events to disabled. And then it worked. However, this is not a solution, since I can't make every user do this.
Regards,
Robert
I understand that inline editing is not something that is supported by the TreeView and I've seen other solutions in the forums where people created work-arounds for this. I'm trying to work on my own work-around to create actual inline editing using the tree view but I'm having issues I'm hoping someone can help with.
Essentially I've created a template that wraps the data in a span tag, then on the double click event of that span i replace the html contents of the data with code for a text box. My intent is that I then use the blur event of the text box to save the data into the treeview data and get rid of the textbox.
The problem I'm having though is that when the text box is created, I can't actually click into it. I'm wondering if one of the events of the TreeView is hijacking the click event and redirecting focus elsewhere which essentially never lets the textbox get focus. Anyone (especially the Telerik devs) have any ideas why this could be happening?
Hello
I have the following kendo grid in MVC. This grid is inside a partial view that receives an integer as its model and may be displayed several times on the same page but bound for different models.
@(Html.Kendo().Grid<MyGridModel>()
.Name("MyGridModelGrid_" + Model)
.Columns(cols =>
{
cols.Bound(a => a.Name);
cols.Bound(a => a.SomeNumericValue);
cols.Command(command =>
{
command.Edit();
command.Destroy();
});
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.DataSource(dataSource => dataSource
.Ajax()
.Model(m =>
{
m.Id(a => a.Id);
m.Field(a=> a.Name);
m.Field(a => a.SomeNumericValue);
})
.Create(update => update.Action("CreateAction", "MyController", new {area = "MyArea", viewModelId= Model}))
.Read(read => read.Action("ReadAction", "MyController", new {area = "MyArea",viewModelId = Model}))
.Update(update => update.Action("UpdateAction", "MyController", new {area = "MyArea", viewModelId= Model}))
.Destroy(update => update.Action("DestroyAction", "MyController", new {area = "MyArea", viewModelId= Model}))
)
)
As you can see the grid details can be edited, deleted or added. However, I want the "Name" column to be a kendo dropdown list. For that purposes I decorated the MyGridModel class as follows:
public class MyGridModel
{
public int Id { get; set; }
[DisplayName("Name")]
[UIHint("ModelNameEditor")]
[Required]
public string ModelName{ get; set; }
[DisplayName("Some Numeric Value")]
[Required]
[Range(0, 10000)]
public short SomeNumericValue { get; set; }
}
And created the following view for the editor template:
@using Kendo.Mvc.UI
@(Html.Kendo().DropDownList()
.Name("ModelName")
.OptionLabel("Name")
.HtmlAttributes(new { style = "width: 100%" })
.DataValueField("Text")
.DataTextField("Text")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetAllNames", "MyController", new { area = "MyArea"});
});
})
)
The editor is correctly rendered and the options are correctly retrieved via ajax. However, Some of the "Names" may already taken and invalid when editing or adding a new value. Because of this I want to replace the "GetAllNames" function for a "GetAvailableNamesFor" function, in which only the possible names are retrieved from the Ajax call. For this, I need to somehow pass to the the "Id" model property of the row in the grid in which this editor was rendered. Is this possible?
So, the code would be something like:
@using Kendo.Mvc.UI
@model int
@(Html.Kendo().DropDownList()
.Name("ModelName")
.OptionLabel("Name")
.HtmlAttributes(new { style = "width: 100%" })
.DataValueField("Text")
.DataTextField("Text")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetAvailableNamesFor", "MyController", new { area = "MyArea", currentRowId = Model});
});
})
)
Thanks in advance.
Hi,
the following code working fine, can somebody verify that this will not be a problem in future version ?
Thanks,
<h1>MVVM Demo</h1> <div id="studentview"> <input data-bind="value: name" /> <input data-bind="value: age" /> <button data-bind="click: sayHello">Student Say Hello</button> </div> <div id="teacherview"> <input data-bind="value: name" /> <input data-bind="value: age" /> <button data-bind="click: sayHello2">Teacher Say Hello</button> </div>$(document).ready(function () { var studentViewModel = kendo.observable({ name: "Dhananjay Kumar", age : 30 , sayHello: function () { var name = this.get("name"); var age = this.get("age"); alert("Hello, " + name + "You are" + age + "Years Old") ; }, sayHello2: function () { var name = this.get("name"); var age = this.get("age"); alert("Hellooooooo, " + name + "You are" + age + "Years Old") ; } }); kendo.bind($("#studentview"), studentViewModel); kendo.bind($("#teacherview"), studentViewModel); });//My main grid<div class="container-fluid"> <div class="row"> <div class="col-xs-18 col-md-12"> @(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.providers>() .Name("grid") .Columns(columns => { columns.Bound(p => p.Id).Filterable(false).Width(50); columns.Bound(p => p.ContractorType); columns.Bound(p => p.BHSISNum); columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}"); columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}"); columns.Bound(p => p.ContractorIsAlsoRegion); columns.Bound(p => p.ContractorName); columns.Bound(p => p.AddressBkNum); }) .Pageable() .Sortable() .Scrollable() .Filterable() .Selectable() .ClientDetailTemplateId("template") .HtmlAttributes(new { style = "height:550px;" }) .DataSource(dataSource => dataSource .Ajax() .PageSize(20) .Read(read => read.Action("Contractors_Read", "Contract").Data("additionalInfo")) ) .ToolBar(toolbar =>{ toolbar.Template(@<text> <div class="toolbar"> <button class="k-button k-button-icontext k-grid-add k-primary" id="providerskendowindow">Add Providers</button> </div> </text>);}) ) </div> </div></div>//my child grid <script id="template" type="text/kendo-tmpl"> @(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.serviceDetails>() .Name("grid_#=Id#") .Columns(columns => { columns.Bound(o => o.Id).Width(50); columns.Bound(o => o.ServiceId); columns.Bound(o => o.ServiceType); columns.Bound(o => o.AdultChild); columns.Bound(o => o.IFGSwitch); columns.Bound(o => o.CodeModifier); columns.Bound(o => o.ServiceModifier); columns.Bound(o => o.StartDate).Format("{0:MM/dd/yyyy}"); columns.Bound(o => o.EndDate).Format("{0:MM/dd/yyyy}"); }) .ToolBar(toolbar =>{ toolbar.Template(@<text> <div class="toolbar"> <button class="k-button k-button-icontext k-grid-add k-primary" id="serviceskendowindow">Add Services</button> </div> </text>);}) .DataSource(dataSource => dataSource .Ajax() .PageSize(10) .Read(read => read.Action("Services_Read", "Contract", new { contractorId = "#=Id#" })) ) .Pageable() .Sortable() .ToClientTemplate() )</script> //Main grid button click window @(Html.Kendo().Window() .Name("providerwindow") .Title("Add Business Units") .Content(@<text><div class="container-fluid"> <div class="row"> <div class="col-xs-18 col-md-12"> @(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.providers>() .Name("grid1") .Columns(columns => { columns.Template(x => { }).HtmlAttributes(new { @class = "chkbox" }).ClientTemplate("<input type='checkbox' class='checkbox' id = 'chk' onclick='SetCheckBOX()' />"); columns.Bound(p => p.Id).Filterable(false).Width(50); columns.Bound(p => p.ContractorType); columns.Bound(p => p.BHSISNum); columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}"); columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}"); columns.Bound(p => p.ContractorName); }) .Pageable() .Sortable() .Scrollable() .Filterable() .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple)) .HtmlAttributes(new { style = "height:350px;" }) .DataSource(dataSource => dataSource .Ajax() .PageSize(20) .Read(read => read.Action("Contractors_Read", "Contract").Data("additionalInfo")) ) ) <button class="k-button close-button k-primary" style="bottom: 10px; ">Cancel</button> <button class="k-button k-primary" id="showSelection" style="bottom: 10px; ">Add</button> </div> </div> </div></text> ) .Draggable() .Resizable() .Width(800) .Visible(false) ) //Child grid button click kendo window @(Html.Kendo().Window() .Name("servicewindow") .Title("Add Business Units") .Content(@<text><div class="container-fluid"> <div class="row"> <div class="col-xs-18 col-md-12"> @(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.serviceDetails>() .Name("grid1") .Columns(columns => { columns.Template(x => { }).HtmlAttributes(new { @class = "chkbox" }).ClientTemplate("<input type='checkbox' class='checkbox' id = 'chk' onclick='SetCheckBOX()' />"); columns.Bound(p => p.Id).Filterable(false).Width(50); columns.Bound(p => p.ServiceId); columns.Bound(p => p.ServiceType); columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}"); columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}"); columns.Bound(p => p.AdultChild); }) .Pageable() .Sortable() .Scrollable() .Filterable() .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple)) .HtmlAttributes(new { style = "height:350px;" }) .DataSource(dataSource => dataSource .Ajax() .PageSize(20) .Read(read => read.Action("Services_Read", "Contract", new { contractorId = "#=Id#" })) ) ) <button class="k-button close-button k-primary" style="bottom: 10px; ">Cancel</button> <button class="k-button k-primary" id="showSelection" style="bottom: 10px; ">Add</button> </div> </div> </div></text> ) .Draggable() .Resizable() .Width(800) .Visible(false) ) <script> function additionalInfo() { var contractId =@Html.Raw(Json.Encode(ViewBag.ContractService.Id)); return { Id: contractId } } $(document).ready(function(){ $("#providerskendowindow").click(function(){ alert("inside"); $("#providerwindow").data("kendoWindow").center().open(); }); $("#serviceskendowindow").click(function(){ alert("inside"); $("#servicewindow").data("kendoWindow").center().open(); }); }); $(".close-button").click(function(){ // call 'close' method on nearest kendoWindow $(this).closest("[data-role=window]").kendoWindow("close"); });</script>Hi Guys,
Im using Kendo MVVM to bind a row template to a datasource array and all works fine. But in in the row template i have a dropdownlist that im trying to bind to a datasource but cant get it to work properly.
I have tried binding the dropdownlist to the kendo observable viewmodel variable and also to a field directly in array datasource but both approaches do not work.
I would like to know if this scenario is supported in Kendo MVVM to bind a dropdownlist inside a datasource array?
Here there is a sample prototype http://dojo.telerik.com/@silviu/ImoFe/14
Cheers!
