Telerik Forums
Kendo UI for jQuery Forum
1 answer
314 views
Hello I would like to
know what the syntax for opening a partial page is. I would like to show a partial page as the content of an expanded bar. I also would like to pass the model as an argument when calling the partial page.

I unsuccessfully tried using the .Content like this

.Content(@<text>Html.PartialPage("_TestPartial2")</text>)

Another question I would like to add is:

in the .Content I was able use both html and Razor syntaxes. However I am not sure if I can use C# logical statements such as "if" or "while" statement.



Could you give me an example for both of them please?



Thanks.

Dimo
Telerik team
 answered on 02 Aug 2013
1 answer
867 views
Hi,

I can't seem to get the Scheduler datasource read operation to work.

Scheduler initialization:
self.scheduler = $('#scheduler').kendoScheduler({
                views: ["day", { type: "week", selected: true }, "month", "agenda"],
                culture: "nl-NL",
                allDaySlot: false,
                majorTick: 60,
                minorTickCount: period.CustomersPerHour != 0 ? period.CustomersPerHour : 4,
                date: new Date(period.From),
                startTime: new Date("2013/6/6 08:00"),
                endTime: new Date("2013/6/6 21:00"),
                editable: {
                    template: $("#editor").html()
                },
                dataSource: {
                    batch: false,
                    transport: {
                        read: {
                            url: "/api/appointment",
                            dataType: "json"
                        },
                        update: {
                            url: "/api/appointment/update",
                            dataType: "json"
                        },
                        create: {
                            url: "/api/appointment/create/?periodId=" + period.Id + '&periodType=' + period.$type,
                            dataType: "json",
                            contentType: "application/json"
                        },
                        destroy: {
                            url: "/api/appointment/destroy",
                            dataType: "json"
                        },
                    },
                    schema: {
                        model: {
                            Id: "Id",
                            fields: {
                                Id: {
                                    from: "Id",
                                    type: "number"
                                },
                                Title: {
                                    from: "Title",
                                    defaultValue: "No title",
                                    validation: {
                                        required: true
                                    }
                                },
                                Description: {
                                    from: "Description"
                                },
                                Start: {
                                    type: "date",
                                    from: "Start"
                                },
                                End: {
                                    type: "date",
                                    from: "End"
                                },
                                IsAllDay: {
                                    type: "boolean",
                                    from: "IsAllDay"
                                }
                            }
                        }
                    }
                },
            }).data("kendoScheduler");

WebApi code (the WebApi is set to return JSON):
[HttpGet]
public IEnumerable<Appointment> Get()
{
      return this.unitOfWork.Repository<Appointment>().Get;
}

WebApi response:
[{"$type":"Banden_Inn.Data.Entities.Models.Appointment, Banden-Inn.Data.Entities","Title":"Afspraak 1","Description":null,"Start":null,"End":null,"IsAllDay":false,"Id":1,"Created":"2013-08-02T13:58:33.853","Edited":null},{"$type":"Banden_Inn.Data.Entities.Models.Appointment, Banden-Inn.Data.Entities","Title":"Afspraak 2","Description":null,"Start":null,"End":null,"IsAllDay":false,"Id":2,"Created":"2013-08-02T13:58:33.857","Edited":null}]

Appointment entity (Base class contains id, created etc..):
public class Appointment : Base
    {
        public string Title { get; set; }

        public string Description { get; set; }

        public DateTime? Start { get; set; }

        public DateTime? End { get; set; }

        public bool IsAllDay { get; set; }
    }

What am I doing wrong? I'm missing something, but can't seem to figure out what?!
Thanks in advance!


Kind regards,
Ruud Prinsen
Jayesh Goyani
Top achievements
Rank 2
 answered on 02 Aug 2013
1 answer
45 views
Init the scheduler with Editable = false, go to Agenda View... mouse over items, notice the "X" and the hand cursor when going over the X.

Also - on the Resources example:
http://demos.kendoui.com/web/scheduler/resources.html

"attendees" is spelled wrong in the code.

atendees: { from: "Atendees", nullable: true },
Kiril Nikolov
Telerik team
 answered on 02 Aug 2013
2 answers
147 views
I am trying to build a chart using kendo mvvm but can't seem to figure out how to template the labels on the chart (category axis, value axis, and series labels).

This is ideally what I would like the chart to look like
http://jsbin.com/uvarit/4/edit

And can get the chart to render
http://jsbin.com/obojiz/2/edit

I just can't figure out how to add the label templates in. Needing to delimit a string within a string within a string, some sort of Stringception or something.

Thanks.
Robin
Top achievements
Rank 1
 answered on 02 Aug 2013
1 answer
92 views
I;m using the below code and was wondering to I need to rework my data call to include transport in order to get  virtual scrolling to work or am I missing something else?

Thanks


