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!

Hi, I have this viewModel, that I want to bind values with the dropdowns inside a template.
But I cannot bind the value 1, 3, 5 to the dropdowns, i.e. the selected value of the html selects.
Could you please help with this?
<script type="text/x-kendo-template" id="totalAmountTemplate"># for (int i = 0; i < values.length; i++) { #<select data-bind="value: values[i]"># for (int j = 0; j < values.length; j++) { #<option>#= j #</option># } #</select># } #</script><script>var viewModel = kendo.observable({ data: { values: [1, 3, 5] }});kendo.bind(document.body.children, viewModel);</script><div data-bind="source: data" data-template="totalAmountTemplate"></div>