Hi ,

i have 3 dropdownlists on my page
-Customer
-Region
-FacilityGroup

<li>

                    <label class="fieldName"  for="CustomerName"> Customer<span class="red">*</span>:</label>

                    <span class="fieldValue">

                        @(Html.Kendo().DropDownList()

                        .OptionLabel("Select ")

                        .Name("Customer")

                        .DataTextField("CustomerName")

                        .DataValueField("CustomerId")

 

                        .Value("CustomerId")

                        .DataSource(source =>

                        {

                            source.Read(read =>

                            {

                                read.Action("GetCustomer", "AddFacility");                                  

                                 

                            });

 

                        })

                    .Events(e => e.Change("dropdownlist_Validation"))

                     

 

                        )

                        @Html.HiddenFor(m=>m.CustomerName)

                        <div id="divcustomer" >

                        @Html.Label("Required", new { @class = "red" });

                        </div>

                        <script type="text/javascript">

 

                            function GetId() {

                                return {

                                    Customer: $("#Customer").val()

                                };

                            }

                        </script>

                      @*  @Html.ValidationMessageFor(model => model.CustomerName)*@

                    </span>

                     

                    </li>

                    <li>

                  <label class="fieldName"  for="RegionName">Region<span class="red"></span>:</label>

                  <span class="fieldValue">

                  @(Html.Kendo().DropDownList()

                                .OptionLabel("Select ")

                                .Name("Region")

                                .DataTextField("RegionName")

                                .DataValueField("RegionId")

                                                                 

                                //.Value("RegionId")

                                .DataSource(source =>

                                {

                                    source.Read(read =>

                                    {

                                        read.Action("GetRegion", "AddFacility")

                                             

                                             

                                            .Data("filterRegion");

                                         

                                    })

                                     .ServerFiltering(true);

                                })

                       .Enable(false)

                       .AutoBind(false)

                       .CascadeFrom("Customer")

                       .Events(e => e.Change("dropdownlist_Validation"))

 

                                )

 

                                

                                 

                                <script type="text/javascript">

                                    function filterRegion() {

                                        return {

                                            Customer: $("#Customer").val()

                                             

                                        };

                                    }

                               </script>

                                <script type="text/javascript">

                                    function GetId() {

                                        return {

                                            Region: $("#Region").val()

                                        };

                                    }

                        </script>

                        

                  </span>

                  </li>

                    <li>

                    <label class="fieldName"  for="FacilityGroupName">Facility Group<span class="red">*</span>:</label>

                    <span class="fieldValue">

                                 @(Html.Kendo().DropDownList()

                                .OptionLabel("Select ")

                                .Name("FacilityGroup")

                                .DataTextField("FacilityGroupName")

                                .DataValueField("FacilityGroupId")

                                .Value("FacilityGroupId")

                                 

                                .DataSource(source =>

                                {

                                    source.Read(read =>

                                    {

                                        read.Action("GetFacilityGroupName", "AddFacility")

                                        //.Data("filterfacilitygroup")

                                        .Data("filterfacilitygroup2");                                       

                                    })

                                    .ServerFiltering(true);

 

                                })

        .Enable(false)

         .AutoBind(false)

                .CascadeFrom("Region")               

                .CascadeFrom("Customer")

                .Events(e => e.Change("dropdownlist_Validation"))

 

                                )<div id="divfacilitygroupname">

                                 @Html.Label("Required", new { @class = "red" });

                                </div>

                                @*<script type="text/javascript">

                                    function filterfacilitygroup() {

                                        return {

 

                                            Region: $("#Region").val()

                                             

                                        };

                                    }

                                            </script>*@

                                            <script type="text/javascript">

                                                function filterfacilitygroup2() {

                                                    return {

                                                        Customer: $("#Customer").val(),

                                                        Region: $("#Region").val()

                                                    };

                                                }

                                             </script>

                         <script type="text/javascript">

                             function GetId() {

                                 return {

                                     FacilityGroup: $("#FacilityGroup").val()

                                 };

                             }

                         </script>

                          

                    </span>

                </li>

Now as you can see i am cascading the Region and the Facility Group dropdown from the Customer dropdown .
my controller looks like dis :-

