Telerik Forums
Kendo UI for jQuery Forum
1 answer
97 views
 i want to put serveral widgets in a li ,  serveral widget in one line ,  multi lines in a listview, but i find  something wrong with it , is it my configure not right? for exmaple, only the first switch can be seen,the second is invisiable,  and the squence of widgets are not same as code below
<div data-role="view" id="foo"  data-title="trest1">
   <ul data-role="listview"  >
      <li>
            <span>test</span>
            <input id="slider" class="balSlider" value="0" />
            <a data-role="button">Foo</a>
            <input type="checkbox" data-role="switch" />       
            <a data-role="button">Foo</a>    
            <input type="checkbox" data-role="switch" />   
      <li>
             <a data-role="button">Foo</a>
             <a data-role="button">Foo</a>
            <input type="checkbox" data-role="switch" />       
            <a data-role="button">Foo</a>    
            <input type="checkbox" data-role="switch" />        
      </li>
 </ul>
Iliana Dyankova
Telerik team
 answered on 21 May 2013
2 answers
84 views
Hi Guys 

Hope someone can help, i am having the most basic of issues with the kendo grid.  I have followed the example for the Kendo MVC grid, i created a UI for MVC Web Application project and to this project added an ado .net Entity Data Model all is well.  

Following the general overview i can get this example working fine, however when i try the ajax databinding i simply cant get my grid to return any data 

i have added the action result method for the read as so 

public ActionResult Meeting_Read([DataSourceRequest]DataSourceRequest request)
        {
            using (var ola = new OnlineActionsEntities())
            {
                IQueryable<Meeting> meetings = ola.Meetings;
                DataSourceResult result = meetings.ToDataSourceResult(request);
                return Json(result);
            }
        }


i have added my grid as so 

@(Html.Kendo().Grid<AdventureWorks.Models.Meeting>()
      .Name("grid")
      .DataSource(dataSource => dataSource // Configure the grid data source
          .Ajax() // Specify that ajax binding is used
          .Read(read => read.Action("Meetings_Read", "Home")) // Set the action method which will return the data in JSON format
       )
      .Columns(columns =>
      {
          // Create a column bound to the ProductID property
          columns.Bound(meeting => meeting.ID);
          // Create a column bound to the ProductName property
          columns.Bound(meeting => meeting.Title);
      })
      .Pageable() // Enable paging
      .Sortable() // Enable sorting
)
when i build and run the grid simply never gets populated ? if i break point the Meeting_Read action result it is simply never called ??  

I must be missing something really obvious but cant see what 

Please help.

Eddie
Anthony
Top achievements
Rank 1
 answered on 21 May 2013
2 answers
553 views
Hi,

I'm using a Kendo Grid with MVVM bindings.  In my schema I have an ID field defined.  When I call the create server call a new record is created.  A structure is then returned from WS with one property which is the new records ID.  My code is:

var myDS = new kendo.data.DataSource({
                schema: {
                    model: {
                        id: "GROUP_ID",
                        fields: {
                            "GROUP_ID": {
                                type: "number"
                            },
                            "DESCRIPTION": {
                                type: "string"
                            },
                        }
                    }
                },
                pageSize: 20,
                batch: false,
                transport: {
                read:{
                        url: "/Role/GetRoles"
                },
                update: {
                    url: "/Role/Update"
                    contentType: "application/json",
                    type: "POST"
                },
                destroy: {
                    url: "/Role/Delete"
                    contentType: "application/json",
                    type: "POST",
                },
                create: {
                    url: "/Role/Create"
                    contentType: "application/json",
                    type: "POST",
                },
                parameterMap: function (data, operation) {
                    if (operation != "read") {
                        return JSON.stringify(data);
                    } else {
                        return JSON.stringify(data); //return stringified options to the server
                    }
                }
            }
            });

var vm = kendo.observable({
                groupData: myDS
            });


$("#grid").kendoGrid({
                columns: [
                    { "field": "DESCRIPTION", "title": "Group Name" },
                    { "command": "edit" },
                    { "command": "destroy" },
                ],
                pageable: true,
                navigatable: true,
                toolbar: ["create"],
                editable: { "mode": "popup", "template": $("#popup_editor").html()},               
            });

            kendo.bind($('#grid'), vm);
            

I am having several problems