function LoadSubGrid_DX09(a, c) {

                       var Data = jQuery.ajax(

                           {
                               async: true,
                               type: "POST",
                               traditional: true,
                               url: "JSONService.asmx/Storefront_SubGrid_1",
                               data: "{'Sample_Type':'" + c + "', 'Disease_Site':'" + a + "'}",
                               contentType: "application/json; charset=utf-8",
                               dataType: "json",
                               serverPaging: true,
                               serverSorting: true,
                               pageSize: 100,
                               beforeSend: function () {
                                document.getElementById('subgrid1').innerHTML = "";
                                $(".fountainTextG").show();
                               },

                               success: function (responsedata) {
                                   $(".fountainTextG").hide();
                                   document.getElementById('subgrid1').innerHTML = "";
                                   $("#subgrid1").kendoGrid({
                                       dataSource: jQuery.parseJSON(responsedata.d),// new kendo.data.DataSource({data:jsonData}),
                                       toolbar: kendo.template($("#template").html()),
                                       height: 430,
                                       scrollable: {
                                           virtual: true
                                       },
                                       change: onChangeSubGrid,
                                       selectable: "multiple",
                                       sortable: true,
                                       resizable: true,
                                       groupable: true,
                                       reorderable: true,
                                       dataBinding: function () {
                                         record = 0;
                                       },
                                       columns:
                                           [
                                           {
                                               title: "&nbsp;",
                                               template: "#= ++record #",
                                               width: 75
                                           },

                                                { hidden: true, field: "DONOR_ID" },
                                                { hidden: true, field: "EVENT_ID" },
                                                { hidden: true, field: "FORM_CODE" },
                                                { hidden: true, field: "EXTERNAL_NUMBER" },
                                                { field: "DISEASE_SITE", title: "Disease Site", width: 100 },
                                                { field: "SAMPLE_TYPE", title: "Sample Type", width: 100 },
                                                { field: "SAMPLE_NUMBER", title: "Sample Number", width: 125 },
                                                { field: "COLLECTION_DATE", title: "Collection Date", width: 100, format: "{0:MM/dd/yyyy}" },
                                                { field: "SAMPLE_CATEGORY", title: "Category", width: 100 },
                                                { hidden: true, field: "PATHOLOGY_NO" },
                                                { hidden: true, field: "PROCEDURE_DATE" },
                                                { hidden: true, field: "DIAGNOSIS_DATE" },
                                                { field: "PROCEDURE_TYPE", title: "Procedure Type", width: 115 },
                                                { field: "PRIMARY_SITE", title: "Primary Site", width: 100 },
                                                { field: "HISTOLOGY", title: "Histology", width: 150 },
                                                  { field: "FORM_DETAILS", title: "Details", width: 150 },
                                                    { field: "EXTERNAL_DATA", title: "External Data", width: 150 },
                                                { field: "COMMENTS", title: "Comments", width: 100 }
                                           ]

                                   });
                               
                               },
                               error: function (xhr, ajaxOptions, thrownError) {
                                   alert(xhr.statusText);
                                   alert(thrownError);
                               }
                           });
                }

Petur Subev
Telerik team
 answered on 02 Aug 2013
3 answers
121 views
Dear all,

edit: apologies for the typo in the title

Before we start, I am using the trial version. And I just read: "You should have a valid Kendo site account with an active trial or commercial license attached to it to
post in the Premium Forum." Now me and my manager are very keen to learn in what way KendoUI could help us, and if it is suitable.

I have been looking at KenoUI for the last couple of days to furnish a webbased tool we're working on.

Now I run into the issue that when creating a grid it won't display on the page.

I configured a db file with 1 table "Client" and 3 fields "ClientId", "ClientName" and "ClientKvk".

The render function returns:
<div id="grid"></div>

<script>
      jQuery(function(){jQuery("#grid").kendoGrid({"columns":[{"field":"ClientId","title":"Client Id"},{"field":"ClientName","width":150,"title":"Client Name"},{"field":"ClientKvk","width":150,"title":"KVK number"}],"dataSource":{"transport":{"read":{"url":"index.php","contentType":"application\/json","type":"POST"},"parameterMap":function(data) {
                  return kendo.stringify(data);
              }},"pageSize":20,"serverPaging":true,"serverSorting":true,"serverGrouping":true,"schema":{"data":"data","errors":"errors","groups":"groups","model":{"fields":[{"field":"ClientId","type":"number"},{"field":"ClientName","type":"string"},{"field":"ClientKvk","type":"number"}]},"total":"total"}},"height":400,"sortable":true,"groupable":true,"pageable":true});});
    </script>

and my php file, almost exactly copied from the example php file, just changed the db configuration:

<?php
    $sRootDir = "../..";
    
    require_once $sRootDir.'/lib/Kendo/DataSourceResult.php';
    require_once $sRootDir.'/lib/Kendo/Autoload.php';

    if ($_SERVER['REQUEST_METHOD'] == 'POST') {
        header('Content-Type: application/json');
        echo "Post";
        //DB TO DO json_decode
        //Takes a JSON encoded string and converts it into a PHP variable.
        $request = json_decode(file_get_contents('php://input'));


        //DB TO DO ('sqlite:../../sample.db')
        //SQLite is a relational database management system contained in a small (~350 KB)
        //C programming library. In contrast to other database management systems, SQLite
        //is not a separate process that is accessed from the client application, but an
        //integral part of it.
        //http://www.sqlite.org/
        $result = new DataSourceResult('sqlite:../../db_res/test_client.db');

        //DB TO DO json_encode
        //Returns a string containing the JSON representation of value.
        echo json_encode($result->read('Client', array('ClientId', 'ClientName', 'ClientKvk'), $request));

        exit;
    }

    $transport = new \Kendo\Data\DataSourceTransport();

    $read = new \Kendo\Data\DataSourceTransportRead();

    $read->url('index.php')
         ->contentType('application/json')
         ->type('POST');

    $transport ->read($read)
              ->parameterMap('function(data) {
                  return kendo.stringify(data);
              }');

    $model = new \Kendo\Data\DataSourceSchemaModel();

    $ClientIdField = new \Kendo\Data\DataSourceSchemaModelField('ClientId');
    $ClientIdField->type('number');

    $ClientNameField = new \Kendo\Data\DataSourceSchemaModelField('ClientName');
    $ClientNameField->type('string');

    $ClientKvkField = new \Kendo\Data\DataSourceSchemaModelField('ClientKvk');
    $ClientKvkField->type('number');

    $model->addField($ClientIdField)
          ->addField($ClientNameField)
          ->addField($ClientKvkField);

    $schema = new \Kendo\Data\DataSourceSchema();
    $schema->data('data')
           ->errors('errors')
           ->groups('groups')
           ->model($model)
           ->total('total');

    $dataSource = new \Kendo\Data\DataSource();

    $dataSource->transport($transport)
               ->pageSize(20)
               ->serverPaging(true)
               ->serverSorting(true)
               ->serverGrouping(true)
               ->schema($schema);

    $grid = new \Kendo\UI\Grid('grid');

    $ClientId = new \Kendo\UI\GridColumn();
    $ClientId->field('ClientId')
                ->title('Client Id');

    $ClientName = new \Kendo\UI\GridColumn();
    $ClientName->field('ClientName')
              ->width(150)
              ->title('Client Name');

    $ClientKvk = new \Kendo\UI\GridColumn();
    $ClientKvk->field('ClientKvk')
              ->width(150)
              ->title('KVK number');

    $grid->addColumn($ClientId, $ClientName, $ClientKvk)
         ->dataSource($dataSource)
         ->height(400)
         ->sortable(true)
         ->groupable(true)
         ->pageable(true);

    echo $grid->render();

(DB TO DO are my initials and the parts of the code I need to look into to increase my understanding)

The obvious question is: what am I doing wrong?
Dennis
Top achievements
Rank 1
 answered on 02 Aug 2013
1 answer
313 views
We have been investigating the use of Kendo's Editor in our cloud server environment, but we require an image browser to go with it. The complication is that we are using load balancing, so we don't have one server with one relative path to upload to. We use Azure Storage blob containers to store our users' files, so any URL where files would be located would be remote.

Is there any way to use a remote URL to handle images with the image browser for the Editor?

(if I left out any information you need, please let me know)
Dimo
Telerik team
 answered on 02 Aug 2013
1 answer
157 views
I have a MultiSelect inside a Kendo Window. The user can open another Kendo Window from the Kendo Window that the MultiSelect is on. When the additional Kendo is closed the MultiSelect does not open when the user clicks in it. The user has to click in the MultiSelect and then click out and then back in again. Is this a known issue? Anything I can do to fix this behavior?
Kiril Nikolov
Telerik team
 answered on 02 Aug 2013
1 answer
289 views
Hello,

I have created this gist: https://gist.github.com/monzz/6130488

This is a Kendo Chart with selection, notice how the colours of the ranges go from one colour at the start of the range, there is the selection colour and the last segment of the range is a different colour. 

This looks right but the selection does not allow for accurate number selection like a kendo slider does. The problem I am having is that the kendo slider track
 is one selector so I can only change the entire colour and not segments like my example.

How would I go about changing the kendo slider track as per my example?

Thanks.
Iliana Dyankova
Telerik team
 answered on 02 Aug 2013
1 answer
97 views
I really love the SPA and MVVM components and I would love to make a phone gap application using them instead of using kendo mobile. The major reason is just so that we do not have to duplicate the code base, my question is whether this is advisable? Is the time spent adapting the templates between SPA/ and mobile negligible compared to the potential headache of packaging up a SPA app which as far as I can tell is completely un-documented.

Stephen.

[ UPDATE ]

We have decided to go with kendo mobile for the app. 
Petyo
Telerik team
 answered on 02 Aug 2013
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
Date/Time Pickers
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)
SPA
Filter
Drawing API
Drawer (Mobile)
Globalization
Gauges
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
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
OrgChart
TextBox
Effects
Accessibility
ScrollView
PivotGridV2
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Collapsible
Localization
MultiViewCalendar
Touch
Breadcrumb
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
Popover
DockManager
FloatingActionButton
TaskBoard
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
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?