Telerik Forums
Kendo UI for jQuery Forum
0 answers
160 views

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

 

 

Robert
Top achievements
Rank 1
 asked on 25 Jun 2015
1 answer
170 views

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?

Jamie
Top achievements
Rank 1
Veteran
 answered on 24 Jun 2015
2 answers
173 views
Hi, I just want to know if it will have support for uploading to a different domain? Regards, Mattias
Kevin
Top achievements
Rank 2
 answered on 24 Jun 2015
3 answers
292 views

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.

Luis
Top achievements
Rank 1
 answered on 24 Jun 2015
1 answer
232 views

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);
     
});

Alexander Valchev
Telerik team
 answered on 24 Jun 2015
6 answers
1.3K+ views
When I bind this element: <select data-role="dropdownlist" data-option-label="Select an item" />
the optionLabel is not used.
This is because optionLabel is not in the default DropDownList.options object.
If I add the field optionLabel: "" to it, then the attribute is used correctly.

Due to the way the binding is working all possible configuration options must be in the default options object of the widget else it will not be possible to read the attribute in kendo.initWidget.

I can imagine that is applies to other options and to other widgets also.

Regards, Jaap
Georgi Krustev
Telerik team
 answered on 24 Jun 2015
13 answers
2.0K+ views
I have a hierarchical grid, on main grid i have a button on the top of the grid using toolbar template on click it opens the kendo window. This works perfectly fine. On the child grid I have to have the same functionality, where I have a button on the top of the child grid, On click of the button it should show the kendo window. But the button click on the child grid is not firing. Below is the code.
//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>
DHHS
Top achievements
Rank 1
 answered on 24 Jun 2015
4 answers
220 views

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!

 

 

 

 

Kiril Nikolov
Telerik team
 answered on 24 Jun 2015
3 answers
203 views
Having a first modal window, if you open from there a new one (modal too), and apply to it a call to the destroy function when it closes, makes the first window to lose modal.

Sample: http://jsbin.com/ixojov/1/edit 
Dimo
Telerik team
 answered on 24 Jun 2015
3 answers
166 views

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>

Kiril Nikolov
Telerik team
 answered on 24 Jun 2015
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
Licensing
ScrollView
Switch
TextArea
BulletChart
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?