Questions on Kendo UI for jQuery Forum

3 answers

285 views

Hi,

We're developing an phonegap app with Kendo and we're facing some issues with mobile listview. I have a simple declarative listview on a view like this:

<ul id="tasksList"

data-role="listview"

data-auto-bind="true"

data-endless-scrolling="true"

data-source="app.model.dataSource"

data-template="taskListItemTemplate">

</ul>

When I turn endless scrolling on, buttons on the template start to behave weird. Clicking on a button results in a blank row and a row clicked is overlaping the first row. Some buttons seem not to work.

I've prepared an example here: http://jsbin.com/xixapuwizo/1/edit?html,js,output (it was based on an example from Kendo UI api regarding endless scrolling)

If I try to click on buttons from second row or below, they overlap the first row (change) or seem not to work (remove).

I've also tried with one of the latest releases (2015.3.1111) and the result is similar.

We're in the middle of developing an app and this is a blocker for us.

Regards,

Andrzej

ListView (Mobile)

answered on 02 Dec 2015

1 answer

293 views

Template for Group By Heading?

I have a grid that has a field I want to group by. The field comes from the db in number format, I use the template on the column to dynamically changed it to the actual verbose type, such as "molecule", "assembly", etc.

That all works fine and displays in the grid correctly. My issue is this, when I do a group by that column instead of the verbose type values I'm getting their numeric equivalent. Is there some way to have the Group By header display the same value as the template output for the column?

Regards,

m

Grid

answered on 02 Dec 2015

14 answers

5.8K+ views

Kendo Grid - How to have different custom editor for Update and Create

I have a KendoUI Grid set up and working pretty nicely. My team and I finally figured out how to get all the CRUD stuff working, but we're having an issue when confronted with the custom popup editor.

We have a nice custom editor set up and it works perfectly for Edit mode. We only want certain fields to be editable for existing entries, and want different fields editable for new entries. For example, we have a database of team members on a project with the following schema model:

