Telerik Forums
UI for ASP.NET MVC Forum
1 answer
231 views
Hi everybody,

First of all, I'd like to say that I'm completely new to ASP.Net MVC and Kendo UI, and that I'm coming from the WPF world. That might give you some clues about the difficulties I'm facing here ;)

The scenario is quite basic, but I'm not able to achieve what I need to.
Let's image I have a form, that contains 4 search criteria.
- Start Date
- End Date
- Number
- String (city name)

From those 4 fields, I'm trying to feed a Grid in the same page (in AJAX), with data that is coming from an WCF webservice.

I've tried several ways to achieve this but everytime I'm facing a dead-en.

Here's a sample of my code.
The form:
@using (Ajax.BeginForm("UpdateSearchCriteria", "Home", new AjaxOptions() { HttpMethod = "post", OnSuccess = "Update" }))
{
    @(Html.Kendo().DatePickerFor(model => model.Criteria.StartDate)
        .Min(new DateTime(1900, 1, 1)) //Set min date of the datepicker
        .Max(new DateTime(2099, 12, 31)) //Set min date of the datepicker
        )
 
    @(Html.Kendo().DatePickerFor(model => model.Criteria.EndDate)
        .Min(new DateTime(1900, 1, 1)) //Set min date of the datepicker
        .Max(new DateTime(2099, 12, 31)) //Set min date of the datepicker
        )
    @(Html.Kendo().IntegerTextBoxFor(model => model.Criteria.Number).Min(1))
    
     
    @(Html.Kendo().AutoCompleteFor(model => model.Criteria.CityName)
              .Filter("contains")
              .MinLength(3)
              .BindTo(Common.Helpers.CityHelper.GetCityNames())
              .HighlightFirst(true)
              .IgnoreCase(true)
    )
    <input type="submit" value="Search!" />
}
The Grid :

@(Html.Kendo().Grid<Models.SearchResult>()
       .Name("SearchResultDataGrid")
       .Columns(columns =>
       {
           columns.Bound(p => p.Property.PropertyName).Title("Property");
           columns.Bound(p => p.Range).Title("Range");
           columns.Bound(p => p.Number).Title("Number");
       })
       .Sortable()
       .Scrollable()
       .AutoBind(false)
       .BindTo(Model.SearchResult)
       .DataSource(dataSource => dataSource // Configure the grid data source
         .Ajax() // Specify that ajax binding is used
         .Read(read => read.Action("Search", "Home")) // Set the action method which will return the data in JSON format
      )
   )

JS Update method

<script>
    function Update(response, status, data) {
        var grid = $("#SearchResultDataGrid").data("kendoGrid");
        grid.dataSource.read();
    }
    </script>

Now the controller:

public ActionResult UpdateSearchCriteria(Screen iModel)
        {
            return Json(iModel);
        }
[HttpPost]
        public ActionResult Search(Screen iModel)
        {
            [...]
            return Json(theDataSourceRS);
        }
Obviously, when entering the Search Action, my iModel isn't updated with the latest data from the form. That's the main painpoint I have since the process I'm doing with the WCF service call doesn't have the correct Search criteria.

Hope I was clear enough !
Let me know if you're missing parts to give me a hand !

Thanks a lot !

Julien.
Petur Subev
Telerik team
 answered on 12 Jul 2013
5 answers
183 views
I'm wanting to put an HTML element in the HeaderTemplate() of a bound column.  I want to handle the click event of this HTML element.  This works fine as long as I have sorting turned off for the column.  However, if I have sorting turned on, then it seems that the grid automatically consumes the click of my HTML element and POSTs a sort on that column.  Is that by design?

If so, is there any way around it?  Turning off sorting for the column is not an option.  Is there a way to perform sorting from within the HeaderTemplate() that will also honor all other sorts/filters/paging/grouping on the grid?

If not that, is there a way to inject an HTML element via client-side code after the page has loaded that will not cause the column to sort when clicked?

I have tried both methods above but can't get them to work.  I'm hoping I'm missing something straightforward.
Dimiter Madjarov
Telerik team
 answered on 12 Jul 2013
0 answers
211 views
Hi,

I'am trying to create a dropdownlist with a guid as id : 

Dim dropDownListFor = _htmlHelper.Kendo().DropDownListFor(Of Integer)(_expression) _
  .BindTo(New SelectList(_collectionValeur, "Id", "Name")) _
  .HtmlAttributes(_attributsHtml)


