I have code to resize my Tabs to match the browser size.  The problem is when I call this method inside of $(document).ready it does not resize the 1st tab.  The others seem to size just fine.  If I move my call to ResizeTabs outside of $(document).ready then it seems to work fine?  My question is why?

<div>
    @(Html.Kendo().TabStrip()
        .Name("PassportTabStrip")
        .HtmlAttributes(new { style = "height: 100%;" })
        .Items(tabstrip =>
            {
                tabstrip.Add()
                        .Text("Users")
                        .Selected(true)
                        .LoadContentFrom("GetUsers", "Passport");
                tabstrip.Add()
                        .Text("Roles")
                        .LoadContentFrom("GetRoles", "Passport");
                tabstrip.Add()
                        .Text("Functions")
                        .LoadContentFrom("GetFunctions", "Passport");
            })
    )
</div>

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

$(window).resize(ResizeTabs);

function ResizeTabs()
{
    var tabstrip = $('#PassportTabStrip');
    var headerHeight = $('header').height();
    var footerHeight = $('footer').height();
    var windowHeight = $(window).height();
    var newHeight = windowHeight - headerHeight - footerHeight - 50;
    tabstrip.css({ height: newHeight + "px" });
    var contentHeight = tabstrip.innerHeight() - tabstrip.children('.k-tabstrip-items').outerHeight() - 16;
    tabstrip.children('.k-content').height(contentHeight);
}

Hi there,

I have a kendo grid which uses a custom pop up editor which contains an editor control which works fine on desktop devices but on mobile devices the control is not focusable.

I have found that if I run this bit of javascript manually the ability to type appears to work:

$('#ControlName').data("kendoEditor").refresh()

I have done this via Chrome and emulating the ipad environment.

How can I get this control to work in the modal pop up window as my main user base is mobile based and I would prefer to use this control rather than an ugly text area control with no formatting capabilities.


Here is the grid code:

<div id="row8" class="row">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Running log</h4>
</div>
<div class="panel-body">

@(
Html.Kendo().Grid(Model.RunningLogList)
.Name("RunningLogGrid")
.ToolBar(toolbar => toolbar.Create())
.Editable(edit =>
edit.TemplateName("RunningLogEditor").Mode(GridEditMode.PopUp)
.Window(window =>
{
window.HtmlAttributes(new { @class = "kendo-popup-editor" });
})

)
.Columns(
columns =>
{
columns.Bound(c => c.ID).Visible(false);
columns.Bound(c => c.Action);
columns.Bound(c => c.Information);
columns.Bound(c => c.Added);
columns.Bound(c => c.AddedBy);
columns.Command(c => c.Edit());

}
)
.DataSource(ds =>
ds.Ajax()

.Create(create => create.Action("CreateRunningLogEntry", "New", new { area = "CaseStudy", id = Model.ID.ToString() }).Data("sendAntiForgery"))
.Update(update => update.Action("UpdateRunningLogEntry", "New", new { area = "CaseStudy", id = Model.ID.ToString() }).Data("sendAntiForgery"))
.Events(events => events.Error("NewError_Handler"))
.Model(model =>
{
model.Id(m => m.ID);
model.Field(m => m.ID).DefaultValue(Guid.NewGuid());
model.Field(m => m.Added).DefaultValue(DateTime.Now);
model.Field(m => m.AddedBy).DefaultValue(string.Format("{0} {1}",
Common.Library.Claims.ClaimsHelper.ConvertClaim((System.Security.Claims.ClaimsPrincipal)User,System.Security.Claims.ClaimTypes.GivenName ),
Common.Library.Claims.ClaimsHelper.ConvertClaim((System.Security.Claims.ClaimsPrincipal)User,System.Security.Claims.ClaimTypes.Surname )
)
);
model.Field(m => m.StudentID).DefaultValue(Model.ID);
model.Field(m => m.Action);
model.Field(m => m.Information);


})

).Sortable().Pageable().Groupable().Filterable().HtmlAttributes(new { style = "min-height:300px;" }).Scrollable().ColumnMenu()


)


</div>
</div>


