Telerik Forums
Kendo UI for jQuery Forum
2 answers
59 views
Hi,

I’am currently testing Kendo UI Grid.  Our product uses Telerik and would like to move towards Kendo.  I have a general question on the Grid control using Row templates.

Let say I use the following row template that I would like to use with a Grid.  The first cell would be bound to the “Field1” of my object.  The second cell is a link that points to a URL bound to “Field2” of my object.

<script id="MyRowTemplate" type="text/x-kendo-tmpl">
<tr>
  <td>${ Field1 }</td>
  <td><a href=”${Field2}”>click me</a></td>
</tr>
</script>

My question is the following.  How would I insert some logic to remove the link if the “Field2” my object set is empty.
In pseudo code I would like to achieve the following.

If myObject.Field2 = “” then
  Do not generate a link
Else
  Show the link with the Url pointing to MyObject.Field2

In other words I’am trying to find a way to have more control on the html generated when binding fields to a grid.  Not sure if using a Row template is the way to go in my case.  

Thanks in advance.





Mohamed
Top achievements
Rank 1
 answered on 30 Mar 2012
1 answer
113 views
i am trying to disable a drop down list control

here is the code

$("#payment").attr('disabled', 'disabled');

this does not seem to happen at all

here is the payment control

<label for="payments">Payment Type:&nbsp;&nbsp;&nbsp;</label><input id="payment" data-bind="value: payment" name="payment" />

and the code load the datasource
$.ajax({
                                url: 'dsr.asmx/get_Payment',
                                async: true,
                                cache: false,
                                timeout: 30000,
                                contentType: 'application/json; charset=utf-8',
                                data: "{}",
                                type: 'POST',
                                dataType: 'json',
                                success: function (msg) {
                                    $("#payment").val("revpay").kendoDropDownList({
                                        index: 0,
                                        optionLabel: "Select Payment Type",
                                        dataTextField: "Description",
                                        dataValueField: "Code",
                                        filter: "contains",
                                        suggest: true,
                                        minLenght: 1,
                                        change: onPayChange,
                                        dataSource: {
                                            data: msg.d
 
                                        }
                                    });
                                }
                            });

and the function to disable the control by another drop down list choice
function onResChange() {
               var res = document.getElementById("result").value;
               switch (res) {
                   case 'c':
                       alert('Canceled');
                       $("#payment").attr('disabled', 'disabled');
                       break;
                   case 'cb':
                       alert('Call Back no Sale');
                       break;
               }
           }

the alert's work but the .attr is never firing
Troy Clemons
Top achievements
Rank 1
 answered on 30 Mar 2012
7 answers
356 views
Hello and thanks for the awesome controls :)

I have the following test code i am playing with right now,

<!DOCType html>
<html>
<head>
    <title></title>
    <script src="js/jquery-1.7.1.js"></script>
    <script src="js/kendo.all.js"></script>
    <link href="styles/kendo.common.css" rel="stylesheet" />
    <link href="styles/kendo.default.css" rel="stylesheet" />
</head>
<body>
 
<div id="chart" style="height:300px; width:500px">
</div>
<input id="addData" class="k-button" type="button" value="Add Data" />
<script>
    $(function() {
        var data = [
            {
                employee: "Joe Smith",
                sales: 2000
            },
            {
                employee: "Jane Smith",
                sales: 2250
            },
            {
                employee: "Will Roberts",
                sales: 1550
            }];
        $("#addData").click(function() {
            data = data.concat({
                            employee: "Will Roberts",
                            sales: Math.floor(Math.random()*10001)
                        });
            //var chart = $("#chart").data("kendoChart");
            //chart.options.data = data;
            //alert(data)
            //chart.refresh();
        });
        $("#chart").kendoChart({
            title: {
                text: "Employee Sales"
            },
            dataSource: new kendo.data.DataSource({
                data: data
            }),
            series: [{
                type: "line",
                field: "sales",
                name: "Sales in Units"
            }],
            categoryAxis: {
                field: "employee"
            },
            tooltip: {
                visible: true,
                format: "{0}%"
            }
        });
    })
</script>
</body>
</html>


Now when i add more items to 'data' JSON Array I would like to see changes in the chart,
The following are in my mind right now,
1). using observable collection (kendo.data.ObservableObject) as a data source? such that when the data object changes it reflects in the control (or element) via kendo.bind but i am not sure how to implement this without the need to .refresh() everytime the collection is changed when Add Data button is clicked
2). A way where chart.options.data = data is assigned the control must automatically reflect the new chart ( in other words i am looking for a live charts control like how we do in MVVM, where the object changes and since its bound to the control it just reflects the changes ) but not sure how to implement with this scenario 

could someone please help?
Guru
Top achievements
Rank 1
 answered on 29 Mar 2012
10 answers
446 views
Hello,
 First I want to thank you for those beautiful tools you've made to make developer's life easier.
But It seems that either I can't understand how to bind grind to XML or it's simply not working for the beta version. I look at the demo "xml-grid" but it doesn't list any items at all. 

Thank you in advance.
Juan
Top achievements
Rank 1
 answered on 29 Mar 2012
7 answers
342 views
Hi,

