Telerik Forums
Kendo UI for jQuery Forum
3 answers
158 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
382 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
216 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
337 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
113 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
5 answers
249 views
Hello
I'm using kendo grid on my mobile application. But I have 2 issues with it:
a) I would like to use internal grid scroll (this requires set heigh for grid and working when I set absolute value like 200px;) But I want to fill grid (max height to the size of scroll container. I can fill it with width without problem, however height is not working for me.

b) I have problem with flat theme on Windows Phone. There is something wrong with sizing. the settings of font size/ column sizes in grid (js, during creation) are different than on other devices. If everything looks good on iphone or android it is too large on windows phone. And all columns width, header sizes are not fitting properly. I have to use column sizes to use scrolling. There is also issue with group display on grid (on wp it shows ... where should be empty)

Regards
Dimo
Telerik team
 answered on 02 Aug 2013
4 answers
275 views
Hi,

In my root module (defined below), I call kendo.culture and it sets the culture right.
(function () {
    define(['jquery', 'amplify', 'modules/tools', 'k/kendo.router.min', 'k/kendo.view.min',
            'k/cultures/kendo.culture.fr-CA.min', 'k/cultures/kendo.culture.en-CA.min'], function ($, amplify, tools) {
1. I noticed that the culture that I set in my root module (app.js) does not propagate to other modules. Any idea why?

2. When I call kendo.culture in another module (to work around problem 1), the culture does not change (I check it by calling kendo.culture() from the console, it is always en-US. Any idea? Here is an example of how my other modules are defined (it's pretty much the same than above):

(function () {
    define(['jquery', 'amplify', 'modules/tools', 'modules/date', 'k/kendo.dataviz',
        'k/cultures/kendo.culture.fr-CA.min', 'k/cultures/kendo.culture.en-CA.min'], function ($, amplify, tools) {

Thanks,

Alex
Mihai
Telerik team
 answered on 02 Aug 2013
0 answers
261 views
Just building a mobile web site and have various content pages that have gallery content on so will use a scroll view to display the data.

Not all pages will have a gallery and each gallery is different.

I dont want to have to create x number of datasources for each gallery and then have x number of views with the different scrollview and content in.

I want to create one datasource and assign the datasource to the scrollview at runtime called from a web service with different parameters based on what content page is being called.

So here's my view code:
<div data-role="view" data-layout="mobile-tabstrip" id="tabstrip-contentr" data-show="initcontent">
    <div class="content">
        <div id="cntpagehtml"></div>
        <div data-role="scrollview" data-autobind="false" id="my-scrollview"
        data-template="scrollview-binding-template"  data-enable-pager="true">
        </div>
        <script id="scrollview-binding-template" type="text/x-kendo-template">
             <div style="width:300px;">
            <div>
                <img src="/webimages/gallery/#: Image #" class="slider" /></div>               
                <div class="title">#= Caption #</div>
            </div>
        </script>
    </div>
</div>
I have set autobind to false and not given it a data source so it doesn't bind

Heres my call to get the data passing in the section 
function GetGallery(sectionid) {
    var _GalleryDS = new kendo.data.DataSource({
        transport: {
            read: {
                url: "mobiledata.asmx/GetGallery",
                dataType: "json",
                type: "POST",
                data: { SectionID: sectionid },
                contentType: "application/json; charset=utf-8"
            },
            parameterMap: function (data, operation) {
                data = $.extend({}, data);
                return JSON.stringify(data);
            }
        },
        serverPaging: true,
        pageSize: 30,
        schema: {
            data: "d[0].Items", total: "d[0].TotalItems"
        },
        change: function () {
            $("#my-scrollview").data('kendoMobileScrollView').refresh();
        }
    });
}
I now need to somehow assign the returned datasource in my data-show event code:
function initcontent(e) {
     
    var scroller = e.view.scroller;
    scroller.reset();
    GetContent("#cntpagehtml", e.view.params.p);
 
    var Section = 0;
    switch(e.view.params.p)
    {
        case "meet-the-team":
            GetGallery(3);
            //Assign the _GalleryDS to my scrollview......
            break;
        case "design-consultancy":
            GetGallery(6);
            //Assign the _GalleryDS to my scrollview......
            break;
        case "point-of-sale":
            GetGallery(4);
            //Assign the _GalleryDS to my scrollview......
             
            break;
        default:
    }
   
};

Anyone help, is it possible? or should i be doing it a different way?

Thanks

Jon.
Jon
Top achievements
Rank 2
Veteran
 asked on 02 Aug 2013
1 answer
102 views
Hi!
In the new version of Kendo Mobile Framework the kendoMobileScrollView ininitializes normally with data-role="scrollview" attribute ( http://jsfiddle.net/papageno/c8Hm6/10/ ), but when I try to initialize programmatically: $('#sv').kendoMobileScrollView(); ( http://jsfiddle.net/papageno/c8Hm6/9/ ) error occurs.

The error can be eliminated by changing the line:
that._content = options.dataSource ? new VirtualScrollViewContent(that.inner, that.pane, that.options) : new ScrollViewContent(that.inner, that.pane);
to line:
that._content = that.options.dataSource ? new VirtualScrollViewContent(that.inner, that.pane, that.options) : new ScrollViewContent(that.inner, that.pane);

Thank you!
Petyo
Telerik team
 answered on 02 Aug 2013
2 answers
500 views
Hi Telerik,

I built a Kendo Grid that DataSourced from an EF model, which comes from a database view.
We're using stored procedures (mapped as Function Imports) to add/update records, so none of your existing examples to update the Model suits my purpose.

My first question is how can I build a custom pop up form for Add/Edit?

Secondly, how do I code up the Razor and Controller action to handle this Add/Edit from the pop up form?
For example:
Razor:
@(Html.Kendo().Grid<Models.Delegates>()
                            .Name("grid")
                            .DataSource(dataSource => dataSource
                                .Ajax()
                                .Read(read => read.Action("Delegates_Read", "Home", new { employeeId = Model.EmployeeId }))
                                .Create(create=> create.Action("Delegates_Create", "Home"))  // How to pass parameters for adding new record here?
                                
                            )
                            .Columns(columns =>
                            {
                                columns.Bound(delg => delg.EMPL_I).Title("Staff ID");
                                columns.Bound(delg => delg.EMPL_M).Title("Employee Name");
                                columns.Bound(delg => delg.POSN_X).Title("Position");
                                columns.Bound(delg => delg.DEPT_NODE_M).Title("Department");
                                columns.Bound(delg => delg.EFFT_D).Title("Effective from").Format("{0:dd/MM/yyyy}");
                                columns.Bound(delg => delg.EXPY_D).Title("Expiry date").Format("{0:dd/MM/yyyy}");
                                columns.Command(command => { command.Edit(); }).Width(70);
                            })
                            .ToolBar(toolbar => toolbar.Create())
                            .Editable(editable => editable.Mode(GridEditMode.PopUp))                            
                            .Pageable()
                        )

And in controller, can I do something like this or how else?
public ActionResult Delegates_Add([DataSourceRequest]DataSourceRequest request, 
            string employeeId, string delegatedEmployeeId, DateTime effectiveDate, DateTime expiryDate, string loginUser)
        {
            _db.AddUpdateDelegateRight(employeeId, delegatedEmployeeId, effectiveDate, expiryDate, null, null, null, null, loginUser);

            //How do I handle and relay back error messages from the above SP?
            //Nothing to return here, how do I get the view to just refresh the grid?
        }
BRS
Top achievements
Rank 1
 answered on 02 Aug 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
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?