model: {

id: "empId",

fields: {

"empId": { editable: false, type: "string" },

"empLastName": { editable: false, type: "string" },

"empFirstName": { editable: false, type: "string" },

"empRole": { editable: true, type: "string" },

"empUserName": { editable: false, type: "string" },

"isCore": { editable: true, type: "boolean" },

"projTeamId": { editable: false, type: "string" },

"hours": { editable: false, type: "number" },

"empStatus": { editable: false, type: "string" }

}

When editing an existing entry in the grid, only empRole and isCore should be editable.

When adding a new entry to the grid, only empLastName, empFirstName, empRole, and isCore should be editable.

The rest should appear as either standard text or greyed-out checkboxes. I am aware that I can simply make all fields inputs and the plugin will automatically filter out which fields accept input and which do not upon submission, but that is undesirable behaviour. We wish to make it visually clear that certain fields are not editable, while being able to have different fields be editable in different scenarios (Add vs Edit).

Is this possible? We really need to find a way to make it possible if it isn't.

Here's the editor template we have so far:

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

<table>

<colgroup>

<col width="160" />

<col width="100" />

<col />

</colgroup>

<tr>

<td rowspan="12"><img class="teamImage" width="128" height="128" data-src="/Content/images/anonymousUser.jpg" src="# if(empUserName === "

null") { #/Content/images/anonymousUser.jpg# } else { #@System.Configuration.ConfigurationManager.AppSettings["EmployeePhoto"]#= empUserName #.jpg# } #" /></

td>

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

<label for="Id">Employee ID:</label>

</div></td>

<td>#= empId #</td>

</tr>

<tr>

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

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

</div></td>

<td>#= empFirstName #</td>

</tr>

<tr>

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

<label for="LastName">Last Name:</label>

</div></td>

<td>#= empLastName #</td>

</tr>

<tr>

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

<label for="Role">Role:</label>

</div></td>

<td><input type="text" id="Role" class="k-input k-textbox"

data-bind="value:empRole"

data-value-field="empRole"

data-text-field="empRole"

data-source="empRoleDropDownDataSource"

data-role="dropdownlist" /></td>

</tr>

<tr>

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

<label for="Core">Core Member:</label>

</div></td>

<td><input type="checkbox" id="Core" class="k-input k-checkbox" data-bind="value:isCore" /></td>

</tr>

<tr>

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

<label for="Active">Active Employee:</label>

</div></td>

<td><input id="Active" disabled # if(empStatus !== "T") { #checked="checked"# } # type="checkbox" class="k-input k-checkbox" /></td>

</tr>

<tr>

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

<label for="Hours">Hours:</label>

</div></td>

<td>#= hours #</td>

</tr>

</table>

</script>

Here's our DataSource declaration:

var dataTeamRead = "/ProjectInfo/GetProjectTeam";

var dataTeamUpdate = "/ProjectInfo/UpdateProjectTeam";

var dataTeamDestroy = "/ProjectInfo/DestroyProjectTeam";

var dataTeamCreate = "/ProjectInfo/CreateProjectTeam";

var dataTeam = new kendo.data.DataSource({

pageSize: 10,

transport: {

read: {

url: dataTeamRead,

data: { projectId: Querystring.Get("projectId") },

type: "POST",

dataType: "json"

},

update: {

url: dataTeamUpdate,

type: "POST",

dataType: "json"

},

destroy: {

url: dataTeamDestroy,

type: "POST",

dataType: "json"

},

create: {

url: dataTeamCreate,

type: "POST",

dataType: "json"

}

},

schema: {

type: "json",

model: {

id: "empId",

fields: {

"empId": { editable: false, type: "string" },

"empLastName": { editable: false, type: "string" },

"empFirstName": { editable: false, type: "string" },

"empRole": { editable: true, type: "string" },

"empUserName": { editable: false, type: "string" },

"isCore": { editable: true, type: "boolean" },

"projTeamId": { editable: false, type: "string" },

"hours": { editable: false, type: "number" },

"empStatus": { editable: false, type: "string" }

}

});

Here's our kendoGrid declaration:

var kendoGridPageable = {

pageSize: 10,

previousNext: true,

numeric: false,

info: true

},

kendoGridToolbar = [

{ name: "create", text: "Add" },

{ name: "edit", text: "Edit" },

{ name: "destroy", text: "Remove" }

];

$("#gridTeam").kendoGrid({

rowTemplate: kendo.template($("#teamRowTemplate").html()),

columns: [

{ "title": " ", "filterable": false, "width": "48px" },

{ "field": "empLastName", "title": "Last", "filterable": true, "width": "25%" },

{ "field": "empFirstName", "title": "First", "filterable": true, "width": "25%" },

{ "field": "empRole", "title": "Role", "filterable": true, "width": "25%" },

{ "field": "hours", "title": "Hours", "filterable": true, "width": "25%" }

],

dataSource: dataTeam,

scrollable: false,

sortable: {

mode: "multiple",

allowUnsort: true

},

filterable: true,

pageable: kendoGridPageable,

selectable: "row",

nagivatable: true,

toolbar: kendoGridToolbar,

editable: {

mode: "popup",

template: $("#teamEditorTemplate").html(),

update: true,

destroy: true,

confirmation: "Are you sure you want to remove this team member?"

},

columnMenu: true

});

Here's our rowTemplate:

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

<tr class="# if(isCore === true) { #coreMember# } # # if(empStatus === "T") { #terminatedEmployee# } #" data-uid="${uid}">

<td><img class="teamImage" width="32" height="32" data-src="/Content/images/anonymousUser.jpg" src="# if(empUserName === "

null") { #/Content/images/anonymousUser.jpg# } else { #@System.Configuration.ConfigurationManager.AppSettings["EmployeePhoto"]#= empUserName #.jpg# } #" /></

td>

<td>#= empLastName #</td>

<td>#= empFirstName #</td>

<td>#= empRole #</td>

<td>#= hours #</td>

</tr>

</script>

Any assistance that can be provided would be most appreciated.

Thank you for your time and screen space. :)

Grid

answered on 02 Dec 2015

2 answers

189 views

[Solved] Kendo Combobox rendering is not consistant

Hi,

I've found that Kendo Combobox renders differently while attaching to a local data source than attaching to a remote data souce in Visual Studio LightSwitch. Please refer to the image for the issue. I know there are rendering issues in LightSwitch because of JQuery Mobile (http://www.telerik.com/forums/kendo-combobox-rendering-issue) and this may not be the issue of data source. But it will help me a lot if I understand the cause of the problem.

Thanks.

ComboBox

answered on 02 Dec 2015

1 answer

690 views

How to get the href parameter value

Hi,
Working on Progress.JSDO with Mobile app.
I am working on Tabstrip in Kendo with <a> tags as below.
<div data-role="tabstrip">
<a href="views/listView.html?status=Submitted">Submitted</a>
<a href="views/listView2.html?status=Registered">Registered</a>
<a href="views/listView3.html?status=Approved">Approved</a>
<a href="views/listView4.html?status=Declined">Declined</a>
</div>
I would like to retrieve the value of status, when I click the TAB in UI.
I have tried using "e.view.params.status", it returning as undefined.
Can someone help me to get the value.

TabStrip (Mobile)

answered on 01 Dec 2015

1 answer

351 views

[Solved] how to clear the contents of all the cells of the sheet

how to clear the contents of all the cells of the sheet? Now I can clear the contents of the range cells, but I can not find a method to clear the contents of all the cells of the sheet. Is there a existing method to solve this problem? If present, please give example, thanks!

Spreadsheet

answered on 01 Dec 2015

3 answers

116 views

[Solved] Grid Filter alternate filterable modes ?

Hello everyone?

Do anyone know if there is a builtin way of letting the user choose how the filters are to be shown ?

I would like to let my users choose between a the row and menu modes.

Cheers!

Grid

answered on 01 Dec 2015

1 answer

204 views

resize column on touch device

Hello,

column resize doesn't work on touch device (acer aspire) in google chrome.

In ms edge it works, though not very reliable.

http://dojo.telerik.com/awOqI

regards

Axel

Grid

answered on 01 Dec 2015

1 answer

198 views

Expand rows that have "child" data

I'd like to expand all rows that have detail data. I know how to expand all detail rows; but when there's no detail rows it shows the header and it's just a lot of clutter. I'd like to only expand the rows that actually have detail data. Is that possible?

Grid

answered on 01 Dec 2015

1 answer

103 views

Best place to override onDraw or Render for a column

Greetings,

In the grid, I need to override the columns' draw (or render) functionality, so that I may render a custom "kendo.dropdownlist" for the column, and fill it appropriately.

I see that there is an "editor" which can be used, but I need to create and fill the widget prior to this event firing.

Where is the best place to accomplish such? Sample snippet also much appreciated.

Many thanks...

Grid

answered on 01 Dec 2015