I have a kendo grid. And there is a dropdown. In the grid there is a column having a date field. Now, this date column's data format should be changed according to the value chosen from the dropdown. Suppose, i choose daily or hourly in the dropdown, then i have to display date with time(in the format hh:mm:ss). Suppose i choose weekly, then i have to display date with time(in the format hh).And if i choose monthly or yearly, then only date should be displayed. I am not able to get, how can i change the column definition dynamically. And also, from the server i am getting a date object only as i also have to filter and sort on that column. I am using a template for this column to specify the format. But, depending on various conditions, how can i change the format? Please suggest.

Thanks,
Khushali
Alexander Valchev
Telerik team
 answered on 29 Mar 2012
0 answers
260 views
I have set 'filterable' and 'serverFiltering' to 'true for a Kendo UI Grid.

In the 'parameterMap' function I am able to get the 'options.filter.logic' and iterate the 'options.filter.filters' array to get the filter values for a single column.

Suppose if the user tries to filter the grid on multiple columns, How can i achieve the above?

The 'options.filter' should be an array so that I could get the 'logic' for each column's filter and so on.

Or Am I misunderstanding this? Is there any other way to get the filter values of multiple columns?

Here is that code snippet.

parameterMap: function (options) 
                        {
                            if (options.filter)
                            {
                                
                                alert(options.filter.logic);
                                alert(options.filter.filters.length);
                                for(var i = 0; i < options.filter.filters.length; i++)
                                {
                                    alert(options.filter.filters[i].field);
                                    alert(options.filter.filters[i].operator);
                                    alert(options.filter.filters[i].value);
                                }
                            }                            
                            
                        }
Guna
Top achievements
Rank 1
 asked on 29 Mar 2012
0 answers
93 views
Hi, I have a grid with inline option, and when I edit a row, a later I click in cancel button, the data in row selected is changed.

The grid is:
                    $("#grid").kendoGrid({
                        dataSource: sharedDataSource,
                        toolbar: [ { "create", text: "Add new Prodduct Group" }],
                        editable: "inline", 
                        change: onChange,
                        selectable: true,
                        height: 400,
                        sortable: true,
                        pageable: true,
                        columns: [
                                { field: "strProdGroupDesc", title: "Product Group", nullable: false, filterable: false },
                                { command: ["edit"], title: " ", width: "110px" }
                        ]
                    })

                    function onChange(arg) {
                        var grid = this;
                        grid.select().each(function() {
                            var dataItem = grid.dataItem($(this));
                            PGDesc = dataItem.strProdGroupDesc;
                            PGId = dataItem.intProdGroupId;
                            alert("Item: " + PGId + "-" + PGDesc);
                        });
                    }
Juan
Top achievements
Rank 1
 asked on 29 Mar 2012
6 answers
141 views
If I using template and editable.
So when you edit the first record it will automatically set to the value of the latter.

I have for example 3 rows. 
        AAA   |  111
        BBB   |  222
        CCC  |  333

If I click first row. 
My grid will be:
        CCC  |  111
        BBB   |  222
        CCC  |  333

My grid code:
    var locationData = {
        columns:[
          {field: "location", title: "Name"},
          {field: "serial",   title: "Serial Number"}
        ],
        filterable: false,
        sortable: true,
        pageable: true,
        scrollable: false,
        selectable: true,
        editable: true,
        height: 200,
        theme: uiTheme,
        rowTemplate: chargePointRowTemplate,
        dataSource: chargePointsDataSource
    };

var chargePointsDataSource = new kendo.data.DataSource({
    data:restData,
    pageSize:5,
    serverPaging:false,
    serverSorting:false,
    schema:{
        data:function (result) {
            return result.points.testpoints
        },
        total:function (result) {
            if (result.points) {
                return result.points.PageSize;
            } else {
                return result.length || 5;
            }
        },
        model: {
            id: "serial",
            fields: {
                location: { editable: true, type: "string", nullable: true },
                serial: { editable: false, type: "string", nullable: false }
            }
        }
    }
});

var chargePointRowTemplate = kendo.template(
    "<tr><td height='20'>#= location #</td><td height='20'>#= serial #</td><td height='20'><div class='status-item_#= status #'></div></td></tr>"
)
Alexander Valchev
Telerik team
 answered on 29 Mar 2012
1 answer
338 views
Hi there,

I am trying to make the direction of the values for the Y axis to go from 1 to 15, 1 at the top and 15 at the bottom.

1
2
3
4
5

instead of

5
4
3
2
1

If use

valueAxis: {
       reverse:true,
        max:15,
          min:1,
       },

both X and Y axis get reversed. How can I keep the X axis without a change and only change Y?

Thank you
Claudia
Iliana Dyankova
Telerik team
 answered on 29 Mar 2012
0 answers
91 views
kendoui.web.2012.1.322

I
bind my model to a table.
If I update the values ​​with widget, the model is updated.
If I set the value of the widget by value, the model is not updated.
This happens both for the dropdownlist and for both the numerictextbox.

ex.:
var modelDett = $("#nsgridDett").data("kendoGrid").dataSource.getByUid(nsRowDettSelectUid);
kendo.bind($("#tableDetail"), modelDett);

// not update model
var importoKM = 100;
$("#txtImporto").data("kendoNumericTextBox").value(importoKM); //txtImporto -> input of tableDetail
Mike
Top achievements
Rank 1
 asked on 29 Mar 2012
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?