Telerik Forums
Kendo UI for jQuery Forum
1 answer
135 views
I would love to see a Document Browser tool and a Video Browser tool added to the Editor similar to the Image Browser.

Ideally, the Video Browser would also allow you to embed YouTube and Vimeo videos.

Is that in the plans?
Dimo
Telerik team
 answered on 26 Sep 2013
1 answer
61 views
I want to have an icon on the homepage that when hovered over, shows a templated tooltip.

Difference from the demos being I don't want to show details of a single item, but instead a more complex UI that contains a list of items, and a couple buttons.

...it's kind of like the telerik menu item on this page (see attached)

What I'm confused about is how to get my content into there...I would love to be able to MVVM the list item content inside of it, but I can't seem to see in my head how this all ties together (with events).  I assume I have a static "content" property and in that an item template repeater...?

Steve
Alexander Valchev
Telerik team
 answered on 26 Sep 2013
2 answers
296 views
I have a simple app that allows customers to look up inventory. Its as simple as the user enters a optional customer number and part. That occurs in the search view. Then they press the go button and are shown the results view. It list the product and stock count at our branch locations.

The issue I'm having is on mobile phones. The listview does not get updated. The data doesn't change.

Here is the code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="KochAirMobileInventory._Default" %>
 
<!DOCTYPE html>
 
<html>
<head id="Head1" runat="server">
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="-1">
    <title>Part Lookup</title>
    <link href="Content/kendo/2013.2.716/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="Content/kendo/2013.2.716/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <link href="Content/kendo/2013.2.716/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="Scripts/kendo/2013.2.716/kendo.all.min.js" type="text/javascript"></script>
 
    <style>
        .glass {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 100;
            opacity: 0.3;
            background: #fff;
        }
         
    </style>
</head>
<body>   
    <!-- modal loading -->
    <div id="glass" class="glass" style="display: none;"></div>
 
    <!-- layout for the search view -->
    <div data-role="layout" data-id="SearchLayout">
        <header data-role="header">
            <div data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </header>
    </div>
 
    <!-- this view is for entering the cutomer and part nubmer to view stock status -->
    <div id="SearchView" data-role="view" data-title="Search" data-layout="SearchLayout">
            <ul data-role="listview" data-style="inset">
                <li>
                    <label>Customer #
                        <input id="Customer" type="text" value="60506" />
                    </label>
                </li>
                <li>
                    <label>
                    Part
                    <input id="Part" type="text" value="CF58.C" />
                    </label>
                </li>
                <li style="text-align:center;">
                    <label>
                    <a class="button" data-role="button" href="#ResultsView" onclick="GetData();">Go</a><!-- onclick="GetData();" -->
                    </label>
                </li>
             
            </ul>    
    </div>
 
    <!-- layout for the results view -->
    <div data-role="layout" data-id="ResultsLayout">
        <header data-role="header">
            <div data-role="navbar">
                <a class="nav-button" data-align="left" data-role="backbutton">Back</a>
                <span data-role="view-title"></span>
            </div>
        </header>
    </div>
 
    <!-- this is the results view that will show the branch and stock count for item searched -->
    <div data-role="view" id="ResultsView" data-transition="slide" data-init="mobileListViewDataBindInitFlat" data-title="Results" data-layout="ResultsLayout">
        <ul id="flat-listview" data-role="listview" data-style="inset"></ul>
    </div>
 
<script type="text/ecmascript">
    //data that is called via ajax for our listview in the
    //results view...
    var flatData;
 
    //sample of the data returned
    /*
    [{"CustomerId":"960506","CustomerName":"IAMS COM AIR          ","PartNumber":"58.C              ","Vnd":"CF","SellPrice":"        99.35","Id":2,"AvailQty":79,"Status":"A","Location":"usa"},
    {"CustomerId":"960506","CustomerName":"IAMS COM AIR          ","PartNumber":"58.C              ","Vnd":"CF","SellPrice":"        99.35","Id":3,"AvailQty":105,"Status":"A","Location":"usa"},
    {"CustomerId":"960506","CustomerName":"IAMS COM AIR          ","PartNumber":"58.C              ","Vnd":"CF","SellPrice":"        99.35","Id":4,"AvailQty":100,"Status":"A","Location":"usa"},
    {"CustomerId":"960506","CustomerName":"IAMS COM AIR          ","PartNumber":"58.C              ","Vnd":"CF","SellPrice":"        99.35","Id":5,"AvailQty":66,"Status":"A","Location":"usa"},
    {"CustomerId":"960506","CustomerName":"IAMS COM AIR          ","PartNumber":"58.C              ","Vnd":"CF","SellPrice":"        99.35","Id":6,"AvailQty":-11,"Status":"A","Location":"usa"},
    {"CustomerId":"960506","CustomerName":"IAMS COM AIR          ","PartNumber":"58.C              ","Vnd":"CF","SellPrice":"        99.35","Id":7,"AvailQty":79,"Status":"A","Location":"usa"},
    {"CustomerId":"960506","CustomerName":"IAMS COM AIR          ","PartNumber":"58.C              ","Vnd":"CF","SellPrice":"        99.35","Id":8,"AvailQty":55,"Status":"A","Location":"usa"}]
    */
    function GetData() {
        showLoading();
         
        var customer = $("#Customer").val();
        var showPrice = false;
 
        if (customer == "") {
            customer = "60506";
        } else {
            showPrice = true;
        }
 
        $.ajax({
            url: "api/branchitem/?partnumber=" + $("#Part").val() + "&customer=" + customer,
            contentType: 'json',
            success: function (data) {
                flatData = "";
                 
                var price = "";
 
                $.each(data, function (index, item) {
                    flatData += item.Location + " Quantity:" + item.AvailQty + ',';
 
                    price = item.SellPrice
                });
                 
                flatData = flatData.substr(0, flatData.length - 1);
                 
                if (showPrice) {
                    flatData += ",Price: " + price.toString();
                }
                 
                flatData = flatData.split(",");
                 
                flatData = flatData;
 
                //attempt to destroy and recreate so the data will update...
                $('#flat-listview').data('kendoMobileListView').destroy();
                $("#flat-listview").kendoMobileListView({ dataSource: flatData });
 
                hideLoading();
            }
        });
    }
 
    function mobileListViewDataBindInitFlat() {
        //grab data from restful service
        GetData();
    }
 
    var app = new kendo.mobile.Application(document.body);
 
    function showLoading() {
        $("#glass").show();
        app.showLoading();
    }
 
    function hideLoading() {
        $("#glass").hide();
        app.hideLoading();
    }
    </script>
