Telerik Forums
Kendo UI for jQuery Forum
1 answer
1.0K+ views
Hi

I have a grid with a row template defined that I need to bind to the viewModel

<div id="grid" data-role="grid" data-sortable="true" data-pageable="true" data-editable= "inline" data-bind="source: gridSource" data-row-template="row-template"></div>
 
 
    <script id="row-template" type="text/x-kendo-template">
      <tr>
      <td>
      <input class='k-textbox' data-bind="value: Name, source: gridSource" width: '150px'/>
      </td>
      <td>
      <input class='k-textbox' data-bind="value: Price, source: gridSource" width: '150px'/>
      </td>
      <td>
      <input class='k-textbox' data-bind="value: UnitsInStock, source: gridSource" width: '150px'/>
      </td>
      </tr>
    </script>
 
 
   <script>   
         
      $("#grid").kendoGrid({
        dataSource: {
          schema: {
                model: {
                    fields: {
                        Name: { validation: { required: true} },
                        Price: { validation: { required: true} },
                        UnitsInStock: { validation: { required: true } }
                    }
                }
            }
        },
        columns: [
              { field: "Name", title: "Name", width: "150px" },
              { field: "Price", title: "Price", width: "150px" },
              { field: "UnitsInStock", title: "Units In Stock", width: "150px" },
          ],
      });
       
            var viewModel = kendo.observable({
                gridSource: [
                    { Name: "1Chai", Price: 18.00, UnitsInStock: 39 },
                    { Name: "2Chai", Price: 18.00, UnitsInStock: 39 },
                    { Name: "3Chai", Price: 18.00, UnitsInStock: 39 },
                    { Name: "4Chai", Price: 18.00, UnitsInStock: 39 },
                    { Name: "5Chai", Price: 18.00, UnitsInStock: 39 },
                    ],
                displayGridSource: function() {
                    var gridSource1 = this.get("gridSource");
                    return $.map(gridSource1, function(product) {
                        return "\t" + kendo.stringify(product);
                    }).join(",\r\n");
                }
            });
             
            kendo.bind($("table"), viewModel);
         
    </script>

It's 'half working' in that the first Name in the first row is bound and updates the viewModel.  After that I get an error 'Uncaught TypeError: undefined has no properties'.  Attempting to update any other text boxes result in the same error.

2 more questions:
  1. Is it possible to bind to the onFocus event?
  2. Is there a way to determine the index of the viewModel array that a row is bound to?

I want to capture the onFocus event of a text box in the row template and update the model based on the index of the row that contains the textbox.
Atanas Korchev
Telerik team
 answered on 10 Apr 2012
3 answers
913 views
Hi,

I have a kendo grid and one of the column is of type string. From server, i get data something like this: "000545". Now, before creating the grid, i am changing the datatype to number(done on client side). And then create the grid. While changing such data to int, i lose the leading zeros. And i want it to be of type number, as i want the sorting and filtering on that column. There is no way, i can modify the data on server-side as it comes from third party. Thats why, i am changing the datatype also on client side. Is there any way,that i can retain the leading zeros?

Regards,
Khushali
Alexander Valchev
Telerik team
 answered on 10 Apr 2012
1 answer
64 views
Could you please add horizontal scrollbars to the the demo code where applicable? There have been a few times where I've needed to copy paste the examples outside of the KendoUI site just to be able to see all the code.

Heres one such example:
http://demos.kendoui.com/web/combobox/api.html 

On a 1920x1200 monitor at fullscreen the right hand side is visibly being cut off.

It looks like your code viewer has the ability to enable horizontal scrollbars (2nd last example on this page):
http://www.kendoui.com/documentation/ui-widgets/combobox/overview.aspx 

Just a thought ...
Dimo
Telerik team
 answered on 10 Apr 2012
6 answers
483 views
  1. Kendo UI version: 2012.1.322 (CDN)
  2. OS: Windows 7
  3. exact browser version: Mozilla FireFox 11.0
  4. jQuery version (if registered independently from Kendo UI): v1.7.1

Scenario: using Kendo MVVM data-binding and listview template to create a form.
What works: I can reproduce the example on http://demos.kendoui.com/web/mvvm/source.html that displays data in a table.
- I can display data in a table from a page method using this template script

<tr><td data-bind="text: Message"></td><td data-bind="text: CurrentState"></td><td data-bind="text: Subject"></td></tr>

Problem: As soon as I add multiple rows into the template script, only the first data element is populated.

<tr><td data-bind="text: Message"></td></tr><tr><td data-bind="text: CurrentState"></td></tr><tr><td data-bind="text: Subject"></td></tr>
Atanas Korchev
Telerik team
 answered on 10 Apr 2012
