Telerik Forums
Kendo UI for jQuery Forum
0 answers
178 views
Hello,

  With last Kendo UI version we can edit via  batch/inline/popup, it's great.
  Also great to have localized data on cultures directory.

  Some suggestions :
   1. could you localize your grid.js  (and others) ?

example : kendo.grid.js ln 1404 :
var container = that._editContainer = $(html)
              .appendTo(that.wrapper)
              .kendoWindow(extend({
                  modal: true,
                  resizable: false,
                  draggable: true,
                  title: "Edit",
                  visible: false
              }, options));

Title is "Edit". Sure in english it's OK, but in any other language it's not.


  2. on popup edition could you give us a way to edit model.fields instead of only "colums" ?
example :
   - i have a model with 6 fields : Name (Id), Description, IsValidated, Value, Module, Language
   - i have a table with 4 of those fields (not enought space to show them all) : Name (Id), Value, Module, Language

Actually if i want to use your default implementation of Popup edition,  i can only edit those 4 fields (Name (Id), Value, Module, Language) and not the others due to Grid.js ln 1377 binding on columns :

for (idx = 0, length = that.columns.length; idx < length; idx++)

Could you add an option to bind to model.fields instead, should make sense because it's on model.fields where we defined properties like "editable","nullable" ,etc...   or can you add an editable.columns options giving us a way to edit what we want in the order we want ?

 3. on popup edition , could you document options.editable.template  && editable.template.mode ?
we could see on source code that we can provide a template for edition, could you add sample & documentation ?

example :

<script id="popinEditResource" type="text">
      <div class="k-edit-label"><label for="Language">Langue</label></div>
      <div class="k-edit-field">#= Language #</div>
       
      <div class="k-edit-label"><label for="Name">Nom</label></div>
      <div class="k-edit-field">#= Name #</div>
       
      <div class="k-edit-label"><label for="Module">Module</label></div>
      <div data-container-for="Module" class="k-edit-field"><input data-bind="value:Module" name="Module" class="k-input k-textbox" type="text"></div>
       
      <div class="k-edit-label"><label for="Value">Valeur</label></div>
      <div data-container-for="Value" class="k-edit-field"><input data-bind="value:Value" name="Value" class="k-input k-textbox" type="text"></div>
       
      <div class="k-edit-label"><label for="Description">Description</label></div>
      <div data-container-for="Description" class="k-edit-field"><input data-bind="value:Description" name="Description" class="k-input k-textbox" type="text"></div>
       
      <div class="k-edit-label"><label for="IsValidated">Validé</label></div>
      <div data-container-for="IsValidated" class="k-edit-field"><input data-bind="checked:IsValidated" data-type="boolean" name="IsValidated" type="checkbox"></div>
   </script>

and on Grid definition :
editable: {
          mode : "popup" ,
          template: $("#popinEditResource").html()
      },

 this last sample allow to show only 4 columns on grid & edit 6 colums, but popin template has to be done manually.

thanks for all,
BloP







Blop
Top achievements
Rank 1
 asked on 17 Apr 2012
0 answers
160 views
Hi Guys,

I am exploring Keno ui. Till now its coming great.

Here is what i want to implement :
1. Want to fetch the user current position --  I am able to get the user location using Geolocation object in the HTML5.
2. Want to pass it to url of datasource -- Here is the issue as html5 Geolocation is an asynchronous call. Can you suggest how can i catch & pass the user location to data source url. I want stop execution of code until we get user location.

I am building by referring this example : http://demos.kendoui.com/mobile/listview/pull-to-refresh.html But with location based web serrvice.

Thanks
  
 
VIvek
Top achievements
Rank 1
 asked on 17 Apr 2012
4 answers
106 views
Hi
$("#grid").kendoGrid({
    columns: [
        {field: "Id", title: "â„–"},
        {field: "Text", title: "Text"}
    ],
    dataSource: {
        data: [
            {"Id":"4","Text":"hi"},
            {"Id":"7","Text":"word"}
        ],
        schema: {
            model: {
                id: "Id",
                fields: {
                    Id: {editable: false, validation: {required: true}},
                    Text: {nullable: true}
                }
            }
        }
    },
    scrollable: false,
    sortable: true,
    filterable: true,
    editable: true,
    save: function(e) {
        console.log(e);
    }
}).data("kendoGrid");
If to edit the first row, then the second one, then the first one again, save method is called several times while editing the last time
Rosen
Telerik team
 answered on 17 Apr 2012
2 answers
331 views
TreeView html:
<ul id="ouTreeview">
   <li data-expanded="true" data-ouid="0" data-isexternal="false" data-parentid="0">
      <label>Root Element</label>
   </li>
</ul>

Initializing treeview:

<script language=
"javascript" type="text/javascript">
    var ouTreeview;
    var selectedOUId;
    var selectedOUName;
    var ouTreeviewNode;
    var selectedParentId;
    var selectedOUIsExternal;
 
    function setSelectedTitleById(id) {
        selectedOUName = $(".ouLeftCol:first").find("#ouTreeview:first").find("li[data-ouid='" + id +"']:first").find("label:first").text();
    }
 
    $(document).ready(function () {
        function onSelect(e) {
            ouTreeviewNode = e.node;
            selectedParentId = $(e.node).data("parentid");
            selectedOUIsExternal = ($(e.node).data("isexternal").toString().toLowerCase() ==='true');
            selectedOUId = $(e.node).data("ouid");
            setSelectedTitleById(selectedOUId);
            $.ajax({
                url: "@Url.Action("LoadOUForm", "DashBoard")",
                type: "POST",
                cache: false,
                success: function (response) {
                    $(".ouRightCol").html(response);
                    if (selectedOUId != "ROOT") {
                        $("table.ouForm").find("input[id='ouTitle']").val(selectedOUName);
                        
                        if (selectedOUIsExternal)
                        {
                            $("table.ouForm").find("input[id='ouIsExternal']").attr("checked","checked");
                        }
                        else
                        {
                            $("table.ouForm").find("input[id='ouIsExternal']").removeAttr("checked");
                        }
                    }
                }
            });
        }
        ouTreeview = $("#ouTreeview").kendoTreeView({ select: onSelect });
    });


