Telerik Forums
Kendo UI for jQuery Forum
2 answers
305 views
I have found a problem in the loading of the KendoUI Web ComboBox in some cases where a preceding HTML tag is empty, with no close tag.  Here is a jsfiddle showing the problem: http://jsfiddle.net/fwyeadon/q5h3X/8/

The sample contains several ComboBox controls used to accept selection criteria from the user, each placed within a div element.  When run, alert boxes are displayed at the time the first ComboBox, the div containing the second ComboBox, and the second ComboBox are loaded.  The first ComboBox loads and displays fine.  However, the second div and ComboBox do not load correctly, and do not display as a result.  It appears that the DOM elements are loaded, but the kendoComboBox settings are not.

I have found that this problem occurs only when the select element for the first ComboBox is written as an empty tag, as follows.

<select id="_cbSCField_test"/>
or
<select id="_cbSCField_test">

When the above select element is coded with an end tag, the problem disappears.

<select id="_cbSCField_test"></select>

I thought at first this might be a browser-specific problem, but it occurs on current Chrome, IE, and Firefox versions.  The error is somewhat inconsistent, as I have more complex examples along the lines of the jsfiddle sample that work fine.  It is a problem that is easy to work around once you diagnose it, but can be very difficult to find -- especially given that empty tags like the above are perfectly valid HTML5.

Please let me know if this is a bug, and if so when you will fix it.

Regards,
Fred
Fred
Top achievements
Rank 1
 answered on 22 Jan 2014
3 answers
60 views
I want to test run my app in an iphone like frame like in:

http://demos.kendoui.com/mobile/drawer/index.html

How can I do that?
Sebastian
Telerik team
 answered on 22 Jan 2014
9 answers
3.0K+ views

I am building a TabStrip where the content of the tabs is rendered from partial views. Each tab has a grid with its own datasource. I assumed that the content for each tab would not be loaded until the tab is clicked for the first time, but what I am experiencing is that all the data for all the tabs is being hit when the TabStrip is initially loaded. Am I missing something?

TabStrip declaration:

@(Html.Kendo().TabStrip()
          .Name("AssetDetails")
          .Items(tabstrip =>
          {
              tabstrip.Add().Text("Asset Review")
                  .Selected(true)
                  .Content(@Html.Partial("_AssetReview", Model).ToHtmlString());
              tabstrip.Add().Text("Closing")
                  .Content(@Html.Partial("_Closing").ToHtmlString());
              tabstrip.Add().Text("Occupancy")
                  .Content(@Html.Partial("_Occupancy").ToHtmlString());
              tabstrip.Add().Text("Eviction")
                  .Content(@Html.Partial("_Eviction").ToHtmlString());
              tabstrip.Add().Text("Property Management")
                  .Content(@Html.Partial("_PropertyManagement").ToHtmlString());
              tabstrip.Add().Text("Purchase Order")
                  .Content(@Html.Partial("_PurchaseOrder").ToHtmlString());
              tabstrip.Add().Text("Marketing")
                  .Content(@Html.Partial("_Marketing").ToHtmlString());
              tabstrip.Add().Text("Field Inspection")
                  .Content(@Html.Partial("_FieldInspection").ToHtmlString());
              tabstrip.Add().Text("Property Inspection")
                  .Content(@Html.Partial("_PropertyInspection").ToHtmlString());
          })
)

Closing partial view:

@(Html.Kendo().Grid<Atlas.Core.Objects.PortalAssetClosing>()
                                .Name("gridClosing")
                                .Columns(columns =>
                                {
                                    columns.Bound(p => p.ClosingStatusName);
                                    columns.Bound(p => p.BuyerName);
                                    columns.Bound(p => p.ContactName);
                                    columns.Bound(p => p.LenderContactName);
                                    columns.Bound(p => p.AcceptanceDate).Title("Acceptance Date").Width(100).Format("{0:MM/dd/yyyy}");
                                    columns.Bound(p => p.ActualCloseDate).Title("Close Date").Width(100).Format("{0:MM/dd/yyyy}");
                                    columns.Bound(p => p.CancelledDate).Title("Canceled Date").Width(100).Format("{0:MM/dd/yyyy}");
                                    columns.Bound(p => p.EstimatedCloseDate).Title("Estimated Close Date").Width(100).Format("{0:MM/dd/yyyy}");
                                })
                                .Sortable()
                                .Pageable(x => x.PageSizes(new[] { 25, 50, 100 }))
                                .Scrollable()
                                .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .PageSize(5)
                                    .Read(read => read.Action("GetData_Read", "AssetClosing").Data("additionalData"))
                                )
)