<div class="row">
<div class="btn-group pull-left">
<a href="@Url.Action("Index", "Home", new { area="CaseStudy"})" class="btn btn-warning"><span class="glyphicon glyphicon-backward"></span> Back</a>

</div>
<div class="btn-group pull-right">
<button class="btn btn-danger" type="reset"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
<button class="btn btn-primary" type="submit"><span class="glyphicon glyphicon-ok"></span> Save</button>
</div>

</div>
</div>



Here is the editor code:
@model InclusionManagerMVC.Models.StudentRunningLogModels.StudentRunningLogModel


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


<div role="form" style="padding:10px;">



<div class="form-group">
@Html.LabelFor(m => m.Action)

@Html.TextBoxFor(m => m.Action, new { @class = "form-control", placeholder = "Enter action" })

</div>

<div class="form-group">
@Html.LabelFor(m => m.Information)

@Html.Kendo().EditorFor(m => m.Information).HtmlAttributes(new { style = "min-width:100%;" }).Deferred(false)

</div>


<div class="form-group">
@Html.LabelFor(m => m.Added)

@Html.Kendo().DateTimePickerFor(m => m.Added).HtmlAttributes(new { style = "min-width:100%;" })

</div>

<div class="form-group">
@Html.LabelFor(m => m.AddedBy)

@Html.TextBoxFor(m => m.AddedBy, new { @class = "form-control", placeholder = "Enter name of person adding..." })

</div>
<div class="help-block">
<p>There will be a section relating to referring the student to panel. Need to decide how this will be activated. </p>
</div>

@Html.Partial("_ErrorPanel")


</div>

I have a server bound grid that was working fine.  I needed to change it to an ajax bound grid because I needed to add some custom command buttons.  The editor template for the grid contains a dropdownlist which is populated via ViewData in my controller get method.  When I switch the grid to be ajax bound that dropdownlist is throwing an error:


Do I need to change the way the dropdownlist is populated? Or am I doing something else wrong?


Controller:


View:



EditorTemplate: (the first field is the one causing the error)

I have a Kendo().Button on a page that, when clicked, fires a click event to open a Kendo().Window in order to display an alert.  This works fine.  But, if I add a $(document).ready function  to open the window when the document is ready, it does not open the window, and the button does not render properly.

Instead of rendering as a <button> with an <img> property, instead it renders as a plain <button> no image,

Code follows:

​

Is there any way to prevent the removal of an item from the select list when a user selects it and maintain the order of the select list?

Hi guys, 
I don't know if I'm in the right section because my question is actually on datapager...but anyway..

I'd like to know if there any way to customize the appearance of the pager using mvc...
I remeber that in "normal" use I was able to set if to show pages number or just control or something like that..
I have the pager you see in the attached print, and I'd like to fix it so that it is rendered in just one line. (maybe removing page numbers, or showing just 5 instead of 10).

note that page size is set to 10 and has to remain like this.
Thanks
Fabio

Hi,

My search page showing list of employee in a grid and I want inline operation of grid.

My issue is :

Recently added data is not showing after "Save Changes" button clicked (It shows a copy of 1st record).
but  new data is appears after refresh button is clicked.

"Save change"  action is adding data perfectly.

Screenshot is attached 

Please see my code

cshtml
--------------------
@model TelerikMvc5App.ViewModel.EmployeeViewModel

@(Html.Kendo().Grid<TelerikMvc5App.ViewModel.EmployeeViewModel>()
    .Name("gridEmployee")
    .Columns(columns =>
    {
        columns.Bound(p => p.EmployeeId);
        columns.Bound(p => p.EmployeeName).Width(140);
        columns.Command(command => command.Destroy()).Width(110);
    })
    .ToolBar(toolbar =>
    {
        toolbar.Create();
        toolbar.Save();
    })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Pageable(pageable => pageable
                .Refresh(true)
                .PageSizes(true)
                .ButtonCount(5))
    .Navigatable()
    .Filterable()
    .Sortable()
    .Scrollable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .ServerOperation(false)
        .Events(events => events.Error("error_handler"))
            .Model(model => model.Id(p => p.EmployeeId))
            .Create("CreateEmp", "Employee", new { Area = "Employee" })
            .Read("SearchEmp", "Employee", new { Area = "Employee" })
            .Update("SaveEmp", "Employee", new { Area = "Employee" })
            .Destroy("DeleteEmp", "Employee", new { Area = "Employee" })
    )
)