I need append new tree node to existing tree with my attributes.
Alex Gyoshev
Telerik team
 answered on 17 Apr 2012
5 answers
284 views

Hi, 

Is there a way to refresh the pager beneath the control? I'm evaluating the scrollview to show content in specific width, but when the device orientation is changed I'm tweaking the size of the parent container and everything works except the pager which is still showing the previous page count and selection.

I'm looking for something like $("#chart").data("kendoChart").refresh()....

Regards, 

Georgi
Alan
Top achievements
Rank 1
 answered on 17 Apr 2012
1 answer
121 views
Hello,

There's a bug with the vertical scroll when displaying more than 938 000 virtual row in a grid using Firefox.  The scroll button is not displayed and you can't scroll with the mouse wheel.

This bug occurs with de default td padding.  However, if you set the the td padding to 0 like this...

.k-grid td
{
  padding: 0;
}

the bug can be reproduced but only if you have more than 1 700 000 records (maybe less...)

Simon
Rosen
Telerik team
 answered on 17 Apr 2012
1 answer
81 views
Hi,

Just downloaded the latest and browsed to the examples\mobile\application\forms.htm page. Then page looks good on iPhone 3gs and Samsung Galaxy S, however on the Blackberry Curve 9380, the labels and fields overlap.

Another huge problem is that on iOS when I scroll up and down, the page feels sticky. I cant see the last couple of fields till I use a lot of force to reach them. This happens only when the url bar is visible. After a while when the url bar disappears in the browser, then my scrolling works fine. Of course once my url bar is back, scrolling to the bottom of the page is almost impossible.

Other examples like mobile/tabstrip/index.html scroll fine on iOS.

Any pointers would be welcome.

----------------
Edit Apr 14th

After analyzing the issue further, I realized my original post doesn't accurately describe the problem. The real reason for the problem I described above is as follows.
When kendo UI Mobile determines the height of the scrollable area, it does not take into account that the URL bar may be visible on the iphone 3gs. So as long as the URL bar is visible on the screen, I cannot scroll down to the last couple of records. When the URL bar is not visible anymore, I can scroll successfully to the bottom of the screen.

Another issue I faced was on the Samsung Galaxy S (GINGERBREAD). On the same page at examples\mobile\application\forms.htm, the 1st and 2nd fields are drop downs and it all works OK. However when I scroll down,  the 1st and 2nd fields visible on screen are something else like the date field for example. But when I touch  the 2nd visible field to input the date, the drop down pops up (which was the 2nd field before I had scrolled down). So maybe kendo is not updating the positions of controls after a scroll on android.

Thanks in advance.
A. Tauro
Petyo
Telerik team
 answered on 17 Apr 2012
0 answers
144 views
Hi Guys,

When I am executing splitter demo example from kendoui in Google chrome. I am not getting same layout which is in Demo. see in attachment.

then i used following references for js and styles and it worked fine.

<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.common.css" rel="stylesheet" type="text/css" />
    <link href="styles/kendo.default.css" rel="stylesheet" type="text/css" />
    <!--Then paste the following for Kendo UI Web scripts-->
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/kendo.web.min.js" type="text/javascript"></script>

I just want to run this demo in mobile. I have one question that How can i use same layout for iphone and i pad as the size for both the phones are different.

I got some info from forum that the Kendo UI Web Splitter can not be fully used in Kendo UI Mobile apps.

Could you please anyone suggest which layout can i use which will run on iphone and i pad.

thanks,
prashant
Prashant
Top achievements
Rank 1
 asked on 17 Apr 2012
3 answers
318 views
I have a web service that returns something similar to this
{ "RowSet": {
        "Key": "7256bd2d-879f-494b-a7c0-f0d6ed2eba84",
        "Rows": [
            { "RowNum": 1, "Name": "Fred", "Value": 123 },
            { "RowNum": 2, "Name": "Mary", "Value": 323 },
            { "RowNum": 3, "Name": "John", "Value": 732 },
            { "RowNum": 4, "Name": "Sue", "Value": 895 }
        ]
    }
}

In a data source, I bind to RowSet.Rows, but I need the Key field to be part of the rows in order to enable CRUD operations.

ideally, I would like to specify something like this:

schema: {
    data: "RowSet.Rows",
    model: {
        id: "RowNum",
        fields: {
            Key: { editable: false, type: "string", path="..\Key" or path="this.parent().Key" }
            RowNum: { editable: false, type: "number" },
            Name: { editable: true, type: "string" },
            Value: { editable: true, type: "number" },
        }
    }

Is this possible in some way?

Alexander Valchev
Telerik team
 answered on 17 Apr 2012
3 answers
336 views
In your documentation I see references to Models (plural) and the function get(), but I don't see any examples of dealing with multiple models.

So, is it possible to define multiple models for a given datasource?

More importantly, can the models be bound to a property within the schema?

i.e.

If the schema has two arrays:

{ Data :
    {
        Items: [ { ... } ],
        Persons: [ { ... } ]
    }
}

Such that Schema is bound to Data, model 1 is bound to Items, and model 2 is bound to Persons.

If this is possible, could someone post an example of how to do this?
    
Alexander Valchev
Telerik team
 answered on 17 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?