Telerik Forums
Kendo UI for jQuery Forum
9 answers
287 views

I'm unable to load any data from my server into a grid that I'm trying to setup for simple paging without resorting to using the solution posted in the  Kendo Grid Forum that uses a jquery ajax request to directly populate the "data" member directly of the kendo.data.DataSource.  I am returning a simple json response that contains an array and a count to support paging (for example):

{"artists":[{"ID":4471,"Name":"10
Years","Gender":"Male","Category":"Pop/Rock"},{"ID":4391,"Name":"10,000
Maniacs","Gender":"Female","Category":"Pop/Rock"},{"ID":15,"Name":"10cc","Gender":"Male","Category":"Pop/Rock"},"count":2004}

This is my 1st cut at a datasource, and I've verified the server gets called and returns the json as above, but nothing displays in the grid:

var artistSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "http://localhost:53596/api/Artists?format=json",
            dataType: "jsonp"
        },
        schema: {
            data: "artists",
            total: "count",
            model: {
                fields: {
                    ID: { type: "number"},
                    Name: { type: "string"},
                    Gender: { type: "string"},
                    Category: { type: "string"}
                }
            }
        },
        page: 1,
        pageSize: 50,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true
    }
});

Following the workaround above, this datasource below works.  From what I can tell, I'm following the examples, but I'm not able to get the datasource populated properly, and I'd really appreciate any help!

// This is the ajax call that is used to populate the data
// member in the dataSource as described in the workaround in the forums:
function GetArtists() {
    var _resData;
 
    $.ajax({
        type: 'GET',
        url: 'http://localhost:53596/api/Artists?format=json',
        dataType: 'json',
        success: function (data) {
            _resData = data.artists;
        },
        data: {},
        async: false
    });
 
    return _resData;
}
 
// This datasource populates the data array via a jquery ajax call,
// bypassing the configuration as done in the original datasource.
var artistSource2 = new kendo.data.DataSource({
    data: GetArtists(),
    schema: {
        model: {
            fields: { ID: { type: "number" }, Name: { type: "string" }, Gender: { type: "string" }, Category: { type: "string" }
            }
        }
    }
 });
 
 // If I use artistSource2 (the workaround), the grid gets populated,
 // but if I use artistSource, nothing shows up in the grid.
 $('#Artists').kendoGrid({
     dataSource: artistSource2,
     height: 600,
     columns: [{ field: "ID" }, { field: "Name" }, { field: "Gender" }, { field: "Category"}],
     pageable: true
 });
Bahar
Top achievements
Rank 1
 answered on 27 Feb 2012
5 answers
687 views
Hi All,

I am trying to create a treeview with two levels.  For example, first level would be company names, and each company has one or more products (aka, second level). 

