Telerik Forums
Kendo UI for jQuery Forum
1 answer
209 views

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:  {
23.                        url: "http://woofapi.xdevap-development.com/UserAccounts/",
24.                        dataType: "json" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
25.                    }
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:  {
37.                        url: "http://woofapi.xdevap-development.com/UserAccounts/",
38.                        dataType: "json" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
39.                    }
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>

Alexander Valchev
Telerik team
 answered on 25 Jun 2015
0 answers
166 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
174 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
178 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
300 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
238 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
225 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
210 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
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
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Hiba
Top achievements
Rank 1
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Hiba
Top achievements
Rank 1
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?