Questions on UI for ASP.NET MVC Forum

1 answer

107 views

Telerik Grid Sort hides the partial view

Hi All,

I am new to MVC ,so if i am wrong sorry in advance.
My application have one telerik grid. it contains several columns,
one column is ajax action link (productid),it displays a partial view within the same page. upto this it works fine.
Now when i sort the telerik grid colum, it hides this partial view.
Below is my view:

@model IEnumerable<MvcApplication2.Models.Product>@{
ViewBag.Title = "WebgridSample";
}<h2>WebgridSample</h2>
@using Kendo.Mvc.UI;

<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>

@{
MvcApplication2.Models.Product product = new MvcApplication2.Models.Product();
}
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
@Scripts.Render("~/bundles/jquery")

@Html.DisplayNameFor(model => model.Quantity)
</th>
<th></th>
</tr>@(Html.Kendo().Grid(Model).Name("ProductGrid")
.Columns(columns =>
{columns.Template(@<text>
@Ajax.ActionLink(@item.Id.ToString(), "Edit",
new { id = @item.Id,name=@item.Name,desc=@item.Description,quantity=@item.Quantity }, new AjaxOptions { HttpMethod = "GET",
InsertionMode = InsertionMode.Replace ,
UpdateTargetId = "view-details"

})
</text>)
.Title("Id");
columns.Bound(o => o.Name);
columns.Bound(o => o.Description);
columns.Bound(o => o.Quantity);
})
.Pageable()
.Sortable()
)
<div id="view-details" >

</div>

and my controller action is given below:

public PartialViewResult Edit(string id)
{Product product = inventoryList.Single(t => t.Id == id);
return PartialView("_Product", product);
}

and my partial view is:

@model MvcApplication2.Models.Product
@{
Layout =null;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />

</head>
<h2>Product Details</h2>
<body>
<table ><tr><td><label>Id:</label></td><td>@Html.TextBox("Id", Model.Id)</td></tr>
<tr><td><label>Name:</label></td><td> @Html.TextBox("Name", Model.Name)</td></tr>
<tr><td> <label>Description:</label></td><td> @Html.TextBox("Description", Model.Description)</td></tr>
<tr><td><label>Quantity:</label></td><td> @Html.TextBox("Quantity", Model.Quantity)</td></tr>
</table>

</body>
</html>Thanks in advance :)

Grid

answered on 06 Apr 2015

2 answers

123 views

Gantt Databound issue and timeline headers style

Hi,

I am using Gantt and I have few issues.

1. When Gantt is first loaded it doesn't display task timeline. I have to select some other view first in order for it to appear.
2. If I use databoud event to set view ( var gantt = $("#Gantt").data("kendoGantt");
gantt.view("week"); ) I have error Uncaught RangeError: Maximum call stack size exceeded. if i comment this all code in databoud function executes fine

Is there any way to hide weeks if view is set to month view? Our client wants just to track by months since all projects are monthly.
Also can we hide days or hours if week and day view is selected.

Thank You

Gantt

answered on 06 Apr 2015

1 answer

203 views

Multiselect in Grid Toolbar Template

Hi All,
In the example : http://demos.telerik.com/aspnet-mvc/grid/toolbar-template , i want to filter my grid with multi-select. Is there any demo or tutorial about this ?

Grid

answered on 06 Apr 2015

1 answer

1.1K+ views

Dropdownlist with cascade and filter

Hi guys,

It’s possible to make a control dropdownlist with settings cascade enabled and filtered by contains too. I show you the scenario:

Grid code

