Questions on Kendo UI for jQuery Forum

1 answer

102 views

How to change the default delete button?

Good day,

I want changed the default delete button found on the grid. I want to replace it for an image, is there any way I can do that?

Thank you,

Guillermo Sanchez.

Grid

answered on 10 Apr 2013

2 answers

76 views

List view in conflict with kendo.data.min.js

Hi,

I am creating an application which requires a listview with items coming from an external xml datasource.
This is what my datasource looks like:

01.var expenseFormDataSource = new kendo.data.DataSource({

02. transport: {

03. read: {

04. url: EA.baseURL + "resources/expenseService/getExpenseForms",

05. dataType: "xml",

06. type: "POST"

07. },

08. parameterMap: function(options) {

09. return {

10. token: EA.getToken()

11. };

12. }

13. },

14. schema: {

15. type: "xml",

16. data: "expenseForms/expenseForm",

17. model: {

18. fields: {

19. id: "id/text()",

20. date: "date/text()",

21. statusId: "statusId/text()"

22. }

23. }

24. }

25. });

A preview of the returned XML can be found in attachment. (I want to create a listitem per expeseFrom).

The listview is created when the view is initalized. Here is the code:

1.$("#expenseFormList").kendoMobileListView({

2. dataSource: expenseFormDataSource,

3. pullToRefresh: true,

4. template: $("#expenseForm-template").text()

5. });

The expenseFormList is an empty unordered list inside my view. The expenseFrom-template looks like this:

1.<script id="expenseForm-template" type="text/x-kendo-template">

2. <a data-role="listview-link" id=#="\"my-expenses-show-pdf-" + id+ "\""#>

3. <div class="expenseForm-date">#= kendo.toString(new Date(Date.parse(date)), "dd/MM/yyyy") #</div>

4. <div class="expenseForm-status">Status: #= expenseStatusIdToString(statusId) #</div>

5. </a>

6.</script>

This all works except when I include "kendo.data.min.js". When I include the file, the items in the list are not rendered and no error message is provided in Chrome Developers Tools. The same issue also occured when I tried to follow the listview with pull-to-refresh tutorial: no items when the file was included.
I have to include the JavaScript file for a Kendo dropdownlist, somewhere else in my application.
What should I do?
Thanks!

ListView (Mobile)

answered on 10 Apr 2013

2 answers

606 views

Remove button missing after successful upload

I've built an uploader using the latest KendoUI and jQuery 1.9.1. It uses a .NET web service, which returns an empty JSON object to satisfy the new version of jQuery. The uploader seems to work; it shows the checkmark next to the file after uploading and the file gets written to the server.

However, there is no remove button showing. I have a removeURL and removeVerb, but the remove button is not present.

For the record, here is what the upload service returns:

HTTP/1.1 200 OK

Cache-Control: private, max-age=0

Content-Length: 7

Content-Type: application/json

Server: Microsoft-IIS/8.0

X-AspNet-Version: 4.0.30319

X-SourceFiles: =?UTF-8?B?QzpcQ29kZVxGTVNcTWFpblxQcm9qZWN0QWNjb3VudGluZ1xEYXRhU2VydmljZXNcRG9jdW1lbnRzLmFzbXhcRG9jdW1lbnRfQ1JFQVRF?=

X-Powered-By: ASP.NET

Date: Tue, 09 Apr 2013 23:14:56 GMT

" { } "

I've tried setting the content-type to "text/plain" but then the JSON gets written as a byte[] rather than text for some reason. This might be the problem but I don't seem to be able to get around it.

Help?

Upload

answered on 10 Apr 2013

2 answers

373 views

How To reorder row by drag'n drop

Hello,

In our project we have a kendo grid which display lines with a column "Rank" (int).
Can you help us to reorder rows by drag'n drop and so update the Rank because i have no idea to achieve that.

Thanks for your help,
Guillaume

Grid

answered on 10 Apr 2013

2 answers

208 views

Excluding properties not on model

I retrieved an object via an OData WebAPI service using the DataSource, where the response looks like this:

{"odata.metadata":"http://localhost:49639/api/$metadata#Address/@Element","AddressKey":"1","AddressLine1":"test2","AddressLine2":"Suite 2004","City":"Lawrenceville","State":"Georgia","PostalCode":"30043"}

My schema's model does not have "odata.metadata", and I don't want it included. The reason this extra property is a problem is that when I do an update, it sends "odata.metadata" as an item back on the OData POST request, and my WebAPI throws an error when trying to automatically map that, so I'd rather it just not send it at all. Right now, I'm manually deleting the property in the parse function to remove it, but it just feels wrong. It seems like the DataSource should not create an object with properties from my response that do not exist in the schema's model, so maybe I'm missing something here. Is the only way to handle this by manually doing something in the parse function?

parse: function(response) {

// This property causes an issue when sending the model back, so removing it.

delete response["odata.metadata"];

},

Data Source

answered on 10 Apr 2013

4 answers

1.4K+ views

How to change buttons text of editable grid

