Telerik Forums
Kendo UI for jQuery Forum
5 answers
639 views
Hello im using KendoWindow and works fine but i can't find how to pass parameter, now im using MVC and passing the parameter throw slash number, is any other way?

        $(document).ready(function () {
            $("#window").kendoWindow({
                content: "AjaxContent/5",
                title: "Async Window Content"
            });
        });

Thanks
Santiago.
Phil
Top achievements
Rank 2
 answered on 29 Aug 2012
2 answers
297 views
I've seen samples that show how to set up paging with the Kendo Grid, but it does not work.   Why isn't it working?

The 'view' code looks like:
@(Html.Kendo().Grid(Model)
       .Name("AlertReport")
               .Pageable(paging => paging.PageSize(20).Position(GridPagerPosition.Bottom))

and the controller looks like:
public ActionResult Index()
        {
var output = db.ExecuteStoreQuery<Report>("Report @accountID={0}", AccountIDGet()).ToList();
                 
return View(output);
}
Support Team
Top achievements
Rank 1
 answered on 29 Aug 2012
1 answer
242 views
I'm modifying a bit of code that originally used the MVC extensions to generate a grid to just use the native code instead. I used the demo code for local data as a sample.

I'm not receiving any errors, but it's not actually working either. I'm sure I'm missing something silly but I'm not really seeing it. Maybe someone else will see what I'm not.

Here's what the page basically looks like:
<div id="#Grid"></div>
 
<script type="text/javascript">
        $(document).ready(function() {
            var page = {
                itemUrl: '/Batch/Edit/',
                data: eval('[{"CashReceipt_ID":3,"Unit_FK":1,"PaymentType_FK":1,"Amount":125.00,"AddedOn":"\/Date(1342649795203)\/","AddedBy_User_FK":null,"LastUpdatedOn":null,"LastUpdatedBy_User_FK":null,"Comment":null,"Batch_FK":1,"ItemNum":1,"PaymentNum":"1105","ReceivedFrom":"Paul Sample","Resident_FK":1,"ReceivedOn":"\/Date(1342584000000)\/","UnitNum":"113","PaymentType":"Personal Check","PaymentTypeCode":"PC ","Property_FK":1,"BatchNum":"20120331-A","FirstName":"Paul","MiddleInitial":"A","LastName":"Sample","Salutation":"Mr.","EntityState":2,"EntityKey":{"EntitySetName":"vCashReceipts","EntityContainerName":"FocusEntities","EntityKeyValues":[{"Key":"CashReceipt_ID","Value":3}],"IsTemporary":false}}]'),
                count: 1
            };
 
            var pageHandler = (function () {
                var self = this;
                this.navigatePage = function (e) {
                    var grid = this;
                    grid.select().each(function () {
                        var item = grid.dataItem($(this));
                        window.location.href = page.itemUrl + item.CashReceipt_ID;
                    });
                };
 
                $("#Grid").kendoGrid({
                    change: self.navigatePage,
                    columns: [
                        {
                            title: "Unit Num",
                            field: "UnitNum",
                            encoded: true
                        },
                        {
                            title: "Payment Type",
                            field: "PaymentType",
                            encoded: true
                        },
                        {
                            title: "Payment Num",
                            field: "PaymentNum",
                            encoded: true
                        },
                        {
                            title: "Received From",
                            field: "ReceivedFrom",
                            encoded: true
                        },
                        {
                            title: "Received On",
                            field: "ReceivedOn",
                            format: "{0:MM/dd/yyyy}",
                            encoded: true
                        },
                        {
                            title: "Amount",
                            attributes: { class: "grid-number" },
                            footerAttributes: { class: "grid-number-footer" },
                            footerTemplate: "#=kendo.toString(sum, \u0027C\u0027) #",
                            field: "Amount",
                            format: "{0:c}",
                            encoded: true,
                            aggregate: ["sum"]
                        },
                        {
                            title: "Item Num",
                            attributes: { class: "grid-number" },
                            footerAttributes: { class: "grid-number-footer" },
                            footerTemplate: "#=count#",
                            field: "ItemNum",
                            encoded: true,
                            aggregate: ["count"]
                        }
                    ],   
                    sortable: true,
                    selectable: "Single, Row",
                    scrollable: false,
                    dataSource: {
                        data: page.data,
                        aggregate: [
                            { field: "Amount", aggregate: "sum" },
                            { field: "ItemNum", aggregate: "count" }],
                        schema: {
                            model: {
                                fields: {
                                    CashReceipt_ID: { type: "number" },
                                    Unit_FK: { type: "number", defaultValue: null },
                                    PaymentType_FK: { type: "number" },
                                    Amount: { type: "number", defaultValue: null },
                                    AddedOn: { type: "date", defaultValue: null },
                                    AddedBy_User_FK: { type: "number", defaultValue: null },
                                    LastUpdatedOn: { type: "date", defaultValue: null },
                                    LastUpdatedBy_User_FK: { type: "number", defaultValue: null },
                                    Comment: { type: "string" },
                                    Batch_FK: { type: "number", defaultValue: null },
                                    ItemNum: { type: "number", defaultValue: null },
                                    PaymentNum: { type: "string" },
                                    ReceivedFrom: { type: "string" },
                                    Resident_FK: { type: "number", defaultValue: null },
                                    ReceivedOn: { type: "date" },
                                    UnitNum: { type: "string" },
                                    PaymentType: { type: "string" },
                                    PaymentTypeCode: { type: "string" },
                                    Property_FK: { type: "number", defaultValue: null },
                                    BatchNum: { type: "string" },
                                    FirstName: { type: "string" },
                                    MiddleInitial: { type: "string" },
                                    LastName: { type: "string" },
                                    Salutation: { type: "string" }
                                }
                            }
                        }                   
                    }
                });
                
                return {
                    navigatePage: navigatePage
                };
            })();
        });
 
</script>

The grid doesn't render at all - just an empty page. I'm not seeing any kinds of Javascript errors.

Not shown, but included are a reference to jQuery, kendo.web.min,js, etc. I know those references are correct because I've got another page using the same template that works (the only difference is the grid on that page gets its data via JSON).
PaulMrozowski
Top achievements
Rank 1
 answered on 28 Aug 2012
2 answers
737 views
I have a grid with inline editing enabled. The editor template for one column is a ComboBox which is linked to a dataSource containing currency values and descriptions.
/*
    Cost Grid DataSource
*/
var dataCost = new kendo.data.DataSource({
    pageSize: 10,
    transport: commonTransport({
        read: "/ProjectInfo/GetProjectCost",
        rData: { projectId: projectId },
        update: "/ProjectInfo/UpdateProjectCost",
        destroy: "/ProjectInfo/DestroyProjectCost",
        create: "/ProjectInfo/CreateProjectCost",
        cData: { projectId: projectId }
    }),
    schema: {
        type: "json",
        model: {
            id: "projCostId",
            fields: {
                "projCostId": { editable: true, type: "number" },
                "costType": { editable: true, type: "string" },
                "cost": { editable: true, type: "number" },
                "currency": { editable: true, type: "string" }
            }
        }
    }
});
 
var costGridColumns = [
    { "field": "costType", "title": "Description", "filterable": true, "sortable": true, "width": "40%" },
    { "field": "cost", "title": "Cost", "filterable": true, "sortable": true, "width": "30%" },
    { "field": "currency", "title": "Currency", "filterable": true, "sortable": true, "width": "30%", "editor": costGridCurrencyEditor }
],
costGridObject;
 
/*
    Currency ComboBox DataSource
*/
var dataCurrency = new kendo.data.DataSource({
    transport: commonTransport({
        read: "/ProjectInfo/GetCurrency"
    }),
    schema: {
        type: "json",
        model: {
            fields: {
                "currencyCode": { editable: false, type: "string" },
                "currencyDesc": { editable: false, type: "string" }
            }
        }
    }
});
 
var costGridCurrencyComboBox;
function costGridCurrencyEditor(container, options) {
    costGridCurrencyComboBox = $('<input id="costGridCurrency" data-bind="value:' + options.field + '" name="' + options.field + '" style="width:auto" />')
        .appendTo(container)
        .kendoComboBox({
            dataTextField: "currencyDesc",
            dataValueField: "currencyCode",
            filter: "contains",
            dataSource: dataCurrency
        }).data("kendoComboBox");
}
I want to configure this grid so it displays the currency description in the currency column of the table, but the value sent back and forth when editing or adding new rows is the shortened currencyCode (or in another similar instance, a numeric value).  It's easy enough to set up a ComboBox to behave this way, displaying text in the dropdown list, but submitting the value; I just want to get the grid cell functioning the same way.

I have tried to figure out how to use the schema "data" or "parse" options, or the transport "parameterMap" option, but between the documentation, the forums, posted examples, the code library, and Google, I still cannot figure out how to get it to work.

if I use parameterMap(data, operation) {} and try to output the "data" to the console with console.log(data) I receive "undefined", whereas upon returning the data, the grid receives it and operates on it perfectly fine. Because of this, I am unable to ascertain the data structure and figure out how to navigate it and modify it.

With the "data" and "parse" options under schema, there are no functional examples I can use. I found an example of using "parse" to convert a value to a date, but that's all. (here)

Does anyone have any useful examples I may have missed that will help me? Or can anyone explain how to use the "parameterMap" "data" and "parse" functions? It should be simple, but without documentation, it is not.

Thank you.
Adrian
Top achievements
Rank 1
 answered on 28 Aug 2012
2 answers
211 views
When I set a filter on the datasource used by my autocomplete widget, the filter seems to be cleared the moment you search inside the autocomplete. Is there a way to override this functionality? I have a grid that I am filtering in several different ways and I want the autocomplete data to be updated to show these other filters. Code can be found below.

    var ds = new kendo.data.DataSource({data: createRandomData(50)})

    //create AutoComplete UI component
    var autoComplete = $("#input").kendoAutoComplete({
        dataSource: ds,
        dataTextField: 'FirstName',
        filter: "startswith",
        placeholder: "Search by First Name..."
    });
    var grid = $('#grid').kendoGrid({
        dataSource: ds,
        columns: [
            {field: 'FirstName', title: 'First Name'}
        ]
    });
    
    ds.filter([{ field: "FirstName", operator: "contains", value: "La" }]);

The filter I manualy add in is automatically removed the moment I begin typing inside the autocomplete where instead I want to simply add an additional filter using the autocomplete. Any help is appreciated.

Thanks
Chris
Top achievements
Rank 1
 answered on 28 Aug 2012
1 answer
57 views
IS MVVM mode suitable for all of the Kendo controls?
Iliana Dyankova
Telerik team
 answered on 28 Aug 2012
4 answers
508 views
Hi,

I'm using the kendo grid control and I have a column that is a checkbox.  It's there a way to catch the event when the user check or uncheck the checkbox for a row ?

Regards
Hugo
Top achievements
Rank 1
 answered on 28 Aug 2012
1 answer
217 views
Does anyone have an example of how to integrate the JQuery Sparklines plugin into the Kendo Grid template? 

JQuery Sparklines: http://omnipotent.net/jquery.sparkline/#s-about 

I would think this is rather simple to do, but every time I do something like: 
template:'<span class="inlinebar">75,25,0,100</span>' 
only the values  75,25,0,100 are displayed in the grid, not the actual sparkline.

I would appreciate if someone could post a sample or solution. Thanks!
Thomas
Top achievements
Rank 1
 answered on 28 Aug 2012
0 answers
266 views
Greetings, I have a couple questions on the screen I'm developing below. if you click on on the link "76 recipients" under the recipients column.
https://dl.dropbox.com/u/1499069/code/castveryfast/wireframe/index.html

my questions:
1. the pie chart move to sit under the table when I hover my mouse on top of it. sometimes it automatically shows under the table even thought he wrapper div around it is big enough to contain it.
2. I can't get the labels of the slices to show clearly.
3. how can I use less padding on top of the chart? I'm trying to get it to align with the grid next to it.

any help is appreciated.
Chafik
Top achievements
Rank 1
 asked on 28 Aug 2012
0 answers
167 views

Hi,

I'm new to development with Kendo UI

I want to create a mobile application that needs to be deployable to ios & android.

From what i know, i'm therefore limited to HTML5, CSS and Javascript.

So i have created a project in Visual Studio that only contains those things in a first project. Then i have created a second web project that will contain the services. I have following code in an html page (see bottom).

When i run it nothing will happen... however, when i move the services into the first project and set url to "api/menu", it will work, so i know the service is configured correctly!

The below code is based on http://docs.kendoui.com/tutorials/ASP.NET/asp-net-hello-services, but i know this not really for making a mobile kendo ui application. I guess my question is really on how you can make a mobile Kendo UI application that contacts an asp.net REST service.

<!DOCTYPE html>
<html>
<head>
    <title>My App</title>   
    <link href="css/kendo.mobile.all.min.css" rel="stylesheet" />
</head>
<body>
    <div data-role="view" data-layout="default">
        <table id="menu">           
        </table>
        <script type="text/javascript">           
 
            $(function () {               
 
                // select the employees table from the page and
                // store it in a variable for later use.
                var $menu= $("#menu");
 
                // make an ajax call to the employees WebAPI service
                // to retrieve a JSON response of all the employees
                $.ajax({
 
                    // the url to the service
                    url: "http://localhost:50999/api/menu",
 
                    // the format that the data should be in when
                    // it is returned
                    contentType: "json",
 
                    crossDomain: true,
 
                    // the function that executes when the server
                    // responds to this ajax request successfully
                    success: function (data) {
 
 
                        // iterate over the data items returned from the server
                        // the index variable is the position in the colleciton.
                        // the item variable is the item itself
                        $.each(data, function (index, item) {
 
                            // append the first and last name to the table
                            $menu.append("<tr><td>" + item.Week + "</td>" +
                                          "<td>" + item.Day + "</td>");
 
                        });
 
                    }
 
                });
 
 
 
                            });
         
</script>
 
    </div>
 
    <section data-role="layout" data-id="default">
        <header data-role="header">
            <div data-role="navbar">My App</div>
        </header>
        <!--View content will render here-->
         
        <footer data-role="footer">
            <div data-role="tabstrip">
                <a href="#">Home</a>  
                <a href="about.html">About</a>
                <a href="#view2">More</a>       
            </div>
        </footer>
    </section>
 
    <script src="js/jquery.min.js"></script>   
    <script src="js/kendo.mobile.min.js"></script>
 
<script type="text/javascript">   
        var app = new kendo.mobile.Application(document.body,
        {
            transition: 'slide',
            platform: 'android'
        });
</script>
</body>
</html>
HDC
Top achievements
Rank 1
 asked on 28 Aug 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
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
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
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?