@(Html.Kendo().Grid<FareDetailViewModel>()

.Name("fare_details#=FareID#")

.ToolBar(t =>

{

if (User.IsInRole("Modify"))

{

t.Create().Text("Afegir Referencia");

}

})

.Columns(columns =>

{

columns.ForeignKey(f => f.Tipus, (System.Collections.IEnumerable)ViewBag.CatalogTypes, "Key", "Value").EditorTemplateName("CustomGridForeignKeyFareType").Width(120);

//columns.ForeignKey(f => f.CatalogReference, (System.Collections.IEnumerable)ViewBag.Cataleg, "Reference", "Descripcio").EditorTemplateName("CatalegReferenceByType");

columns.Bound(f => f.CatalogReference).EditorTemplateName("CatalegReferenceByType").EditorViewData(new { gridid = "fare_details#=FareID#" });

Editor template

@model object

@(Html.Kendo().DropDownList()

.Name("CatalogReference" + ViewData["gridid"])

.HtmlAttributes(new { data_bind = "value:CatalogReference" })

.AutoBind(false)

.OptionLabel("Select reference...")

.DataTextField("Descripcio")

.DataValueField("Reference")

.Filter(FilterType.Contains)

.MinLength(3)

.ValuePrimitive(true)

//.HtmlAttributes(new { data_skip = "true", data_bind = "defferedValue: object" })

//.BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])

.DataSource(source =>

{

source.Read(read => read.Action("PopulateReferences", "Catalog").Data("filterTypes"))

.ServerFiltering(true);

})

.CascadeFrom("Tipus")

.HtmlAttributes(new { id = Guid.NewGuid().ToString() })

)

function filterTypes() {

return {

text: $("#Type").data("kendoDropDownList").value() + "|" + $("#CatalogReference" + temporalFare).data("kendoDropDownList").filterInput.val()

};

}

$("#CatalogReference" + temporalFare).data("kendoDropDownList")
Here, I find the error. Browser say me this expression is undefined

Controller Code

public JsonResult PopulateReferences(string text)

        {

            var param = text.Split('|');

            var type = (int)text[0];

            var search = text[1];

            var catalog = GetCatalog((catalogType)type).Where(c => (c.Descripcio + " " + c.Reference).Contains(search)).Select(c => new { Reference = c.Reference, Descripcio = c.Descripcio + " - " + c.Reference }).AsQueryable();

            return Json(catalog, JsonRequestBehavior.AllowGet);

        }

I hope this is helpful code.

Thanks in advance.

Xavier.

Grid

answered on 06 Apr 2015

2 answers

192 views

Example of use with legacy .Net code-behind project

Hello,

I have used Kendo with MVC projects, and quite like it.

Part of my evaluation is how easy it would be to retrofit a couple grids into legacy code-behind projects.

Can I use the .Net helpers? Or do I have to use the pure HTML/Javascript methods?

Being an MVC guy, I have not sent JSON to/from on a code-behind project before... In MVC the JSON is automatically converted into your viewmodel type onthe backend, if you C# class aligns with the JSON data. Is the same possible with CodeBehind?

Is there a simple example of a kendo grid using .net code-behind?

Thanks,

~S

General Discussions

answered on 05 Apr 2015

1 answer

246 views

Dropdown List not selecting initial value/text

The following dropdownlist will not ever select any item except for the first (index 0):

var clientList = HtmlExtensionMethods.GetClients().Select(c => new SelectListItem { Text = c.Value, Value = c.Key }).ToList();

@(Html.Kendo().DropDownListFor(model => model.ClientID)
.Name("ClientID")
.BindTo(clientList)
.DataTextField("Text")
.DataValueField("Value")
.Value(Model.ClientID)
.Text(Model.ClientName)
.HtmlAttributes(new { @class = "select wfull" })
)

I have tried removing the Value and Text methods and adding .SelectedIndex(2) which does not work either. The model.ClientID is a value in the selectlistitem. How in the world can I get this dropdown to select the item with the value from model. Nothing seems to work.

v2014.3.1314

DropDownList

answered on 03 Apr 2015

1 answer

865 views

Custom Editor Template for Grid

I am having difficulties in wiring up a custom EditorTemplate to a grid within an MVC 5 application. I have an integer field that only accepts a 1 or 2 as a value. Rather than using a standard numeric text box or slider control, I'd like to wire this up using buttons (via Bootstrap's group buttons). If the user clicks on the first button, the value should be set to 1, otherwise it should be set to 2.

The problem that I'm experiencing is that when the user clicks on the "edit" button, the "Level" value never gets applied to the editor template. The template displays as I'd like, but I cannot figure out how to bind the selected value back to the kendo grid. When the user clicks on the "save" button on the grid, the controller action is never invoked.

If I replace the editor template with a standard Kendo control such as a numeric text box or Kendo slider, it works fine.

ViewModel

public class LotViewModel

public int LotId { get; set; }

  [Display(Name = "Level")]

[Range(1, 2)]

[UIHint("LotLevel")]

public int Level { get; set; }

}

View

@(Html.Kendo().Grid<LotViewModel>()

.Name("lotGrid")

.Columns(columns =>

{

columns.Bound(x => x.LotId).Visible(false);

columns.Bound(x => x.Level);

columns.Command(command =>

{

command.Edit();

}).Width(100);

})

.ToolBar(toolbar => toolbar.Create())

.Editable(editable => editable.Mode(GridEditMode.InLine))

.AutoBind(true)

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

model.Id(m => m.LotId);

model.Field(m => m.Level).DefaultValue(1);

})