Hello,
I have server-side kendo grid

01.<div class="k-rtl">

02.@(Html.Kendo().Grid<BO.UserPemissions>()

03. .Name("UserPemissionsGrid").Events(e => e.DataBound("UserPemissionsRowDataBound"))

04. .Columns(columns =>

05. {

06. columns.Bound(o => o.UserId).Title("ת.ז.");

07. columns.Bound(o => o.PermittedProgramGroup).Title("קבוצות הרשאה");

08. columns.Bound(o => o.PermittedProgramId).Title("תוכניות מורשות");

09. columns.Command(command => command.Destroy()).Width(150);

10. })

11. .Pageable(pager => pager.PageSizes(true))

12. .ToolBar(toolBar => { toolBar.Create(); toolBar.Save(); })

13. .Sortable()

14. .Scrollable()

15. .Editable(editable => editable.Mode(GridEditMode.InCell))

16.

.DataSource(dataSource => dataSource.Ajax().Model(model => model.Id("UserId")).Read(read => read.Action("UserPemissionsRowDataRead", "Home"))

17. .Update(update => update.Action("UserPemissionsRowDataUpdate", "Home"))

18. .Create(update => update.Action("UserPemissionsRowDataCreate", "Home"))

19. .Destroy(update => update.Action("UserPemissionsRowDataDestroy", "Home"))

20. )

21. )

22.</div>

I need to put my text in the standard control buttons inside the grid (see the attached picture)

Any possible help would be appreciated a.s.a.p.

Thanks

Shabtai

Grid

answered on 10 Apr 2013

10 answers

78 views

View should optionally not create another layer in the DOM Tree

If view is rendered, it creates an additional layer in the DOM. With "tagName" the specific element can be configured. I prefered, if this layer could be omitted entirely.

In all my recent SPA-related work this layer was not needed at all. Typically the layout has a "section" as the point of insertion, and the view has a "div" as the outer element.

Michael G. Schneider

SPA

answered on 10 Apr 2013

2 answers

469 views

Empty data is passed to server after editing grid

Hello,
I have server side kendo grid:

<div class="k-rtl">

@(Html.Kendo().Grid<BO.UserPem>()

.Name("UserPemGrid").Events(e => e.DataBound("UserPemRowDataBound")).ToolBar(toolbar =>

{

toolbar.Create().Text("הוסף");

toolbar.Save().SaveText("שמור").CancelText("בטל");

})

.Columns(columns =>

{

columns.Bound(o => o.UserId).Title("ת.ז.");

columns.Bound(o => o.PermittedProgramGroup).Title("קבוצות הרשאה");

columns.Bound(o => o.PermittedProgramId).Title("תוכניות מורשות");

columns.Command(command => command.Destroy().Text("מחק")).Width(150);

})

.Pageable(pager => pager.PageSizes(true))

.Sortable()

.Scrollable()

.Editable(editable => editable.Mode(GridEditMode.InCell))

.DataSource(dataSource => dataSource.Ajax().Model(model => model.Id("UserId")).Read(read => read.Action("UserPemRowDataRead", "Home"))

.Update(update => update.Action("UserPemRowDataUpdate", "Home"))

.Create(update => update.Action("UserPemRowDataCreate", "Home"))

.Destroy(update => update.Action("UserPemRowDataDestroy", "Home"))

)

</div>

For some reason on server side in each of update events I get empty data...

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult UserPemRowDataCreate([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]List<UserPem> users)

{

var results = new List<UserPem>();

if (users != null && ModelState.IsValid)

{

foreach (var user in users)

{

UserPermissionsTable.Insert(user);

results.Add(user);

}

return Json(results.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);

}

I did it like in demo example...

Any help would be appreciated..

Thanks
Shabtai

Grid

answered on 10 Apr 2013

1 answer

363 views

enable disable kendo ui mobile button

how to enable disable kendo mobile button from javascript

Button (Mobile)

answered on 10 Apr 2013

7 answers

754 views

Grouping not working

hi,
I had been trying to group the grid on the column basis (the drag and drop feature) but I have not been able to drag and place the column in the Group Panel the column name drags with the stop sign on it.

@(Html.Kendo().Grid(Model.PersonSearch)
.Name("DatasGrid")
.Columns(columns =>
{
columns.Bound(p => p.SlNo).Visible(false);
columns.Bound(p => p.PersonName).Width("110px").Groupable(true);
columns.Bound(p => p.Code).Width("70px");
columns.Bound(p => p.Cityname).Width("300px").Groupable(true);
.Pageable(paging => paging.PageSizes(true))
.Sortable()
.Scrollable()
.Groupable()
.Filterable()
.Selectable(s => s.Mode(Kendo.Mvc.UI.GridSelectionMode.Multiple))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.SlNo))
.ServerOperation(false)
.Read(read => read.Data("AddDataBinding").Action("PersonDtls", "PersonSearch", new { area = "" }))
)
)

Jquery version -1.7
VS-2012

Grid

answered on 10 Apr 2013