<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
</script>


Controller
---------------------------------

 public static List<EmployeeViewModel> empList = new List<EmployeeViewModel>();


private List<EmployeeViewModel> GetAllEmployees()
        {           
            empList.Add(new EmployeeViewModel() { EmployeeId = 1, EmployeeName = "Kumar" });
            empList.Add(new EmployeeViewModel() { EmployeeId = 2, EmployeeName = "Jaysankar" });
            empList.Add(new EmployeeViewModel() { EmployeeId = 3, EmployeeName = "Sathish" });
            empList.Add(new EmployeeViewModel() { EmployeeId = 4, EmployeeName = "Koushik" });
            empList.Add(new EmployeeViewModel() { EmployeeId = 5, EmployeeName = "Ramesh" });            
            return empList;
        }

public ActionResult Search()
        {
            if (empList.Count == 0)
            {
                GetAllEmployees();
            }
            return View();
        }

 public ActionResult SearchEmp([DataSourceRequest]DataSourceRequest request)
        {
            return Json(empList.ToDataSourceResult(request));
        }

 [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult CreateEmp([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<EmployeeViewModel> emps)
        {
            foreach (EmployeeViewModel emp in emps)
            {               
                empList.Add(emp);
            }
        return Json(empList.ToDataSourceResult(request));
        }

 [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult SaveEmp([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<EmployeeViewModel> emps)
        {  
                foreach EmployeeViewModel emp in emps)
                {
                    // some code
                }            }
            return Json(empList.ToDataSourceResult(request));
        }

 [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult DeleteEmp([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<EmployeeViewModel> emps)
        {
            if (emps.Any())
            {
                foreach (EmployeeViewModel emp in emps)
                {
                    var item = empList.First(x => x.EmployeeId == emp.EmployeeId);
                    empList.Remove(item);
                }
            }            
            return Json(empList.ToDataSourceResult(request));
        }

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


Thanks
Kumar

Here is our ImageBrowser startup code:



From our MVC Controller, we are returning this model of object to the Read action of our ImageBrowser:


When the Read action receives that result, it puts all of those properties, including the EntFileId, on the image item created in the ImageBrowser. So when I loop through the items in the ImageBrowser by doing something like this:


You can see that the EntFileId gets attached to the items.

Now, when we Upload a file, we are supposed to return the uploaded file object back to Kendo, so we return it like this:


I see in Developer Tools that the Upload action is definitely returning an object with the EntFileId, but for some reason, when that item is put into the ImageBrowser, it does not attach the EntFileId property to that item. So after the Upload action completes, and I do the same loop through the items in the ImageBrowser, the uploaded image looks like this in the Console:


There is no EntFileId property for the item (even if you expand the object).

Why does the extra EntFileId property get attached from the Read action, but not when the object is returned from the Upload action? Can you help me understand what's going on and why there is a difference? Thank you.

Hello,

I have an ajax bound grid and I have it set to be sortable.  But when I click a column heading all of the data in the grid disappears.  If I switch it to server binding the sorting works.  I need ajax binding because I am using a client detail template.  What am I missing??

Here is the view:



Here are the relevant controller methods:

Hi,

dropdown is not populating data while inline edit of grid
Search.cshtml
-------------
@model TelerikMvc5App.ViewModel.EmployeeViewModel
@(Html.Kendo().Grid<TelerikMvc5App.ViewModel.EmployeeViewModel>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.EmployeeId).Width(50);
        columns.Bound(p => p.EmployeeName).Width(140);
        columns.Bound(p => p.DateOfBirth).Width(100);
        columns.Bound(p => p.GenderId).Width(100);
        columns.Bound(p => p.MariatalStatusId).Width(110).EditorTemplateName("_MariatalStatusPartial").ClientTemplate("#:MariatalStatus#");
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
    })
         .ToolBar(toolbar => toolbar.Create())
        .Editable(editable => editable.Mode(GridEditMode.InLine))
                  .Selectable(s => s.Enabled(true)
                                    .Type(GridSelectionType.Row)
                                    .Mode(GridSelectionMode.Single))
    .Pageable(pageable => pageable
                .Refresh(true)
                .PageSizes(true)
                .ButtonCount(5))
    .Navigatable()
    .Filterable()
    .Sortable()
    .Scrollable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .ServerOperation(false)
            .Events(events => events.Error("error_handler"))        
                   .Model(model =>
                    {
                        model.Id(p => p.EmployeeId);
                        model.Field(p => p.EmployeeId).Editable(false);
                        model.Field(p => p.MariatalStatusId);
                    })

            .Create("CreateEmp", "Employee", new { Area = "Employee" })
            .Read("SearchEmp", "Employee", new { Area = "Employee" })
            .Update("SaveEmp", "Employee", new { Area = "Employee" })
            .Destroy("DeleteEmp", "Employee", new { Area = "Employee" })
    )
)
<script type="text/javascript">  

    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
