Questions on Kendo UI for jQuery Forum

0 answers

72 views

Hi,

I know that the dataBound event is fired when sorting occurs. This event is generic however, and I cannot tell whether it is being fired as a consequence of sorting.

Is there a way to handle only the sorting event?

Thanks

Grid

asked on 27 Jul 2012

0 answers

75 views

integration with other technologies

Is there integration with other technologies?

General Discussions

asked on 27 Jul 2012

0 answers

149 views

Server Paging

I'm trying to set up server paging for remote data that I'm accessing via an ajax call. My dataSource looks like this:

var data = new kendo.data.DataSource({

transport: {

read: function(options) {

$.ajax( {

url: "http://localhost/Projects/rpc",

contentType: "application/json",

dataType: "json",

data: JSON.stringify({"method": "breq.getBreqs"}),

type: 'POST',

success: function (result) {

//alert("success");

options.success(result)

},

error: function (jqXHR, textStatus, errorThrown) {

alert("Error: " + textStatus);

options.error(jqXHR, textStatus, errorThrown)

},

});

}

},

serverPaging: true,

pageSize: 10,

schema: {

data: "result"

},

});

I understand that the server has to handle the paging itself however when I look at the AJAX request through chrome developer tools all I can see in the request payload is "{"method": "breq.getBreqs"}". Is the positioning of my paging settings correct and what is sent in the request to represent it so that I can pick it up on my server?

Grid

asked on 27 Jul 2012

1 answer

7.5K+ views

Grid Select By Id

Hi all!
I created this helper function to select rows by id, it works well in FF and Chrome, but not in IE.

function gridSelectById(gridName, id) {
    var grid = $("#" + gridName);
    var data=grid.data("kendoGrid");
    var row = data.tbody.find(">tr:not(.k-grouping-row)").filter(function (i) {
      return (this.dataset.id == id);
    });
    data.select(row);
}

Seems like "dataset" is not defined on the row for IE9. Is this a known issue? Is there a better way of achieving the same result that I'm missing?

Cheers,
Andrés

Grid

answered on 27 Jul 2012

1 answer

118 views

Missing "}" kendo.common.min.css

