This is a migrated thread and some comments may be shown as answers.

Problem binding datasource to kendo grid

0 Answers 139 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Gurudath
Top achievements
Rank 1
Gurudath asked on 24 Sep 2012, 06:49 AM
Hello... First of all thanks to Kendo team for providing kendo controls ..were much helpful to me and my team. I have less experience on client side scripting and I thought I will use kendo grid to start with presentation of data.. Of late I came across this problem.....would appreciate your help in advance....

I am trying to bind json objects to kendo grid and really not sure if the binding is happening in the background. Json request returns the data properly which I can check it from the firebug but binding does not happen. Just to check if it is trying to bind or not .... I tried to give a wrong field name still I don't see any reference error for the wrong column name. I have attached databound event to the grid with alert message and it always alerts the message irrespective of grid binding. Can you please check the code syntax below and let me know if there is anything that I am missing. Also, can you please let me know how to troubleshoot these kind of problems in future...

function BindData() {
                    sharedDS.transport.options.read.data = {
                        cpid: $find("<%= cboContentProviderDetails.ClientID %>").get_value(),
                        startdatefrom: FormatToProperDate($find("<%= rdpStartDateFrom.ClientID %>")),
                        startdateto: FormatToProperDate($find("<%= rdpStartdateTo.ClientID %>")),
                        enddatefrom: FormatToProperDate($find("<%= rdpEndDateFrom.ClientID %>")),
                        enddateto: FormatToProperDate($find("<%= rdpEndDateTo.ClientID %>")),
                        alstatus: $find("<%= rdoStatus.ClientID %>").get_value(),
                        isexclusive: $find("<%= cboTypeOfCopyright.ClientID %>").get_value(),
                        territories: '',
                        customers: '',
                        services: '',
                        agreementid: $find("<%= cboAgreements.ClientID %>").get_value(),
                        allterritories: $('input[id$=chkAllTerritories]').is(':checked'),
                        allservices: $('input[id$=chkAllCustomers]').is(':checked'),
                        allcustomers: $('input[id$=chkAllServices]').is(':checked'),
                        alname: $('input[id$=txtName]').val(),
                        remdaysfrom: $('input[type=text][id$=txtNumericDaysFrom]').val(),
                        remdaysto: $('input[type=text][id$=txtNumericDaysTo]').val(),
                        contentid: $('input[type=text][id$=txtContentCP]').val()
                }
                sharedDS.page(1);
            }
            $("#comboBox").kendoComboBox({
                dataTextField: "text",
                dataValueField: "value",

                change: function (e) {
                    var grid = $("#grid").data("kendoGrid");
                    grid.dataSource.pageSize(parseInt(this.value(), 10));
                }
            });

            var sharedDS = null;



            function BindGrid() {    
            var _Url = '<%=  ResolveUrl("~/Forms/AuthorizationLetter/SearchAuthorizationLetterHandler.ashx?requesttype=Search") %>';       
            sharedDS = new kendo.data.DataSource({  
                     
                    schema: {
                     data: "rows",
                     total: "total",
                      model: {
                            id: "ALId"
                            }
                 },
                    serverPaging : true,   
                    pageSize: 20,                     
                        transport: {
                            read: { url: _Url,
                                datatype: 'json',
                                data: {
                                    cpid: $find("<%= cboContentProviderDetails.ClientID %>").get_value(),
                                    startdatefrom: FormatToProperDate($find("<%= rdpStartDateFrom.ClientID %>")),
                                    startdateto: FormatToProperDate($find("<%= rdpStartdateTo.ClientID %>")),
                                    enddatefrom: FormatToProperDate($find("<%= rdpEndDateFrom.ClientID %>")),
                                    enddateto: FormatToProperDate($find("<%= rdpEndDateTo.ClientID %>")),
                                    alstatus: $find("<%= rdoStatus.ClientID %>").get_value(),
                                    isexclusive: $find("<%= cboTypeOfCopyright.ClientID %>").get_value(),
                                    territories: '',
                                    customers: '',
                                    services: '',
                                    agreementid: $find("<%= cboAgreements.ClientID %>").get_value(),
                                    allterritories: $('input[id$=chkAllTerritories]').is(':checked'),
                                    allservices: $('input[id$=chkAllCustomers]').is(':checked'),
                                    allcustomers: $('input[id$=chkAllServices]').is(':checked'),
                                    alname: $('input[id$=txtName]').val(),
                                    remdaysfrom: $('input[type=text][id$=txtNumericDaysFrom]').val(),
                                    remdaysto: $('input[type=text][id$=txtNumericDaysTo]').val(),
                                    contentid: $('input[type=text][id$=txtContentCP]').val()
                                }
                            }
                        },
                    });
             $("#grid").kendoGrid({
                    dataSource: sharedDS,
                    autoBind: false,
                     dataBound: function(e) {
                      //  alert('');
                     },
                    scrollable: false,
                    sortable: true,
                     pageable: {
                            refresh: true,
                            pageSizes: [10, 15, 20, 50]

                        },
                    columns: [
                            {
                                field: "ALId",
                                title: "ALId"
                            }
                        ]
                });
            }

$(document).ready(function () {
                BindGrid();
});

I call BindData() method each time when user prefers to search.

No answers yet. Maybe you can help?

Tags
Grid
Asked by
Gurudath
Top achievements
Rank 1
Share this question
or