Id is a Guid 
Name is a String

But I'm having the following error :

System.InvalidOperationException: Templates can be used only with field access, property access, single dimension array index, or single-parameter custom indexer expressions.

Any help please ?
Jean-François
Top achievements
Rank 1
 asked on 11 Jul 2013
1 answer
269 views
i have a problem with a DropdownList control.
 i have a Grid with a popup edditing and when i show a popup the DropDownList doesnt show any data, im using MVC4 and KendoUI controls

this is the code.The Grid.

@(Html.Kendo().Grid<CashControl.Models.Usuario>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.nombre).Width(100);
columns.Bound(p => p.nombreUsuario).Width(100);
columns.Bound(p => p.email).Width(100);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("DropDownListUsuarios"))
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("error_handler"))
.Model(model =>
{
model.Id(p => p.idUsuario);
})
.Create(update => update.Action("EditingInline_Create", "Grid"))
.Read(read => read.Action("UsuariosRead", "Configuracion"))
.Update(update => update.Action("EditingInline_Update", "Grid"))
.Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
)
)

The PopUp

<div class="demo-section" style="width: 250px;">
<h2>Products</h2>
@(Html.Kendo().DropDownList()
.Name("products")
.HtmlAttributes(new { style = "width: 250px" })
.DataTextField("nombre")
.DataValueField("idnombre")
.DataSource(source => {
source.Read(read =>
{
read.Action("UsuarioRead", "Configuracion");
});
})
)
</div>
<style scoped>
.demo-section {
width: 250px;
margin: 35px auto 50px;
padding: 30px;
}
.demo-section h2 {
text-transform: uppercase;
font-size: 1.2em;
margin-bottom: 10px;
}
</style>

and the Controller.

public ActionResult UsuarioRead([DataSourceRequest] DataSourceRequest request)
{
IQueryable<Usuario> products = CashControl.Usuario;
var rest = products.Select(n => new
{
idUsuario = n.idUsuario,
nombre = n.nombre,
nombreUsuario = n.nombreUsuario,
email = n.email
});

DataSourceResult result = rest.ToDataSourceResult(request);

return Json(result, JsonRequestBehavior.AllowGet);
}
and this is the JSON

result{"Data":[{"idUsuario":1,"nombre":"Eduardo","nombreUsuario":"Brakyo","email":"eduardomeji@gmail.com"}],"Total":1,"AggregateResults":null,"Errors":null}


Daniel
Telerik team
 answered on 11 Jul 2013
1 answer
422 views
Hi I am looking into building products using KendoUI MVC as potential tool in future. I have been messing around in the trial and for the most part it is fairly straight forward. I have run into one issue as follows.

I have a controller for a Contact. It has one view in particular, ViewDetails

1.public  ActionResult ViewDetails(long[] contactId)
2.{
3.    ViewData["contactId"] = contactId;
4.    return View();
5.}
It takes a list of contacts passed in as an array, assigns it to the viewdata and returns the View. This view has a KendoUI Grid in it and the code is as follows

01.@{
02.    ViewBag.Title = "ViewDetails";
03.    Layout = "~/Views/Shared/_Layout.cshtml";
04.}
05. 
06.<h2>ViewDetails</h2>
07. 
08. 
09.@(
10. 
11.        @Html.Kendo().Grid<DetailGridViewModel>()
12.             .Name("Grid")
13.             .Columns(columns =>
14.                          {
15.                              columns.Bound(p => p.ContactId).Hidden();
16.                              columns.Bound(p => p.ContactNumber);
17.                              columns.Bound(p => p.ContactName);
18.                              columns.Bound(p => p.Date).Width(130).Format("{0:d}");
19.                              columns.Bound(p => p.ContactStatus);
20.                              columns.Bound(p => p.Type);                            
21.                              columns.Command(command =>
22.                                                  {
23. 
24.                                                  }).Width(200);
25.                                                   
26.                          })
27. 
28.     
29.        .Sortable( )
30.        .Resizable(resize => resize.Columns(true))
31.        .Filterable()
32.        .DataSource(dataBinding =>
33.                         dataBinding.Ajax().Aggregates(agg => { agg.Add(com => com.Value).Sum();
34.                                                                agg.Add(p => p.ContactCost).Sum();
35.                         }).Read(read => read.Action("_SelectDetails", "Contacts").Data(obj => new {contactId = ViewData["contactId"]}))))
36.    
The problem I am having occurs on line 35. When I try to assign the Data for "contactId", in the resulting javascript it appears that the only data is System.Int64[] like it called ToString on the data instead of taking the array and passing its contents as multiple named parameters.

