Hi,

Is there a sample code for adding a MVC kendo UI grid in a partial view, and setting its datasource and columns in a view

Thanks,
Annie

In one of my pages I am trying to load data when DropDown
Value is changed. However I have hard time in call contoller’s action method on
dropdown’s onchange event. If you have any sample available please share with
me.

I would like to position the refresh button at the top of the grid. Is that possible? The grid below is a sample of the code. (mostly default values)

@(Html.Telerik().Grid(Model.DeleteableRules)

         
.Name("DeleteableRulesGrid")

         
.DataKeys(dk => dk.Add(dr => dr.ListID))

         
.Selectable()

         
.Columns(columns =>

          {

             
columns.Bound(dr => dr.ListID).HtmlAttributes(new
{ style = "width:100px;" });

             
columns.Bound(dr => dr.OrganizationID).HtmlAttributes(new { style = "width:100px;"
});

             
columns.Bound(dr => dr.RuleName).HtmlAttributes(new
{ style = "width:300px;" });

             
columns.Bound(dr => dr.CurrentState).HtmlAttributes(new
{ style = "width:300px;" });

          })

 

          )

Hello

I want to change the DateHeaderTemplate from the standard "ddd MM/dd" format to "ddd dd/MM". How do I do this in MVC?
I couldn't find an example for MVC in the docs, only for javascript.

BR
Jonas

I found help from http://docs.telerik.com/kendo-ui/api/javascript/ui/tooltip in getting this far.  However, we are using Kendo MVC Widgets so, the line of code
below "return target.text() is never populated.  I did find by poking around in debugger that e.target.context.value had the values for each generated <input> tag in both the Html.Kendo().TextBox() and Html.Kendo().ComboBox().

Here's the code that displays a Kendo Tooltip for every input html element within a specific div.

$(document).ready(function () {
        $("#project-tabs").kendoTooltip({
             filter: "input",
             content: function (e) {
                     var target = e.target; // the element for which the tooltip is shown
                     //return target.text(); // set the element text as content of the tooltip --> This does not work on MVC.
                     return e.target.context.value;  // This does work on MVC Widget
            }
    });
});

Is there a better way?

You surely are all aware of the T4MVC service, very helpful in avoid 'magic strings'.
Now, I would like to use it in a kendo template, but I found difficult to understand how parameters must be written.
Right now, I have this sample template:

<script id="agenda-event-template" type="text/x-kendo-template">
    <div>
        <a href='/Controller/Action?id=#: currentid#'>#: title #</a>
    </div>
</script>

(where I stripped out non relevant code).

If I want to use T4MVC, I have to rewrite the previous code as in:

<script id="agenda-event-template" type="text/x-kendo-template">
    <div>
        <a href='@MVC.Controller.Action(??????)>#: title #</a>
    </div>
</script>

But how can I pass the 'currentid' parameter in the action?
Thanks in advance...
Andrea

If I use the standard kendo.common.min.cs stylesheet with the Report Viewer control, everything works fine. However, if I switch to the kendo.common-bootstrap.min.cs stylesheet, the toolbar is much taller and overlaps the top of the report:


I've tried this with a sample report project from another thread and it exhibits the same behaviour as my application. Is there something else I should do to get this to work? For now I'm going to use the non-bootstrap stylesheet as it doesn't seem to cause any other changes.

Ok, it seems that there is a problem with the way that the MVC extensions render their javascript and I need some Admin input in order to resolve this going forward as it's causing massive issues.

With the lack of the script registrar, the MVC extensions appear to dump thier javascript in the middle of the body, immediately after the element being modified. The outputted javascript is wrapped in an auto-running function so that it executes immediately. Apart from dumping js into the middle of the page, which is by popular opinion considered a dubious practice, this causes problems with other javascript libraries that may then go in afterwards and manipulate the DOM. If such a library snips out the parent of an element in question which happens to contain the associated script tags and reinserts it, all of the javascript snippets run again, causing the Kendo controls to break (because they have been initialised twice) and everything to fail. If the Kendo scripts were at the end of the body this wouldn't be an issue.

Why isn't all javascript rendered at the end of the body? How can this be resolved?

