Hi all , I need some help with some issues in a custom editor I add to a kendo grid . I'm using MCV and the code is the following : 

   @(Html.Kendo().Grid<GridProspectObject>()    
       .Name("GridAllProspects")
       .AutoBind(false) 
        Events(events =>
         {
               events.DataBound("loadtooltipsAllProspectsGrid");
               events.Edit("onEditAssignment");
          })
          .Columns(columns => 
          {
                  columns.Bound(p => p.ProspectName).Title("name");

                  columns.Bound(p => p.Class).Title("class");

                   columns.Bound(p => p.DisplayStatus).Title("assignment status (click to change)").ClientTemplate("#=AssignedTo#").EditorTemplateName("EditorVolunteer").HtmlAttributes(new { @style = "text-align:left" });
          })
         .ToolBar(toolbar => 
        {
               toolbar.Save();        
         })
         .Editable(editable => editable.Mode(GridEditMode.InCell))
         .Pageable()
         .Sortable()
          .Filterable()
         .DataSource(dataSource => dataSource        
             .Ajax()         
             .Batch(true)
            . PageSize(50)
            .Model(model =>
            {
               model.Id(p => p.ProspectId);
               model.Field(p => p.ProspectName).Editable(false);
              model.Field(p => p.Class).Editable(false);
           })
          .Read(read => read.Action("Read_AllProspects", "Projects", new { listId = prospectList.PROSPECT_LIST_ID, pid = Model.PROJECTS_ID }).Type(HttpVerbs.Get))
.          Update(update => update.Action("ChangeAssignment", "Projects"))
         )
        .HtmlAttributes(new { @style = "margin-top:10px" })
   )

The editor template is a kendo comboBox : 

      @(Html.Kendo().ComboBox()
        .Name(ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))
        .Filter("contains")
        .Placeholder("--select--")
        .DataValueField("Value")
        .DataTextField("Name")
        .Events( events =>
        {
            events.DataBound("dataBound");
            events.Open("openDropDown");
        })
        .DataSource(dataSource => dataSource
            .Read(read => read.Action("ReadAsignmentOptions", "Projects").Data("getParentId") )
        )
        .Template("#if( data.Value == '" + Guid.Empty + "' || data.Value == '-1' ) {# " +
            "<span class='specialOption'>#:data.Name #</span>" +
            " #} else {# " +
            "<span>#:data.Name#</span>" +
            " #}#")
     )


Finally the "getParentId()" function is : 

  function getParentId() {
        var row = $(event.srcElement).closest("tr");
        var grid = $(event.srcElement).closest("[data-role=grid]").data("kendoGrid");
        var dataItem = grid.dataItem(row);
        return { prospectId: dataItem.ProspectId, currentAssigned: dataItem.AssignedToId };
    }

The issues I need help with are : 

 1) I want to add server filtering to the combobox so I can display a custom message "no results to display" when the text entered in the comboxbox returns no results but when I add the options "ServerFilter(true)" to the comboxbox the function getParentId() throws an error saying "cannot ready property dataItem of null".

 2) When a selection is made from the combobox (the same custom editor) , I want to display that selection with the red corner in the cell visible, so the user can see the change before saving . Right now when I select an option the old value keeps showing in the grid cell and only red icon appears. 

 3) This code works fine in IE  and Google Chrome , but for some reason it does not work in Firefox. When I click on the grid cell to edit it the combobox just spins forever because the request never gets to the controller. Is this a known bug ? 

Thanks !

When a row on a grid is clicked a popup form is opened. Inside the form I setup a Razor Kendo DropDownList from a database. I was able to mange the DropDownList to change HTML tables based on the drop down value. However, when the form is initially loaded I am not able to show the correct table in other words i am not able to get the value of the current displayed item. 

This is how I change tables when the user select different item in the menu:

    $(function () {
            $('#PaymentType_ID').change(function () {
                $('.payment').hide();
                if ($(this).val() == "5") {
                    $('.payment').hide();                    
                }

                if ($(this).val() == "2") {
                    $('#creditCardPayment').show();
                    $('#generalPayment').show();
                }

                if ($(this).val() == "1" || $(this).val() == "3" || $(this).val() == "4") {
                    $('#otherPayment').show();
                    $('#generalPayment').show();
                }
            });
        });

I want to reuse most of the code but instead of using on .change I want to use something like .ready but it does not work.