Please advice what is the best way to allow ONLY the second level nodes to be draggable (aka, follow the above example, I don't want the company nodes to be draggable).

Thanks!

JB
Alex Gyoshev
Telerik team
 answered on 27 Feb 2012
3 answers
165 views
Hi all

I'm trying to build in some nice error handling into my datasource for my Kendo grid.

error: function (e) {
    error = JSON.parse(e.responseText);
    alert(error.ErrorMessage);
    dataSource.cancelChanges();
}

When my DESTROY URL returns an error, this works fine.
But when my READ URL returns an error, e contains 3 arguments where the first object is the error object I want to use.

Why is the e object not the same?

Best regards,
Allan
Nikolay Rusev
Telerik team
 answered on 27 Feb 2012
1 answer
94 views
I have a parent grid and within my "detailInit" handler, I add a details grid.  I am trying to make both grids "navigatable" and "editable", so I set those properties to true for both grids.

However, only the parent grid is navigatable and editable, and my child grid becomes read-only, even though I set "editable" and "navigatable" properties to true during the initialization of the child grid as well.

Could someone please point me in the right direction with this?

Thank you
Nikolay Rusev
Telerik team
 answered on 27 Feb 2012
0 answers
109 views
I'm trying to link multiple combobox controls together. First, I want the second box to be disabled until the first box has a choice selected. Then, if the user goes back and changes the value in the first box, the second has to go back and get the new data. Is this possible?



Paul
Top achievements
Rank 1
 asked on 26 Feb 2012
2 answers
132 views
Hi,

I just bought Kendo UI and am rebuilding a php app using the framework and widgets. Great tools and I'm looking forward to the updates next year!

I need to be able to chain multiple widgets together using the onchange event. For example, I have an autocomplete that users select a buyer from. When a buyer is selected I want to bind a combobox or dropdown to the selected value (id) in the autocomplete.

I also need to be able to set the value of several text boxes and hidden fields based on the selection of the autocomplete and other widgets on the same page. Fairy standard jquery stuff, but I'm not sure hoiw these widgets work.

My hope is that I can use the datasource to create buyer data (json) and use the onchange event to create the widget dependencies. Can you provide a basic dependent widget example? I'm using php/mysql for the back-end and can create all the json needed.

Thanks for any help.

Thanks,

Tony
Paul
Top achievements
Rank 1
 answered on 26 Feb 2012
2 answers
157 views
Is it possible to not show a given series in the legend?  If not, I would like to put in a request for this please. 

Thank you.
Hristo Germanov
Telerik team
 answered on 26 Feb 2012
1 answer
94 views
Is there a way to set the color of all text on a chart?

Most default to black, but I need them to all be #777. There doesn't appear to be a color attribute for the text in the configuration...
Hristo Germanov
Telerik team
 answered on 26 Feb 2012
4 answers
1.0K+ views
I've following datasource and grid configuritaion :

dsDetail = new kendo.data.DataSource({
    schema: {
        type: "json",
        model: {
            id: "id",
            fields: {
                c_pmprj: { validation: { required: true }},
                c_pmchart: { validation: { required: true }},
                dt: {/*type: "date",*/ validation: { required: true } },
                slip_nro: {validation: { required: true }},
                defi: { type: "string" },
                amn: { type: "number", validation: { required: true, min: 1} },
                vat01: {type: "number"},
                vat08: {type: "number"},
                vat18: {type: "number"},
                c_zadcity: {type: "string"},
                id: {type: "number"}
            }
        }
    },
    aggregate: [{ field: "amn", aggregate: "sum" }],
    change: function (e) {
        //
    }
});    
 
gridDetail = $("#grid_pmexpense").kendoGrid({
    dataSource: dsDetail,
    //height: 250,
    //filterable: true,
    scrollable: false,
    pageable: false,
    //selectable: 'row',
    sortable: true,
    editable: true,
    navigatable: true,
    columns : [ {field: "c_pmprj", title: "Proje", width: "120px", editor: prjEditor},
                {field: "c_pmchart", title: "Masraf", width: "300px", editor: chartEditor},
                {field: "dt", title: "Belge Tar.", width: "120px", editor:dateEditor /*format: "{0:dd.MM.yyyy}"*/},
                {field: "slip_nro", title: "Belge No", width: "120px"},
                {field: "defi", title: "Açıklama", width: "220px", editor: noteEditor},
                {field: "amn", title: "Top.Tutar", width: "120px", template: '<span style="float:right">#= amn #</span>'},
                {field: "vat01", title: "KDV %1", width: "100px", template: '<span style="float:right">#= vat01 #</span>'},
                {field: "vat08", title: "KDV %8", width: "100px", template: '<span style="float:right">#= vat08 #</span>'},
                {field: "vat18", title: "KDV %18", width: "100px", template: '<span style="float:right">#= vat18 #</span>'},
                {
                    field: "id",
                    title: "İşlemler",
                    template: detailGridActionTemplate,
                    width:  "130px"}                       
                ],
 
    change : function(e) {
        //
    },
    save: function (e) {
            $("#amn_tot").data("kendoNumericTextBox").value(this.dataSource.aggregates().amn.sum);
    },
    saveChanges: function(e) {
        //alert('save');
    }
});    

But this code does not update $("#amn_tot") field with new summed value... In fact this.dataSource.aggregates().amn.sum call always return initial summed up value... How do I recalculate aggregate value? Am I missing something ?

Thanks.
Cagatay
Top achievements
Rank 1
 answered on 26 Feb 2012
2 answers
279 views
Hi Everybody,

     I am trying to bind the kendoui grid using a method on my code behind page (i.e c# page)

    My aspx page content is like beow:

    In the below code block the portion that is marked in bold is the place were we specify data source for the grid.
    My doubt is, how do i bind this grid by calling a method (that return a json or string) in my code behind page,
    without using webservices.

   how do i specify a c# method as datasource, and what possible values can that function return.

<div id="example" class="k-content">
        <div id="grid">
        </div>
        <script>
               
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            
                            transport: {
                                read: { url:"testgrid.aspx/LoadData",            
                                    dataType: "string"}

                            },
                            schema: {
                                model: {
                                    fields: {
                                        Age: { type: "number" },                                        
                                        Name: { type: "string" }
                                    }
                                }
                            },
                            pageSize: 10,
                            serverPaging: true,
                            serverFiltering: true,
                            serverSorting: true
                        },
                        height: 250,
                        filterable: true,
                        sortable: true,
                        pageable: true,
                        columns: [{
                                field:"Age",
                                filterable: false
                            },
                            
                            "Name"
                        ]
                    });
                });
            </script>
    </div>
Any one please give a suggestion to bind the kendo grid using code behind(c#) methods.

I am using visual studio 2008 and .net framework 3.5.

Thank You,
Bahar
Top achievements
Rank 1
 answered on 26 Feb 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
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
Top achievements
Rank 1
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ivory
Top achievements
Rank 1
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
YF
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Top achievements
Rank 1
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ivory
Top achievements
Rank 1
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
YF
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?