Telerik Forums
UI for ASP.NET MVC Forum
4 answers
100 views

Hello,

I’m trying to use a @helper inside a Telerik Window widget but it doesn’t work as expected. If I use the @helper then it shows the TextBox widget in the main page without opening/showing the Window widget but the labels are shown as expected however if I write the code in the @helper directly in the Window widget then it works as expected. Why this strange behavior?

Here's the code

 ​

01.@helper MakeTextBox1(string name, string description)
02.{
03.    <li>
04.        <label for="@name">@description</label>
05.        @{
06.            var x = Html.Kendo().TextBox()
07.                .Name(@name);
08. 
09.            x.Render();
10.        }
11.    </li>
12.}
13. 
14.@(Html.Kendo().Window()
15.    .Name("window_CreateProduct")
16.    .Title("Product")
17.    .Content(@<text>
18.        <div style="text-align: center;">
19.            <form id="form">
20.                <ul class="fieldlist">
21. 
22.                    // Doesn't work
23.                    @MakeTextBoxNumeric1("amount", "Amount")
24. 
25.                    // It works!
26.                    <li>
27.                        <label for="numeric_Price">Price: </label>
28.                        @(Html.Kendo().NumericTextBox()
29.                            .Name("numeric_Price")
30.                        )
31.                    </li>
32.                </ul>
33.            </form>
34. 
35.        </div>
36.    </text>)
37.    .Draggable()
38.    .Visible(false)
39.    .Modal(true)
40.    .Resizable(x => x.Enabled(false))
41.    .Events(x => x.Open("onOpen_window"))
42.)

 

Can anyone help me to solve this?

 Thank you.

Mike
Top achievements
Rank 1
 answered on 11 Nov 2015
2 answers
160 views

Hi, i'm using a kendo grid for server paging, sorting and filtering and now i would like to add grouping functionality:

I use "function mode" to read data, so dataSource is configured as:

let dataSource: any = {
                batch: true,
                serverPaging: true,
                serverSorting: true,
                serverFiltering: true,
                serverGrouping: true,
                page: 1,
                pageSize: 20,
                transport:
                {
                    read: function (options)
                    {

kendo.data.transports["aspnetmvc-ajax"].fn.options.options = { prefix: '' };
                        let request = kendo.data.transports["aspnetmvc-ajax"].fn.options.parameterMap(options.data, "read", false);

                        thisObject.httpService.GetNodes(request)
                        .then(function (args: IHttpServiceParameters)
                        {
                            options.success(args.data);
                        });
                   }
                },
                schema:
                {
                    data: function (data)
                    {
                        return data.Data;
                    },
                    total: function (data)
                    {
                        return data.Total;
                    },
                    groups: function (data)
                    {
                        return data.Data;
                    },
                    model: model
                }
     }

 

 

Claudio
Top achievements
Rank 2
Bronze
Bronze
Iron
 answered on 11 Nov 2015
1 answer
402 views

Hi Telerik,

 

I'm usingASP.NET MVC Grid and I want using Column Template in server side but it's not working with my code:

<div id="clientsDb">
    @(Html.Kendo().Grid<vw_Products>()
          .Name("grid")
          .Columns(columns =>
          {
              columns.Template(item => "<img class='product-photo' src='" + ImageModel.GetThumbnail(item.Images) + "' alt='" + item.Title + "' /></td>")
                  .Width(140).Title("Picture");
              columns.Bound(c => c.Title).Title("Product Name").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
              columns.Bound(c => c.Price).Title("Price").Width(300).Filterable(ftb => ftb.Cell(cell => cell.Operator("gte")));
          })
          .HtmlAttributes(new { style = "height: 700px;" })
          .Scrollable()
          .Groupable()
          .Sortable()
          .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
          .Pageable(pageable => pageable
              .Refresh(true)
              .PageSizes(pageSizes)
              .ButtonCount(5))
          .DataSource(dataSource => dataSource
              .Ajax()
              .PageSize(30)
              .Read(read => read.Action("Products_Read", "Home"))
          )
    )
