Questions on Kendo UI for jQuery Forum

7 answers

197 views

[Solved] if need "Id" for "Selectable" then where is it hiding?

I am beside myself trying to do something that should be simple and is available in other grids I have worked with. I want to know the "Id" of the item that was used to populate a row in the grid. I have to provide that value if I want to use the "Selectable" option so where is it hiding? I need to know that value when the user selects a row. Here is my definition of the grid.

@(Html.Kendo().Grid((IEnumerable<MyRecordType>)Model)

.Name("rawdatagrid")

.Columns(columns =>

{

columns.Bound(session => session.Time).Width(100);

columns.Bound(session => session.Glucose).Width(50);

columns.Bound(session => session.TestEvent).Width(100);

})

.Scrollable()

.Sortable()

.Resizable(resize => resize.Columns(true))

.DataSource(dataSource => dataSource

.Server()

.Model(model => model.Id(p => p.Id))) // DataSource "Id" required for "Selectable"

.Selectable(selectable => selectable

.Mode(GridSelectionMode.Single)

.Type(GridSelectionType.Row))

.Events(events => events.Change("onEventChange"))

)

Here is my event handler for the "Change" event from the grid. The selectedText concatenates all of the cell values in a row which is very difficult to extract my "hidden" column value from. The index value changes if you sort. I've tried several of the different ways I saw from other threads on this board but they don't work for me.

function onEventChange(arg) {

//var grid = $("#rawdatagrid").getKendoGrid(); // this is better than the next line

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

var selectedItem = grid.select();

var selectedText = selectedItem.text();

var index = selectedItem.index();

debugger;

}

What am I missing? Where is my "Id" value? I can't believe a product as great as Kendo UI can't do something basic like this.

Grid

answered on 19 Mar 2014

1 answer

275 views

parameterMap - "type" parameter is undefined on nested datasource

Hi,

I am using parameterMap function in HierarchicalDataSource. At root level everything works as expected. But when it is called from nested datasource, then "type" parameter is undefined. I need mapping only for "create" request.

My treeview definition with datasource looks like this:

$("#tree").kendoTreeView({
dragAndDrop: true,
dataSource: {
transport: {
read: {
url: '@Url.Action("Read", "TreeView")'
},
update: {
url: '@Url.Action("Update", "TreeView")',
dataType: 'json',
type: 'POST'
},
create: {
url: '@Url.Action("Create", "TreeView")',
type: 'POST',
contentType: "application/json; charset=utf-8",
dataType: 'json'
},
parameterMap: function (data, type) {
if (type == "create") {
return JSON.stringify(data);
}
return data;
}
},
schema: {
model: {
id: "Id",
hasChildren: "HasChildren"
}
}
},
dataTextField: 'Name',
drop: onTreeviewDrop,
drag: onTreeviewDrag
});

Thanks for any help!

Hierarchical Data Source

answered on 19 Mar 2014

1 answer

70 views

Disallow 3-digit year in kendo.dateParse()?

Wondering if there is a way to impose some sort of strict parsing so the following will be considered invalid instead of parsed into a future date:

kendo.parseDate('02/02/201', ['MM/dd/yy']); // Parsed into Sun Feb 02 2020 00:00:00 GMT-0800 (PST)

Thanks!

Validation

answered on 19 Mar 2014

1 answer

140 views

Combobox read from Datasource

Hi,
   I have a multiple kendocomboboxes on a page which are not cascaded. I have a datasource as below.

      var dataSource = new kendo.data.DataSource({
              dataType: "jsonp",
              customDataField: "ChangeParameters", //AutoCompleteDetails[index][2],
             serverFiltering: true,
             transport: {
                  read: onAutoComplete
             }
     });

When I type something in the comboboxes the onAutoComplete function is called correctly. The only issue I have is I am unable to find the combobox which triggered this.I am totally stuck over here. Please help.

Regards
Vijay

ComboBox

answered on 19 Mar 2014

1 answer

90 views

Show Handler Lost Inside of Popover

Hello,

Are view events handled differently for views that are children of popovers? I set up the following PopOver. The PopOver is opened by a function in the underlying view from code, passing a valid target. It works consistently, meaning the popover can be opened and closed over and over with no problems. However, the function "popupshow" defined in the view's data-show attribute is only called the first time the PopOver is opened. In the debugger, I have verified that the view's show function is still pointing to the correct function - it is just not called ever again after the first open.

Here is the popover:

<div id="login-popover" data-role="popover" data-popup='{ "height": "220", "width": "250" }' data-close="reset">

<div data-role="view" data-title="Login" data-model="logins" data-init="logins.popupinit" data-show="logins.popupshow">

<div id="login-wrapper" data-role="content">

<form id="login-form">

<input type="email" id="username" data-bind="value: info.username" placeholder="EMAIL"/>

<input type="password" id="pwd" data-bind="value: info.password" placeholder="PASSWORD"/>

<div>

<span class="k-invalid-msg" data-for="username"></span>

</div>

<div>

<a data-role="button" data-click="login">Login</a>

<a data-role="button" data-click="register">Sign Up</a>

</div>

</form>

</div>

I open using this call:

$("#login-popover").data("kendoMobilePopOver").open("#valid-element");

and close with either this call:

$("#login-popover").data("kendoMobilePopOver").close();

or by simply tapping outside of the PopOver. The "reset" function in the data-close does nothing but change the class of an unrelated visual element. The "reset" is called consistently, too, no matter how many times the popover is opened. Only the show goes away. Any ideas would be appreciated.

Thank you,

Kelly

