Questions on UI for ASP.NET MVC Forum

1 answer

124 views

Jquery error while displaying Data on Grid

Hi I am getting a jquery error while displaying data on grid, if i select cotinue i get the data in the Grid, just filter option is not working, but am able to sort and go to other pages in the Grid, but that jquery error comes evertime. error message is "Microsoft JScript runtime error:Object doesn't support this property or method"
The error come in my View at runtime in this line, which has all the table data:jQuery(function(){jQuery("#Grid").kendoGrid({"columns"
Content of my View is whown belo, i have followed instruction from kendo website and copied all the references, but still error is there, please see the view and let me know my mistake.
@model IEnumerable<MvcApplication6.Models.tbliDeployWeeklySchedule>

<!DOCTYPE html>

<html>
<head>
<link rel="stylesheet" href="@Url.Content("~/Content/kendo.common.min.css")">
<link rel="stylesheet" href="@Url.Content("~/Content/kendo.default.min.css")">
<script src="@Url.Content("~/Scripts/jquery.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.core.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.data.odata.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.data.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.popup.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.list.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.calendar.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.numerictextbox.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.validator.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.binder.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.dropdownlist.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.filtermenu.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.pager.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.sortable.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.draganddrople.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.groupable.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.editable.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.selectable.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.resizable.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.reorderable.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.grid.min.js")"></script>
<title>Example2View1</title>
</head>
</html>
@(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.Weekly_Schedule_Id);
columns.Bound(p => p.Region_No).Width(130);
columns.Bound(p => p.Team_No).Width(130);
columns.Bound(p => p.Month_No).Width(130);
columns.Bound(p => p.Year_No);
columns.Bound(p => p.Week_No).Width(130);
columns.Bound(p => p.Territory_No).Width(130);
columns.Bound(p => p.ECC_Num).Width(130);
columns.Bound(p => p.Total_Calculated);
columns.Bound(p => p.Total_Adjusted).Width(130);
columns.Bound(p => p.SalesRep_Id).Width(130);
columns.Bound(p => p.Role_Id).Width(130);
columns.Bound(p => p.Last_Updated_By).Width(130);
columns.Bound(p => p.Modified_Date).Width(130);
columns.Bound(p => p.Last_Updated_TimeStamp).Width(130);
})

.Pageable()
.Sortable()
.Scrollable(scr=>scr.Height(430))
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)

.ServerOperation(false)
)
)

Grid

answered on 22 Mar 2013

1 answer

379 views

Update password in the grid with password match option

Hi Telerik team
   I have a grid with InCell editing
      .Name("UserDetailsGrid").Editable(editable=> editable.Mode(GridEditMode.InCell) )

This grid has a column Password
   columns.Bound(p=> p.Password).ClientTemplate("***").Title("Password").Width(200);

   On Edit / Create New I need to have
a password confirm option which will force the user to type the password two times.

   This is required because I am not
displaying the password to the user in the grid. I am displaying it using
ClientTemplate("***") which will show * on the grid

Can you help me to solve this issue. This way or some other better way.

Thanks

Grid

answered on 22 Mar 2013

1 answer

834 views

Disable Validation

How to disable client side validation on @Html.DatePicker ?

DatePicker

answered on 21 Mar 2013

1 answer

119 views

Generic Window -- Window Generico

Hola buen dia.
puedo crear un control Window de telerik or un helper al que le pueda pasar parametros y asignarlos al control?
Ejemplo
@Helper helpWindow(string nom, string tit)
{
@(Html.Telerik()
     .Name(nom)
     .Title(tit)
    )
}
--------------------------------
Hello good day.
I can create a control of telerik Window or a helper when you can pass parameters and assign them to control?
example
@ Helper helpWindow (nom string, string tit)
{
@ (Html.Telerik ()
      . Name (nom)
      . Title (tit)
     )
}

Window

answered on 21 Mar 2013

2 answers

522 views

Global error handler for numerous grids

I've currently inherited an application which has numerous Kendo grids (and other controls) throughout, and I'm trying to fix an error which keeps cropping up now and again - specifically when the user is no longer authenticated.

