Telerik Forums
Kendo UI for jQuery Forum
3 answers
139 views
Hey Kendo,

I'm looking to adjust the easing between various views as the built-in defaults are a bit too linear.  Looking at kendo.fx.js, I see that you've extended easeOutExpo for internal use, but when attempting to pass in Transition.easeOutExpo into 

extend(kendo.fx, {
            transition: function(element, properties, options) {
 
                options = extend({
                        duration: 200,
                        ease: Transition.easeOutExpo, // 'ease-out'
 
...

it appears to break the slide all together.  Seeing that you're using CSS3 for your transitions, is it possible to pass in your own via tools like Ceasar and extend Transition further via the syntax that you've provided above?

Any help would be appreciated.  
Petyo
Telerik team
 answered on 15 May 2012
13 answers
211 views
Hello,

I'm trying to use kendo mobile with my MVC application but i can't succeed to have a mobile view like an iphone view. There is littles changes on the list but that not appear like on a mobile.

I copy/paste the mobile demos on a view of my mvc application but it doesn't work.

Someone can explain me if i do a miostake?

Thanks.

this is my code on the default view "about" of my mvc application.


@{
    ViewBag.Title = "About Us";
}
 
 
<div data-role="view" id="flat" data-init="mobileListViewDataBindInitFlat" data-title="ListView" data-layout="databinding">
    <ul id="flat-listview"></ul>
</div>
 
<div data-role="view" id="grouped" data-init="mobileListViewDataBindInitGrouped" data-transition="" data-title="ListView" data-layout="databinding">
     <ul id="grouped-listview"></ul>
</div>
 
<div data-role="layout" data-id="databinding">
    <header data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
        </div>
    </header>
 
    <div data-role="footer">
        <div data-role="tabstrip">
            <a href="#flat" data-icon="stop">Flat</a>
            <a href="#grouped" data-icon="organize">Grouped</a>
        </div>
    </div>
</div>
 
<script>
    var groupedData = [
        { name: "Sashimi salad", letter: "S" },
        { name: "Chirashi sushi", letter: "C" },
        { name: "Seaweed salad", letter: "S" },
        { name: "Edamame", letter: "E" },
        { name: "Miso soup", letter: "M" },
        { name: "Maguro", letter: "M" },
        { name: "Shake", letter: "S" },
        { name: "Shiromi", letter: "S" },
        { name: "Tekka maki", letter: "T" },
        { name: "Hosomaki Mix", letter: "H" },
        { name: "California rolls", letter: "C" },
        { name: "Seattle rolls", letter: "S" },
        { name: "Spicy Tuna rolls", letter: "S" },
        { name: "Ebi rolls", letter: "E" },
        { name: "Chicken Teriyaki", letter: "C" },
        { name: "Salmon Teriyaki", letter: "S" },
        { name: "Gohan", letter: "G" },
        { name: "Tori Katsu", letter: "T" },
        { name: "Yaki Udon", letter: "Y" }
    ];
 
 
    var flatData = ["Sashimi salad", "Chirashi sushi", "Seaweed salad", "Edamame", "Miso soup", "Maguro", "Shake", "Shiromi", "Tekka maki", "Hosomaki Mix", "California rolls", "Seattle rolls", "Spicy Tuna rolls", "Ebi rolls", "Chicken Teriyaki", "Salmon Teriyaki", "Gohan", "Tori Katsu", "Yaki Udon"];
 
    function mobileListViewDataBindInitFlat() {
        $("#flat-listview").kendoMobileListView({ dataSource: flatData });
    }
 
    function mobileListViewDataBindInitGrouped() {
        $("#grouped-listview").kendoMobileListView({
            dataSource: kendo.data.DataSource.create({ data: groupedData, group: "letter" }),
            template: "${name}"
        });
    }
</script>
 
 
<script>
    var app = new kendo.mobile.Application(document.body);
</script>
Frank Witte
Top achievements
Rank 1
 answered on 15 May 2012
0 answers
166 views
I am creating a new item / row on a datasource which works server side but not client side.  Basically I have a mobile app where I list messages in one view and then have a create message form in another view which should in theory update on the server and update the message list using the sync method on the datasource.  It updates the server but does not update the list until I refresh the page.

Can anyone see what I am missing?

Many thanks in advance.

Code in INDEX page
//global vars
var support_selected;
var support_id;
var support_read;  
var ticket_subject;
var ticket_message;
var ThreadID;
var Closed;    
var DateCreated;   
var Subject;
  
var ticketDataSource = new kendo.data.DataSource({
      transport: {
          read: "/support/data",
          dataType: "json",
          create: {
              url:  function() {
                  var url = "/support/newticketpost/";
                  return url;
              },
              type: "POST",
              dataType: "json"                   
          },
          update: {
              url:  function() {
                  var url = "/support/markasread/" + support_id + "/" + support_read;
                  return url;
              },
              type: "POST",
              dataType: "json"
          },               
      },
      schema: {
        model: {
            id: "ThreadID",
            fields: {
                DateCreated:  { type: "string" },
                Subject:  { type: "string" },
                Closed:  { type: "string" }                    
               }
           }
       }
   });

code in LIST MESSAGES page

<div data-role="view" data-title="Control Panel - Mobile" id="listtickets" data-init="listTicketsInit">
        <h2>Tickets</h2>
        <p><?php  echo $unread_responses . ' - unread support responses'; ?></p>  
        <p><a data-align="left" data-role="button" href="/support/newticket/">New ticket</a></p
        <ul id="support_list"></ul>
    </div>
         
 
   <script id="support_list_template" type="text/x-kendo-template"><a href="/support/view/#= ThreadID #"><div style="float:left; width:150px;" class="closed_#= Closed #">#= DateCreated # </div><div id="ticket_#= id #" class="closed_#= Closed #">#= Subject #</div></a></script>
    
   <script>
    
       function listTicketsInit() {      
         
          $("#support_list").kendoMobileListView({
              dataSource: ticketDataSource,
              style: "inset",
              template: $("#support_list_template").text()
                  
          });
           
     }
    
   </script>  
    
    <style>
    #listtickets div.closed_0 {font-weight:bold}
    #listtickets div.closed_1 {font-weight:normal}
   </style>

code in NEW MESSAGE page

<div data-title="Control Panel - Mobile" id="newticket" data-role="view" data-init="newTicketInit">
     <h2>New Ticket</h2>
    <div id="error"><p style="color:red">Please enter both subject and message</p></div>
     <ul data-role="listview" data-style="inset">
         <li>Subject<input type="text" name="subject" id="subject" /></li>
         <li>Message<textarea name="message" id="message" style="float:right"></textarea></li>
         <li><a data-role="button" id="sendBtn">Send</a></li>
     </ul>  
</div>
<script>
function newTicketInit() {
          var redirect = "/support/listall";
         //hide reply box & error boxes
         $("#error").hide();
         //send reply
         $("#sendBtn").click(function() { 
              
             ticket_subject = $("input#subject").val()
             ticket_message = $("textarea#message").val(); 
              
             if (ticket_subject == "") { 
               $("div#error").show(); 
               $("#subject").focus(); 
               return false;
             } else if(ticket_message == ""){ 
               $("div#error").show(); 
               $("#message").focus(); 
               return false;            
             } else {
               ticketDataSource.add({ subject: ticket_subject, message: ticket_message });  
               ThreadID = ticketDataSource.data();
               ticketDataSource.sync();
                
               app.navigate(redirect);  
 
             }
         });
          
     }  
 </script>  

Lee
Top achievements
Rank 1
 asked on 15 May 2012
3 answers
213 views
Hello, I could not find anything on this (hope it's not been answered somewhere already). 

I'm refresh my grid's content every minute by calling :
      GridControl.DataSource.read();

The server sometimes takes a long time to process the request, and this block the execution of the clien side application. The user cannot click on the grid or on any other controls. Once the information is received from the server, Kendo display it instantly. 

Is there a way to make the ".read()" async ?

Thanks !
Iliana Dyankova
Telerik team
 answered on 15 May 2012
2 answers
132 views
Hi,

Is there a way to unbind the validation?

What I'm trying to do is to have a cancel button that hides the form, and resets it, but when the form is re-displayed, if the validation was previously activated, the validation warnings are already shown, besides the reset action.

Is this possible?

Are there any workaround to do this?

Thanks,
Ricardo
rlapao
Top achievements
Rank 1
 answered on 15 May 2012
0 answers
99 views
Hello Everyone,

grid is loading very slow when database records are more then 15000

i developed one kendo ui grid,
but sometimes i got the error like "jsonmaxlength exceeded "
for this error i given maximum length in web.config file, when i got this error my database has 36500 rows .


This is my webmethod:
     WebService :    analytics.asmx

    <WebMethod(enableSession:=True)> _
    Public Function BindStyles() As String
           Dim dsresult As DataSet = Charts.BindStyles()
            Dim lst As New List(Of stylelookup)
            If dsresult IsNot Nothing AndAlso dsresult.Tables.Count > 0 AndAlso dsresult.Tables(0).Rows.Count > 0 Then
                lst = (From p In dsresult.Tables(0).AsEnumerable Select New  _
                                               stylelookup With _
                                               {.Color = CStr(p("color")).Trim, .Description = CStr(p("desc")).Trim, .Division = CStr(p("division")).Trim, .Group = CStr(p("group")).Trim, .primkey = CInt(p("primkey")), .Scale = CStr(p("scale")).Trim, .Season = CStr(p("season")).Trim, .selectstyle = CBool(p("select")), .Status = If(CStr(p("status")).Trim.ToLower.Replace("a", "") = "", "Active", "In-Active"), .Style = CStr(p("style")).Trim, .Whlprice = CDec(p("whlprice")), .Year = CInt(p("year"))}).ToList
            End If
            Dim objser As New JavaScriptSerializer()
            Dim json As String = objser.Serialize(lst)
            obj = New KendoData
            obj.StyleJSON = json
            obj._time = Date.Now
            Session("kendodata") = obj

            Return json

        Else
            obj = Session("kendodata")
            Return obj.StyleJSON
        End If
    End Function

and this is my default.aspx:

 function webmethod() {
//analytics=webservice name
               analytics.BindStyles(succ, failed);
    }
    function succ(res) {
        data = eval(res);
        load();
    }
    function failed(ex) {
      
        alert(ex._message);
    }


    function load() {
                      $("#grid").kendoGrid({
            dataSource: {
                data: data,
                pageSize: ((__gridH - 30 - 30) / 35),
                serverPaging: true, serverFiltering: true, serverSorting: true
            },
            dataBound: function (arg) {
                ___gridobj = this;
                $("#totalcount").html('' + this.dataSource._data.length + '');
                Pageing(this._data, this._data.length);

            },
            height: __gridH,

            scrollable: true,
            sortable: true,
            filterable: true,
            pageable: true,

            columns: [
         { title: "Select", width: "50px", filterable: false, sortable: false, template: '#= mycheckbox(primkey,selectstyle)#'
         },
                            {
                                field: "Style",
                                width: "100px",
                                title: "Style"
                            },
                            {
                                field: "Color",
                                width: "60px",
                                title: "Color"
                            },

                            {
                                field: "Description",
                                width: "120px",
                                title: "Description"
                            },
                            {
                                field: "Division",
                                width: "50px",
                                title: "Div"
                            },
                             {
                                 field: "Season",
                                 width: "70px",
                                 title: "Season"
                             },
                            {
                                field: "Scale",
                                width: "60px",
                                title: "Scale"
                            },
                             {
                                 field: "Status",
                                 width: "70px",
                                 title: "Status"
                             },
                             {
                                 field: "Group",
                                 width: "50px",
                                 title: "Grp"
                             },
                            {
                                field: "Whlprice",
                                width: "70px",
                                title: "WhlPrice"

                            },
                            {
                                field: "Year",
                                width: "40px",
                                title: "Year"
                            }

                      ]
        });
        return false;
    }

i attached my grid,

Can you explain how to bind grid with parameter like take ,skip,page,pagesize
Ganesh
Top achievements
Rank 2
 asked on 15 May 2012
1 answer
68 views
Hi,

Is there a way of associating metadata with the items that are added to the PanelBar?
My requirement is to associate a guid along with a PanelBar item that I can use when the item is selected.

Regards
Sarvesh
Kamen Bundev
Telerik team
 answered on 15 May 2012
3 answers
235 views
I am trying to add an autocomplete editor to a grid. I have tried to replicate the simplest example possible.

http://jsfiddle.net/grippstick/YKA2c/34/ 


The main problem is that when you select something in the auto complete the first time it just blanks it out. In the samples that are provided they never seem to use the normal scenario where you have an id and a name.

The other huge problem is that it displays the ID first and not the name.

Can anyone help with this? 
John
Top achievements
Rank 1
 answered on 15 May 2012
0 answers
78 views
Hi I´m writing this after not finding any answers on Kendoui.com faq section.

1. Can i have grid widget on mobile?
2. If no can i customize ListView control and have several columns?

What alternative solutions can i use for mobile viewing datagrids on mobile?

Sincerly 
agh
arnorgauti
Top achievements
Rank 1
 asked on 14 May 2012
0 answers
92 views
Hi:

Does anyone know how to make the grid column long title wraps around on multiple rows?

Currently it is chopped off for long title.

Thanks

Johnson Leong
Top achievements
Rank 1
 asked on 14 May 2012
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
Form
MaskedTextBox
View
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Effects
Accessibility
PivotGridV2
ScrollView
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Breadcrumb
Collapsible
Localization
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
ArcGauge
AICodingAssistant
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
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?