Telerik Forums
Kendo UI for jQuery Forum
2 answers
103 views
Hi all,

Thanks for your great & quick support. Glad I chose Kendo :-).

My problem is that I'm losing button's styles on the 2nd page of a listview when paging is activated. Even clicks are not working anymore for those buttons.

I made a JSBin with this problem: http://jsbin.com/atataj/4/edit (scroll & click on "Load More" and you will notice that all buttons of the 2nd page are not styled & not working)

Hope somebody can help me.

Thanks,
Bastien
Iliana Dyankova
Telerik team
 answered on 21 Jan 2013
2 answers
90 views
Hi all,

When I put data-modal="false" on my modalview, clicking on the screen is closing the modalview, but even if I click inside the modalview it's closing it.

I was expecting that the modalview would close only if the user is clicking outside of it.

I have the following HTML
<div id="modalview-post-details" data-role="modalview" style="width: 100%; height: 70%;" data-modal="false">
</div>

As the height of the modalview is set to 70%, there's enough space to click outside of it to close it.

Is it a bug or is it working like this? And if it's working like this, how can I close the modalview only when the user clicks outside the modalview?

Thanks for your help!
Bastien
Iliana Dyankova
Telerik team
 answered on 21 Jan 2013
4 answers
268 views

Every node causes a call to _initChildren even if it doesn't have children.

If i have one root node with 1000 children (leafs w/o children) the call to _initChildren is made 1001 times. If you use load on demand the call is only done for the nodes you expand, and nodes without children can't be expanded. It is obvious that the information on wheter the node has children or not is available before the _initChildren is called. For larges datasources (~1000 nodes) this often causes the browser to halt (alerting ~A script is causing the page to run slowly..).

By changing kendo.data.js (start line 2832 in 2012.2.913) from:

load: function() {
    var that = this,
        options = {};
 
    that._initChildren();
 
    if (!that._loaded || that.hasChildren) {
        options[that.idField || "id"] = that.id;
 
        if (!that._loaded) {
            that.children._data = undefined;
        }
 
        that.children.one(CHANGE, function() {
                    that._loaded = true;
                })
                ._query(options);
    }
},

To:

load: function() {
    var that = this,
        options = {};
 
    if (that.hasChildren)
    {
        that._initChildren();
 
        options[that.idField || "id"] = that.id;
 
        if (!that._loaded) {
            that.children._data = undefined;
        }
 
        that.children.one(CHANGE, function() {
                    that._loaded = true;
                })
                ._query(options);
    }
},

The loading time is cut by ~80% (one typical example would be from 30s to 7s) in my average trees (a lot more in the example given above).

Though I don't now it the above code change can have any unforseen consequences, or if there is a better way to accomplish a similar effect.

Would love to hear you thoughts on this.

Alex Gyoshev
Telerik team
 answered on 21 Jan 2013
2 answers
59 views
Implemented camera feature using HTML5 input tag.
code :
--------
<div data-role="view" id="tabstrip-camera" data-title="camera" data-layout="mobile-tabstrip" id="Camera">
<!--Camera Code-->
<input data-click="alert('clciked');" type="file" name="image" accept="image/*" capture>
</div>

When tried on iOS 6 safari browser and Android chrome browser the camera is getting opened after 5 to 6 clicks.
File is attached for reference. The responsiveness of the button is very bad.
Please let me know if any js or css file to be added or modified.
Sathish
Top achievements
Rank 1
 answered on 21 Jan 2013
7 answers
438 views
When switching between landscape to portrait view and vice-versa... the scrollview is not re-adjusting it's width correctly, what would be causing this to occur?
Petyo
Telerik team
 answered on 20 Jan 2013
2 answers
223 views
Hello

Is any way to temporary disable animation for .scrollTo(page) method?
I tried something like this:
that._ScrollView.duration = 1;
that._ScrollView.scrollTo(activePage);
that._ScrollView.duration = 300;
but with no success... 

I am trying to implement infinite scroll view (for swiping between news articles). 
My Scroll view has 3 pages.  So, when user swipes from 2 -> 3 the content moves from 2 to 1, from 3 to 2, and the new article loads into the third page, and ScrollView scrolls to the second page again (without animation). 
Vladimir
Top achievements
Rank 1
 answered on 20 Jan 2013