I know what the solution is for a single instance of the control - return a flag to indicate authentication failed, and then detect this in the error handler and perform the authentication.

The problem is am I really going to have to handle this for every instance of a Kendo control I have? Is there not a global error handler I can hook into for the DataSource? Or the grid or all Kendo controls?

This would be a more straighforward short term solution than refactoring everything to specific error handlers, etc.

Grid

answered on 21 Mar 2013

5 answers

299 views

Menu embedded in grid not expanding when hovered over

Maybe there's some difference in Telerik/Kendo MVC behaviour here?

I've been converting some code from the Telerik MVC components to the Kendo MVC equivalents.

I have a Kendo grid in which one of the columns has embedded a Kendo menu. However when the menu is moused over the menu does not expand, nor does it do so when the menu is clicked.

I've created two small sample projects, one showing the menu expanding on hover as expected with the Telerik components, the other project has been ported to Kendo and the menu no longer displays.

I've made only minor changes to have the code run with Kendo, including updating the menu name to use the revised template format and adding a call to ToClientTemplate when building the menu.

The projects are larger than the allowed 2MB limit so I've shared them via SugarSync.
https://www.sugarsync.com/pf/D104910_65492427_756235

Why though does the menu not display with the Kendo code?

Here's the code;
View

@using MvcMenuPopup.Models

@{

ViewBag.Title = "People";

}

<h2>Some People</h2>

@(Html

.Kendo()

.Grid<Person>()

.Name("peopleGrid")

.Columns(columns =>

{

columns.Template(t => { }).ClientTemplate(

Html

.Kendo()

.Menu()

.Name("themenu#=PersonId#")

.Items(menu => menu.Add().Text("::").Items(sub =>

{

sub.Add().Text("Do this thing");

sub.Add().Text("Do that thing");

}))

.Orientation(MenuOrientation.Vertical)

.HighlightPath(true)

.OpenOnClick(false)

.ToClientTemplate()

.ToHtmlString()

)

.HtmlAttributes(new { @class = "navigationColumn", style = "overflow: visible;" })

.Width(50);

columns.Bound(t => t.Birthday);

columns.Bound(t => t.FirstName);

columns.Bound(t => t.Surname);

})

.DataSource(binding => binding.Ajax().Read("PeopleAjax", "Home")))

Model

namespace MvcMenuPopup.Models