PopOver (Mobile)

answered on 19 Mar 2014

1 answer

152 views

Bug in drawer's animation

This is something easier to show than to explain. Take a look at the video https://www.youtube.com/watch?v=ukW-2cUrGJM

I mean to say "display:none" css in the video :)

The gist: quick swiping creates a new transition before the current one completes, so onEnd event fires and hides the drawer in its open state.
It is quite possible that quickly clicking the drawer button gives the same effect, but it is much hard to get since the button is moving during the transition.

this.transition = new Transition({

axis: AXIS,

movable: this.movable,

onEnd: function() {

that._transitioning = false;

if (movable[AXIS] === 0) {

element[0].style.cssText = "";

that.element.hide();

}

});

Drawer (Mobile)

answered on 19 Mar 2014

1 answer

182 views

[Solved] Kendo MVVM vs. Angular Kendo

I've been looking at Angular Kendo and am wondering what kind of benefit or need beyond Kendo's MVVM implementation that Angular serves.

I've reviewed all the documents on labs.kendoui.com and haven't found anything that clearly details what drove the decision... which could be very important information for architect types that are trying to put together a stack for a web-based application.

Was this a case of using AngularJS to see if you could... or?

General Discussions

answered on 19 Mar 2014

6 answers

1.1K+ views

Using an image instead of text in title?

Hello,
How do I go about inserting an image into a column header instead of text in the Grid?

Also, if row templates are used - is it possible to maintain alternate row highlight? As soon as I start using templates - there is no alternate row highlighting any longer
Thanks, I appreciate any help!

Grid

answered on 19 Mar 2014

2 answers

235 views

Appended tabs not getting opacity changed

I am currently using Kendo UI Complete v2013.2.918 and I have a Tabstrip Issue.

Currently I pull an unknown number of items from a database and break these into groups of 5.

For each group of 5, I create a tab (1-5, 6-10,11,15 etc) and add 5 panel bars to each tab 1 bar for each item.

This works fine.

I then use ajax calls to create a new (panelbar) Item and if the last tab has room I just reloading the last tab, if not I append a new tab to the end and use the contentUrl to load the new tab of panel items.

The new tab loads fine but the new tab content opacity is not toggled when I switch to other tabs so my new tab content is shown across all tabs.

If I manually set the opacity to 0 it looks fine (hidden on all tabs) until i go to the last tab again which changes it back to 1 and the process repeats.

I believe the issue is that the new tab is not added into the function to set all tab opacity to 0 before setting the active tab to 1 but I cant find where that call is made.

TabStrip

answered on 18 Mar 2014

1 answer

188 views

Ajax call breaks binding to object children

Without the ajax call, My main view binds to my parent class
and the partial view on main view, binds to a child member of the parent
class

parent...

public class Client

{

[ScaffoldColumn(false)]

public int Id { get; set; }

[DisplayName("Name")]

[Required]

[StringLength(120)]

public string Name { get; set; }

     // etc...

     public virtual Address Address { get; set; }

}

child of parent...

public class Address

{

[ScaffoldColumn(false)]

public int AddressId { get; set; }

[DisplayName("Address")]

[Required]

[StringLength(200)]

public string Street { get; set; }

// etc...

[ForeignKey("Client")]

public int? Id { get; set; }

public virtual Client Client { get; set; }

}

the main view

@using (Html.BeginForm("Create", "Client", FormMethod.Post, new Dictionary<string, object> { { "data-htci-target", "addressData" } }))

{

@Html.AntiForgeryToken()

<div class="row">

@Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })

<div class="col-sm-4 col-md-4 col-lg-4">

@Html.Kendo().AutoCompleteFor(model => model.Name).HtmlAttributes(new { style = "width:100%" })

@Html.ValidationMessageFor(model => model.Name)

</div>

@{ var vdd = new ViewDataDictionary(ViewData) { TemplateInfo = new TemplateInfo() { HtmlFieldPrefix = "Address" } };}

@Html.Partial("_AddressPartial", Model.Address, @vdd)

// yada yada...you can imagine the rest of the very standard view

The partial view's model is Address and all hooks up.
When I post back to the server the Address member is properly filled with entered data from the partial view...

So now...in my partial view, I now load the js to call the async
routine to load the IP GEO data for the user - so it pre-fills the city,
province, country

Any example of an ajax call will suffice...mine calls an
AddressControl, returns a partialview result and replaces a div named
addressData with the updated partialview :

$(function() {

var urlGeoIeoip = "http://ip-api.com/json/?callback=?";

$.ajax({

url: urlGeoIeoip,

type: "GET",

dataType: "json",

timeout: 5000,

success: function (geoipdata) {

$.ajax({

url: "/getlocationdata/" + geoipdata.country + "/" + geoipdata.regionName + "/" + geoipdata.city,

type: "GET",

timeout: 5000,

success: function (data) {

//alert(data);

//var $form = $(this);

// var $target = $($form.attr("data-htci-target"));

var $newHtml = $(data);

//alert($target);

$("#addressData").replaceWith($newHtml);

$("#City").data("kendoComboBox").value(geoipdata.city);

$("#State").data("kendoComboBox").value(geoipdata.regionName);

$("#Country").data("kendoComboBox").value(geoipdata.country);

}

});

}

}).fail(function(xhr, status) {

if (status === "timeout") {

// log timeout here

}

});

All works great!

BUT

Now, when I post back to the user via the submit button, the Address child member of the parent class is null....

How do I get it to rebind the Address member of the parent class after return of the ajax call?

General Discussions

answered on 18 Mar 2014