public JsonResult GetCustomer()

      {

 

          var objCustomerName = CustomerNameTypeClient.GetCustomers().Select(CustomerT => new RegionModel

          {

              CustomerId = CustomerT.CustomerId,

              CustomerName = CustomerT.CustomerName

          });

          return Json(objCustomerName, JsonRequestBehavior.AllowGet);

      }

 

      /// <summary>

      /// Gets the region.

      /// </summary>

      /// <returns>Json</returns>

      public JsonResult GetRegion(string Customer)

      {

           

 

          var VarRegionName = FacilityClient.GetRegion(Customer);

 

          return Json(VarRegionName, JsonRequestBehavior.AllowGet);

      }

 

      /// <summary>

      /// Gets the name of the facility.

      /// </summary>

      /// <returns>Json</returns>

      public JsonResult GetFacilityGroupName(string Region, string Customer)

      {

 

 

 

          var VarFacilityGroupName = FacilityClient.GetFacilityGroup(Region, Customer);

 

              

           

 

          return Json(VarFacilityGroupName, JsonRequestBehavior.AllowGet);

           

      }

Now i need to drill down the facilitygroup dropdown further using  the selection in  region dropdownlist.

Help!!!!

I am using cshtml view to display an autocomplete using below.  The autocomplete works fine until i try setting the .Events. 

I copied the events code and script from the cshtml events example and am getting "Microsoft Jscript runtime error: 'change' is undefined"

@model CashBatchesViewModel
 
<div>
    
    @(Html.Kendo().AutoComplete()
                  .Name("autocomplete")
            //.Filter("startswith")
          .Placeholder("Select Batch...")
          .Filter("contains")
          //.DataTextField("ProductName")
          .DataSource(source =>
          {
              source.Read(read => read.Action("GetBatches", "Cash"));
          })          
                          .Events(e =>
                          {
                              e.Change("change").Select("select").Open("open").Close("close");
                          })
    )
<label id="batchLabel" class="k-header">Batch label</label>
</div>
 
<div>
</div>
 
<script>
 
    function close() {
        //kendoConsole.log("event: close");
        alert("Batch Auto Close");
    };
 
    function open() {
        //kendoConsole.log("event: open");
        alert("Batch Auto Open");
    };
 
    function change() {
        //kendoConsole.log("event: change");
        alert("Batch Auto Change");
    };
 
    function select(e) {
        //if ("kendoConsole" in window) {
            var dataItem = this.dataItem(e.item.index());
            alert("event :: select (" + dataItem + ")");
        //}
    };
</script>

I am trying to edit the cell programmatically in batch edit mode but it seems that after editCell method  keyboard navigation does not work properly

See this fiddle for what I am attempting

http://jsfiddle.net/mollybibeault/KPYe3/

How do I pass the credential information for the ODATA service when using the kendodata?

my jsfiddle example has simple sorting but result on the date sorting is random, is there a way to customize this or handle date sorting when null dates are present?
JsFiddle

Thanks for any help.

Hello, I'm testing the checkboxes (treeview web), but I get error. The rest of the examples work very well.

This is the error.

Error      1             'Kendo.Mvc.UI.Fluent.TreeViewBuilder' does not contain a definition for 'Checkboxes' and no extension method 'Checkboxes' accepting a first argument of type 'Kendo.Mvc.UI.Fluent.TreeViewBuilder' could be found (are you missing a using directive or an assembly reference?)                c:\kendoui.trial.2012.2.710\wrappers\aspnetmvc\Examples\Areas\razor\Views\web\treeview\index.cshtml                6             18           Kendo.Mvc.Examples

Just copy and replace (in index.cshtml) entire code:
http://demos.kendoui.com/web/treeview/checkboxes.html (checkboxes.cshtml)

Use the sample project (kendoui.trial.2012.2.710.zip).

I think the problem was.
@ using (Html.BeginForm ("Checkboxes", "TreeView" FormMethod.Post))

thank you very much

Hi,
the selectbox change event seems to get triggered before the model value actually changes.
Am I doing something wrong?
Here's a fiddle showing my problem http://jsfiddle.net/rN2b6/ 

Adding a Kendo UI Mobile based web app to the home screen on the iPhone 5 results in a screen size that is smaller than the iPhone 5 display.  This appears to have something to do with the viewport meta tag.

I have been able to reproduce this with the iPhone 5 and the latest Simulator.

The issue is occurring on the demos on the Kendo UI website as well.  See attached screenshot.

Sean

I have 2 grids on top of one another. Users may select items from Grid A (raw data), push a button, and those items will be copied to Grid B (benchmarks). Users may also reorder columns in Grid A, but I'd like to move the columns in Grid B to match when Grid A's move event is complete.

Is this possible out of the box? If user moves column in Grid A, does that change the DataSource metadata? If so, can I just copy the schema & columns from Grid A to Grid B, or is there something better I can be using?

Hello... First of all thanks to Kendo team for providing kendo controls ..were much helpful to me and my team. I have less experience on client side scripting and I thought I will use kendo grid to start with presentation of data.. Of late I came across this problem.....would appreciate your help in advance....

