Telerik Forums
Kendo UI for jQuery Forum
13 answers
2.8K+ views
I have been trying, for several days, to write HTML/JQuery that calls my ASP.Net MVC Controller and populates the DataSourceRequest structure properly. No matter what I tried, the values in the request for Filters and Sorts were null even though the paging information was present. I consulted the documentation and I found this unhelpful information in the DataSource documentation.

type String
Loads transport with preconfigured settings. Currently supports only "odata" (Requires kendo.data.odata.js to be included).

Eventually I gave up and did, with hindsight what I should have done first, and that was to write a small test case using the helpers to see what it generated. And lo and behold MAGIC. If the type: attribute of the dataSource is set to aspnetmvc-ajax the DataSourceRequest fields are magically populated. So a code snippet is:
$("#grid").kendoGrid({
    dataSource: {
        type: aspnetmvc-ajax,
...
    }
})
Now I am going to have a little gripe. A year ago i started using the Telerik Controls for ASP.Net and I was blown away by them - they were awesome and, for the most part I found the support pretty good. Because I was so impressed as I migrated to MVC I decided to move to Kendo UI because it seemed to be a very clean interface and I had been impressed by the earlier controls.

But it has proven to be a disaster. The product is inherently brilliant. But it's clearly not finished and, if you are like me, and work alone, it can be a nightmare solving each problem as it occurs one at a time. I'd like to say the forums help, and sometimes they do, but there are a depressing number of posts that have one of the following characteristics.
  1. They go unanswered for weeks, if not months - in fact it is not uncommon to see a follow up a week or so later by the original poster about how they eventually circumvented the problem.
  2. A Telerik employee posts nothing but a link to the documentation. The documentation is dreadful. It follows in the path of Microsoft documentation by which I mean if you already know the answer, or at least where to find the answer, it often answers your question. But if you have a "Where do I start with this?" type of question it is generally hopeless.The examples are like most examples in most books,- that is they are fairly simple and most of what developers do isn't simple. And the tricky parts are never answered.
As I suggested in a post several weeks ago, Telerik needs to commission someone like APress to write a book about Kendo UI so that someone who enjoys writing and explaining things can write some good documentation. I'd buy that book, or even better, I'd subscribe to an online version of it that was kept up to date as bugs were fixed and features added. Most developers, myself included, hate writing documentation and, in general, we are not good at it. 

Anyway, there are my two roubles worth - overall, I love the product, but it has made this project I am working on very late. I wish I had stuck to regular ASP.Net with Telerik. But in the end I hope the pain will have been worth it.

Xi
Top achievements
Rank 1
 answered on 05 Dec 2017
2 answers
117 views

using this as an example: http://demos.telerik.com/kendo-ui/grid/editing

 

1. how do i style editable cells so they look like they are editable? you can't tell that they are until u click on them, and if some are not, u can't tell which are and which aren't

 

2. how do i get rid of the up / down control for editing the "units in stock" field? (i want to get rid of the control for all numeric fields in my app)

 

3. how do i get notified on keystrokes, or leave of focus, or on enter, so i can immediately process all changes to the data?

 

4. for a cell that has been edited and then edited back to it's original value, how can i reset the red tick that indicates the value was edited? (i only want to show changed values)

 

thanks

Keith

Keith
Top achievements
Rank 1
 answered on 05 Dec 2017
3 answers
195 views

Hi,

I have a hierarchy grid which is filled by a model after a post action ("search").

In the search action i filled the model "Class" which contains an array of "Student".

I checked with debugger the search action and i found out that all of the data was loaded successfully, also the inner grids data.( I actually saw the data in the view)

The problem is that after the perfect first loading - surprisingly, the "search" action repeats itself for each inner-grid separately.

My question is: how to prevent reloading  for each inner-grid?

This is my code:

@(Html.Kendo().Grid(Model.Class)
           .Name("ClassGrid")
           .Columns(column =>
           {
               column.Bound(c => c.CodeClass).ClientTemplate("<a> #=CodeClass#  -  #=ClassName#</a>");
               column.Bound(c => c.NumOfStudents);
           })
                .Sortable()
               .Groupable()
               .ClientDetailTemplateId("HierarchyRows")
               .Events(events => events.DetailInit("onDetailInit"))
               .DataSource(data => data
                   .Ajax()
                   .PageSize(15)
                   .ServerOperation(false)
           ))

