On my current project, we make extensive use of the kendo grids. However, I'm not happy with our re-use strategy, which consists of cutting and pasting known-good templates into each view that needs them. Is there documentation that describes how to, for instance, turn a template into a partial view? The trick is that, since these are client grids, I need to pass selection data into them somehow as well.

Here's a code example of what we're doing:
<script id="feedbackFormTemplate" type="text/kendo-tmpl">
@(Html.Kendo().Grid<Intranet.Data.Review.Info.FeedbackFormInfo>()
        .Name("CRTFeedbackForm_#=Pernr#")
        .Columns(columns =>
        {
           columns.Template(@<text></text>).ClientTemplate("<div>CRT Reviewed Date : \\#=SubmissionDateString\\# | \\#=CorrectiveActionName\\# | \\#=SectionName\\# </div>");
     
    })
        .ClientDetailTemplateId("crtReasonTemplate")
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("CRTGetByInvestigatorAndCaseNumber", "FeedbackForm", new { pernr = "#=Pernr#", caseNumber=@Model.Case.CaseNumber }))
        )
        .Events(e => e
            .DataBound("hideHeader")
        )
        .ToClientTemplate()
            )  
</script>

<script id="crtReasonTemplate" type="text/kendo-tmpl">
     @(Html.Kendo().Grid<Intranet.Data.Review.Info.FeedbackFormReasonInfo>()
        .Name("reason_#=FeedbackFormId#")      
        .TableHtmlAttributes(new { @class = "noHideHeader" })   
        .Columns(columns =>
        {
            columns.Bound(p => p.ItemNumber).HtmlAttributes(new { style="width: 8%"});
            columns.Bound(p => p.ItemType).HtmlAttributes(new { style = "width: 8%" });
            columns.Bound(p => p.ItemOrg).HtmlAttributes(new { style = "width: 8%" });
            columns.Bound(p => p.ItemEventDateString).HtmlAttributes(new { style = "width: 8%" });
           
            columns.Bound(p => p.FeedbackReasonName).HtmlAttributes(new { style = "width: 45%" });
            columns.Bound(p => p.RebuttalStatus).HtmlAttributes(new { style = "width: 15%" });
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("GetReasonsByFeedbackFormId", "FeedbackForm", new { feedbackFormId = "#=FeedbackFormId#" }))
        )
        .ToClientTemplate()
    )
</script>

The bottom template in particular is re-used verbatim in many different places. I  tried doing this:

<script id="crtReasonTemplate" type="text/kendo-tmpl">
    @{ Html.RenderPartial("_CustomerReworkFeedbackReasonTemplate", new Intranet.Web.Areas.QTrack.ViewModels.CustomerReworkReasonTemplateViewModel { FeedbackFormId = feedbackFormId}); }
</script>

But it doesn't like the way I'm trying to transmit the feedbackFormId variable.

Thanks in advance for any assistance you can provide.

Dear KendoUI Team!
I hope you can help me out. I want to update some Editor Templates from the old Telerik Controls. I am using ASP.Net MVC 4.

My Editor Template looks like this


What I want to do is to set the value of the Textbox in the Change Event of the Combo-Box. My Approach is using .val()

$(elementName).val(e.sender.dataItem().Value);

The value displayed in the Textbox is changed then. BUT: The value transfered to the server is the old value of the Textbox.

Example:
The field has the value "US".  I edit the row.  I change the value to "CN" using the Combobox. "CN" is now displayed in the textbox in edit mode. When I want to update the row, "US" is provided as the value for the field in the model.

Is there a way to make kendoUI transfer the values that are displayed?

brgds
Malcolm Howlett

I'm getting a JavaScript error after I apply grouping.
Step 1. See attached Drag to GroupBy row.png - Load the page and group any column
Step 2. See attached JavaScript error when GroupBy.png, I get the JavaScript error.

The code I am using looks to me to be identical to the Custom AJAX Binding sample code included in the examples, but I am getting this error?

.CSHTML


Controller Code:
If anyone is interested I have a Visual Studio 2012 Sample App to show the error download here: https://skydrive.live.com/redir?resid=3113F9DB92CC84B2!1997&authkey=!Nefhm5WSin4%24

Refer to the attached Highlighted VS solution items.png for the highlighted items of interest.

Thanks,
Beau

Can someone point me to an example of using the GroupFooterTemplate with the MVC Server Wrappers?

From what I can tell, this should work when I 'group by' any column:

Is there any other setup / configuration that's needed to make it work?

Edit:
I've add this to the DataSource as well without success

Dear KendoUI Team!
Please help out! Attached you find a project with Editortemplates in a nested table.
Please try the following:
- Open Editortemplate 'Country3.cshtml'
- Change Serverfiltering to true
- run the website
- try to edit a row
- you will experience an 'invalid template' error
I you change serverifltering to false the 'invalid template' error is gone.
But I need server filtering there!
What is going on? What can I do?

brgds
Malcolm Howlett

I am using the Kendo UI Upload control with the Knockout-Kendo.js project's binders.  I have a file upload control on my form and am seeking to upload the file through the ajax callback provided by the Knockout-Kendo.js api.  Most of the time, the upload goes through successfully, but every once in a while, so far only on IE, there's an issue and I get a javascript error saying "SCRIPT5: Access is denied."   I've read that IE9 has security rules that can cause this error in certain situations, but I do not understand well enough how the kendo ui control works (or how the knockout-kendo library works) to understand what I might need to change to prevent the error.  Any ideas will be very much appreciated!

Here is a simplified version of my code:
In the view:

In the javascript viewmodel:
In the MVC controller: 

Please refer the attached file.

I'm trying to change the color of the grid command button but the CSS is not taking effect.  The CSS is being called because the font size is changing.  The color is not for some reason.  Any ideas.


CSS:
.editButtonChangeColor
{
background-color: Red;
color: Red;
border-color: Red;
font-size: 20px;
}

Databound function of grid:
$(".k-grid-edit").addClass("editButtonChangeColor");

I looked at the code sample at http://www.kendoui.com/code-library/mvc/grid/export-grid-to-excel.aspx
It uses AJAX binding.
Can this be done using server binding? I am having some issues with ajax binding.

Thanks

The Model has 4 properties, Description, Amount, Note and a boolean, NoteRequired.
I have a grid with 3 columns, Description, Amount and Note.  
If NoteRequired is True for a row and the Amount > 0, how do I show them a message that a Note is Required and set the focus in the Note field?