</body>
</html>
Kiril Nikolov
Telerik team
 answered on 26 Sep 2013
1 answer
108 views
Hi

We are using Kendo UI Grid to our application with the option Pageable true. When we sort a one page the rest remain unsorted.
We would like to know is there any possibility to sort data in every pages in Kendo grid.

Thanking you,

cowderia development team
Alexander Valchev
Telerik team
 answered on 26 Sep 2013
2 answers
441 views

Hi,

I am trying to implement a scenario where user can drop nodes from the tree to an editor. By default all the nodes are draggable of the kendo treeview control so I have to remove the dragAndDrop and use kendoDraggable so that parent nodes are not draggable. This is working fine by using templates.

Now, for the editor part, if I apply kendoEditor to the textarea and make it kendoDropTarget, the drop functionality is not working. However this works if I keep textarea as it is (without kendo editor) and apply kendoDropTarget to the textarea. Not sure what I am missing?

The code snippet is share at: http://jsfiddle.net/N4PVu/

Regards,
Monish.

Dominic
Top achievements
Rank 1
 answered on 26 Sep 2013
1 answer
363 views

Hi,

      I need to unchecked the All Day check box when creating the schedules in Calender. Since i am getting always selected in default.

    I am using the below code for scheduler and template.

  Calender

@(Html.Kendo().Scheduler<SchedulerViewModel>()
            .Name("uxAuditSchedulerView")
            .Date(DateTime.Now)
            .Views(views =>
            {
                views.DayView(day => day.Title("DAY"));
                views.WeekView(week => week.Title("WEEK"));
                views.MonthView(month => month.Selected(true).Title("MONTH"));
                views.AgendaView(agenda => agenda.Title("TIMELINE"));
            })
           

            .DataSource(d => d
                .Model(m =>
                {
                    m.Id(f => f.SchedulerId);
                    m.Field(f => f.AuditDetailId);
                    
                })
                .Read("GetSchedules", "Audit")
                .Create("CreateSchedule", "Audit")
                .Destroy("DestroySchedule", "Audit")
                .Update("UpdateSchedule", "Audit")

            )
             .Editable(x => x.TemplateId("editor").Confirmation(Messages.DeleteConfirmation))
            .Events(e=>e.Edit("Scheduler_Edit"))
        )


Template

<script id="editor" type="text/x-kendo-template">
    <div class="row-fluid" style="width:660px;!important; padding:0 20px;">
            <div class="control-group margin_btm_20 clearfix ">
                <div class="span3">
    
      
                   
     <label>Audit Id: </label>
    <div class="input-controls">
     @(Html.Kendo().DropDownListFor(x=>x.AuditDetailId)
                                 .Name("AuditDetailId")
                                        .DataTextField("Selected")
                                  .DataValueField("Value")
                             .BindTo(Model.AssignedAuditIds)
                             .OptionLabel("Select")
                             .Events(e=>e.Change("onAuditDetailChange"))
                           .ToClientTemplate()
                                     )  </label>
                </div>
            </div>
    <div class="span4">
       <label>Start Time:  </label>
     <div class="input-controls">
        @*<input data-role="datetimepicker" name="start" class="span12"/>*@
    <input name="start" type="text" required  data-type="date" data-role="datetimepicker" data-bind="value: start,invisible: isAllDay" class="span12" />
    <input name="start" type="text" required  data-type="date" data-role="datepicker" data-bind="value: start,visible: isAllDay" class="span12" />  
     </div>
    </div>
    <div class="span4">
        <label>End Time: </label>
        <div class="input-controls">
            @*<input data-role="datetimepicker" name="end" class="span12"/>*@
     <input name="end" type="text" required data-type="date" data-role="datetimepicker" data-bind="value: end ,invisible:isAllDay" class="span12" />    
    <input name="end" type="text" required data-type="date" data-role="datepicker" data-bind="value: end ,visible:isAllDay" class="span12" />
         </div>
    </div>
    <div class="span1">
        <label>All day</label>
     <div class="input-controls">
        @*<input type="checkbox" name="isAllDay" data-type="boolean" data-bind="checked:isAllDay">*@ 
    <input type="checkbox" name="isAllDay" data-type="boolean" data-bind="checked:isAllDay">
    </div>
    </div>          
    </div>  
    <div id="uxSelectedAuditDetails" class="pad10-0 " >  </div>         
   <div class="control-group margin_btm_20 clearfix ">
     <div class="span12">
        <label>Note:</label>
    <div class="input-controls">
        <textarea  name="description" data-bind="value:description" class="span12"></textarea>
    </div>
    </div>
    </div>

    </div>
    </div>  
    