<script id="HierarchyRows" type="text/kendo-tmpl">

    @(Html.Kendo().Grid<Models.Student>()

            .Name("grid_#=NumStudent#")
            .Columns(s=>
            {
                        s.Bound(b => b.Age);

                        s.Bound(b => b.FirstName);
            })
            .Pageable()
           .DataSource(data => data .Ajax()
                                           .PageSize(5)
                                           .ServerOperation(false)
          )
        .ToClientTemplate()
    )
</script>

function onDetailInit(e) {
       var gridDetail = $("#grid_" + e.data.NumStudent).data("kendoGrid");
       gridDetail.dataSource.data(e.data.Classes);
    }

I'll be glad to receive your help,
Elad.

ShareDocs
Top achievements
Rank 1
 answered on 05 Dec 2017
1 answer
356 views

 

<div id="treeList"></div>
<script>
    var treeData = @Html.Raw(Model.Data);
 
    var dataSource = new kendo.data.TreeListDataSource({
        transport: {
            read: function (e) {
                e.success(treeData);
            },
            update: function (e) {
                var url = '@Url.Action("Update", "MyController")';
                 
                 var roleAssigned = e.data;
                 if (!$.isNumeric(e.data.userId)) {
                    roleAssigned = e.data.userId.id;
                 }
                 
                $.post(url, { row: roleAssigned },
                    function (data) {
                        var returnedRole = $.parseJSON(data);
                        e.success(returnedRole);
                    }
                );
            }
        },
        schema: {
            model: {
                id: "roleId",
                parentId: "parentId",
                  expanded: true
            }
        }
    });
 
    $("#treeList").kendoTreeList({
        dataSource: dataSource,
        height: 540,
        filterable: true,
        sortable: true,
        columns: [
            { field: "roleName", title: "Role Name", width: 200},
            { field: "userId", title: "Assigned Staff", filterable: false, width: 80, editor: dropDownEditor, template: "#=userName#" },
            { field: "userTitle", title: "Title", width: 80, filterable: false},
            { field: "userDepartment", title: "Department", filterable: false, width: 80},
            { command: [{ name: "edit", text: "Assign" }, { name: "unassign", text: "Un-Assign", click: unassignRole }], width: 90, attributes: {
                style: "text-align: center;"
 
                } }
 
        ],
    });
 
    function unassignRole(e) {
        e.preventDefault();
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        if (dataItem.userId != null || dataItem.userId != 0) {
                var url = '@Url.Action("UnassignRole", "MyController")';
 
                 var roleAssigned = {
                        roleId: dataItem.roleId,
                        parentRoleId: dataItem.parentId,
                        roleName: dataItem.roleName,
                        userId: dataItem.userId,
                        userName: dataItem.userName,
                        userDepartment: dataItem.userDepartment,
                        userTitle: dataItem.userTitle,
                    }
                 
                $.post(url, { row: roleAssigned },
                    function (data) {
                        var returnedRole = $.parseJSON(data);
                        dataItem.set("userId", returnedRole.userId);
                        dataItem.set("userName", returnedRole.userName);
                        dataItem.set("userDepartment", returnedRole.userDepartment);
                        dataItem.set("userTitle", returnedRole.userTitle);
                        return;
                    }
                )
 
        }
    }
 
    var dropDownData = @Html.Raw(Json.Encode(Model.UserSelectList));
    function dropDownEditor(container, options) {
        $('<input required name="' + options.field + '"/>')
        .appendTo(container)
            .kendoDropDownList({
                autoBind: false,
                dataTextField: "fullName",
                dataValueField: "id",
            dataSource: dropDownData,
            animation: {
                close: {
                    effects: "fadeOut zoom:out",
                    duration: 200
                },
                open: {
                    effects: "fadeIn zoom:in",
                    duration: 200
                }
            }
            });
 
    }
 
  
</script>

 

The application allows me to assign as many people as I need to using a drowdownlist to select a user when in edit mode. The id from the selected user in the list is passed correctly. If there was no previous selected user loaded, it passes the entire object, which is why I have the following lines of code:

 

if (!$.isNumeric(e.data.userId)) {
                   roleAssigned = e.data.userId.id;
                }

Above is an altered version of the code.

 

If I use the custom command 'unassign' outside of the tradtitional CRUD methods in the transport object, The 'edit' command stops working correctly. When trying to assign a user, it will then call the Update function twice, once with the userId (which will either contain the id or userobject selected from the dropdown), and then again with a userId of 0 (not correctly being set by the dropdown). When passing back a userId of 0, the webservice returns a 500 error. 

 

One of the postbacks does correctly save the data, but the treelist is not updated with the values returned. 

 

Why does the Update function called twice? Why does the treelist not update anytime after a 'unassign' command is executed? How do I fix this?

