Telerik Forums
Kendo UI for jQuery Forum
3 answers
416 views
Hi,

This thread is different than my previous post. I am working on asp.net mvc5 razor based web application using visual studio 2013. The partial view has a kendo grid and inside this grid there is an autocomplete widget. The autocomplete should also display default value bound to it when the webpage is loaded. However the autocomplete is neither displaying any default value nor when typed in it . However clicking two times (first click outside the autocomplete box but with in the same grid cell display the default bound value and then second click anywhere on the webpage enable the autocomplete functionality) enable the autocomplete functionality. Here is the code for Grid and Autocomplete:

@(Html.Kendo().Grid(Model.Risks)
.Name("gridRisks")
.Columns(col =>
{
col.Bound(m => m.RiskID).Title("RiskID").Hidden();
col.Bound(m => m.Risk).Title("Risk(s)").ClientTemplate(
Html.Kendo().AutoComplete()
.Filter("contains")
.Name("AutoCompleteRisks#=Risk#")
.DataTextField("Risk")
.BindTo(Model.AllAvailRisks)
.ToClientTemplate()
.ToHtmlString()
);
col.Command(c => c.Destroy());
})
.Pageable()
.ToolBar(toolbar =>
{
toolbar.Create();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Sortable()
.DataSource(d => d
.Ajax()
.Batch(true)
.ServerOperation(false)
.Model(model => {
model.Id(r => r.RiskID);
model.Field(r=>r.Risk).Editable(true);
})
.Create("Editing_Create", "PDFBuilderKIDs")
.Read("Editing_Read", "Grid")
.Update("Editing_Update", "PDFBuilderKIDs")
.Destroy("Editing_Destroy", "Grid")
)
)

Here is the rendered HTML (before those two clicks) for the autocomplete in the grid cell:

<td role="gridcell"><input id="AutoCompleteRisks1" name="AutoCompleteRisks1" type="text"><script>
 jQuery(function(){jQuery("#AutoCompleteRisks1").kendoAutoComplete({"dataSource":[{"RiskID":5,"Risk":"risk 1"},{"RiskID":6,"Risk":"risk 2"},{"RiskID":7,"Risk":"risk 3"},{"RiskID":8,"Risk":"risk 4"},{"RiskID":9,"Risk":"risk 5"},{"RiskID":10,"Risk":"risk 6"}],"dataTextField":"Risk","filter":"contains"});});
</script></td>

Here is the rendered HTML (after those two clicks) for the autocomplete in the grid cell:

<td role="gridcell" class="" data-role="editable"><span tabindex="-1" role="presentation" class="k-widget k-autocomplete k-header k-state-default k-state-hover"><input id="AutoCompleteRisks1" name="AutoCompleteRisks1" type="text" data-role="autocomplete" style="width: 100%;" class="k-input" autocomplete="off" role="textbox" aria-haspopup="true" aria-disabled="false" aria-readonly="false" aria-owns="AutoCompleteRisks1_listbox" aria-autocomplete="list"><span class="k-icon k-loading" style="display:none"></span></span><script>
 jQuery(function(){jQuery("#AutoCompleteRisks1").kendoAutoComplete({"dataSource":[{"RiskID":5,"Risk":"risk 1"},{"RiskID":6,"Risk":"risk 2"},{"RiskID":7,"Risk":"risk 3"},{"RiskID":8,"Risk":"risk 4"},{"RiskID":9,"Risk":"risk 5"},{"RiskID":10,"Risk":"risk 6"}],"dataTextField":"Risk","filter":"contains"});});
</script></td>


Thanks and will be obliged for resolution of this strange issue. I have also attached a screenshot.
Kiril Nikolov
Telerik team
 answered on 26 Jun 2014
3 answers
226 views
My mobile listview worked correctly when I had my datasource embedded in the JS on the page, but when I tested using the exact same dataSource on a seperate json file the application breaks saying "Uncaught TypeError: Cannot read property 'type' of undefined" in the Simulator debugger.
Here is the html
01.<!--Workshops page-->
02.<div data-title="Workshops" data-role="view" data-source="groupedData" id="listview-templates" data-init="workshopListViewTemplatesInit">
03.    <header data-role="header">
04.           <div data-role="navbar">
05.            <a href="#"  data-rel="back" data-align="left" data-icon="arrow-w" data-transition="slide">Back</a>
06.                <span data-role="view-title"></span>
07.            </div>
08.    </header>
09.    <ul id="custom-listview"></ul>
10.</div>
11. 
12.<script type="text/x-kendo-template" id="workshopListViewTemplate">
13.    <h3 class="item-title">#:name# <u>#:time#</u> Room #:room#</h3>
14.    <p class="item-info">#:title#</p><br>
15.    <p class="item-info2">*#:track#* #:code#</p>
16.    <!--MAY WANT TO ADD A VIBRATE ALERT FOR THE APP-->
17.    <!--<a data-role="button" class="details-link">Alert Me</a>-->
18.</script>



And here is my Javascript
01.<script>
02.function workshopListViewTemplatesInit() {
03.    var groupedData = new kendo.data.DataSource ({
04.        transport: {
05.             read: {
06.                url: "workshops.json",
07.                dataType: "json"
08.            }
09.        }
10.    });
11.    $("#custom-listview").kendoMobileListView({
12.        dataSource: kendo.data.DataSource({
13.            data: groupedData,
14.            group: "day",
15.        }),
16.    template: $("#workshopListViewTemplate").html(),
17.    headerTemplate: "<h2>#:(value)#</h2>"
18.    });
19.}
20.</script>
1.<script>
2.    var app = new kendo.mobile.Application(document.body);
3.</script>



Here is the JSON File:
01.[
02.  {
03.    "name":"Ben Lee",
04.    "title":"Preaching to the Whole Brain: Why the Right-Brain Can No Longer Be Ignored",
05.    "track":"UCRO: Intentional Leadership Development",
06.    "day":"2/22/2014",
07.    "time":"11:00am - noon",
08.    "room":"208",
09.    "code":"1"
10.  },
11.  {
12.    "name":"Phil Fuller",
13.    "title":"Steps toward Longevity in Ministry",
14.    "track":"UCRO: Intentional Leadership Development",
15.    "day":"2/22/2014",
16.    "time":"11:00am - noon",
17.    "room":"210",
18.    "code":"2"
19.  }
20.]


I have tried several different things and have gotten errors all revolving around "uncaught TypeError" and I can't figure out what I am doing wrong. Please help.

P.S I did have kendo.parseDate() for the "day" and then I used kendo.toString() to set the template title to be the Month and day and that all worked fine with the embedded dataSource as well. I took it off for this question.
Kiril Nikolov
Telerik team
 answered on 26 Jun 2014
1 answer
129 views
Hi
  Using the example here

http://www.telerik.com/forums/kendo-window-appearing-absurdly-small

If you change the content of the window then the window seems to size itself accordingly. If you set a title like below then it only shows so much before showing an ellipsis. Is this a bug/feature or is there some property which says to size itself according to the minimum size of the content or title?

var wnd = $("#window").kendoWindow({ visible: false, title: "abcdefghijk" }).data("kendoWindow");

thanks
Dimo
Telerik team
 answered on 26 Jun 2014
1 answer
312 views
I want to call a long-time running server-side job. During the process, I am going to refresh a log table in the client-side. Because of some concerns about platform and user experiences(with regard to browser, HTML5 support and etc.), as far as possible I want to get ride of WebSocket and SignalR programming. 
In this case the first solution is, in an interval, client connects to the server and read a log file and show in HTML.

I want to know is there any ready solution using KendoUI controls and functionalities?

Thanks of all,
Hedayat
Kiril Nikolov
Telerik team
 answered on 26 Jun 2014
1 answer
61 views
Hi

I am using Kendo mobile ui app builder  visual studio extension.
I am developing a Hybrid mobile application which targets all the mobile platforms  and tablets

When I installed the Trial version of the Visual studio extension when i create a  sample try to publish the app i can see android , Phone and Windows phone.However i cant see how to publish for blackberry and tablets? I have attached a screenshot , what i see when click on publish in visual studio.

Can you please help on this.

Thanks and Regards
Harshavardhan reddy
Iva Koevska
Telerik team
 answered on 26 Jun 2014
2 answers
72 views
I have two sortable areas connected to each other. Both of the areas can have sortable in there own respective area and also to each other.

There are certain elements that I want restrict for getting dragged to each other but should be allowed to be sorted in there own area.

Is it possible to achieve this with current release. If yes, please provide some guideline.
Alexander Valchev
Telerik team
 answered on 26 Jun 2014
2 answers
66 views
Hi,

I have a MVC application with kendoComboBox populated with States using knockout binding. I can open the ComboBox dropdown when my application runs on its own. However, when my application is opened inside a cross-site Telerik RadWindow, I got the "Access is denied" javascript error while trying to open the dropdown. It happens in IE10 and IE11. With the F12 debugger, it highlights the following in a Kendo file with the js error.

return u.touch?document.documentElement.clientWidth/window.innerWidth:u.pointers?(top||window).outerWidth/(top||window).innerWidth:1
File: kendo, Line: 1, Column: 20542

Is kendoComboBox supported in a cross-site RadWindow scenario? Any help will be greatly appreciated.
I'm using kendo version 2013.2.716 and MVC 4.0.

Thanks,
Jocelyn


Jocelyn
Top achievements
Rank 1
 answered on 26 Jun 2014
2 answers
182 views
Hi telerik team !

I have a problem with event filter data from my textbox like picture below :

If I input " HTML" into textbox => grid will filtering data success but else if I input " html " grid display blank 

Have you any solution for my problem. Thank a lot :)






Petur Subev
Telerik team
 answered on 26 Jun 2014
3 answers
285 views
How do I create a DropDownList with a blank item as well as multi column template?
   
var ticketType = $("#TicketType").kendoDropDownList
({
    optionLabel: " ",
    dataTextField: "TicketTypeName",
    dataValueField: "TicketTypeId",
    dataSource:
    {
        serverFiltering: true,
        type: "jsonp",
        transport:
        {
            read:
            {
                url: "../Service/IncidentManagement.asmx/GetTicketTypeList",
                contentType: "application/json; charset=utf-8",
                type: "POST"
            }
        },
        schema:
        {
            data: "d"
        }
    },
    template: "<div><span>${TicketTypeName}</span><span>${TicketTypeDescription}</span></div>"
}).data("kendoDropDownList");

The above produces the error Uncaught ReferenceError: TicketTypeDescription is not defined.

If I remove the optionLabel then it displays fine, but without the empty entry.
If I remove the template then it displays fine, but without multi column. 
Kiril Nikolov
Telerik team
 answered on 26 Jun 2014
2 answers
98 views
Hi:

I would like to use data- directives but click is not working:
<div class='k-button' data-bind='click: newProduct'><span class="k-icon k-i-plus"></span> New</div>
<script type="text/javascript">
    function newProduct(evt) {
        alert(evt.event.target.tagName);
    }
</script>
Phil

Phil H.
Top achievements
Rank 2
 answered on 26 Jun 2014
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
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
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
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
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
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?