12 answers
568 views
In my mobile application I've added a textbox for a searchTerm and a button.  I want to use this to return a dataset for this query and display the results in the ListView.

My problem is that when I use the Kendo Datasource object, no parameters are sent with the request.

Here's is my javascript code:

var validator,
    productViewModel = kendo.observable({
        productDataSource: new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/api/products/search",
                    dataType: "json",
                    data: {
                        filterBy: function () {
                            return "ProductName";
                        },
                        searchTerm: function(){
                            return $("#searchTerm").val();
                        },
                        shared: function () {
                            return false;
                        },
                        groupId: function () {
                            return null;
                        }
                    }
                },
                parameterMap: function (options, operation) {
                    return kendo.stringify(options);
                }
            },
            batch: false,
            pageSize: 10,
            schema: {
                data: "Data",
                total: "Total"
            }
        }),
        selectedproduct: {},
        showDetails: function (e) {
            var product = productViewModel.productDataSource.get(e.context);
            productViewModel.set("selectedproduct", product);
            app.navigate("#product-details");
        }
    });
 
 
$("#search-button").click(function () {
    var searchTerm = $("#searchTerm").val();
    var $searchMsg = $("#search-message");
 
    if (searchTerm == "") {
        $searchMsg.html("You must enter a search value.");
        return;
    }
 
    productViewModel.productDataSource.read();
});
Here's what the request looks like in Firebug:

http://localhost:64060/api/products/search?{}
This is what it should look like:

http://localhost:64060/api/products/search?filterBy=ProductName&searchTerm=&shared=false&groupId=
Here's my HTML code:

<div data-role="view" id="products-listview" data-title="products" data-model="productViewModel" data-layout="databinding">
    <ul data-role="listview" data-style="inset">
        <li>
            Search For: <input id="searchTerm" class="km-text" />
        </li>
    </ul>
    <div id="search-message"></div>             
    <a class="km-button" data-role="button" id="search-button"><span class="km-text">Search</span></a
    <ul id="flat-products-listview" data-role="listview" data-style="inset" data-template="productsListviewTemplate" data-model="productViewModel">
    </ul>
</div>
 
<script type="text/x-kendo-template" id="productsListviewTemplate">
    <a href="\#product-details?id=#= Id #" class="km-listview-link">#= ProductName #</a>
</script>
Any thoughts?

BTW, json data is returned, but it's all the data, not the requested data, and I haven't figured out how to get the data to populate the ListView, so the ListView is blank.

Thanks,

King Wilder
Lito
Top achievements
Rank 1
 answered on 18 Jan 2013
1 answer
67 views
Hi, I have a pageable Kendo UI Grid which allows users to click a command button on a row and be redirected to a details page. I want the user to be able to return back to the Grid on the previously selected page and row. Current behavior takes the user back to the very first page forcing them to navigate back to the page they were on. I have a ticket in with Telerik and they are suggesting using cookies. Does anyone have a better solution or are cookies the best practice?
Brett
Top achievements
Rank 2
 answered on 18 Jan 2013
2 answers
349 views
Hi!
I am building a Master-Detail with KendoGrids.

My problem is that when I create a new record in the Detail Grid I want the DefaultValue of the ForeignKey column to be set with the value of the PrimaryKey of the Master Grid.

My Grids are the following:

Master
@(Html.Kendo().Grid<ModelApp.Models.Tickets>()
.Name("ticketgrid")
.Columns(columns =>
    {
 
        columns.Bound(p => p.TicketID).Title("ID").Width(100);
        columns.ForeignKey(p => p.CustomerID, (System.Collections.IEnumerable)ViewData["customers"], "CustomerID", "CustomerName").Title("Customer").Width(200) ;
        columns.ForeignKey(p => p.AreaOfBusinessID, (System.Collections.IEnumerable)ViewData["areaofbusinesses"], "AreaOfBusinessID", "AreaOfBusiness1").Title("AreaOfBusiness").Width(100);
        columns.Bound(p => p.OccurredOn).Title("Occured").Format("{0:yyyy-MM-dd}").Width(150);
        columns.ForeignKey(p => p.SeverityID, (System.Collections.IEnumerable)ViewData["severities"], "SeverityID", "Severity1").Title("Severity").Width(100);
        columns.ForeignKey(p => p.AssigneeID, (System.Collections.IEnumerable)ViewData["assignees"], "AssigneeID", "AssigneeName").Title("Assignee").Width(100);
        columns.ForeignKey(p => p.TicketStatusID, (System.Collections.IEnumerable)ViewData["ticketstatuses"], "TicketStatusID", "TicketStatus1").Title("Status").Width(100);
        columns.Bound(p => p.UserID).Title("User").Width(100);
        columns.Bound(p => p.DateRegistered).Title("Registered").Format("{0:yyyy-MM-dd}").Width(150);
})
    .ClientDetailTemplateId("ticketdetailTemplate")
.DataSource(dataSource =>
    dataSource
.Ajax()
    //.Filter(filter => filter.Add(e => e.CustomerID).IsEqualTo(CustomerID))
.Model
(model=>{
    model.Id(p => p.TicketID);
    model.Field(p=>p.TicketID).Editable(false);
    model.Field(p => p.CustomerID);
    model.Field(p => p.AreaOfBusinessID);
    model.Field(p => p.OccurredOn);
    model.Field(p => p.SeverityID);
    model.Field(p => p.AssigneeID);
    model.Field(p => p.TicketStatusID);
    model.Field(p => p.UserID);
    model.Field(p => p.DateRegistered).DefaultValue(DateTime.Now);
     
})
.Read(read => read.Action("Index","Ticket"))
.Create(create => create.Action("Create", "Ticket"))
.Update(update => update.Action("Edit", "Ticket"))
//.Destroy(destroy => destroy.Action("Delete", "Ticket"))       
        )
        .Pageable()
        .Navigatable()
        .Selectable()
        .Sortable()
        .Editable(editing => editing.Mode(GridEditMode.InCell))
        .ToolBar(toolbar =>
        {
            toolbar.Create();
            toolbar.Save();
        })
         
 
 )
