Telerik Forums
Kendo UI for jQuery Forum
1 answer
315 views
Hi ,

I am building a multi-axis chart with data generated from webservice. As a part of the data source, I am grouping data based on a field Category. Here is a sample of the data
Category: Temp, Value: 20
Category:Temp, Value:22
Category:Humidity,Value:45
Category:Humidity:Value:48

I would like to create in the chart two axis one for Temp and other for Humidity. Since the series are created automatically, I would like to know how do I assign Temp Axis to Category 'Temp' and other axis to Category 'Humidity' based on the series name or series array.

Thanks,
Vinayak
Vinayak
Top achievements
Rank 1
 answered on 23 Oct 2012
1 answer
245 views
While loading the grid, getting Object doesn't support this property or method
please find below for code,

aspx:
   $(document).ready(function () {
                $("#grid").kendoGrid({
                    dataSource: {
                        transport: {
                            read: function (options) {
                                $.ajax({
                                    type: "POST",
                                    url: "Default.aspx/GetEvents",
                                    contentType: "application/json; charset=utf-8",
                                    dataType: "json",
                                    success: function (msg) {
                                        options.success(msg.d);
                                    }
                                });
                            }
                        },
                        schema: {
                                model: {
                                    fields: {
                                        FirstName: { type: "string" },
                                        LastName: { type: "string" },
                                        City: { type: "string" }
                                    }
                                }
                            },
                            pageSize: 10
                    },
                    height: 250,
                    scrollable: true,
                    sortable: true,
                    filterable: true,
                    pageable: true,
                    columns: [
                            {
                                field: "LastName",
                                title: "LastName",
                                width: 100
                            },
                            {
                                field: "FirstName",
                                title: "FirstName",
                                width: 100
                            },
                             {
                                 field: "City",
                                 title: "City",
                                 width: 100
                             },
                            {
                                field: "Age",
                                title: "Age",
                                width: 100
                            }
                        ]
                });
            });


Web method :
 [WebMethod()]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public static string GetEvents()
    {
        EventsOrg obj = new EventsOrg { FirstName = "Test", LastName = "11/22/1234", City = "tst", Age = "10" };
        List<EventsOrg> objEvent = new List<EventsOrg>();
        objEvent.Add(obj);
        EventsOrg obj1 = new EventsOrg { FirstName = "Test 1", LastName = "1/12/1993", City = "tst 1", Age = "10" };
        objEvent.Add(obj1);

        JavaScriptSerializer js = new JavaScriptSerializer();
        string strJSON = js.Serialize(objEvent);
        return strJSON;

        //  return new JavaScriptSerializer().Serialize(objEvent);
        // return objEvent;
    }

refrences JS :
  <link href="styles/examples-offline.css" rel="stylesheet" />
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
   <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/kendo.web.min.js" type="text/javascript"></script>
    <script src="js/console.js" type="text/javascript"></script>
    <script src="js/jquery-1.4.1.js" type="text/javascript"></script>

Please help me to identify the error for application
John
Top achievements
Rank 1
 answered on 23 Oct 2012
0 answers
91 views
Hi All,

I am using the kendo MVVM much like i've been using knockoutjs for the last 2 years.

I see there are some issues or limitations of the custom bindings when it comes to binding init events to template properties.

So.. can i use this validation framework in an MVVM scenario with templates?

I have a table whose rows are templated.. the items are bound to a collection/Array inside my viewModel. I need validation on inputs inside the rows.

ANY information.. examples.. demos much appreciated.
Rich
Top achievements
Rank 1
 asked on 22 Oct 2012
1 answer
997 views

How can I remove "items per page" Label using PageSizes?

