I've created a panelbar in the Layout:

@(Html.Kendo().Splitter()
            .Name("mainsplitter") //The name of the splitter is mandatory. It specifies the "id" attribute of the widget.
            .Panes(panes =>
            {
                panes.Add().Content(@<text>@Html.Action("_Panelbar")</text>)
                            .Resizable(true)
                            .Size("20%");
                panes.Add().Content(@<text>
                            <section class="content-wrapper main-content clear-fix">
                                @RenderBody()
                            </section>
                            </text>); //Add pane
            })
            )
And a rendersection for the main content, it all goes well, but when I
change the main content Model, the panelbar jumps to the first item.
When I return only the ViewBag, and no Model, the panelbar is keeping
the selected item.
What have I to do for keep always the selected item ?

And in the _PanelbarView:

@model CPMPlanning.Models.CPMModelViewPanel

@( Html.Kendo().PanelBar()
    .Name("PanelBar")  
    .SelectedIndex(Model.ObjectIDSelected)
    .ExpandMode(PanelBarExpandMode.Single)
    .BindTo(Model.ObjectTypes, mappings =>
    {
        mappings.For<CPMPlanning.Models.ObjectTypeView>(binding => binding
                .ItemDataBound((item, objecttype) =>
                {
                    item.Text = objecttype.ObjectTypeDesc;

                })
                .Children(o => o.Objects));
        mappings.For<CPMPlanning.Models.ObjectView>(binding => binding
                .ItemDataBound((item, obj) =>
                {
                    item.Text = obj.ObjectCode;
                    item.Url = Url.Action("Index", "CPMModel", new { id = obj.ObjectID });
                })
            );
    })
)

Hi, we have setup an ajax bound grid using a ClientRowTemplate. We also have virtual scrolling turned on. We noticed that if we make a change to a text box value, then scroll down low enough to make the record disappear, the value in the text field is lost. Is there a way to have these values persist? Will we need to store the data in javascript variables? Are there client-side events that are raised when a row goes out of view so that we can save edits? Any feedback is greatly welcomed. 

Thanks

I have a Grid defined to display a Popup window for editing using a template.  The popup window displays correctly in IE9, but only shows up as a tiny box in Chrome and Firefox.

Any ideas why this might be occurring?

HI Guys,
I experience very strange behavior of kendo combobox:
I have a view that accepts certain model that has IList<Item> Items { get; set; } in it.
I use knockout binding for variable length lists, which you can see in data-bind portion.
However combobox is not currently bound to anything, just trying to make it work with simplest possible scenario.

The following code basically causes combobox not to open (it just ignores clicking on the arrow and not showing selection options). You can type in but selection options aren't shown no matter what.
<table>
  <tbody data-bind="foreach: Items">
<tr>
 <td>
@(Html.Kendo().ComboBox()
 .Name("size")
 .Placeholder("Select size...")
 .BindTo(new List<string>() { "X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large" })
 .SelectedIndex(3)
 .Suggest(true))
 </td>
</tr>
  </tbody>
</table>