The select function of course fails as there is not a proper contactId parameter passed, it is as follows for reference
01.public ActionResult _SelectDetails([DataSourceRequest] DataSourceRequest request,long[] contactId)
02.{
03.    List<DetailGridViewModel> finalList = new List<DetailGridViewModel>();
04.    foreach (var conId in contactId)
05.    {
06.        var con = _contactService.GetContactById(conId);
07.        IEnumerable<DetailGridViewModel> coms = con.Select(x => new DetailGridViewModel(x));   
08.        finalList.AddRange(coms);
09.    }
10.     
11.    return Json(finalList.ToDataSourceResult(request));
12.}


Thanks for your assistance. This is one of the few snags I have seen reviewing the product, I hope to get it resolved so I can continue my evaluation in a timely fashion!
Vladimir Iliev
Telerik team
 answered on 11 Jul 2013
1 answer
326 views
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.
Petur Subev
Telerik team
 answered on 11 Jul 2013
3 answers
421 views
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

@model string
@using System.Collections
<div style="white-space:nowrap;">
 
 
    @Html.TextBoxFor(m => m, new { onclick = "setInvisible(\"SplitCountryList#=Rid#\")", onfocus = "setInvisible(\"SplitCountryList#=Rid#\")", id = "CoPrefSplit#=Rid#" })
    <button id="SplitCountryDisplay" onclick="setVisibleAndFocus('\\#SplitCountryList#=Rid#','\\#SplitCountryCombo-input')" style="background-color:White; width: 20px; height:22px; font-size: 6pt">...</button>
</div>
 
<div id="SplitCountryList#=Rid#" style="position: absolute; overflow:visible; width:250px; z-index:99; margin-top: 0px; visibility:hidden;">
@(Html.Kendo().ComboBoxFor(m => m)
        .Name("SplitCountryCombo#=Rid#")
        .BindTo(new SelectList((IEnumerable)ViewData["Countries"], "Code", "DisplayName"))
        .HtmlAttributes(new {@ArticleID = "#=Rid#"})
        .Filter(FilterType.Contains)
        .Events(events => events
            .Change("onSplitCountryChanged")
        )
    )
</div>

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
Vladimir Iliev
Telerik team
 answered on 11 Jul 2013
14 answers
516 views
I'm getting a JavaScript error after I apply grouping.
Unable to get property 'length' of undefined or null reference kendo.web.min.js, line 10 character 28275
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
@(Html.Kendo().Grid<Fluid>()
    .Name("Grid")
    .Columns(columns => {
        columns.Bound(o => o.FluidID).Groupable(false);
        columns.Bound(o => o.Name);
        columns.Bound(o => o.Code);
        columns.Bound(o => o.Grade);
        columns.Bound(o => o.Manufacturer);
    })
    .Deferred()
    .Pageable()
    .Sortable()
    .Filterable()
    .Scrollable()
    .Groupable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetJsonData", "FluidKendo"))
    )
)


Controller Code:
public ActionResult GetJsonData([DataSourceRequest] DataSourceRequest request)
{
    List<Fluid> allFluids = MockFluids();
    // When drag column header into group by row the following JavaScript error occurs
    // JavaScript error IE: SCRIPT5007: Unable to get property 'length' of undefined or
    // null reference kendo.web.min.js, line 10 character 28275
    // JavaScript error Chrome: Uncaught TypeError: Cannot read property 'length' of undefined
    // --- Example taken from the Custom AJAX Binding example: CustomAjaxBindingController.cs
    var resultThatErrors = new DataSourceResult();
    resultThatErrors.Data = allFluids;
    resultThatErrors.Total = allFluids.Count();
 
    return Json(resultThatErrors);
}
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


Beau
Top achievements
Rank 1
 answered on 11 Jul 2013
2 answers
175 views
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:
.GroupFooterTemplate( f => "Sum: " + f.Sum )

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
.Aggregates( a => a.Add(c => c.Quantity).Sum())
Tom
Top achievements
Rank 1
 answered on 10 Jul 2013
1 answer
111 views
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
Malcolm
Top achievements
Rank 1
 answered on 10 Jul 2013
Narrow your results
Selected tags
Tags
+133 more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?