@(Html.Kendo().Grid<Model>(.Name("Grid")
 .Columns(columns =>
 {
  columns.Bound(p => p.DataId).Visible(false);
  columns.Bound(p => p.Data2).Width(200).Title("Data2");
  columns.Bound(p => p.Data3).Width(200).Title("Data3");
  columns.Bound(p => p.Data4).Width(100).Title("Data4");
  columns.Bound(p => p.IsTrue).Width(50)
       .HtmlAttributes(new {style = "text-align:center"})
       .ClientTemplate("<input type='checkbox' disabled='disabled' name='Discontinued' <#= IsTrue? \"checked='checked'\" : \"\" #> ").Title("IsTrue");
 })
 .Pageable(paging => paging
      .Input(false)
      .Numeric(true)
      .Info(false)
      .PreviousNext(true)
      .PageSizes(new int[]{25, 50,100})
      .Refresh(false)
   )
   
 .DataSource(dataBinding => dataBinding.Ajax().PageSize(25).Read("GridData", "Grid", new { someId = Model.SomeId }))
 .Resizable(resize => resize.Columns(true)).Scrollable()

)

Justin
Top achievements
Rank 1
 answered on 22 Oct 2012
2 answers
326 views
I'm trying to bind to a custom transport and get paging to work. Essentially I have a function that retrieves a set of records and places them on a view model as a list. I'm overridding the total count of the grid by retrieving it from a column on the data, like this:

dataSource: new kendo.data.DataSource({
                        data: this.results,
                        schema: {
                            data: function (data) {
                                return data;
                            },
                            total: function(data) {
                                if (data.length > 0) {
                                    return data[0].rowCount;
                                }
                                return 0;
                            },
                            type: "json"
                        }
                    }),

I have two issues, however. First is that when I set the total count, I get "NaN - NaN of 1000 total items" on the grid. Not sure where the NaN is coming from. Second, I need to fetch the next page when the user interacts with the paging control. Again, I'm not pointing the kendo grid to an API end point, I'm fetching that data myself and just binding to a list. Is there a way I can intercept the paging event so that I can load the next page of data and refresh the binding for the grid?
sigfrido
Top achievements
Rank 1
 answered on 22 Oct 2012
0 answers
101 views
hi,
I would like the entire grid div to have the alternating rows even if the grid is empty.
Is there a way, other than adding empty objects and binding it to the grid.
also i would like to bind the window resize event to it.

Preethy
Top achievements
Rank 1
 asked on 22 Oct 2012
2 answers
188 views
We're running an webapp inside Facebook (ASP.NET MVC3). In this app we're using KendoUI upload control and all works nice in the browsers except for IE9 that says: 

Access is denied.
kendo.upload.js?t=634716582040000000, line 1032 character 17


Line 1032 is the line form[0].submit(); (line 6 beginning from the end) below.

if (!upload.trigger(UPLOAD, e)) {
    upload._hideUploadButton();
 
    iframe.appendTo(document.body);
 
    var form = iframe.data("form")
        .appendTo(document.body);
 
    e.data = $.extend({ }, e.data, getAntiForgeryTokens());
    for (var key in e.data) {
        var dataInput = form.find("input[name='" + key + "']");
        if (dataInput.length == 0) {
            dataInput = $("<input>", { type: "hidden", name: key })
                .appendTo(form);
        }
        dataInput.val(e.data[key]);
    }
 
    upload._fileAction(fileEntry, CANCEL);
    upload._fileState(fileEntry, "uploading");
 
    iframe
        .one("load", $.proxy(this.onIframeLoad, this));
 
    form[0].submit();
} else {
    upload._removeFileEntry(iframe.data("file"));
    this.cleanupFrame(iframe);
    this.unregisterFrame(iframe);
}
Stéphane
Top achievements
Rank 1
 answered on 22 Oct 2012
1 answer
188 views
Because the kendo ui upload widget doesn't play nicely with my layout and is extremely difficult to customize, I have created my own button to trigger the kendo upload input element: onClick="$('#upload').click()". This works in chrome and firefox, but in IE it throws a "Access is Denied" error. Clicking the upload widget doesn't throw the error. Is there any workaround for this? A method within the widget that triggers the file selection dialog?

Thanks
Matt
Stéphane
Top achievements
Rank 1
 answered on 22 Oct 2012
4 answers
266 views
Hello,



I have a grid that uses popup editing with a custom template. In this custom edit template I have a grid with child entities. In the edit event handler of the parent grid I set the datasource of the child grid with the appropriate filter for the parent row. I can see that the child entities are loaded ok. I want this child grid to be editable. Every row in the child grid shows edit and destroy commands and the child grid toolbar has a create command. However, when I click on the create, edit or destroy buttons, nothing happens. Has anybody seen this before? Should I add a code sample?



cheers



Remco
Guillaume
Top achievements
Rank 1
 answered on 22 Oct 2012
0 answers
177 views
Hi, my grid has a costum popup edit template where I want to be able to manage a list of subitems. I thought I would use another grid inside the edit tempate but I get an error "Invalid Template". Is it supported to have another grid inside an edit template of a parent grid? If so could I get an example of how to acheive it?
Thanks
Guillaume

My template looks like this:

<script id="popup_editor" type="text/x-kendo-template">
   <div class="k-edit-label">
    <label for="Title">Title</label>
   </div>
            <input type="text" class="k-input k-textbox" name="Title" data-bind="value:Title">

   <div class="k-edit-label">
    <label for="ExpiryDate">Expiry Date</label>
   </div>
   <input type="text"
    name="ExpiryDate"
    data-type="date"
    data-bind="value:ExpiryDate"
    data-role="datepicker" />

            <div id="subitemsGrid"></div>
            $("#subitemsGrid").kendoGrid(##removed code to get list of subitems in grid##);
  </script>

Guillaume
Top achievements
Rank 1
 asked on 22 Oct 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
Hiba
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Rakhee
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Hiba
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Rakhee
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?