1 answer
139 views
Hi,

We'd like to make a link open into mobile safari and not in the web app.  I know that Kendo prevents links in standalone web apps from opening Mobile Safari.

But how do you MAKE it open in mobile safari?  Does anyone have a clue?

we have tried:
1. changing the meta tag "apple-mobile-web-app-capable" to "NO" that did not work
2. change window.navigator.standalone = false.  that did not work
Petyo
Telerik team
 answered on 10 Apr 2012
3 answers
187 views
After spending a decent amount of time trying to figure out why my listview didn't work, I discovered that the following code doesn't work:

    <ul data-role="listview" data-style="inset">
        <li data-icon="toprated">
            <a>Nairobi</a>
        </li>
    </ul>

However this work:

    <ul data-role="listview" data-style="inset">
        <li data-icon="toprated"><a>Nairobi</a></li>
    </ul>

 It seems that adding a space between the <li> and the <a> makes it break, causing no icons or links to work correctly (doesn't load the view but treats it as an external link). This is in build 2012.1.406.

Just wanted to point it out for anybody else who might struggle with this. :-)


Petyo
Telerik team
 answered on 10 Apr 2012
2 answers
513 views
This may be something I have to go and figure out on my own with an external piece of code, but I'm wondering if there's anyone out there that's implemented functionality on the TreeView through when a user right clicks on a node? This has recently come up on a piece of project work and I'd like to know the best way of doing this with the Kendo UI TreeView.

Any help would be appreciated, thanks!
Miguel
Top achievements
Rank 1
 answered on 10 Apr 2012
1 answer
252 views
Hi,

I have been looking for some sort of help regarding filtering for cascading dropdown, below is my code:

var StatedataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    type: "POST",
                    url: "GetDocumentType.asmx/GetStateList",
                    contentType: 'application/json; charset=utf-8',
                    datatype: "json",
                    json: false
                },
                parameterMap: function (options) {
                    return JSON.stringify(options);
                }
            },
            serverFiltering: true,
            schema: {
                data: "d",                
                total: function (result) {
                    result = result.d || result;
                    return result.length;
                }
            }
        });


        $("#states").kendoDropDownList({
            autoBind: false,
            dataTextField: "StateName",
            dataValueField: "StateID",
            dataSource: StatedataSource
        });

        $("#countries").kendoDropDownList({
            dataTextField: "CountryName",
            dataValueField: "CountryID",
            dataSource: {
                serverFiltering: true,
                transport: {
                    read: {
                        type: "POST",
                        url: "GetDocumentType.asmx/GetCountryList",
                        contentType: 'application/json; charset=utf-8',
                        datatype: "json"
                    },
                    parameterMap: function (options) {
                        return JSON.stringify(options);
                    }
                },
                schema: {
                    data: "d",
                    total: function (result) {
                        result = result.d || result;
                        return result.length;
                    }
                }
            },
            change: function () {
                StatedataSource.filter({
                    field: "CID",
                    operator: "eq",
                    value: parseInt(this.value())
                });
            }
        });


I want to know that how server filtering exactly works? Although I specified filter , all the data from the web service returns and shown in the dropdown. Did I miss something?

Thanks,
Mangesh
Nathan
Top achievements
Rank 1
 answered on 09 Apr 2012
0 answers
141 views
Hello. I would like to inquire whether it is possible to customize the various Kendo UI widgets without using themebuilder but custom css files linked to my html page. Are there any examples I could use as reference? Thank you.
Antonios
Top achievements
Rank 1
 asked on 09 Apr 2012
1 answer
101 views

I am trying to consume a json data source that returns @ and # characters in the fieldnames.   Apparently these characters are causing the kendoGrid template creation to fail.   Any workarounds (no, I can't change the data source)?

See below:

"Results": {
     "@ViewName": "WFP_MacroDemandForecast",
     "RowSet": {
         "@ColDims": "Workforce Planning Value",
         "Rows": [
             {
                 "WorkforcePlanningMeasure": {
                     "@Name": "HC Demand",
                     "@DimName": "Workforce Planning Measure",
                     "@ID": "Headcount Demand",
                     "#text": "HC Demand"
                 },
                 "Value": "0",
                 "ChangeRate": "0",
                 "BaseYear": "0",
                 "ForecastDriver": "0",
                 "_5YearGoal": "0",
                 "Year1": "0",
                 "Year2": "0",
                 "Year3": "0",
                 "Year4": "0",
                 "Year5": "0"
             },

Steven
Top achievements
Rank 1
 answered on 09 Apr 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
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
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
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
+? 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?