Hi, I have recently started working with Kendo and so far have been really impressed with it. The grid is quite robust and I am looking forward to obtaining a license and using the Kendo UI elements in my next project.

I have a couple of quick questions regarding the Kendio UI Grid (Web), which I was hoping someone could assist me with.

Firstly, I have been able to work with the columns pretty well so far and have been able to switch the datasource from a static html table to an array or json style data structure, which is a good step in the right direction.

For the project I am planning on using Kendo for, I need to basically display a list of contacts with the following requirements:

1) the table will be populated either by json or xml which will be output by a separate php script, this seems quite straightforward and I have done this with various libraries already so it is really just a matter of figuring out the syntax which I need to adhere to for the same protocol to work with Kendo's grid component.

2) a column containing inline action buttons must be added to the end of the table

3) a column containing checkboxes must be prepended to the table, this is basically to allow me to select multiple items. This must be able to be shown or hidden on command.


Now, I have accomplished all of the above when using a static HTML table before initializing it as a Kendo grid. However I am stumped so far in trying to accomplish the same when initializing the table using an empty div. I have tried creating a template and then setting the column's template to be equal to that, but this has resulted in either a) the html structure I put in place simply being output as a string in the column or b) the html I put in place is not being processed correctly, mainly in the case of the class names.

By the way here is an example of the code I have tried to use to set the actions template:

<script id="actions_tmpl" type="text/x-kendo-tmpl">
<div class="table_action chat_action"></div>
<div class="table_action mail_action"></div>
<div class="table_action edit_action"></div>
</script>

columns: [  { title: "", template: kendo.template($("#check_tmpl").html()) },
{ title: "Contact Name", field: "Name" },
{ title: "Company Name", field: "Company" },
{ title: "Phone", field: "Phone" },
{ title: "Email Address", field: "Email" },
{ title: "Address", field: "Address" },
{ title: "Actions", width: 78, template: kendo.template($("#actions_tmpl").html()) } ]

When you inspect the grid after it's initialization, the html exists, but the class names dont seem to come into effect for some reason?? Each div: .chat_action, .mail_action, .edit_action should display a small icon but this doesn't seem to be processed correctly as of yet.

One more issue that I am experiencing is the following, because I need to have the multiple select option implemented in the grid, there needs to be a top-level select all option but I haven't found a way so far to set the column header template or a way around that.

Any ideas would be hugely appreciated,
Thank you!

I'm working on a data audit web applicaton which has a model containing several field sets composed of old value, new value, and current value fields. The current value is a calculated field (by KO terms) which uses fairly trivial logic to decide whether the old or new value should be used for the current value (basically if there is a new value then use it otherwise show the old value). There are about 20 of these field sets to be included in the overall form, and I'd like to avoid having to call `kendo.bind` for all of them individually.

Here's an example of what I'd like to be able to do (and the documentation sort of says should work, but doesn't):

<div id="practiceSection">
    <div id="phoneNumber">
        <h4>Phone Number</h4>
        <span>Display Value:</span>
        <input id="displayPhoneNumber" data-bind="value: phoneNumber.DisplayValue"/><br/>
        <span>Old Value:</span>
        <input id="oldPhoneNumber" data-bind="value: phoneNumber.OldValue"/><br/>
        <span>New Value:</span>
        <input id="newPhoneNumber" data-bind="value: phoneNumber.NewValue"/><br/>
    </div>
</div>​ 

String.IsNullOrEmpty = function(value) {
    var isNullOrEmpty = true;
    if (value) {
        if (typeof (value) == 'string') {
            if (value.length > 0)
                isNullOrEmpty = false;
        }
    }
    return isNullOrEmpty;
}
    
function FieldBlock(oldValue, newValue) {
    this.OldValue = oldValue;
    this.NewValue = newValue;

    this.DisplayValue = function() {
        var newValue = this.get("NewValue");
        if (String.IsNullOrEmpty(newValue))
            return this.get("OldValue");
        
        return newValue;
    };
}
    
kendo.bind($("#practiceSection"), kendo.observable({
    phoneNumber: new FieldBlock("111-111-1111", null) 
}));

jsfiddle

The code above results in `FieldBlock.DisplayValue` consistently returning undefined. Oddly enough, the dependent method does work if I pass the `FieldBlock` object to `kendo.observable` directly (not as the value of a property of an anonymous object). Here is a jsfiddle showing what does work but also what I'm trying to avoid.

Is this expected behavior? I'm using the 2012.01.322 build.

Also asked here to make sure I've avoided all of the typical non-ninja problems.

Hello,

I use remote views and I didn't succeed in debugging the js scripts that are loaded with these views. Did you know a way to debug the scripts of the remote views ?

Cordially,
Kakone.

Hi,
In Asp .NET DetailsView, i use ItemTemplate, EditItemTemplate and InsertItemTemplate.
How i can set the input control, ex TextBox how kendoDatePicker ??
In $(document).ready the TextBox control is not visibile and null

Thanks

Kendo UI still lacks essential features to build a large LOB application (layouts, docking windows, hierarchical datasource, databound treeview, lazy loading, ... see uservoice and forums, also check ExtJS). It is not too far though and the progresses have been impressive so far.

Please update the roadmap for those who are planning new projects and might consider Kendo UI provided next releases bring a decent number of key missing features.

If you take a look at this fiddle:

http://jsfiddle.net/nYN8G/ 

You can see it sets the first fiddle to be user1. It then updates the datasource to be user2. However, it seems that it is just appending the secondary data source. Is this correct? How would I properly swap the data source?

I am using the Popup editing in the UI Grid.  How can I select the data values for the Row that is currently being edited?  I need to grab the country for the current row and send it as a parameter to a datasource to return the states for that country.

I am doing this to select the first row, is there a style applied to the row that is currently selected or edited?

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

             console.log(grid);

             var dataItem = grid.dataItem(grid.tbody.find(">tr:first"));

for example,while i update some data in a grid  like username,the username is unique,i must response the error/exception to user,but i saw the document configuration ,the update only has dataType and url.How can i get the response data?

I have no problem displaying the contents of the objects in a tabstrip with the earlier builds (kendoui.web-dataviz.2011.3.1129.open-source.zip), but now (kendoui.web.2012.1.322.open-source.zip) it shows the source instead of the content, even added hasOwnProperty checks. Do you know why?

                            <li><label>roles:</label>
                               #    for (var p in roles) { #
                               #        if (roles.hasOwnProperty(p)) #
                                        #= roles[p] #
                               # } #

found the fix....add this to your script...

kendo.data.ObservableArray.fn.toJSON = function() {
    return [].slice.call(this);
}

Hi,

I came across this issue while using the Upload widget... the summary is that when an upload fails, and I hit the retry button, the fields on the metadata get re-appended. Each time I hit the retry button, the value gets appended again.

Here is my code (I am using Kendo UI Complete v2012.1.322):


Let me know if there is anything I doing wrong... Otherwise I hope this helps...

Keep up the great work!
-Ricardo