Hi.

I'm using scheduler to make a workforce calendar for my department, there are approximately 100 people across three shifts.

I have everything working, however in day and month view, as you can imagine, the shifts are extremely narrow.

Is there a way to make the scheduler scroll able horizontally with the events as a fixed size so that they display properly?

I did a CSS style on k-event, and it did make the events wider, however now they overlap each other instead of scrolling out the schedule.

I can't seem to get nested templates to work.  Perhaps this isn't even supported?  I am seeing the following in console.  
Uncaught ReferenceError: BotName is not defined 
I believe this is related to the last file shown, _BotGrid.  This grid should display a link to the details page for the Bot, however, the ClientTemplate("#=BotName#") does not appear to be working.  My guess is the templating engine is looking for BotName to come from the parent grids model, and not from the Bot Grids model.  Is there a work around or a way to make this work?

Files

TopLevelGrid.cshtml
@model System.Collections.Generic.List<Subscriber>

@(Html.Kendo().Grid<Subscriber>()
    .Name(ViewData["Name"].ToString())
    .ClientDetailTemplateId("gridDetailsTemplate")
    .DataSource(dataSource =>
        dataSource
        .Ajax()
        .Sort(sortOrder => sortOrder.Add(s => s.Name).Ascending())
        .PageSize(20)
        .Read(
            read => read.Action("_Grid", "Subscribers", new { Area = "Admin" })
        )
    )
    .Columns(columns =>
    {
        columns
            .Bound(s => s.Name)
            .ClientTemplate("<a href=\"\\#/Detail/#=Id#\">#=Name#</a>")
            .Title("Subscriber")
            .Width("100%");
        columns
            .Bound(s => s.Active)
            .Filterable(false)
            .HeaderHtmlAttributes(new { style = "text-align:center; " })
            .HtmlAttributes(new { style = "text-align:center; " })
            .ClientTemplate("<input type=\"checkbox\" #=Active ? checked='checked' : '' # disabled=\"disabled\" />");
    })
    .Filterable()
    .Sortable()
    .Pageable()
)

@Html.Partial("_GridDetail")


_GridDetail.cshtml partial view -- This part seems to work fine if I remove the _BotGrid partial view
<script id="gridDetailsTemplate" type="text/kendo-tmpl">
    <ul id="subscriber-tabs-#=Id#" class="nav nav-tabs">
        <li class="active"><a href="\\#subscriber-bots-#=Id#" data-toggle="tab">Bots</a></li>
        <li class=""><a href="\\#subscriber-markets-#=Id#" data-toggle="tab">Markets</a></li>
        <li class=""><a href="\\#subscriber-report-scheduling-#=Id#" data-toggle="tab">Online Report Schedules</a></li>      
    </ul> 
    <div id="subscriber-tab-content-#=Id#" class="tab-content">
        <div class="tab-pane fade active in"  id="subscriber-bots-#=Id#"> 
            @Html.Partial("_BotGrid", new ViewDataDictionary { { "SubscriberID", "#=Id#" } })
        </div>
    </div>
</script>


_BotGrid.cshtml partial view
@(Html.Kendo().Grid<AMS.DTO.Bot>()
    .Name("Bots-" + ViewData["SubscriberID"].ToString())
    .DataSource(dataSource => dataSource
        .Ajax()
        .Sort(sortOrder => sortOrder.Add(b => b.BotName).Ascending())
        .Model(model => model.Field(m => m.BotName))
        .PageSize(20)
        .Read(
            read => read.Action("_BotGrid", "Subscribers", new { Area = "Admin", id = ViewData["SubscriberID"].ToString() })
        )
    )
    .Columns(columns =>
        {
            columns.Bound(b => b.BotName)
                .ClientTemplate("#=BotName#")
                .Title("Name");
            columns
                .Bound(b => b.CreateDate)
                .Filterable(false)
                .Format("{0:MM/dd/yyyy}")
                .Title("Created");
        }
    )
    .Sortable()
    .Pageable()
    .Filterable()
    .Scrollable(scrolling =>
        scrolling.Height(200)
    )     
    .ToClientTemplate()
)

Thanks!