Anyone has any idea how should I try?

I am not sure if this has been asked already. If yes, please point me to that thread. 

Use case: This happens when a row template is implemented in Grid. If the content of cell is edited and tab key is pressed, the focus jumps to next item. But the edited cell still maintains the editor.

Expected Behavior : As soon as tab is pressed and focus get shifted out of the edited cell, the cell should display in "normal" mode rather than edit mode.

Refer to this link for my implementation

http://dojo.telerik.com/@kamit1983/IREku/11

Thanks

Hi,

 I have a form with validations setup and everything works fine if user tries to enter something. If user directly clicks on the submit button after page load with out touching any field then validations wont fire.

 Take a look at the example here http://dojo.telerik.com/AXIsI/2

if you just go into the text box and tab out, then error message is displayed. if you directly click on the button with out touching then validation message is not displayed as the rules is skipped based on input name checking. How can make this work?

 I made the example to be simple, in real scenario there is so much complex logic involved. So I cannot avoid using check on name and also I cannot use just the html5 "required" attribute

Hi,

Does the Upload control allow setting a minimum file size so that files below this limit won't be uploaded?

Thanks

We are unable to display the fetched data on the KendoGrid.  We are able to retreive the data from the service call and then call the datasource fetch() method to repopulate the grid, but the the grid is not displaying any data.

 Please refer to the code snippet below:

------------------------------------------------------------------------------------ 

// AngularJS Controller 

...

$scope.search = {
            timeout: null,
            delay: 500, //500ms
            query: '',        
        };

....

 $scope.applyFilter = function() {
            if (userType == "keheemployee") {
                //$scope.applyServerFilter();    //NOTE!!  This line of code works with ng-repeater

                //call the updateKendoDataSource function here...  
                updateKendoDataSource();  //NOTE!!  This line of code is for the actual Grid 

            } else {
                applyClientFilter();
            }
        };

// Note: Function which gets called when Filter button is clicked. 

function updateKendoDataSource() {

            var employeeGrid = $("#employeeGrid"); // employeeGrid id the Grid's id
            var employeeGridData  = employeeGrid.data("kendoGrid");

            if ($scope.search.timeout) {
                $timeout.cancel($scope.search.timeout);
            }
            $scope.search.timeout = $timeout(function () {               
                if ($('#searchText').val()) {
                    employeeGridData.dataSource.transport.read = {
                        url: landingPageAPIService.getSearchResultsData($('#searchText').val(), $scope.includeInactive),
                        type: "GET",
                        dataType: "json",
                        contentType: 'application/json; charset=utf-8',
                        cache: false                        
                    };
                    employeeGridData.dataSource.fetch();
                }
            }, $scope.search.delay);
        }

// AngularJS Service

var kVendorManagementServices = angular.module('kServices.apis.vendorManagement', ['kServices.connectApi']);

    kVendorManagementServices.service('landingPageAPIService', ['Services', 'vendorManagementEnvironment', landingPageAPIService]);

    return kVendorManagementServices;

    function landingPageAPIService(Services, vendorManagementEnvironment) {

        return {
            
            // All the API calls go here...                       
          getSearchResultsData: function (searchText, includeInactive) {              
              return Services.request("GET", vendorManagementEnvironment.apiVendorManagementServices('/api/LandingPage/Search/' + includeInactive + '/' + searchText));  //apiVendorManagementServices is created for us

        }, //end  getSearchResultsData function
                       
        };        
    }

View Template:

<div>
    <input id="searchText" ng-model="searchText" />
    <input id="includeInactive" type="checkbox" ng-model="includeInactive" /> &nbsp;
    <label>Include Inactive</label>
    <!-- Clear Filter button -->&nbsp;
    <input type="button" id="filterData" value="Filter" ng-click="applyFilter()" />
    <input type="button" id="clear" value="Clear Filters" ng-click="clearFilters()" />
</div>

<div id="employeeGrid" kendo-grid class="col-sm-12"
             k-data-source="landingPageData.Vendors"
             k-options="kendo.gridOptions" class="grid">
</div>

Hi guys..

Well, my login view has some divs..almost all of them have margin/padding using "%"..

When I press some input text, the keyboard comes up and all divs are compressed..

How can I fix the view so it will not get stretched or compressed by keyboard appearances?

Regards.

André Rocha.