</script>
--------------------
_MariatalStatusPartial.cshtml
----------------------------
@model TelerikMvc5App.ViewModel.EmployeeViewModel
@Html.Kendo().DropDownListFor(m => m.MariatalStatusId).DataTextField("Text").DataValueField("Value").DataSource(ds => ds.Read(r => { r.Action("GetMariatalStatus", "Employee", new { Area = "Employee" }); })).OptionLabel("Select Marital Status")


------------------
controller
-----------------------
 public ActionResult Search()
        {
            if (empList.Count == 0)
            {
                GetAllEmployees();
            }

            return View();
        }
 public JsonResult GetMariatalStatus()
        {
            List<SelectListItem> mariatalStatusList = new List<SelectListItem>();
            mariatalStatusList.Add(new SelectListItem { Text = "Single", Value = "1" });
            mariatalStatusList.Add(new SelectListItem { Text = "Married", Value = "2" });
            mariatalStatusList.Add(new SelectListItem { Text = "Others", Value = "3" });
            return Json(mariatalStatusList, JsonRequestBehavior.AllowGet);
        }

 private List<EmployeeViewModel> GetAllEmployees()
        {           
            empList.Add(new EmployeeViewModel() { EmployeeId = 1, EmployeeName = "Kumar", GenderId=1, MariatalStatusId=1 , MariatalStatus="Single" });
            empList.Add(new EmployeeViewModel() { EmployeeId = 2, EmployeeName = "Jaysankar", GenderId = 2, MariatalStatusId = 2, MariatalStatus = "Married" });
            empList.Add(new EmployeeViewModel() { EmployeeId = 3, EmployeeName = "Sathish" });
            empList.Add(new EmployeeViewModel() { EmployeeId = 4, EmployeeName = "Koushik" });
            empList.Add(new EmployeeViewModel() { EmployeeId = 5, EmployeeName = "Ramesh" });            
            return empList;
        }
------------

----------------
 public class EmployeeViewModel
    {
        public string EmployeeName { get; set; }
        public int? EmployeeId { get; set; }        
        
        public string LastName { get; set; }
        [Display(Name = "Gender")]
        [Required(ErrorMessage = "Gender is Required.")]
        public int GenderId { get; set; }
        [Display(Name = "Gender")]
        public string Gender { get; set; }

        [Display(Name = "Marital Status")]
        [Required(ErrorMessage = "Mariatal Status is Required.")]
        public int? MariatalStatusId { get; set; }

        [Display(Name = "Marital Status")]
        public string MariatalStatus { get; set; }

        [Display(Name = "Date Of Birth")]
        [Required(ErrorMessage = "Date Of Birth is Required.")]
        [DataType(DataType.Date)]      
        public DateTime? DateOfBirth { get; set; }
        
        [Display(Name = "Cell")]
        [Required(ErrorMessage = "Cell is Required.")]
        public string Cell { get; set; }


    }

Thanks
Kumar