Missing closing } in kendo.common.min.css
at
.k-floatwrap,.k-slider-items,.k-grid-toolbar{ display:inline-block;

General Discussions

answered on 27 Jul 2012

1 answer

203 views

ComboBox Autocomplete with Webservice

I am in the process of switching a Telerik MVC ComboBox with the Kendo equivalent.

How to I accomplish the below code in KENDO?

@(Html.Telerik()
.ComboBox()
.HtmlAttributes(new { style = "width: 300px" })
.Name("cbCountry")
.AutoFill(true)
.DataBinding(dataBinding => dataBinding.WebService().Select("~/Code/WCF/LoadOnDemand.svc/LoadCountry"))
.Filterable(filtering =>
{
filtering.FilterMode(AutoCompleteFilterMode.StartsWith);
})
.HighlightFirstMatch(true)
)

ComboBox

answered on 27 Jul 2012

1 answer

815 views

Nullable boolean fields are always converted to true or false

Hi there,

I'm using a datasource with a grid an I need to be able to handle null values in boolean fields differently from false. However, when the DataSource gets its data and runs through convertRecords() it converts all the boolean fields to true or false even if I've marked the field as nullable:true. Is there a way to get around this and actually show nulls for boolean fields?

Here's a JS fildde with a nullable boolean being converted to false: http://jsfiddle.net/mtrichards26/wCd4T/21/

Thanks!
Matt

Data Source

answered on 27 Jul 2012

1 answer

320 views

Textfield not focusing properly

Hi,
I have an application with a text field that needs to be programmatically focused when its view is shown. This in turn brings up the virtual keyboard on mobile devices (as is expected whenever a text field is ever brought into focus).

This feature worked perfectly before the latest Kendo UI upgrade. Once upgraded, android no longer brings the keyboard into view. iOS does not even focus the text field.

I have created a test application to demonstrate the mechanism:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>Text Field Autofocus</title>

<link href="kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />

<script src="jquery-1.7.2.min.js" type="text/javascript"></script>

<script src="kendo.mobile.min.js" type="text/javascript"></script>

</head>

<body>

<div id="one" data-role="view">

<div class="km-navbar" data-role="navbar">

Page 1

</div>

<br />

<span>Click the button to be taken to the 2nd page</span>

<br />

<a class="km-button" href="#two">Go To Page 2</a>

</div>

<div id="two" data-role="view" data-show="focusTextbox"> 

<div class="km-navbar" data-role="navbar">

<a class="km-button km-back" onclick="javascript:history.go(-1)" data-align="left">Back</a>

<input id="input" type="search" data-align="left" placeholder="Search Box"/>

</div>

<br />

<span>The text field should be programatically focused on the view's show event.</span><br />

<br />

<button onclick="focusTextbox()">Manually Focus</button> 

</div>

</body>

<script type="text/javascript">

var app = new kendo.mobile.Application($(document.body));

function focusTextbox() {

$("#input").focus();

}

</script>

</html>

When calling the same function from a button, it works as expected. It seems that calling the event through the view's show event somehow suppresses default behaviours.

To further explore this issue, I wrapped the focus() call in a setTimout function. Seeing as the call from the button happens at a much later time then when the view's show event is fired, it may behave differently.

setTimeout(function () {

$("#input").focus();

}, 500);

Unfortunately, this is also unable to focus the text field from the view's show event. In fact, doing this also makes the button's call no longer work. After doing some research, I found that Mobile Safari has a feature that limits multi-threading functionality (such as those created by setTimeout) for usability/secuirty reasons. Perhaps there is a threading issue with the view show event.

Hope this helps. Any help with a fix is greatly appreciated.

Thanks,
John

Application

answered on 27 Jul 2012

5 answers

295 views

Mapping json response to popup

FIXED: We have built our services to handle the filtering on the server side to limit the data that is sent down. Since I'm not use to the serverFiltering option on the dataSource I created my own issue. Once I switched that flag to true everything mapped correctly.

I'm switching from jQueryUI to KendoUI. I didn't have an issue mapping my json response from the server to the autocomplete response before. Now I can't seem to figure out how to map the json response in Kendo.

var group = $("#GroupCode");
group.kendoAutoComplete({
    minLength:3,
    dataTextField: "Code",
    dataSource: {
        type: "json",
        transport: {
            read: {
                url: '@Url.Action("GroupCodeListBySG", "Equipment")',
                type: "GET",
                dataType: "json",
                data: {
                    search: function() {
                        return group.val();
                    },
                    saleGroup: function() {
                        return $("#DivDrop option:selected").val();
                    }
                }
            }
        }
    }
});

That was just the basic data in which I send two variables to the server for the search. Below is an example of a json response.

[{"ExtensionData":{},"Code":"VEHICLES","DMFPercent":0,"Default_Excise_Tax":false,"Description":"VEHICLE ASSETS","Division":null,"IsActive":false,"IsAttachment":false,"JDUX_CatID":null,"JDUX_KeyCode":null,"RDOP_Agreement_MW":null,"RDOP_Agreement_NW":null,"RDOP_Agreement_SC":null,"RDOP_Agreement_SW":null,"RDOP_Facts_MW":null,"RDOP_Facts_NW":null,"RDOP_Facts_SC":null,"RDOP_Facts_SW":null,"Sales_Group":null,"Updated":"\/Date(-62135575200000)\/","Updated_By":null}]

I had it mapped to display display the Code + Description and map IsAttachment and Code field to some hidden data. Just trying to map the return data so I can see an autocomplete display isn't working. Would someone be able to give me an example on how I can map my return?

AutoComplete

answered on 27 Jul 2012

0 answers

141 views

Grid With DetailView just once open.

I use kendoGrid and change Event show detail view.
this code jues work just one time I don't know why.

my code is

<body>

            <div id="grid"></div>
            <div id="test"></div>

   <script type="text/x-kendo-template" id="template">
                <div class="toolbar">
                    <label class="category-label" for="category">joindate:</label>
     <input id="start">
     <input id="end">
     <button class="k-button" onclick="refreshGrid()" id="refresh">search</button>
     <button class="k-button" id="excel" onclick="excelGrid()" >excel</button>
                </div>
            </script>

            <script>
    function refreshGrid() {
     $("#grid").data("kendoGrid").dataSource.read();
    }

    function excelGrid(){

    var form = document.excel;
        form.command.value = "admin03_excel";
        form.start.value = $("#start").val();
        form.end.value = $("#end").val();
        form.action = "<%=RequestUtils.getPageLink(request,"/")%>ActAdmin.do";
        form.submit();

    }


    $(document).ready(function() {

                    $("#grid").kendoGrid({
                       dataSource: {
                              transport: {
        read: {
         url: "/ActAdmin.do?command=admin03_json",
         dataType: "json",
         data: { //additional parameters sent to the remote service
          start: function() {
           return $("#start").val();
          },
          end: function() {
           return $("#end").val();
          }
         }

         }
                              },
                              schema: {
        data: "rows",
        total: "total",
                                  model: {
                                      fields: {
                                          reg_date :{ type: "string" },
                                          usr_id :{ type: "string" },
                                          biz_name :{ type: "string" },
                                          biz_num :{ type: "string" },
                                          usr_name :{ type: "string" },
                                          reg_date :{ type: "string" },
                                          usr_hp :{ type: "string" }
                                      }
                                  }
                              },
                              pageSize: 15,
                              serverPaging: true,
                              serverSorting: true,
                              serverFiltering: true

                          },
                          height: 720,
                          filterable: true,
                          sortable: true,
                          pageable: true,
                          selectable: true,
        toolbar: kendo.template($("#template").html()),

          change: function(data){

          var text = "";
          var grid = this;

             grid.select().each(function() {
                var dataItem = grid.dataItem($(this));
                text = dataItem.usr_id;
                var window = $("#windowFacets");

                        if (startDate) {
                            startDate = new Date(startDate);
                            startDate.setDate(startDate.getDate() + 1);
                            end.min(startDate);
                        }
                    }

function endChange() {
var endDate = end.value();

                        if (endDate) {
                            endDate = new Date(endDate);
                            endDate.setDate(endDate.getDate() - 1);
                            start.max(endDate);
                        }
                    }

                    var start = $("#start").kendoDatePicker({
      value: "<%=(st_year+"-"+st_month+"-"+st_day)%>",
                        change: startChange,
      format: "yyyy-MM-dd"
                    }).data("kendoDatePicker");

                    var end = $("#end").kendoDatePicker({
      value: new Date(),
                        change: endChange,
      format: "yyyy-MM-dd"
                    }).data("kendoDatePicker");

                    start.max(end.value());
                    end.min(start.value());
                });
            </script>
        </div>

Grid

asked on 27 Jul 2012