As soon as I remove the entire combobox statement from within the <td> (even between <tr> and <td> or outside the table - it works as expected - shows selection options and you can select them, but not inside the <td> - typing works, but selection doesn't.

Can you please help!
Thank you very much in advance.

I have a base class that all other entities derive from which has created and modified dates. I want to automatically enter the dates based off logic which determines if the entity is being updated or inserted:

public override int SaveChanges()
{
DateTime now = DateTime.Now;
foreach (var entity in ChangeTracker.Entries<Base>()
.Where(e => e.State == EntityState.Added)
.Select(e => e.Entity))
{
entity.ModifiedOn = now; // set the date
entity.CreatedOn = now;
}
foreach (var entity in ChangeTracker.Entries<Base>()
.Where(e => e.State == EntityState.Modified)
.Select(e => e.Entity))
{
entity.ModifiedOn = now; // set the date
}

return base.SaveChanges();
}

I want to show the fields in the grid as read only, but the grid is doing ajax validation on these fields on edit and insert and I get an error "The field ModifiedOn must be a date." I want to disable the validation for just these fields. Here is the rest of the code below:

public abstract class Base
{
//[HiddenInput(DisplayValue = false)]
//[ReadOnly(true)]
//[DataType(DataType.Text)]
//[UIHint("DateTime")]
//[Display(Name = "Created On")]
//[DisplayFormat(DataFormatString = "{0:d}")]
[HiddenInput(DisplayValue = false)]
[DataType(DataType.Text)]
public DateTime CreatedOn { get; set; }
[Display(Name = "Created By")]
[HiddenInput(DisplayValue = false)]
[ScaffoldColumn(false)]
public int CreatedBy { get; set; }
[HiddenInput(DisplayValue = false)]
[DataType(DataType.Text)]
public DateTime ModifiedOn { get; set; }
[Display(Name = "Modified By")]
[HiddenInput(DisplayValue = false)]
[ScaffoldColumn(false)]
public int ModifiedBy { get; set; }
}

public class Parameter : Base
{
[Key]
[ScaffoldColumn(false)]
[DatabaseGenerated(DatabaseGeneratedOption.Identity)]
public int ParameterID { get; set; }
public string Name { get; set; }
public int Numeric { get; set; }
public string String { get; set; }
public string Description { get; set; }
}

<div>
<input type="button" visible="false" value="Insert" id="btnInsert">
<input type="button" visible="false" value="Edit" id="btnEdit">
<input type="button" visible="false" value="Save" id="btnSave">
<input type="button" visible="false" value="Delete" id="btnDelete">
</div>
<h2>Parameter Lookup Configuration</h2>
<br />
<br />
@(Html.Kendo().Grid<ECRI.Phoenix.Core.Models.Parameter>()
.Name("grid")
.Columns(columns =>
{
columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' id='chkbx' class='chkbx' />")
.HeaderTemplate("<input type='checkbox' id='masterCheckBox' />").Width(30);
columns.Bound(p => p.Name);
columns.Bound(p => p.String);
columns.Bound(p => p.Numeric);
columns.Bound(p => p.Description);
columns.Bound(p => p.ModifiedBy);
columns.Bound(p => p.CreatedOn).Format("{0:d}");
columns.Bound(p => p.ModifiedOn).Format("{0:d}");
})
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.Groupable()
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.ParameterID))
.Read("Get", "Parameter")
.Update("Update", "Parameter")
.Create("Insert", "Parameter")
.Destroy("Delete", "Parameter"))
)

<script src="@Url.Content("~/Scripts/Phoenix.js")"></script>

$(document).ready(function () {
$("#btnDelete").click(function () {
var grid = $("#grid").data("kendoGrid");
var checked = false;
$.each($('#grid :checkbox:checked').closest('tr'), function () {
grid.removeRow($(this)); //just gives alert message
});
});
$("#btnEdit").click(function () {
var grid = $("#grid").data("kendoGrid");
grid.select().each(function () {
grid.editRow($(this)); //just gives alert message
});
});
$("#btnInsert").click(function () {
var grid = $("#grid").data("kendoGrid");
grid.addRow();
});
$('#masterCheckBox').click(function () {
if (this.checked)
$("#grid tbody input:checkbox").attr("checked", this.checked);
else {
$("#grid tbody input:checkbox").removeAttr("checked", this.checked);
}
});
});

Hi,
do you already have somewhere methods that can convert IFilterDescriptor and SortDescriptor to string representations that System.Linq.Dynamic can accept?

I am using WCF Plain Service generated with "Add OpenAcces Service..." tool and it accepts strings as filter and sort parameters, while on gui side I am using Kendo MVC that passes filter and sort descriptors.

I can make the converters myself, but would prefer to use library methods if you have already developed them yourself.

Thanks in advance.

Hi,

I have a simple master-detail implementation in a hierarchical grid. Everything works as expected if I pass the parent ID in following fashion

@(Html.T4Grid<NTL.Target.BusinessEntities.Customer>("Grid", allColumns,"Customer")
.ClientDetailTemplateId("template")
.HtmlAttributes(new { style = "height:430px;" })
.Events(events => events.DataBound("dataBound"))
)

<script id="template" type="text/kendo-tmpl">
 @(Html.Kendo().Grid<NTL.Target.BusinessEntities.Order>()
.Name("Grid_#=CustomerID#")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Read(read => read.Action("GetList", "Order", new { customerID = "#=CustomerID#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate()
)
</script>
<script>
function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
</script>


I intend to abstract binding of the grid completely, as shown above in the code that the data binding has been done in the extension method (T4Grid). Now when I try following it ends up in an error saying 'invalid template'. It throws that error because #=CustomerID# wasn't replaced.

@(Html.T4Grid<NTL.Target.BusinessEntities.Customer>("Grid", allColumns,"Customer")
.ClientDetailTemplateId("template")
.HtmlAttributes(new { style = "height:430px;" })
)
<script id="template" type="text/kendo-tmpl">
@{
name="#=CustomerID#";
gname = "Grid_#=CustomerID#";
}
@(Html.T4Grid<NTL.Target.BusinessEntities.Order>(gname, allColumns, "Order", new { customerID = name }))
.ToClientTemplate()
)

What's the way of getting a field's value (server side) from the data source of the Parent Grid?

Extension Method

public static Kendo.Mvc.UI.Fluent.GridBuilder<T> T4Grid<T>(this HtmlHelper helper, string name, string allColumns, string controllerName, params object[] parameters)
where T : class
{
List<ColumnAttributes> columns = BuildColumns(allColumns);

return helper.Kendo().Grid<T>()
.Name(name)
.Columns(cols =>
{
if (columns != null)
foreach (ColumnAttributes ca in columns)
cols.Bound(ca.Name).Width(ca.Width).Title(ca.Title).Groupable(ca.Groupable);
}
)
.Sortable()
.Pageable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("GetList", "Order",parameters))
);

}