I am trying to bind json objects to kendo grid and really not sure if the binding is happening in the background. Json request returns the data properly which I can check it from the firebug but binding does not happen. Just to check if it is trying to bind or not .... I tried to give a wrong field name still I don't see any reference error for the wrong column name. I have attached databound event to the grid with alert message and it always alerts the message irrespective of grid binding. Can you please check the code syntax below and let me know if there is anything that I am missing. Also, can you please let me know how to troubleshoot these kind of problems in future...

function BindData() {
                    sharedDS.transport.options.read.data = {
                        cpid: $find("<%= cboContentProviderDetails.ClientID %>").get_value(),
                        startdatefrom: FormatToProperDate($find("<%= rdpStartDateFrom.ClientID %>")),
                        startdateto: FormatToProperDate($find("<%= rdpStartdateTo.ClientID %>")),
                        enddatefrom: FormatToProperDate($find("<%= rdpEndDateFrom.ClientID %>")),
                        enddateto: FormatToProperDate($find("<%= rdpEndDateTo.ClientID %>")),
                        alstatus: $find("<%= rdoStatus.ClientID %>").get_value(),
                        isexclusive: $find("<%= cboTypeOfCopyright.ClientID %>").get_value(),
                        territories: '',
                        customers: '',
                        services: '',
                        agreementid: $find("<%= cboAgreements.ClientID %>").get_value(),
                        allterritories: $('input[id$=chkAllTerritories]').is(':checked'),
                        allservices: $('input[id$=chkAllCustomers]').is(':checked'),
                        allcustomers: $('input[id$=chkAllServices]').is(':checked'),
                        alname: $('input[id$=txtName]').val(),
                        remdaysfrom: $('input[type=text][id$=txtNumericDaysFrom]').val(),
                        remdaysto: $('input[type=text][id$=txtNumericDaysTo]').val(),
                        contentid: $('input[type=text][id$=txtContentCP]').val()
                }
                sharedDS.page(1);
            }
            $("#comboBox").kendoComboBox({
                dataTextField: "text",
                dataValueField: "value",

                change: function (e) {
                    var grid = $("#grid").data("kendoGrid");
                    grid.dataSource.pageSize(parseInt(this.value(), 10));
                }
            });

            var sharedDS = null;



            function BindGrid() {    
            var _Url = '<%=  ResolveUrl("~/Forms/AuthorizationLetter/SearchAuthorizationLetterHandler.ashx?requesttype=Search") %>';       
            sharedDS = new kendo.data.DataSource({  
                     
                    schema: {
                     data: "rows",
                     total: "total",
                      model: {
                            id: "ALId"
                            }
                 },
                    serverPaging : true,   
                    pageSize: 20,                     
                        transport: {
                            read: { url: _Url,
                                datatype: 'json',
                                data: {
                                    cpid: $find("<%= cboContentProviderDetails.ClientID %>").get_value(),
                                    startdatefrom: FormatToProperDate($find("<%= rdpStartDateFrom.ClientID %>")),
                                    startdateto: FormatToProperDate($find("<%= rdpStartdateTo.ClientID %>")),
                                    enddatefrom: FormatToProperDate($find("<%= rdpEndDateFrom.ClientID %>")),
                                    enddateto: FormatToProperDate($find("<%= rdpEndDateTo.ClientID %>")),
                                    alstatus: $find("<%= rdoStatus.ClientID %>").get_value(),
                                    isexclusive: $find("<%= cboTypeOfCopyright.ClientID %>").get_value(),
                                    territories: '',
                                    customers: '',
                                    services: '',
                                    agreementid: $find("<%= cboAgreements.ClientID %>").get_value(),
                                    allterritories: $('input[id$=chkAllTerritories]').is(':checked'),
                                    allservices: $('input[id$=chkAllCustomers]').is(':checked'),
                                    allcustomers: $('input[id$=chkAllServices]').is(':checked'),
                                    alname: $('input[id$=txtName]').val(),
                                    remdaysfrom: $('input[type=text][id$=txtNumericDaysFrom]').val(),
                                    remdaysto: $('input[type=text][id$=txtNumericDaysTo]').val(),
                                    contentid: $('input[type=text][id$=txtContentCP]').val()
                                }
                            }
                        },
                    });
             $("#grid").kendoGrid({
                    dataSource: sharedDS,
                    autoBind: false,
                     dataBound: function(e) {
                      //  alert('');
                     },
                    scrollable: false,
                    sortable: true,
                     pageable: {
                            refresh: true,
                            pageSizes: [10, 15, 20, 50]

                        },
                    columns: [
                            {
                                field: "ALId",
                                title: "ALId"
                            }
                        ]
                });
            }

$(document).ready(function () {
                BindGrid();
});

I call BindData() method each time when user prefers to search.