Stefan
Telerik team
 answered on 05 Dec 2017
1 answer
267 views

Hi! So I have this grid, that is a normal grid with create/update buttons and popup editing, that has a bunch of fields.

Besides these fields, there are two fields that are just for helping the user. One is a count of objects related to that row in the database for instance.

The thing is that I have a separate popup that lets me add more of these related objects, and I'd like that if I accepted the changes in that popup, the related object counter in the grid gets refreshed, for the entity that was changed only, instead of reloading all the grid's data.

Before I had editing in the grid, I simply did it by setting the count as an editable field, and setting it after editing the related objects. Since it was editable, a 'model.set("Counter", counter + 1)' refreshed the grid's HTML just fine automatically.

Now the issue is that I introducing popup editing to that grid. So now if I do "model.set(anything)", the DataSource of that grid marks the row as modified, and gets sent to the server in any sync call, or even more annoying, the counter change gets undone if I edit the row and cancel the changes in the popup editor, even if I didn't touch anything.

Is there any way to do these sort of fields that refresh the grid's HTML on change, but that aren't part of the whole DataSource<->server cycle? I'd like the DataSource to ignore the change more or less, but have the grid's cell automatically updated in the DOM.

Stefan
Telerik team
 answered on 05 Dec 2017
1 answer
385 views

I am using kendo.ooxml.Workbook and manually put in rows with value.  I want the font color to become red if the cell value is negative. Is it possible to do it in push row operation?  Or where should I put in this logic?  Thanks.

rows.push({
cells: [
{ value: "Net", background: "#d4d4f7" },
{ value: $scope.netActualYTD, background: "#d4d4f7", color:??????? },
{ value: $scope.netBudgetYTD, background: "#d4d4f7", color: ????? },
{ value: $scope.netVarianceYTD, background: "#d4d4f7" },
{ value: "" },
{ value: $scope.netForecastAnnual, background: "#d4d4f7" },
{ value: $scope.netBudgetAnnual, background: "#d4d4f7" },
{ value: $scope.netVarianceAnnual, background: "#d4d4f7" }
]
})

 

 

 

Stefan
Telerik team
 answered on 05 Dec 2017
1 answer
80 views

1) User manually type value in the MultiSelect control for filtering.
2) Filter, Paging On the server side perform several seconds.
3) While filtering still doing (not filtered yet) please press enter to select value.
4) When User pressed Enter issue occurs (please see attachments).

 

Neli
Telerik team
 answered on 04 Dec 2017
1 answer
4.2K+ views

I have a grid with inline editing. Each row has few required fields - text boxes, drop downs e.t.c.
When I click on edit button the row turns to in "edit" mode. Validation is working as expected, especially if I click on "update" button.

Here is a situation. I have another custom command button "Confirm" which call javascript function onItemConfirm
columns: [
                {
                    command: [{ name: "edit", text: { edit: " ", update: " ", cancel: " " } },
                      { name: "confirmButton", text: " ", template: "<a class='k-button k-grid-confirmButton' onclick ='onItemConfirm(this)'><span class='k-icon k-i-checkbox'></span></a>" },
                    ], title: "Edit / Confirm", width: "120px", locked: true
                }

function onItemConfirm(e) {

            var row = $(e).closest("tr"),
            grid = gridElement.data("kendoGrid"),
            model = grid.dataItem(row);
            // validate
            if(model.Field! == "" || model.Field1 == null){
                grid.editRow(row);

               // I need to display validation messages
            }
    }

By my design it should turn a row into "edit" mode, which is does, but then I want to display validation messages (tool tips) for columns with invalid data immediately without forcing user to click on Update button. Is it possible?

thanks

Vadim
Top achievements
Rank 1
 answered on 04 Dec 2017
6 answers
642 views
I have a layout with a back button:
<div data-role="layout" data-id="infoPageLayout">
 <header data-role="header">
  <div data-role="navbar">
   <a class="nav-button" data-align="left" data-role="backbutton">Back</a>
    <span data-role="view-title"></span>
  </div>
 </header>
</div>

I get to that view from a 'click' event with app.navigate('#infoPage');
When I click the Back button, it goes to the view at the top of my html file (the default view) instead of the previous view.

Is there anything that might be causing this?
Percy
Top achievements
Rank 1
 answered on 04 Dec 2017
11 answers
464 views
I'm using this example http://demos.telerik.com/kendo-ui/datepicker/angular. If I try to set initial values for dateString and/or dateObject datepicker doesn't show this initial value.
Stefan
Telerik team
 answered on 04 Dec 2017
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
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
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?