Questions on Kendo UI for jQuery Forum

0 answers

48 views

[Issue] When selecting a date from a different month than the current one, time resets to 12:00 (00:00)

Hi,

I have noticed that when selecting a date in a datetimepicker that is from a different month than the current one, it automatically defaults the time to 00:00. This thing does not happen when changing the date with one from the current month.

Is this the intended behavior? This behavior can be seen also in the demo for the Date/Time Picker.

Thanks and have a nice day,

DatePicker

asked on 11 Oct 2012

0 answers

88 views

Paging selection box not working.

I cannot select the number of items shown on each page with mouse clicks.
I can however select the drop down and move the selection via arrow keys.

My code:

$(document).ready(function () {
    $("#grid").kendoGrid({
        dataSource: {
 
            type: "json",
 
            transport: {
                read: {
                    url: '<%= Url.Action("GetDepartmentOffers", "Projects") %>',
                    dataType: "json",
                    type: "POST",
                    data: {
                        departmentId: 1,
                        filter: 'all'
                    }
                }
            },
            schema: {
                model: {
                    fields: {
                        status: { type: "string" },
                        ResponsibleUserName: { type: "string" },
                        OfferNumber: { type: "string" },
                        DueDate: { type: "date" },
                        ContactPhone: { type: "string" },
                        CompanyName: { type: "string" },
                        ContactPerson: { type: "string" },
                        ContactEmail: { type: "string" },
                        Description: { type: "string" },
                        SalesPrice: { type: "string" },
                        Coverage: { type: "string" }
                    }
                },
                total: function () { return 4677; }
            },
            pageSize: 50,
            serverPaging: false,
            serverFiltering: false,
            serverSorting: false
        },
        autoBind: true,
        groupable: true,
        sortable: true,
        reorderable: true,
        resizable: true,
        pageable: {
            messages: {             // To be translated
                display: "kendo.data.DataSource - {1} of {2} items",
                empty: "No items to display",
                page: "Page",
                of: "of kendo.data.DataSource",
                itemsPerPage: "visninger på hver side.",
                first: "Gå til første side.",
                previous: "Gå til forrige side.",
                next: "Go to the next page",
                last: "Go to the last page",
                refresh: "Refresh"
            },
            refresh: true,
            pageSizes: true,
            pageSizes: [10, 20, 50, 100]
        },
        columns:
        [
            {
                field: "status",
                width: 90,
                title: '<%= Global.State %>'
            }, {
                field: "",
                width: 90,
                title: '<%= Global.Actions %>'
            }, {
                field: "ResponsibleUserName",
                width: 100,
                title: '<%= OffersOverview.ColumnHeaderUser %>'
            }, {
                field: "OfferNumber",
                width: 100,
                title: '<%= OffersOverview.ColumnHeaderOfferNumber %>'
            }, {
                field: "DueDate",
                width: 100,
                title: '<%= Global.DueDate %>',
                format: "{0:" + settings.dateFormat + "}"
                //format: //"{0:MM/dd/yyyy}"
            }, {
                field: "ContactPhone",
                width: 100,
                title: '<%= Global.ContactPhone %>'
            }, {
                field: "CompanyName",
                width: 100,
                title: '<%= Global.Company %>'
            }, {
                field: "ContactPerson",
                width: 100,
                title: '<%= Global.ContactPerson %>'
            }, {
                field: "ContactEmail",
                width: 100,
                title: '<%= Global.ContactMail %>'
            }, {
                field: "Description",
                width: 100,
                title: '<%= Global.Description %>'
            }, {
                field: "SalesPrice",
                width: 100,
                title: '<%= Global.SalesPrice %>'
            }, {
                field: "Coverage",
                width: 100,
                title: '<%= Global.Coverage %>'
            }
        ]
    });
});

Any ideas? :)

Grid

asked on 11 Oct 2012

2 answers

297 views

can we use kendo in drupal???

Hi friends,

Please suggest me .. can we integrate kendo ui features in drupal?
Help me.

Regards
Divya

General Discussions

answered on 11 Oct 2012

2 answers

127 views

Paging inactive on first load

Pretty simple grid that loads after you select a date range.

$(document).ready(function () {
  var start = $("#start").kendoDatePicker();
  var end = $("#end").kendoDatePicker();
$("#load").click(function () {
orderDataSource.read();
});
  var orderDataSource = new kendo.data.DataSource({
pageSize: 10,
transport: {
read: {
url: MyOrdersUrl,
contentType: "application/json; charset=utf-8",
dataType: "json",
data: {
start: function () { return $("#start").val(); },
end: function () { return $("#end").val(); }
}
}
},
schema: {
data: "d",
model: {
fields: {
Id: { type: "number" },
d_OrderDate: { type: "date", parse: parseJSONDate },
d_DueDate: { type: "date", parse: parseJSONDate },
Phone: { type: "text" },
Type: { type: "text" }
}
}
},
});
  var grid = $("#grid").kendoGrid({
dataSource: orderDataSource,
autoBind: true,
filterable: true,
columnMenu: true,
sortable: true,
pageable: true,
columns: [
{ field: "Id" },
{ field: "d_OrderDate", title: "Order Date", format: "{0:MM/dd/yyyy}" },
{ field: "d_DueDate", title: "Due Date", format: "{0:MM/dd/yyyy}" },
{ field: "Type" },
{ command: { text: "View Details", click: showOrder }, title: " ", width: "140px" }
  ]
}).data("kendoGrid");
});

