Questions on Kendo UI for jQuery Forum

1 answer

154 views

I noticed I can use $('#q').kendoSearchBox() to turn a textbox into a nice search box with a search icon and all and not need to do all of that manually, but I don't see any documentation anywhere that mentions what options are available for that object. Any ideas on what the configuration, methods, and events are for this object? So far, I just see the change event. Of course, all I really need is the change event, but just curious. :-)

Bryan

General Discussions

answered on 06 Mar 2013

1 answer

655 views

Grid Batch Mode - Add new row programaticlly

Having a bit of an issue adding a row via javascript to an ajax bound grid where the data source is set to batch mode.

While the edit and deletes are working fine, when i add a new record via javascript it appears to have worked, as in the row appears in the grid, but when save is clicked the create action for the new rows is never activated.

I presume it's because when the row is added directly to the data source there is no flag to indicate it's "dirty" so that it's marked for saving when save is evoked but cannot find anything in the API to flag a row like this. Nor can i find a way for adding a row with data to grid direct

@(Html.Kendo().Grid<UserViewModel>()

.Name("Grid")

.ToolBar(toolbar => {toolbar.Save(); })

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

.Sortable()

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

.Selectable()

.Columns(columns =>

{

columns.Bound(c => c.DisplayName);

columns.Bound(p => p.Attended)

.Title("Attended")

.ClientTemplate("<input type='checkbox' #= Attended ? checked='checked': '' # class='chkbx' />")

.HtmlAttributes(new { style = "text-align: center" }).Width(50);

columns.Bound(c => c.Duration).Width(100);

columns.Command(commands => commands.Destroy()).Width(100).Title("Remove");

})

.DataSource(dataSource => dataSource.Ajax()

.Model(model =>

{

model.Id(p => p.ServiceUserID);

model.Field(p => p.DisplayName).Editable(false);

})

.ServerOperation(false)

.Read(read => read.Action("_GetAttendees", "Activity", new { ViewBag.ActivityID }))

.Create(update => update.Action("_AddAttendees", "Activity"))

.Update(update => update.Action("_UpdateAttendees", "Activity"))

.Destroy(update => update.Action("_RemoveAttendees", "Activity"))

.Batch(true)

.PageSize(20)

)

function AddUser(searchModel) {

$.getJSON("/Activity/GetUser", searchModel,

function(data) {

switch (data.Value) {

case 0:

<snip>

break;

case -1:

<snip>

break;

default:

var grid = $("#Grid").data("kendoGrid");

var datasource = grid.dataSource;

var activityID = @ViewBag.ActivityID;

var User = { UserID: data.Value, ActivityID: activityID, DisplayName: data.Message, Attended: 0 @ViewBag.Duration };

datasource.insert(User);

break;

}

return false;

});

};

Grid

answered on 06 Mar 2013

1 answer

301 views

Treeview loaded from remote data source will not expand

Help! I have NO idea what I'm doing wrong! The initial node loads and shows an expand icon but nothing happens when it's clicked. No request is even attempted. I have the following code:

var homogeneous = new kendo.data.HierarchicalDataSource({

transport: {

read: {

url: 'http://localhost:500/api/users/',

dataType: "json"

}

},

schema: {

model: {

id: "id",

hasChildren: "load_on_demand"

}

});

$("#tree").kendoTreeView({

dataSource: homogeneous,

dataTextField: "label"

});

The 'http://localhost:500/api/users/' is an ASP.NET Web API controller method that returns the following JSON:

[{"id":12345,

"label":"NODE 1",

"load_on_demand":true

}]

What am I doing wrong? Any ideas would help!

TreeView

answered on 06 Mar 2013

0 answers

215 views

ListView data is null when dataBound event fires

$(document).ready(function () {

$("#listView").kendoListView({

dataBound: function (e) {

var listView = $("#listview");

if (!listView) {

alert("listView null");

return;

}

var listData = listView.data("kendoListView");

if (!listData) {

alert("listData null");

return;

}

});

The above code shows "listData null". I need to access .data() and thought the purpose of the dataBound() event was to indicate when I could do so. What event should I use if not this one?

Thanks,
David

EDIT: I'm sorry, it was my mistake. I should have typed "listView" instead of "listview". After this change, I can access .data() from the dataBound() event handler.

ListView

asked on 05 Mar 2013

1 answer

353 views

How to edit textbox on checkbox click in editable grid.

Hello All,

I am facing issue in an editable grid. I want to editable textbox when user click on check box.
User only one field to modify when check box clicked.

Here i attached screen shot which i want.

Thanks,

Grid

answered on 05 Mar 2013

6 answers

243 views

column menu filtering

This is happens in Firefox. When I turn on the grid column menus and try to filter on a string column I cannot focus the textbox. Also on a date fields I cannot click the calendar box, just the icon to popup the calendar.

I also get the same issue on the text columns in this demo : http://demos.kendoui.com/web/grid/column-menu.html

anyone run into this and come up with a fix?

thanks

Grid

answered on 05 Mar 2013

1 answer

10.7K+ views

Header Wrapping / Height

I have a grid that is dynamically driven by metadata with the user choosing the columns they want to see. I do not know ahead of time what the headers will be or how many columns the user will select. I have the grid setup with a fixed height and every column gets a fixed width of 200. What happens is that some columns header is bigger than the allowed space and gets cut off. Is there any way to increase the height of the header and have the text wrap to a new line? Any other solutions for this?

Grid

answered on 05 Mar 2013

1 answer

112 views

[Solved] Call function AFTER menu effect has completed

I have a menu that is contained in a slide-in div (using kendo.fx.slidein) and I want to make sure the slidein effect does not play until *after* the menu effect has completed.

Is there a way to ensure that my KendoMenu close event is called after the animation is complete, or to have the close event function handler call the slidein effect asynchronously with the menu effect?

Thanks.

Menu

answered on 05 Mar 2013

2 answers

149 views

[Solved] Displaying selected values in the dropdown

Hello,

I have a web page with combobox containing some values.
When I click on the dropdown and the list is shown below - the selected value is shown in the end of the list.

Can I change this behavior to display selected value at the top of the list?

Thanks ahead,
Yulia

ComboBox

answered on 05 Mar 2013

3 answers

327 views

Bind column to a computed prperty

I have a grid with several computed columns.I set the computed properties when I change the properties in the grid edit mode . Do I need to use editor template to make a read only column (when I set editable:false it doesn't change according to the new value)?

And I have several computed properties in grid, Is there any other way to make it a generic calculation instead of using if/else for change property name like this,

save: function(data) {

if (data.values.Qty) {
var test = data.model.set("Total", data.values.Qty * data.model.Amt);
}
else {
var test = data.model.set("Total", data.model.Qty * data.values.Amt);
}
}

Is there any event like saved (to get the data.model with changed property has been set)?

And the other issue is when I have several computed fields set like this the save method is called for each calculated field set.

Here is my example,
http://jsfiddle.net/H6tgv/74/

Grid

answered on 05 Mar 2013