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)
)

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

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:


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. 


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

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?

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="example" class="k-content">
   <div id="windowFacets" style="width:100%"></div>
   <!-- // -->

            <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");

        window.kendoWindow({
                              actions: ["Close"],
                              width: "780px",
                              height: "620px",
                              content:{
                               url: "/ActAdmin.do?command=admin03_popup",
                               data:{usr_id: function() {return text;}}
                              },
                              modal: true,
                              title: "DetailView"
                          });
                 alert('3');
                 window.data("kendoWindow").open();
             });
      
      },
        columns: [{
                            field:"reg_date",
                            title: "date",
                            filterable: false,
                            sortable: false
                        },
      {
                            field: "usr_id",
                            title: "id"
                        },
                     {
                            field: "biz_name",
                            title: "iz",
                            sortable: false,
       filtertable: false
                           
                        },
                     {
                            field: "biz_num",
                            title: "num",
                            sortable: false
                           
                        },
                     {
                            field: "usr_name",
                            title: "user",
                            filterable: false,
                            sortable: false
                           
                        },
                     {
                            field: "usr_hp",
                            title: "phone",
                            filterable: false,
                            sortable: false
                        },
                     {
                            field: "reg_date",
                            title: "reg_date",
       template: '#= kendo.toString(reg_date,"yyyy-MM-dd") #'
                        }
                    ]
                });

                    function startChange() {
                        var startDate = start.value();

                        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>   
       

I have a grid with a local data array.
how can I do a row select on it?
Thanks-

              
                         $("#dataGrid").kendoGrid({
                             dataSource: {
                                data: customerData, // local array
                                schema: { model: {id: "CustomerPK"} },
                                group: [ { field: "CustomerType", dir: "asc" }]
                             },                             
                             groupable: true,
                             selectable: true,
                            change: function() {
                                var custID = this.select().data("id");
                                alert("Selected " + custID); // 'undefined'
                                }
                         });  

I am new to this but I can't seem to find the answer.  

In both MVC3 and MVC4 (I tried both), I create the vanilla project, define my table with EF and scaffold up the controller, repository and views.  All works fine.  The Index view returns hundreds of records.  

2 problems:  1) When I try to use the Kendo Grid, 0 records are returned.  
2) The GetCarriers method never seems to fire because I never hit the breakpoint.

Here is what I did to add the Kendo Grid to my Index view:
Referenced the .dll
Copied in the CSS and JS files and put them in the head tag section of my _layout.cshtml
Added the following method to my CarriersController

        public ActionResult GetCarriers([DataSourceRequest]DataSourceRequest request)
        {
            var carriers = carrierRepository.All;  // <<<=== Never breaks here if I set the break point
            DataSourceResult result = carriers.ToDataSourceResult(request);
            return Json(result);
        }

Replaced the code in my Index.cshtml

@(Html.Kendo().Grid<TBCarrierTools.Data.Models.Carrier>()
    .Name("Grid")
    .Columns(columns => 
        {
            columns.Bound(p => p.CarrierID);
            columns.Bound(p => p.CarrierName);   
        })
    .DataSource(datasource => datasource
        .Ajax()
        .Read(read => read.Action("GetCarriers", "Carriers")
        ))
)

Here is the Page Source:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Index</title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/kendo.all.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>


    <script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
</head>
<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>My MVC Application</h1>
            </div>
            <div id="logindisplay">
                    [ <a href="/Account/LogOn">Log On</a> ]


            </div>
            <nav>
                <ul id="menu">
                    <li><a href="/">Home</a></li>
                    <li><a href="/Home/About">About</a></li>
                    <li><a href="/Carriers">Carriers</a></li>
                </ul>
            </nav>
        </header>
        <section id="main">
            


<h2>Carriers</h2>


<div class="k-widget k-grid" id="Carriers"><table cellspacing="0"><colgroup><col /><col /></colgroup><thead class="k-grid-header"><tr><th class="k-header" data-field="CarrierID" data-title="Carrier ID" scope="col"><span class="k-link">Carrier ID</span></th><th class="k-header" data-field="CarrierName" data-title="Carrier Name" scope="col"><span class="k-link">Carrier Name</span></th></tr></thead><tbody><tr class="t-no-data"><td colspan="2"></td></tr></tbody></table></div><script>
jQuery(function(){jQuery("#Carriers").kendoGrid({columns:[{title:"Carrier ID",field:"CarrierID",encoded:true},{title:"Carrier Name",field:"CarrierName",encoded:true}],scrollable:false,dataSource:{transport:{read:{url:"/Carriers/GetCarriers"}},serverPaging:true,serverSorting:true,serverFiltering:true,serverGrouping:true,serverAggregates:true,type:"aspnetmvc-ajax",filter:[],schema:{data:"Data",total:"Total",errors:"Errors",model:{fields:{CarrierID:{type:"number"},CarrierName:{type:"string"},CarrierAddress:{type:"string"},CarrierCity:{type:"string"},CarrierState:{type:"string"},CarrierPostal:

... omitted for brevity

{type:"number",defaultValue:null},usrDate:{type:"date",defaultValue:null},usrMemo:{type:"string"},TypeID:{type:"number"},PayMethod:{type:"number"},UserGUID:{type:"object"},tblCarrierContacts:{type:"object"}}}}}});});
</script>
        </section>
        <footer>
        </footer>
    </div>
</body>
</html>
Any ideas?
Thanks
P

On page http://docs.kendoui.com/api/wrappers/aspnet-mvc/Kendo.Mvc.UI.Fluent/GridSortSettingsBuilder, the API docs refer to the a .Sorting() method.  The correct name of the method is Sortable().

Hi,

I have services already developed to update, delete and add information.  So I need know how can I discover the updated rows to implement myself a batch update. How can I do that ?

Thanks in advance

Hi:

Is it possible to copy cells from excel back to the editable grid cells?

Thanks