Telerik Forums
Kendo UI for jQuery Forum
1 answer
146 views
I am using an external template and binding it my javascript.   In IE8 I don't get my template.  What am I missing to make this work in IE8?


Javascript:
var data = kendo.template($('#contactTmpl').html());
 $('[data-iaform]').find('form').replaceWith(data);

HTML:
 <title>{$site_title}</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<div class="class-Price-Quote-form" data-iaform="" >
       <form>
       </form> 
</div>

Kendo Template:
<script id="contactTmpl" type="text/x-kendo-template">

    <form class="contactTmpl" data-iacuform="">
        <h4>Contact Name<span class="k-invalid-msg" data-for="name"></span></h4>
        <input type="text" data-bind="value: name" name="name" placeholder="Full name" required data-required-msg="Please enter your name." />
        <h4 >Title<span class="k-invalid-msg" data-for="title"></span>
        <input type="text" data-bind="value: title" name="title" placeholder="Your title" data-required-msg="Please enter your title." /></h4>
        <h4>Email<span class="k-invalid-msg" data-for="email"></span></h4>
        <input type="email" data-bind="value: email" name="email" placeholder="e.g. myname@example.net"  required data-required-msg="Please enter your                 email."  validationMessage="Please enter email in following format: myname@example.net" />    
        <h4>Organization<span class="k-invalid-msg" data-for="organization"></span></h4>
        <input type="text" data-bind="value: organization" name="organization" required data-required-msg="Please enter your organization." placeholder="Your organization" />
        <h4>Phone</h4>
        <input type="tel" data-bind="value: phone" name="phone" />
        </form>
</script>
Petyo
Telerik team
 answered on 09 Apr 2014
1 answer
234 views
Hello ,
Can you provide us with project for master-datial CRUD operations for kendo web grid (CRUD for both master and detail)

Thanks
Alexander Valchev
Telerik team
 answered on 09 Apr 2014
8 answers
224 views
Hey,
I have a problem with Kendo grid css over google chrome, please check the attached files which show the problem 
Dimo
Telerik team
 answered on 09 Apr 2014
3 answers
678 views
Hi Guys

I am new to Kendo MVVM and trying to decipher a way to correctly implement the architecture. I have read many posts and put together a working implementation which I would like to get your take on:

My view.
define(['kendo', 'data', 'utils', 'config'], function (kendo, data, utils, config) {
   var _runInit = false;
   var browseViewModel = kendo.observable({
      browseSource: data.browseServices(),
      itemClick: function (e) {
         window.localStorage["RequestId"] = e.dataItem.RequestId;
         utils.navigate('details.html', 'slide');
                                           
      }
   })
 
   return {
      init: function (initEvt) {
 
         //kendo.bind($('#serviceDetailsListview'), browseViewModel, kendo.mobile.ui);
 
      },
      beforeShow: function (beforeShowEvt) {},
      show: function (e) {
         console.log(e.view.params.fromView);
         if (e.view.params.fromView != "detailsPage") {
            if (!_runInit) {
               kendo.bind($('#serviceDetailsListview'), browseViewModel, kendo.mobile.ui);
               _runInit = true;
            } else {
               browseViewModel.set("browseSource", data.browseServices());
            }
         }
 
      },
      viewModel: browseViewModel
   }
});

Data Source:

var browseServices = function () {
 
    var browseDataSource = new kendo.data.DataSource({
       requestStart: function (e) {
 
          utils.showLoading();
       },
       requestEnd: function (e) {
          utils.hideLoading();
       },
       error: function (e) {
          var xhr = e.xhr;
          var statusCode = e.status;
          var errorThrown = e.errorThrown;
          alert("A error has occured fetching data from the server.");
       },
       transport: {
          read: {
             url: config.browseUrl,
             dataType: "json",
             cache: false
          },
          parameterMap: function (options, type) {
 
             var theSettings = utils.getCurrentSettings();
             return {
                phonelat: window.localStorage["gpsLat"],
                phonelon: window.localStorage["gpsLong"],
                assetId: window.localStorage["AssetId"],
                groupId: window.localStorage["GroupId"],
                serviceId: window.localStorage["ServiceId"],
                range: theSettings.RequestRange
 
             }
          }
       },
       change: function (e) {
          var data = this.data();
 
       },
       schema: {
          data: function (response) {
 
             storage.persistServicesCollection(response.Collection);
             return response.Collection;
          }
       }
    });
    return browseDataSource;
 
 }

HTML:

<div data-role="view" data-layout="child" data-title="Service Overview" data-show="app.browseView.show" id="serviceDetailsView">
   
<ul data-role="listview" id="serviceDetailsListview" data-bind="source: browseSource, click: itemClick" data-template="templateServiceDetails" ></ul>
 
<script type="text/x-kendo-template" id="templateServiceDetails">
     <div class="product">
    <a data-role="detailbutton" data-style="detaildisclose"></a>
      #if (Image != null){#
     <img class="pullImage" src='#: Image.ImageUrl#' />
      #}else{#
       <img class="pullImage" src='images/marker.png' />
        #}#
    <h3>${Address} </h3>
    <p>Range: ${Range} km</p>
    <p>Status: ${Status}</p>
    <p>Created: ${DateCreated}</p>
    </script>
</div>
 
</div>


It seems to work (as in I am getting the expected result), however, I am not sure if this is the correct implementation? The idea is to refresh the view from the remote source onShow?

Is there a better way to design? Am I missing something?

Thanks in advance
Luke



Kiril Nikolov
Telerik team
 answered on 09 Apr 2014
2 answers
109 views

When using the Toolbar method, IE8 flashes the browser vertical scrollbar for a brief moment after the grid is loaded the first time.  Without the Toolbar method, the scrollbar is not flashed.  Is this a browser/javascript issue, or a Kendo issue?

