Questions on Kendo UI for jQuery Forum

1 answer

97 views

Hi!
I try to use grid created by javascript. Transport for create is:
var transport = {
create: {
url: "@Url.Action("Create", "Pledge")",
contentType: "application/json; charset=utf-8",
dataType: "jsonp"
}
};

For create method I use MVC4 Action something like this:
public ActionResult Create([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<MyModel> models).

In models I have created elements. But all of this elements are empty. Can anyone help me with this issue?
Maybe I need to change type of transport create or something like this?

Grid

answered on 11 Oct 2012

0 answers

78 views

how to set vertical Slider with range like horizontal Slider

how to set vertical Slider with range like horizontal Slider

thx@!!!!!!!!!!

Slider

asked on 11 Oct 2012

0 answers

37 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,

Date/Time Pickers

asked on 11 Oct 2012

0 answers

84 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

285 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

123 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

107 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

227 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

68 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

106 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