.Read(update => update.Action("GetLots", "Lot"))

.Create(update => update.Action("CreateLot", "Lot"))

.Update(update => update.Action("UpdateLot", "Lot"))

)

EditorTemplate: LotLevel

@model int

@{;

var levelOne = Model.Equals(1) ? "active btn-primary" : null;

var levelTwo = Model.Equals(2) ? "active btn-primary" : null;

var htmlField = ViewData.TemplateInfo.HtmlFieldPrefix;

}

@Html.HiddenFor(model => model)

<div class="btn-group btn-group-@htmlField">

<button type="button"

class="btn btn-default @levelOne bool-@htmlField"

onclick="javascript: setValue(this, 1);">

Level 1

</button>

<button type="button"

class="btn btn-default @levelTwo bool-@htmlField"

onclick="javascript:setValue(this, 2);">

Level 2

</button>

</div>

<script>

function setValue(button, level) {

$('.btn-group-@htmlField button.active').removeClass('active btn-primary');

$(button).addClass('active btn-primary');

$('#@htmlField').val(level); // TODO: Set the value of the model here

}

</script>

General Discussions

answered on 03 Apr 2015

1 answer

299 views

Initial value of datepicker selects wrong date in calendar

I have a problem with the initial display of values in datepicker controls :

For example, April 3rd 2015 displays as 03/04/2015, but when opening the datepicker calendar, it has selected March 4th 2015 as date. Manually selecting April 3rd 2015 in the calendar again results in exactly the same display text (03/04/2015)...

Given a model which looks like this:

[Display(Name = "Start Date")]

[DataType(DataType.Date)]

public DateTime StartDate { get; set; }

Configuration in web.config :

<system.web>

<globalization uiCulture="en-GB" culture="en-GB"/>

Content in _Layout.cshtml

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="shortcut icon" href="~/Content/Images/favicon.ico" type="image/x-icon" />

<meta name="accept-language" content="en-GB" />

@Scripts.Render("~/bundles/jquery")

@Scripts.Render("~/bundles/bootstrap")

@Scripts.Render("~/bundles/kendo/kendoscripts")

@RenderSection("scripts", false)

@RenderSection("scripts2", false)

@Scripts.Render("~/bundles/Scripts/cultures/en")

@Html.Kendo().DeferredScripts()

<script type="text/javascript">

var baseLocation = '@(Url.Content("~").TrimEnd('/'))';

$(document).ready(function () {

var data = $("meta[name='accept-language']").attr("content");

kendo.culture(data);

});

</script>

BundleConfig :

bundles.Add(new ScriptBundle("~/bundles/Scripts/cultures/en")

.Include("~/Scripts/kendo/cultures/kendo.culture.en-GB.min.js")

.Include("~/Scripts/cultures/kendo.en-GB.js"));

Editor template :

@model DateTime?

@(Html.Kendo().DatePickerFor(m => m).Deferred().HtmlAttributes(new { @class = "form-control k-datepicker-label-top" }))

cshtml page concerned:

<div class=" col-md-3"

<div class="form-group">

@Html.LabelFor(m => m.StartDate)

@Html.EditorFor(m => m.StartDate)

</div

</

div>

What am I missing here?

DatePicker

answered on 03 Apr 2015

4 answers

338 views

Popup Editing with DateTime can not be saved

In your sample: http://www.kendoui.com/code-library/mvc/grid/custom-popup-editor.aspx

When I want to save I get an error that the field birthdate must be a date.

I even set DataType.Date annotation on that model property. But still I get this error.

How can I fix your broken sample?

Grid

answered on 02 Apr 2015

3 answers

175 views

Running Kendo Grid into .Net Fiddle

To reproduce an issue a user recently posted related to Kendo grid, I thought it might be possible for me to use .NET Fiddle for it. But I am not able to load Kendo references. In my application I add a reference to Kendo.Mvc.dll.I am wondering is there a way I can add a reference in .NET fiddle. .NET fiddle supports Nuget package however Kendo MVC wrapper does not come in a package.

My fiddle is: https://dotnetfiddle.net/vRAJfO

Found that Kendo has got a tutorial that let you create charts and play around with it:http://dojo.telerik.com/. But it does not allow you to write ASP.NET MVC style code like .NET Fiddle does.

Is there a way we can create a fiddle using Kendo ASP.NET MVC wrapper?

General Discussions

answered on 02 Apr 2015