@(Html.Kendo().Grid<HelpController.AdministrationHelpIndexGridViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(h => h.Id)
            .Visible(false);
        columns.Bound(h => h.Name)
            .Width(400);
        columns.Bound(h => h.Description)
            .Width(400);
        columns.Bound(h => h.Id)
            .Width(500)
            .ClientTemplate(Html.ActionLink("#=LinkText#", "ClickThrough", "Help", new { Id = "#=Id#", area = "" }, new { target = "_blank" }).ToHtmlString());
        columns.Bound(h => h.DisplayOrder)
            .Width(50);
        columns.Command(command => { command.Edit(); command.Destroy(); })
            .Width(200);
    })
    .HtmlAttributes(new { style = "width: 1550px;" })
    .ToolBar(toolbar => toolbar.Template("<a class=\"k-button k-button-icontext\"><span class=\"k-icon k-i-plus\"></span>Add a help link</a>"))
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Events(events => events.Edit("onEdit"))
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Events(events => events.Error("error_handler"))
        .Model(model => model.Id(h => h.Id))
        .Read(read => read.Action("Index_Read", "Help", new { area = "Administration" }))
        .Update(update => update.Action("Index_Update", "Help", new { area = "Administration" }))
        .Destroy(update => update.Action("Index_Destroy", "Help", new { area = "Administration" }))
        .Events(events => events.RequestEnd("onRequestEnd")))
)
Chevron Phillips Chemical Co
Top achievements
Rank 1
 answered on 08 Apr 2014
1 answer
297 views
Hi,

Please see my chart attached. It is very long so I have made it's parent container overflow for scroll, however I need a way to identify to the user what each trend line is.

I can't seem to find the css class for the legend, I would like to absolutely position it outside of the graph perhaps. My other option would be to somehow attach some text to the end portion of the each trendline, but I'm not sure how this would be done. I could not figure out how to attach a note to the very last element in a series either.

Any help with any of these issues would be greatly appreciated!

Thanks!

Iliana Dyankova
Telerik team
 answered on 08 Apr 2014
1 answer
175 views
Hi,

Is it not possible to set the seriesDefaults options via the chart.options syntax?

I wish to be able to change multiple chart options after initialisation prior to refreshing the datasource, and many function correctly such as:

chart.options.legend.labels.color = "blue";
chart.dataSource.read(data);

However setting anything related to seriesDefaults has not effect:
chart.options.seriechart.options.seriesDefaults.markers.visible = true;
chart.options.seriesDefaults.markers.size = 30;
chart.options.seriesDefaults.markers.border.width = 5;
chart.dataSource.read(data);

Is it not possible to globally change series options such as label visibility? I wish to able to changed these options globally rather than refresh the datasouce and loop through each chartSeries setting options individually.

I have tried the chart.refresh() and chart.redraw() methods after the dataSource is refreshed.

Any help would be appreciated.

Hristo Germanov
Telerik team
 answered on 08 Apr 2014
3 answers
477 views
I have a scheduler that I am trying to displaying some events on. I have created a JSBin that shows what I am trying to do. The actual datasource has a transport defined that hits my webservice but I replaced the transport with the data that is actually returned and got the same results.

There should be some events displaying. Admittedly, this is my first scheduler. I started with copy/paste from the demos and tweaked from there. I am at a complete blank as to why those events are not showing up. The best I can think is that there must be a deserialization issue like maybe with the date format or something but that is, of course, a guess.

Any help would be greatly appreciated!
Alexander Popov
Telerik team
 answered on 08 Apr 2014
1 answer
129 views
Is it possible to use the kendo Editor widget for editing a field in the grid popup? Tried without success to figure this out.

Thanks,
Gary
Alexander Popov
Telerik team
 answered on 08 Apr 2014
13 answers
163 views
So I was excited when I saw references to this on the forums, as It's been something I've wanted for a while now (pagination for local data). Unfortunately I've run into issues getting this working on an existing app.

Please correct me if I'm wrong but all I should need to do is add the property to the listview declaration and have the full results as the data property of the datasource no?

The result I'm getting it all the <LI>s are stacked on top of each other. (Yes i'm using the latest Kendo files)

Heres the HTML snippet of my view

<div id="items-view" data-role="view" data-title="Blocks & Items" data-layout="default-layout" data-init="app.items.init" data-show="app.items.showView">
    <ul data-role="listview" data-style="inset" data-type="group">
        <li>
            <ul class="ul-content">
                 
            </ul>
        </li>
    </ul>
</div>

Heres the javascript for it:

var data = app.items.filterLimit(1000, app.items.data);
 
$("#items-view ul.ul-content").kendoMobileListView({
    dataSource: new kendo.data.DataSource({
        data: data
    }),
    template: "<li>#: name #</li>",
    endlessScroll: true,
    virtualViewSize: 50
});

data variable is a giant json array of items. somewhere in the 500 count range. It's correct, It's the same data i was using previous (looping over and manually appending LI's)

Is there another step that I am missing perhaps? Or am I crazy and this should be working? I'll attach a screenshot of what it's doing....

Kiril Nikolov
Telerik team
 answered on 08 Apr 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
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
ScrollView
Switch
TextArea
BulletChart
Licensing
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
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
Bohdan
Top achievements
Rank 3
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Elliot
Top achievements
Rank 1
Iron
Iron
Iron
Sunil
Top achievements
Rank 1
Cynthia
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Bohdan
Top achievements
Rank 3
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Elliot
Top achievements
Rank 1
Iron
Iron
Iron
Sunil
Top achievements
Rank 1
Cynthia
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?