Detail (the column I want is in bold)
<script id="ticketdetailTemplate"  type="text/kendo-tmpl">
    @(Html.Kendo().Grid<ModelApp.Models.TicketsDetails>()
            .Name("ticketdetailgrid")
            .Columns(columns =>
            {
                columns.Bound(o => o.TicketsDetailID).Title("ID").Width(100);
                columns.Bound(o => o.TicketID).Title("Ticket").Width(150); //
 
                columns.ForeignKey(o => o.CustomerContactID, (System.Collections.IEnumerable)ViewData["customercontacts"], "CustomerContactID", "CustomerContactName").Title("CustomerContact").Width(150) ;
                columns.ForeignKey(o => o.TicketsDetailsViaID, (System.Collections.IEnumerable)ViewData["ticketsdetailsvia"], "TicketsDetailsViaID", "TicketsDetailsVia1").Title("Via").Width(100) ;
 
                columns.Bound(o => o.TicketsDetailsDesciption).Title("Description").Width(300);
                columns.Bound(o => o.TicketsdetailsNotes).Title("Notes").Width(200);
                columns.Bound(o => o.UserID).Title("User").Width(100);
                columns.Bound(o => o.DateTimeStart).Format("{0:yyyy-MM-dd hh:mm}").Title("Start").Width(150);
                columns.Bound(o => o.DateTimeFinish).Format("{0:yyyy-MM-dd hh:mm}").Title("Finish").Width(150);
                columns.Bound(o => o.DateRegistered).Format("{0:yyyy-MM-dd hh:mm}").Title("Registered").Width(150);
                 
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .Model
                (model =>
                {
                    model.Id(q => q.TicketsDetailID);
                    model.Field(q => q.TicketsDetailID).Editable(false);

//I want the DefaultValue here
                    model.Field(q => q.TicketID); 

                    model.Field(q => q.CustomerContactID);
                    model.Field(q => q.TicketsDetailsDesciption);
                    model.Field(q => q.TicketsdetailsNotes);
                    model.Field(q => q.UserID);
                    model.Field(q => q.DateTimeStart).DefaultValue(DateTime.Now);
                    model.Field(q => q.DateTimeFinish).DefaultValue(DateTime.Now);
                    model.Field(q => q.DateRegistered).DefaultValue(DateTime.Now);
             
 
                })
                .Read(read => read.Action("TicketsDetailsRead", "Ticket", new { ticketID = "#=TicketID#" }))
                .Update(update => update.Action("TicketsDetailsEdit", "Ticket"))
                .Create(update => update.Action("TicketsDetailsCreate", "Ticket", new { ticketID = "#=TicketID#" }))
            )
            .Pageable()
            .Sortable()
            .Editable(editing => editing.Mode(GridEditMode.InCell))
        .ToolBar(toolbar =>
        {
            toolbar.Create();
            toolbar.Save();
        })
                .ToClientTemplate()
    )
</script>
Thanx in advance
Spyros
Top achievements
Rank 1
 answered on 18 Jan 2013
0 answers
99 views
Ive just started using AutoComplete and Im having a few problems, basically nothing shows up when I start typing in the box, hopefully someone might be able to give me a few pointers.

in my controller (AccountController)  I have this method

[HttpGet]
        [AllowAnonymous]
        [ValidateAntiForgeryToken]
        public JsonResult GetCountries()
        {
            RegisterModel model = new RegisterModel();
            return Json(model.Countries, JsonRequestBehavior.AllowGet);
        }

in my model (AccountModel)  I have this property and method

public IEnumerable<EbsData.TimeZone> Countries { get {return GetCountries();} set{value = GetCountries();} }


/// <summary>
        /// get all the current countries from cache or repository
        /// </summary>
        /// <returns></returns>
        private IEnumerable<EbsData.TimeZone> GetCountries()
        {
            Service.InMemoryCache cacheProvider = new Service.InMemoryCache();
            using (var context = new EbsData.EBSEntities())
            {
                var countries = cacheProvider.Get("countries", () => (from c in context.TimeZones select c).ToList());
                return countries;
            }

        }

and in my view, I have this markup


<li>
                @Html.LabelFor(m => m.Country)
                @Html.Kendo().AutoCompleteFor(m => m.Country).Name("countriesAutoComplete").Animation(true).IgnoreCase(true).DataTextField("Country").DataSource(source =>
                                                                                                                                                         {
                                                                                                                                                                source.Read(read =>
                                                                                                                                                                {
                                                                                                                                                                    read.Action("GetCountries", "AccountController").Data("onAdditionalData"); //Set the Action and Controller name
                                                                                                                                                                })
                                                                                                                                                                .ServerFiltering(true); //If true the DataSource will not filter the data on the client.
                                                                                                                                                         })                                                                                                                                                     

            </li>


which creates this hmtl

<li>
<label for="Country">Country</label>
<span class="k-widget k-autocomplete k-header k-state-default" tabindex="-1" role="presentation" style="">
<input id="countriesAutoComplete" class="k-input" type="text" name="countriesAutoComplete" data-val-required="The Country field is required." data-val="true" data-role="autocomplete" style="width: 100%;" autocomplete="off" role="textbox" aria-haspopup="true" aria-disabled="false" aria-owns="countriesAutoComplete_listbox" aria-autocomplete="list">
</span>
<script>
jQuery(function(){jQuery("#countriesAutoComplete").kendoAutoComplete({"dataSource":{"transport":{"read":{"url":"/AccountController/GetCountries","data":onAdditionalData}},"serverFiltering":true,"filter":[],"schema":{"errors":"Errors"}},"dataTextField":"Country","ignoreCase":true});});
</script>
</li>


there is data available for the autocomplete to use, and the javascript function is there, but none of the server code is being executed.  Can anyone see where Im going wrong ?




mww
Top achievements
Rank 1
 asked on 18 Jan 2013
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
Date/Time Pickers
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)
SPA
Filter
Drawer (Mobile)
Drawing API
Globalization
Gauges
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
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
OrgChart
TextBox
Effects
Accessibility
ScrollView
PivotGridV2
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Collapsible
Localization
MultiViewCalendar
Touch
Breadcrumb
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
Popover
DockManager
FloatingActionButton
TaskBoard
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
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?