1) If my web service (in this case a C# MVC controller) returns anything at all I get javascript errors, the create dialog does not disappear.   If I change it to have a void return type everything works.
2) If I edit a record after creating the Update call to my web service is never made.

I think both issues are related in that I want to be able to sync the new ID of the newly created record back with the grid. 
Keith
Top achievements
Rank 1
 answered on 21 May 2013
1 answer
452 views
I have Kendo UI Grid and it's selection mode is set true. I'd like to listen enter presses on grid if user presses enter key from keyboard. How do i get this event?

I managed to get double click to work on selected line but i would like to provide enter selection also. 
Dimiter Madjarov
Telerik team
 answered on 21 May 2013
1 answer
162 views
In the asp.net ajax editor there is a convenient javascript function
'getSelectedElement()' which returns the entire underlying HTML element in
relation to the cursor position.  There appears to be no equivalent
feature in the kendo editor.  Before i resort to digging into the sources
of the ajax editor, i was wondering if the same thing can be achieved for the
Kendo editor using the existing API?

 

getRange() and selectedHtml() seem to be relevant, but there is very little documentation
on how getRange() works and what the available node parameters are.

 

Can anyone
offer a convenient solution?
Vladimir Iliev
Telerik team
 answered on 21 May 2013
3 answers
1.7K+ views

How do you set the value of a numerictextbox client template. I've tried the following:
.Value("\\#=pollorder#")
.Value("\#=pollorder#")
.Value("#=pollorder#")
.Value(Convert.ToInt32("\#=pollorder#"))
All produce errors.