When the tabstrip is rendered for the first time, the selected tab is the Asset Review tab, but the datasource for the Closing tab is also being hit.
I don't want the closing tab grid to hit the database until the tab is selected for the first time.
How do I set up the TabStrip to be LoadOnDemand?





Luis
Top achievements
Rank 1
 answered on 22 Jan 2014
1 answer
249 views
<div id="splitter">
 <div></div>
 <div></div>
</div>
<script>
 $(document).ready(function() {
  $("#splitter").kendoSplitter({
   panes: [
    { contentUrl: '../../content/web/splitter/ajax/ajaxContent1.html' },
    { contentUrl: '../../content/web/splitter/ajax/ajaxContent2.html' }
   ]
  });
 });
</script>

<div id="splitter"> is <div class="k-widget k-splitter" id="vertical" style="-ms-touch-action: double-tap-zoom pinch-zoom;" data-role="splitter"> This changes.

1. class = "k-widget k-splitter" is class = "k-splitter" so I want to change.  Where do you need to modify the css file? ( $("#id").attr("class","k-splitter"); This is not desired. )

2. ajax call, How can I remove the loading image? and , order to increase the loading image size?
Kiril Nikolov
Telerik team
 answered on 22 Jan 2014
2 answers
133 views
Hi,

I'm using a customized data source (no transport) with server side paging, and I can't seem to override the total on the datasource. It always seems to be set to the length of the data (the page size). Everything else is working fine but I removed the filtering and sorting to simplify this example.

Here's a js bin that shows my issue: (edit - fixed link)
http://jsbin.com/obuGeHE/2/edit

I expected the total showing on the grid to be twenty and for the grid to show 4 pages (even though in this simplified example I would always return the same 5 rows).

Can someone help me with what I'm missing?

Thanks in advance!

Nathan
Nathan
Top achievements
Rank 2
 answered on 22 Jan 2014
2 answers
196 views
Is there a way to find out the scale of the map? For instance how many miles across the map as shown.

Thanks.
Richard
Top achievements
Rank 1
 answered on 22 Jan 2014
1 answer
210 views
I'm using MVC.

I have two fields - both IntegerTextBoxes (Html.Kendo().IntegerTextBoxFor....)

These two values are to be validated so that the value in field 1 has to be <= the value in field 2.  I've got a custom validator for this.

So supposing I specify 5 in both fields.
I then change field 1 to equal the value 6 and tab off.  The error is shown against field 1.
I then enter field 2 and tab off.  The error is also shown against field 2 now.  So both fields are showing the error.
If I adjust field 1 to equal 5 again and tab off, the error message disappears against field 1 but it remains against field 2 until I tab in and out of that too.

Is there an easy way to link these into one validation with one validation message?


Glenn
Top achievements
Rank 1
 answered on 22 Jan 2014
3 answers
336 views
I have a grid that is getting its data from XML.  I want to define types (numeric, date, etc.) on the fields.  How do I do this?  I've tried defining my model fields like CARD:  { value: 'CARD/text()', type: 'number' } but that doesn't seem to work.

var xml = '<ROWS><ROW id="1"><CARD>1</CARD><LLINE>1</LLINE></ROW><ROW id="2"><CARD>1</CARD><LLINE>2</LLINE></ROW></ROWS>';
 
$(document).ready(function() {
    $('#gridDiv').kendoGrid({
        columns: [
            {
                field: 'CARD',
                title: 'Card',
                width: 60
            },{
                field: 'LLINE',
                title: 'Line',
                width: 60
            }
        ],
        dataSource: new kendo.data.DataSource({
            type: 'xml',
            data: xml,
            schema: {
                type: 'xml',
                data: '/ROWS/ROW',
                model: {
                    id: 'id',
                    fields: {
                        id:     '@id',
                        CARD:   'CARD/text()',
                        LLINE:  'LLINE/text()'
                    }
                }
            }
        })
    });
});
Marco
Top achievements
Rank 1
 answered on 22 Jan 2014
1 answer
83 views
Does anyone have Grid style issues?
I'm running a local MVC application using IIS express (VS 2012)

Once in a while (seems random) when I refresh the page the grid comes up with no styles (see screenshots)
I'm using the inline editing example with minor changes... not loading any other javascripts...
Dimo
Telerik team
 answered on 22 Jan 2014
1 answer
107 views
Hi All,

I wanted to create a grid in my mobile project. Let me know the procedure to create a grid in Kendoui mobile.  There is no direct example for this , please guide me on this.

Thanks

Gaja Naik
Steve
Telerik team
 answered on 22 Jan 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
Drag and Drop
Application
Map
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
DropDownTree
ListBox
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
Licensing
ScrollView
Switch
TextArea
BulletChart
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
TimePicker
FloatingActionButton
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
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
LLM Kit
+? more
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?