{

using System;

public class Person

{

public long PersonId { get; set; }

public DateTime Birthday { get; set; }

public string FirstName { get; set; }

public string Surname { get; set; }

}

Action

namespace MvcMenuPopup.Controllers

{

using System;

using System.Linq;

using System.Web.Mvc;

using Kendo.Mvc.Extensions;

using Kendo.Mvc.UI;

using MvcMenuPopup.Models;

public class HomeController : Controller

{

public ActionResult Index()

{

return this.View();

}

public ActionResult About(string firstName)

{

return this.View((object)firstName);

}

public JsonResult PeopleAjax([DataSourceRequest]DataSourceRequest request)

{

DataSourceResult result = GetPeople().OrderByDescending(train => train.Birthday).ToDataSourceResult(request);

return this.Json(result);

}

private static IQueryable<Person> GetPeople()

{

var birthdays = Enumerable.Range(1, 12).Select(month => new DateTime(1980, month, 1)).ToList();

return birthdays.Select((date, index) => new Person

{

PersonId = index,

Birthday = date,

FirstName = "Bill" + index,

Surname = "Smith" + index

}).AsQueryable();

}

Menu

answered on 21 Mar 2013

6 answers

288 views

[Solved] Grid Selectable and Groupable not working in Chrome

Hello,

Please see this fiddle http://jsfiddle.net/ptrinephi/vWHzs/3/
It's the default kendoUI Basic Usage demo at http://demos.kendoui.com/web/grid/index.html with 1 modification:
I've added selectable: true to the grid:

$(document).ready(function() {

$("#grid").kendoGrid({

dataSource: {

data: createRandomData(50),

pageSize: 10

},

selectable: true,

groupable: true,

sortable: true,

pageable: {

refresh: true,

pageSizes: true

},

columns: [{

field: "FirstName",

width: 90,

title: "First Name"},

{

field: "LastName",

width: 90,

title: "Last Name"},

{

width: 100,

field: "City"},

{

field: "Title"},

{

field: "BirthDate",

title: "Birth Date",

template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'},

{

width: 50,

field: "Age"}

]

});

Everything works properly when run in IE (8,9,10), FF 17, Safari 5 and Opera 12. You can select rows on the grid.

Run in Chrome 23:
1.Row selection does not work! Click on any row and nothing happens.
2.You can only drag 1 column to the group header. Drag a second column to the group header and nothing happens.

Thanks.

PT

Grid

answered on 20 Mar 2013

4 answers

930 views

[Solved] How I can use column template from client side to show anchor tag with my another column value

I am new on Kendo UI.
I am using Kendo Grid from Client Side. I am also bound data from Client side.
Consider following code which i have used to bind json data.

var people = [

{ firstName: "Hasibul", lastName: "Haque", email: "hasibul@yahoo.com" }

];

$('#grid').kendoGrid({

scrollable: true,

sortable: true,

pageable: true,

selectable: "row",

filterable: true

, dataSource: { data: people, pageSize: 10 }

, columns:

[

{ field: "firstName", title: "First Name" }

, { field: "lastName", title: "Last Name" }

, { field: "email", title: "email" }

, {

field: "action", title: "Action",

template: "I want to put action linke here by using field value(firstName)"

}

]

});

I just want to show another column called action column. From where user can do perform another action. In my action link i want to show First name. How i can do that?
I can populate action column from server side but now i want to do everything from client side.
If i consider server side

column.Template(c => @Html.ActionLink(c.Description, "foo", new { id = c.prop, })

I want something similar on client side.

Hope you will help me.

Grid

answered on 20 Mar 2013

3 answers

116 views

altTemplate with MVC helpers

I can't figure out how to specify an altTemplate with the MVC Helper. Is this possible? I tried adding the altTemplate later in jQuery code and it seems that I have to re-specify all values from the MVC Helper as well.

ListView

answered on 20 Mar 2013

4 answers

260 views

[Solved] Quick Batch Edit with 1 Editable Column

In the Grid I'm looking for a way to do a batch edit for all the fields in 1 column (the only editable field). I've turned on Batch Edit, In Cell Editing, and Navigateable for keyboard Navigation.
Since this is a 10 key function for the most part, ideally I would like tab go to the next editable cell, which is the next row. (As designed, tab goes to next cell - regardless of being editable) In other applications, tab goes to the next editable cell. If all cells editable showed as a textbox in Batch Edit, that would be an option as well.

I've tried to capture the current cell, then after saving set the cell below to be editable. But the grid synchronization isn't complete or grid is refreshing or something and the first cell in grid is selected.
Would be better if this could be connected to a Tab key from the cell being edited.

For the Save Event:
.Events(events =>
                           {
                               events.Save(
                                   @<text>
                                        function (e) {
                                            var currentCell = $("#AreaPhysicalCountGrid_active_cell");
                                            setTimeout(function () {

                                                $("#AreaPhysicalCountGrid" + @ViewBag.CycleCountID).data("kendoGrid").dataSource.sync();
                                                SelectNextEditableCell(currentCell);
                                            });
                                        }
                                    </text>);
                           })

My function for changing to the next editable cell.
function SelectNextEditableCell(currentCell) {
    var grid = $("#AreaPhysicalCountGrid").data("kendoGrid");
    //var currentCell = $("#AreaPhysicalCountGrid_active_cell");

    //Get index of the td (2)
    var currCellIndex = currentCell.index();
    var cellBelow = currentCell.closest("tr").next().children().eq(currCellIndex);

    grid.editCell(cellBelow); //Put the cell into editMode in grid
    //grid.editRow(currentCell.parent().next());
}

Attached is a visual of the grid, the yellow cells are the only one's being edited.
Any help would be great.

Grid

answered on 20 Mar 2013