</div>

I think my set up is ok but it's not working, the column Template is Empty plz help me. Thanks

columns.Template(item => "<img class='product-photo' src='" + ImageModel.GetThumbnail(item.Images) + "' alt='" + item.Title + "' /></td>")

 

Plamen
Telerik team
 answered on 11 Nov 2015
3 answers
204 views

Hi,

I'm trying to use the grid component in a huge legacy ASP.NET MVC 5 project. For some reason the ​Html.Kendo().Grid() helper does not serialize my grid's data if I am using it in this project, but it does serialize the data if I use it in a brandnew ASP.NET MVC project.

I used the same source code in the view for both projects:

 

@{
    var dummy = new List<DummyModel>
    {
        new DummyModel
        {
            Col1 = "Foo1",
            Col2 = "Bar1"
        },
        new DummyModel
        {
            Col1 = "Foo2",
            Col2 = "Bar2"
        }
    };
}
 
@(Html.Kendo().Grid(dummy).Name("MyGrid")
      .Columns(col =>
      {
          col.Bound(c => c.Col1);
          col.Bound(c => c.Col2);
      }))

 

In a brand new MVC5 project, this renders  the following html / js code blocks: 

 

 

<div class="k-widget k-grid" id="MyGrid">
 
    <table>
        <colgroup>
            <col/><col/>
        </colgroup><thead class="k-grid-header">
        <tr>
            <th class="k-header" data-field="Col1" data-index="0" data-title="Col1" scope="col">
                <span class="k-link">Col1</span></th><th class="k-header" data-field="Col2" data-index="1" data-title="Col2" scope="col">
                <span class="k-link">Col2</span></th>
        </tr>
        </thead><tbody>
        <tr>
            <td>Foo1</td><td>Bar1</td>
        </tr><tr class="k-alt">
            <td>Foo2</td><td>Bar2</td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    jQuery(function() {
        jQuery("#MyGrid").kendoGrid({
            "columns": [{ "title": "Col1", "headerAttributes": { "data-field": "Col1", "data-title": "Col1" }, "field": "Col1", "encoded": true }, { "title": "Col2", "headerAttributes": { "data-field": "Col2", "data-title": "Col2" }, "field": "Col2", "encoded": true }], "scrollable": false, "messages": { "noRecords": "No records available." }, "autoBind": false,
            "dataSource": {
                "type": (function() {
                    if (kendo.data.transports['aspnetmvc-server']) {
                        return 'aspnetmvc-server';
                    } else {
                        throw new Error('The kendo.aspnetmvc.min.js script is not included.');
                    }
                })(),
                "transport": { "read": { "url": "" }, "prefix": "MyGrid-" },
                "serverPaging": true,
                "serverSorting": true,
                "serverFiltering": true,
                "serverGrouping": true,
                "serverAggregates": true,
                "filter": [],
                "schema": { "data": "Data", "total": "Total", "errors": "Errors", "model": { "fields": { "Col1": { "type": "string" }, "Col2": { "type": "string" } } } }
            }
        });
    });
</script>​

 

This works fine and the table is displayed correctly.

 

​However, in my legacy project this renders the following html / js code blocks: 

 

<div class="k-widget k-grid" id="MyGrid">
    <table>
        <colgroup></colgroup><thead class="k-grid-header"></thead><tbody>
        <tr></tr><tr class="k-alt"></tr>
        </tbody>
    </table>
</div>
<script>
    jQuery(function() {
        jQuery("#MyGrid").kendoGrid({
            "scrollable": false, "messages": { "noRecords": "Keine Aufzeichnungen zur Verfügung." }, "autoBind": false,
            "dataSource": {
                "type": (function() {
                    if (kendo.data.transports['aspnetmvc-server']) {
                        return 'aspnetmvc-server';
                    } else {
                        throw new Error('The kendo.aspnetmvc.min.js script is not included.');
                    }
                })(),
                "transport": { "read": { "url": "" }, "prefix": "MyGrid-" },
                "serverPaging": true,
                "serverSorting": true,
                "serverFiltering": true,
                "serverGrouping": true,
                "serverAggregates": true,
                "filter": [],
                "schema": { "data": "Data", "total": "Total", "errors": "Errors", "model": { "fields": { "Col1": { "type": "string" }, "Col2": { "type": "string" } } } }
            }
        });
    });