When you select your dates and select load the grid it populates perfectly but it is not paged and the pager arrows are inactive. If I select the drop down and change the "items per page" then the grid properly filters and pages and becomes active. Is there a way to trigger the grid to page the items after they load?

Grid

answered on 11 Oct 2012

0 answers

111 views

Update and delete operation issue on kendogrid

This is wcf service application odata V2
created model and service using telerik open access

but some how i am unable to perform inline editing.

i checked in fiddler that when i click on update i could not see anything that is related to update functionality.

and one more strange this is. whenever i add parameterMap object , i am getting error so i have commented it.
error is jquery17100000 ... is not called .

Please help me to get this done.
I have attached the sample project which has both service and client application

please have a look and help.
i have not attached the db but u can connect to any db which is having Accounts table with Id, Name,Adress and City fields.

Thank you
Victoria

Data Source

asked on 11 Oct 2012

1 answer

236 views

Error Popup Editor with AutoComplete and DropDownList

Hi, i want to make input AutoComplete and DropDownList on custom popup editor
Look at this :
Script HTML in x-kendo-template :

<div id="grid" style="width: 700px; margin: 0 auto;"></div>

<script id="popup_editor" type="text/x-kendo-template">

<p>Custom editor template</p>

<div class="k-edit-label">

<label for="FirstName">First Name</label>

</div>

<input name="FirstName"

data-bind="value:FirstName"

data-value-field="firstName"

data-text-field="firstName"

data-source="autoCompleteDS"

data-role="autocomplete" />

<div class="k-edit-label">

<label for="LastName" style="color: red;">Last Name</label>

</div>

<input name="LastName"

data-bind="value:LastName"

data-value-field="lastName"

data-text-field="lastName"

data-source="dropDownListDS"

data-role="dropdownlist" />

<div class="k-edit-label">

<label for="BirthDate">Birth Date</label>

</div>

<input type="text"

name="BirthDate"

data-type="date"

data-bind="value:BirthDate"

data-role="datepicker" />

<div class="k-edit-label">

<label for="Age">Age</label>

</div>

<input type="text" name="Age" data-type="number" data-bind="value:Age" data-role="numerictextbox" />

</script>

and this script on javascript :

var autoCompleteDS = new kendo.data.DataSource({

data: [

{firstName: "Alex"},

{firstName: "Alice"},

{firstName: "Antony"},

{firstName: "Anne"},

{firstName: "Anna"}

]

});

var dropDownListDS = new kendo.data.DataSource({

data: [

{lastName: "Alex"},

{lastName: "Alice"},

{lastName: "Antony"},

{lastName: "Anne"},

{lastName: "Anna"}

]

});

.......

editable: {

mode: "popup",

template: $("#popup_editor").html()

},

edit: function(e) {

$(e.container)

.find("input[name='FirstName']")

.data("kendoAutoComplete")

.find("input[name='LastName']")

.data("kendoDropDownList")

.bind("change", function(e) {

console.log("auto complete changed");

});

},

....

So, a problem is button update and cancel can't be action
original code from here http://jsfiddle.net/valchev/BCBzS/17/

Thank

Grid

answered on 11 Oct 2012

0 answers

69 views

How can we put the tabstrip at the bottom ?

Could you tell me how can I put the tabstrip at the bottom ?

TabStrip

asked on 11 Oct 2012

1 answer

110 views

detail row collapsed when editing

Hi,
I am new to kendo UI,

Please help on this
http://jsfiddle.net/raaaT/9/

when I tried to edit the detail grid (subitems), the row will collapse once the editor is out of focus.
Is there anyway to avoid this?

thanks!

Grid

answered on 11 Oct 2012

5 answers

418 views

Datasource Model fields of type "date" lose time portion?

The model defined below on kendo ui datasource strips off the time portion of the StartDate and EndDate when deserialized on client. I tried setting the model type to "datetime" but that didn't seem to work. If i remove the model then the time portion is not lost but i have to do ISO date parsing manuallly. What am i doing wrong?

More info:
I'm using web api controller that returns dates in ISO 8601 format.

schema: {

errors: function (response) {

return response.errors;

},

model: {

id: "ItemID",

fields: {

"Subject": { type: "string" },

"StartDate": { type: "date" },

"EndDate": { type: "date" }

}

},

General Discussions

answered on 11 Oct 2012

8 answers

481 views

How to add row to CRUD datasource using MVVM?

I have defined a kendo datasource with transport methods (create, read, update, and destroy), as well as a schema definition:

var dataSource = new kendo.data.DataSource({

transport: {

create: {


                    url: "/api/Prospects",
                    type: "POST"
                },

read: "/api/Prospects",

update: {

url: "/api/Prospects",

type: "PUT"

},

destroy: {

url: "/api/Prospects",

type: "DELETE"

}

},

schema: {

model: {

id: "ProspectId",

fields: {

ProspectId: {

editable: false,

nullable: true

},

FirstName: { type: "string" },

LastName: { type: "string" },

EmailAddress: { type: "string" },

ProspectTypeId: { type: "number" },

ProspectStatusId: { type: "number" }

}

},

type: "json"

}

});

My form elements contain appropriate data-bind attributes to form elements, and I am calling kendo.bind passing the form and datasource as parameters. The goal is that the form is used for both adding and editing records.

I am not sure how to write the code to initialize the form for adding a new record to the datasource.

I've been unsuccessful finding an example to do this on the kendo website. Can you help?

Thanks,
Gary

MVVM

answered on 10 Oct 2012