.Columns(columns => {
columns.Bound(s => s.ID).Visible(false);
columns.Bound(s => s.Order)
.ClientTemplate((Html.Kendo().NumericTextBox<int>()
.Name("order_#=ID#")
.Value("#=order#")
.Format("{0:n0}")
.Min(0)
.Max(100)
.Step(1)
.Decimals(0)
.Events(ev => ev.Change("numericBoxChanged"))
.ToClientTemplate()).ToHtmlString());
Petur Subev
Telerik team
 answered on 21 May 2013
1 answer
63 views
hi 
i have a dataSource that spits out data like this:
[{
Amount: "2140402000"
MDetail: "Budget"
Month: "Jan"
Monthnum: "1"
Year: "2013"
},
{
Amount: "2146823206"
MDetail: "Budget"
Month: "Feb"
Monthnum: "2"
Year: "2013"
},
{
Amount: "2257798847"
MDetail: "Projected"
Month: "Jun"
Monthnum: "6"
Year: "2013"
},
{
Amount: "2272474540"
MDetail: "Projected"
Month: "Jul"
Monthnum: "7"
Year: "2013"
}]

and the chart markup looks like htis
$J("#chart").kendoChart({
    dataSource: {
        data:source,
        group: {
            field: "MDetail",
            dir: "asc"
        },
        sort: [
            {field: "Year", dir: "asc"},
            {field: "Monthnum", dir: "asc"}
        ]
    },
    theme: "blueOpal",
    title: {
        text: "Total Cost of Workforce for " + year
    },
    legend: {
        position: "bottom"
    },
    seriesDefaults: {
        type: "area",
        format: "${0:0,000}"
    },
    series: [{
        field: "Amount",
        groupNameTemplate: "#= group.value # "
    }],
    valueAxis: {
        labels: {
            template: "#= kendo.format('$ {0:N0}', value / 1000000) # M"
        },
        majorUnit: 100000000,
        line: {
            visible: false
        },
        axisCrossingValue: -10
    },
    categoryAxis: {
        field: "Month",
        majorGridLines: {
            visible: false
        }
    },
    tooltip: {
        visible: true,
        format: "$ {0:0,000}"
    }
});


after feb - the 'budget' MDetail falls off to 0
and before jun - i dont know what the 'projected' MDetail does
its drawing a bunch of stuff

what im trying to achieve here is:
if there are no records for anything after feb
then dont draw anything - just cut it off 
ie dont descend to 0

and likewise if there are no records for the beginning
then dont draw anything until theres a record for the category 
ie it iwll be blank until jun and then the 'projected' numbers start drawing

how do i do this?

thanksa!

Iliana Dyankova
Telerik team
 answered on 21 May 2013
6 answers
920 views
By customer request I'm using a tooltip that only appears when explicitly clicked, and does not autohide.

The initialisation looks like:
$("#MyIdentifier").kendoTooltip({
    position: "right",
    autoHide: false,
    showOn: 'click',
    content: $('#calc1'),
    show: model.openCalculator,
    width: "224px"
});
This works like a charm, tooltips open when clicked and hide when explicitly closed (by a close button or clicking anywhere outside the tooltip).

The problem I'm encountering is that the tooltip element is within a division that has a handler for the click event too. And whenever the tooltip opens, the click handler for the surrounding div is being called too. This is undesired behaviour and I would like to know if anyone figured out a way to prevent this from happening?

You can see this behaviour in this simplified example:

http://jsfiddle.net/RedF/pgBNb/

All suggestions are appreciated!
Cheers,
 Fred
Fred
Top achievements
Rank 1
 answered on 21 May 2013
3 answers
154 views
i download  Kendo UI Complete v2013.1.514

according to http://docs.kendoui.com/getting-started/mobile/splitview   documention  , Set pane width to 300px or change the proportions to 1:3

this dosen't work ,that's why?
Kamen Bundev
Telerik team
 answered on 21 May 2013
1 answer
152 views
After the last update kendo ui web (2013.1.514) i get the error for the decimal type value.
Here are a few lines of code:

Site.Master
<script src="<%= Url.Content("~/Scripts/kendo/2013.1.514/jquery.min.js") %>"></script>
    <script src="<%= Url.Content("~/Scripts/kendo/2013.1.514/kendo.all.min.js") %>"></script>
    <script src="<%= Url.Content("~/Scripts/kendo/2013.1.514/kendo.aspnetmvc.min.js") %>"></script>
    <script src="<%= Url.Content("~/Scripts/kendo/2013.1.514/cultures/kendo.culture.ru-RU.min.js") %>"></script>
    <script src="<%= Url.Content("~/Scripts/kendo.modernizr.custom.js") %>"></script>
    <script type="text/javascript">
        //set culture of the Kendo UI
        kendo.culture("ru-RU");
    </script>
View
<a title="Сохранить (Ctrl + S)" class="k-button k-button-icontext" href="#" onclick="orderEditControlAction()" data-role="save"><span class="k-icon k-update"></span>Сохранить</a>
<form id="formOrderEdit" method="post">
        <%:Html.HiddenFor(m => m.OrderId) %>
        <%:Html.LabelFor(m => m.Order_Weight) %>
         <%:Html.EditorFor(m => m.Order_Weight) %>
         <%:Html.ValidationMessageFor(m => m.Order_Weight) %>
</form>
 
 
<script type="text/javascript">
    var validator = null;
    $(document).ready(function () {
        validator = $("#formOrderEdit").kendoValidator().data("kendoValidator");
    });
    function orderEditControlAction() {
         
        if (validator.validate()) {
            $.ajax({
                cache: false,
                type: "POST",
                url: "/Order/save",
                data: $('#formOrderEdit').serialize(),
                success: function (response, textStatus, jqXHR) {
                    //...
                },
                error: function (data) {
                    alert("Ошибка при выполнении сохранения!");
                }
            });
        }
        return false;
    }
</script>
Model
public class OrderEditViewModel
{
        [ScaffoldColumn(false)]
        Guid OrderId { get; set; }
 
        [DisplayName("Кол-во изделий в тоннах")]
        [UIHint("NumberDecimal")]
        decimal? Order_Weight { get; set; }
}
Edit template
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<decimal?>" %>
 
<%: Html.Kendo().NumericTextBoxFor(m => m)
       .Decimals(3)
       .Format("N3")
       .Step(0.001m)
       .Min(0)
       .HtmlAttributes(new { style = "width:100%" })
%>
Global.asax
Thread.CurrentThread.CurrentCulture = CultureInfo.GetCultureInfo("ru-RU");
Thread.CurrentThread.CurrentUICulture = CultureInfo.GetCultureInfo("ru-RU");
 
System.Web.Mvc.ModelBinders.Binders.Add(typeof(decimal?), new CultureAwareDecimalModelBinder());

When i try to submit this form i get validation error
Order_Weight is not valid.

I also notated that is success in IE9 (in IE10, Opera e FF work fine).


Georgi Krustev
Telerik team
 answered on 21 May 2013
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
Dialog
Chat
DateRangePicker
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
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?