</script>

 

The js code is identical to the brand new MVC 5 project, but the html code is missing the serialized data, which results in the table not being displayed correctly. You can easily see this by the fact that the strings "foo" or "bar" are nowhere in the source code.

 

I have double-checked that both projects are using the same Kendo.Mvc.dll reference, so that can't be the problem. I've also read the manual twice on how to set up Kendo UI twice and that did not help, so now I am stuck.

 Thanks in advance for your help,

 Adrian

Georgi Krustev
Telerik team
 answered on 11 Nov 2015
1 answer
67 views

Hi,

We encountered "internet explorer has stopped working" issue when adding rows to grid. The IE version is 11.

Based on our investigation, the issue seems is due to we are calling the following javascript function after we adding new row to the grid. 

Could you provide some pinions on this issue or suggest how to investigate the Internet explorer stop working issue?

 

function Reset(id) {
 
 
    //reset inputs
    var inputs = $("#" + id + " input");
    for (var m = 0; m < inputs.length; m++) {
        if (inputs[m].id != "") {
            $("#" + inputs[m].id).val('');
        }
    }
 
    //reset kendoNumericTextBox
    var currency = $("#" + id + " [data-role=numerictextbox]");
    for (var m = 0; m < currency.length; m++) {
        if (currency[m].id != "") {
            $("#" + currency[m].id).data("kendoNumericTextBox").value('');
        }
    }
 
    //reset kendoDateTimePicker
    var picker = $("#" + id + " [data-role=datetimepicker]");
 
    for (var m = 0; m < picker.length; m++) {
        if (picker[m].id != "") {
            $("#" + picker[m].id).value('');
            $("#" + picker[m].id).blur();
        }
    }
 
    //reset kendoDropDownList
    var dropDown = $("#" + id + " [data-role=dropdownlist]");
    for (var m = 0; m < dropDown.length; m++) {
        if (dropDown[m].id != "") {
            $("#" + dropDown[m].id).data("kendoDropDownList").value('');
        }
    }
 
    //hidden error message
    var spans = $("#" + id + " [class='k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error']");
    if (spans.length > 0) {
        spans.addClass("hidden");
    }
 
}

 

 

Nikolay Rusev
Telerik team
 answered on 11 Nov 2015
3 answers
176 views

Controllercode:

01.namespace vEF_AspApplication.Controllers
02.{
03.    public class AddressesController : Controller
04.    {
05.        private MyDataModelContext db = new MyDataModelContext();
06. 
07.        // GET: Addresses
08.        public async Task<ActionResult> Index()
09.        {
10.            var addresses = db.Addresses.Include(a => a.FormOfAddress).Include(a => a.Title);
11.            return View(await addresses.ToListAsync());
12.        }
13.    }
14.}

Viewcode:

01.@(Html.Kendo().MobileView()
02.    .Title("EntityFramework DataAccess")
03.    .Name("Index")
04.    .Content(@<text>
05.        <div id="AddressList">
06.          @(Html.Kendo().Grid<vEF_Library.Address>()
07.          .Name("AddressGrid")
08.          .Columns(columns =>
09.              {
10.                  columns.Bound(c => c.LastName);
11.                  columns.Bound(c => c.FirstName);
12.                  columns.Bound(c => c.Phone);
13.              })
14.                .HtmlAttributes(new { style = "height: 100%;" })
15.                .HtmlAttributes(new { style = "width: 100%;" })
16.                .Scrollable()
17.                //.Groupable()
18.                .Sortable()
19.                .Pageable(pageable => pageable
20.                .Refresh(true)
21.                .PageSizes(true)
22.                .ButtonCount(10))
23.                .DataSource(dataSource => dataSource
24.                .Ajax()
25.                .Read(read => read.Action("Index", "Addresses"))
26.                )
27.            )
28.        </div>
29.    </text>)
30.)