Is there any way to display column headers multi-line on row-templated grid with MVC ?

I'm using server side templating for displaying custom rows in kendo gird and it works really so cool. But I need to display so many column headers to get filter and order my data. So I want to display column headers in multi-lines with their ordering and filtering functionalties. Is there any way to do this?

I've attached an image that shows what I want to do. I  used a littile bit javascirpt to get the output but may be better ways allready exist.

Hi,

I had a popup window, which opens from the button inside tabstrip "Regime sequence" and i want my tabstrip to reload once the window is closed. But it is not reloading from my below script. Why??

Below is my code:

<script type="text/javascript">
$(document).ready(function () {
$(".k-window-action.k-link").click(function () {

var tabStrip = $("#abc").data("kendoTabStrip"); //finding tabstrip
var tabContent = $("#abc").data("kendoTabStrip").contentHolder(1); //selecting particular tab
tabStrip.reload(tabContent); //reloading the tab
}); 
});
</script>

 @(Html.Kendo().TabStrip()
        .Name("workshopServiceRegime_#=REGIME_ID#")
        .HtmlAttributes(new { @style = "margin-left:-40px", @id="abc" })
        .SelectedIndex(0)
        .Items(items =>
        {
            items.Add()
                .Text("Regime detail")
                .LoadContentFrom("ServiceRegimeDetail", "ServiceRegimeDetail");
            items.Add()
                .Text("Regime sequence")
                .LoadContentFrom("ServiceRegimeSequenceList", "ServiceRegimeSequenceList");
            items.Add()
                .Text("Regime MMSB")
                .LoadContentFrom("MMSBServiceRegimeList", "MMSBServiceRegimeList");
        })
    )

Hi,

1.  I have some data that loads into a Kendo grid via the Ajax binding.

2.   Within one of the columns there's a ClientTemplate that calls a javascript method (showAll).

3.   This method will call an action and get the details of the data, putting it into a json response, and
then open a jquery-ui dialog to show the details.

4.   When the user clicks on the link in the grid the HttpGet is triggered for the GetDetails action BUT,
the problem is, it is also triggered for the entire page's action (Index).

The question, I guess, is what is causing the Index action to be triggered? Because, the dialog will show, the detailed data will populate, but once I close the dialog all the filter textboxes will be reset and the grid will reload and the data within it.

Shouldn't the only action called be the GetDetails?

Any hints will be greatly appreciated!

Code:
@(Html.Kendo().Grid<LogViewModel>()
    .Name("LogGrid")
    .Columns(column =>
    {
column.Bound(x => x.StuffCount).Title("Stuff").Width(70)
            .ClientTemplate("<a onclick=\"showAll('" + "#= Id #')\"" + " href=''>#= StuffCount
#</a>");
    })

    .DataSource(dataBinding => dataBinding
                .Ajax()
                .PageSize(50)
                .Read(read => read.Action("GetData", "Summary")
                    .Data("getSearchFilters"))
                .Model(model => model.Id(o => o.Id)))
            .Events(e => e
                .DataBound("onGridItemsDatabound"))
            .Pageable(paging => paging.Refresh(true))
)}

<div id="dialog-message" title="" style="display: none">
    <p id="msg"></p>   
</div>

<script type="text/javascript">
    var showAll= function (id) {
        var url = '@Url.Action("GetDetails",
"Summary")' + "/" + id;
        var sTitle = 'title text';
        $.getJSON(url, null,

            function (data) {
                $("#dialog-message").dialog({ title: sTitle });
                $("#msg").text(data.details);
                showMessage();       
            });
    };

    var showMessage = function () {
        $("#dialog-message").dialog({
            modal: true,
            draggable: false,
            resizable: false,
            buttons: {
                Ok: function() {
                    $(this).dialog("close");
                }
            }
        });
    };
</script>

The controller methods
(content removed for brevity

public ActionResult Index(...)
{
    ...
}

public ActionResult GetDetails(Guid id)
{
    ... (get data from repository)
    return Json(data, JsonRequestBehavior.AllowGet);
}