</script>
Vladimir Iliev
Telerik team
 answered on 26 Sep 2013
1 answer
187 views
I am testing kendo grid with IE 11 and stumbling on a bug. Basically the grid click acts differently in various version of kendo library. In the latest version ( 2013.2.918) grid click is triggered twice and  Grid click does not work all the way back until version 2012.3.1114. Here is the plunker link. http://plnkr.co/edit/MgkSCf2vqBfYehtGvKUx?p=preview

I would be happy if I can get a patch for version 2012.3.1315 which are in our production servers ( or atleast direct me on how to patch it )

Thanks
 Sush
Kiril Nikolov
Telerik team
 answered on 26 Sep 2013
1 answer
108 views
If this is my template defined in my script
var coreTemplate: "<div id='favouritesTooltipContent'>\
                   <h2>Favourites</h2>\
                   <ul data-bind='source: items' data-template=''>\
                   </ul>\
                </div>",
...is there a way that the "data-template" for that URL could also live in the script instead of in the page??
Alexander Valchev
Telerik team
 answered on 26 Sep 2013
27 answers
369 views
Once we updated to latest release our endless scrolling list
views stopped working. We can see the datasource has the correct data but no
items are rendered in the list itself except for the loading element.

We managed to find that
it is all because of the “endlessScroll : true” option – if we comment it we see all
the data rendered. Code:

 

       var dsOpts = {

                     pageSize
: FDData.connection.pageSize,

                     serverPaging
: true,

                     transport
: {

                           read
: {

                                  url
: hostPrefix + "getTrans",

                                  dataType
: "json"

                           },

                           parameterMap
: function(options)

                           {

                                  var parameters = {

                                         session
: FDData.connection.sessionID,

                                         selector
: FDData.mainWalletID,

                                         pageSize
: FDData.connection.pageSize,

                                         nextToken :
FDData.connection.transNextToken,

                                         sortBy
: FDData.connection.sortBy

                                  };

 

                                  return parameters;

                           }

                     },

                     schema
: {

                           data
: function(response)

                           {

                                  if (!response.success)

                                  {

                                         showError("error: " +
response.errorMessage);

                                         return [];

                                  }

                                  FDData.connection.transNextToken
= response.nextToken;

 

                                  console.log("showWallet
connection : " + FDData.connection);

                                  return
response.transactions;

                           }

                     },

                     change
: function(e)

                     {

                            console.log("wallet data
update : ");

                           console.log(e);

                                 

                          

                           for ( var i = 0; i <
e.items.length; i++)

                           {

                                  var t = e.items[i];

                                  if
(FDData.connection.sortBy === "TransValueDate")

                                  {

                                         t.SortByDate
= t.TransValueDate;

                                  }

                                  else

                                  {

                                         t.SortByDate
= t.TransDate;

                                  }

                                  t.CategoryDescription
= getCategoryDesc(t.Category);

                                  FDData.walletData.push(t);

                           }

                     }

              };
//
dsOpts

 

              FDData.walletData
= [];

              FDData.walletDS
= new
kendo.data.DataSource(dsOpts);

 

              $("#wallet-container").kendoMobileListView({

                     dataSource
: FDData.walletDS,

                     template
: $("#tranTemplate").text(),

                     endlessScroll
: true,

                     scrollTreshold
: 30 //treshold
in pixels

              });

An image with some console readings is attached to show some more details.


If we go back to last quarter's sources - everything works just fine. 
Petyo
Telerik team
 answered on 26 Sep 2013
1 answer
112 views
Hello,

currently i am building an inbox with your listview control. i am trying to select multiple items in the view and manipulate them on a page refresh. (delete for example)
i experimented with a buttongroup in the listview item but i'm unable to get the current item when the button group is selected to fire the delete function

can you suggest some best practice to select multiple items in the listview and manipulate the items ?

i attached a screenshot to clarify what i mean

best regards
Petyo
Telerik team
 answered on 26 Sep 2013
Narrow your results
Selected tags
Tags
+? more
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?