What is wrong?

Alexander Popov
Telerik team
 answered on 11 Nov 2015
7 answers
212 views
Hi,

We've been using the Telerik MVC UI extensions and have just purchased the Kendo UI Complete for MVC and are working on upgrading our project templates to use Kendo. Part of this upgrade process has been looking at ways to reduce bandwidth consumption. Currently our pages are returning about 4MB of scripts and most of those scripts are not used on the majority of the pages. Which lead us to looking at RequireJS so we can load only the scripts that the page needs. This will reduce the scripts requested from 4MB+ to around an average of 300KB and Kendo UI does support RequireJS. But, that would require us to code all the Kendo widgets in javascript and not use the MVC server wrappers, which is a big reason for us to use Kendo in the first place.  

So, I started looking at the Kendo.Mvc source code and found that it's relatively trival to add the ability to wrap the rendered javascript in the appropriate requireJs code. I implemented a basic version, similar to how the Deferred Scripts are handled, and it was only about 50 lines of code.  

I generally don't like modifying third party code as when updates occur, I have to re-apply my modifications.

So, my question is:
Is adding requireJS support to the server wrappers something that is being worked on? And if so, is there an ETA?



License
Top achievements
Rank 1
 answered on 10 Nov 2015
9 answers
144 views

With the release of ASP.NET 5 beta 8 ...when we upgraded our MVC web application from 7 to 8 we ran into the following error.

 

Microsoft.AspNet.Diagnostics.DeveloperExceptionPageMiddleware: Error: An unhandled exception has occurred while executing the request
System.Reflection.ReflectionTypeLoadException: Unable to load one or more of the requested types. Retrieve the LoaderExceptions property for more information.

 

This was being caused by the Kendo.Mvc of reference of which we were using the 2015.3.930 release. We are wondering when will there be a release made that will be compatible with the latest beta release since the RC1 is supposed to be released in only a few short weeks from now and we are trying to keep our upgrade project rolling along with these releases.

 

We are hoping to not have to remove the reference and then switch our control usage from the wrappers back to coding everything in typescript. As this would cause us to have to refactor our controllers to remove the DataSourceRequest usages.

 

Thanks for any information you can provide.

 

AJ

 


 
Davide
Top achievements
Rank 1
 answered on 10 Nov 2015
5 answers
2.1K+ views

Hi,

 I have a Grid with batch editing. When I start to edit cell I have to capture the value of it (with changes made while editing) to send it to the controller. 

 How can I get this value? I have managed to get the cell itself with following javascript but it does not hold the value:

 

function cellData() {
     var grid = $("#CustomerOrderPosition").data('kendoGrid');
     var cellId = grid._cellId;
     var cell = document.getElementById(cellId);
 }

Viktor Tachev
Telerik team
 answered on 10 Nov 2015
1 answer
185 views

Greetings!  I have a set of grids to export to Excel.  I completed the first, with the help of your fine demo apps.

I have quite a bit of code for the OnExcelExport(e) event to set Excel column widths, cell colors, etc.  For example:

//Set column width and wrap text
if (colIndex == 0) {
    row.cells[colIndex].wrap = true;
    sheet.columns[colIndex].autoWidth = false;
    sheet.columns[colIndex].width = 63;
}
if (colIndex == 5 || colIndex == 6 || colIndex == 7) {
    row.cells[colIndex].wrap = true;
    sheet.columns[colIndex].autoWidth = false;
    sheet.columns[colIndex].width = 72;
}

My question is :Is there a way to store metadata in the column definition of the grid that I can read in OnExcelExport(e) so that I can create shared, generic functions to set the Excel attributes or must I code each grid like this (referencing column order, etc.)?  I tried stuffing attributes in the clientTemplate but this always seemed to affect my HTML grid...

Best,
Scott

Dimiter Madjarov
Telerik team
 answered on 09 Nov 2015
Narrow your results
Selected tags
Tags
+? 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?