Telerik Forums
Kendo UI for jQuery Forum
1 answer
110 views
I currently have an example that fires my delete, update, and read methods on my WCF rest service. For whatever reason, I cannot get the create to work. Am I doing something wrong?

<script>
        $(document).ready(function () {
            var crudServiceBaseUrl = "http://localhost/IqaRestService/Service1",
            dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: crudServiceBaseUrl + "/getquestions",
                        dataType: "json"
                    },
                    update: {
                        url: crudServiceBaseUrl + "/update",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json"
                    },
                    create: {
                        url: crudServiceBaseUrl + "/create",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json"
                    },
                    destroy: {
                        url: crudServiceBaseUrl + "/delete",
                        dataType: "json",
                        type: "DELETE",
                        contentType: "application/json"
                    },
                    parameterMap: function (options, operation) {
                        if (operation !== "read" && options) {
                            return kendo.stringify({ question: options });
                        }
                    }
                },
                schema: {
                    model: {
                        id: "QuestionId",
                        fields: {
                            QuestionId: { type: "string" },
                            QuestionText: { type: "string" },                           
                            Comment: { type: "string" },
                            Answer: { type: "string" }
                        }
                    }
                }
            });
 
            $(".k-add-button").click(function (e) {
                listView.add();
                e.preventDefault();
            });
 
            var listView = $("#listView").kendoListView({
                dataSource: dataSource,
                editable: true,
                selectable: "single",
                template: kendo.template($("#template").html()),               
                editTemplate: kendo.template($("#editTemplate").html())
            }).data("kendoListView");
 
        });
    </script>
[OperationContract]
        [WebGet(ResponseFormat = WebMessageFormat.Json, UriTemplate = "/getquestions")]
        public List<IqaQuestion> GetQuestions()
        {
            return this.Store;           
        }
 
        [OperationContract]
        [WebInvoke(Method = "POST", UriTemplate = "/update", BodyStyle = WebMessageBodyStyle.WrappedRequest)]
        public bool SaveQuestion(IqaQuestion question)
        {           
            return true;
        }
 
        [OperationContract]
        [WebInvoke(Method = "POST", UriTemplate = "/create", BodyStyle = WebMessageBodyStyle.WrappedRequest)]
        public bool CreateQuestion(IqaQuestion question)
        {           
            return true;
        }
 
        [OperationContract]
        [WebInvoke(Method = "DELETE", UriTemplate = "/delete", BodyStyle = WebMessageBodyStyle.WrappedRequest)]
        public bool RemoveQuestion(IqaQuestion question)
        {
            return false;
        }
Alexander Valchev
Telerik team
 answered on 31 Jan 2013
3 answers
428 views
Telerik Team,

Is there a way to validate an autocomplete in the popup editor grid?  In the grid definition of my field, I have added an editor parameter to render out the kendo autocomplete which will retrieve remote data.

columns: [
                  { field: "EmployeeName", title: "Employee Name", editor: employeeAutoCompleteEditor }
]

The autocomplete and everything works.  But the validation defined in the datasource of the autocomplete doesn't work.

schema: {
                        model: {
                            fields: {
                                Employee: {
                                    type: "string",
                                    validation: { required: true}
                                }
                            }
                        }

If I took out the editor: employeeAutoCompleteEditor from the grid column definition, the validation works on that datasource.  Is it possible to have the autocomplete with validation by defining it in the schema?

Thanks,
Danny
Alexander Valchev
Telerik team
 answered on 31 Jan 2013
5 answers
662 views
Hi,

I am having issue with Paging on kendo grid when binding to remote data source through WCF service.

It doesn't work when I load the page, the paging only works only when I click on any column for sorting.

For Sorting, the column sorts but the image for sort direction doesn't appear on the column.

For Filtering, the filtering is enabled, but filtering isn't appearing for the columns.

I have attached the solution with this post. Please help.
Alexander Valchev
Telerik team
 answered on 31 Jan 2013
7 answers
342 views
I have a grid, with filtering enabled, and the dropdown list for the filters is being loaded from a datasource on the server.

column.Bound(o => o.Color).Title("Color").Filterable(filterable => filterable.UI("colorFilter"));
function colorFilter(element) {
element.kendoDropDownList({
     dataSource: {
     transport: {
     read: "@Url.RouteUrl("ProductData", new { action = "FilterMenuCustomization_Colors", controller = "Inventory", catagory = "XYZ" })"
     , type: "POST"
     , data: { catagory: "@ViewData["productType"].ToString()", filters: $("#Products").data.filter }
     }
     },
     optionLabel: "--Select Value--"
});
    }

This works just fine. I actually have 3 columns just like the one above for different values. My question is, how do I programatically re-bind these drop downs once the grid gets rebound? What Im trying to accomplish is if I change one of the filters, I would like the other filters to be changed as well based on the selected filter. Like cascading drop-downs, but they are all mutually exclusive. Its not a direct hierarchy.

So If I can get the drop-downs to rebind (each time the grid data gets bound), I can send the current filtered parameters with it, and change the response options based on that. I hope this makes sense.
Rosen
Telerik team
 answered on 31 Jan 2013
7 answers
456 views
Hi

My question has a litttle backgound.
I have developed an application which allows me to select a customer.
After selecting the customer a kendo bar Chart is generated, and filled with the turnover of the last 12 months.
The data are collected by calling a json webservice.
This all works fine, and the webservice call is fired only once.

Now I load the application as partial view in an mvc view.
It is loaded into a kendoWindow.

All of a sudden the application now fires the webservice call twice.

I have put breakpoints in the controller, in the view and in the partial view, and after selecting the customer, all breakpoints are visited only once.
This should mean that the partial view is loaded once, and the webservice is also called once.

But why is the webservice called twice?
Fiddler shows two calls, and also the logs on the json webservice records two calls.

Has anyone had such an experience?

Could it be that after selecting the customer, the active window is already generating the call to the webservice, but that the underlying view is generating a second window which is also calling the webservice?

Many thanks for your help!

Henk Jelt


Jason
Top achievements
Rank 1
 answered on 30 Jan 2013
2 answers
108 views
Hi.  I'm pretty new to the Kendo controls so hopefully I'm just missing something obvious here.

First question: How do I apply a descending sort by default on a grid?  Here's my current grid definition but the sort (by date_time) is ascending rather than descending:

@(Html.Kendo().Grid<DSG.Support.EntityModel.Models.SolutionFeedback>()
    .Name("KBFeedbackGrid")
    .Columns(columns =>
    {
        columns.Bound("solution_id").Title("KB#");
        columns.Command(act => act.Custom("Edit"));
        columns.Bound("site_id").Title("Acc ID");
        columns.Bound("site_name").Title("Account Name");
        columns.Bound("rating_score").Title("Rating").HtmlAttributes(new { @class = "ratingCol" });
        columns.Bound("date_time").Title("Created").Format("{0:MM/dd/yyyy HH:mm}");
        columns.Bound("comments").Title("Comment");
        columns.Bound("action_taken").Title("Action");
    })
    .DataSource(dataSource => dataSource.Ajax()
        .Read(read => read.Action("Query", "KBFeedback").Data("GetSearchCriteria"))
        .Sort(sort => sort.Add(x => x.date_time))
        )
    .Pageable()
    .Sortable(sort => sort.AllowUnsort(false).Enabled(true).SortMode(GridSortMode.SingleColumn))
)
I
Second question:  The sort option doesn't seem to be reaching the MVC action.

public JsonResult Query(DataSourceRequest request, KBFeedbackSearchCriteria query)
{
    // Here request contains the page number and page size but the Sorts collection is null
 
    int count = 42; // Get count from linq query
    IEnumerable<SolutionFeedback> results = null; // Get data from linq query
 
    return Json(new DataSourceResult() { Data = results, Total = count }, JsonRequestBehavior.AllowGet);
}
If I look at the form or add a "sort" string param to the Query function I can see the sort information being passed (e.g. "site_name-asc") but it isn't being pulled into the request object.

From another thread I found I saw a recommendation to make sure kendo.aspnetmvc.min.js is included but I checked and it is.

@Scripts.Render("~/bundles/modernizr")
<!--This bundle was moved by the Kendo UI VS Extensions for compatibility reasons-->
@Scripts.Render("~/bundles/jquery")
<!--This CSS entry was added by the Kendo UI VS Extensions for compatibility reasons-->
<link href="@Url.Content("~/Content/kendo.compatibility.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2012.3.1315/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2012.3.1315/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2012.3.1315/kendo.default.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2012.3.1315/kendo.dataviz.default.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/kendo/2012.3.1315/jquery.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2012.3.1315/kendo.all.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2012.3.1315/kendo.aspnetmvc.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
What else should I check?
Douglas
Top achievements
Rank 1
 answered on 30 Jan 2013
15 answers
630 views
Hi,

I'm a commercial complete client and have a simple but very strange problem.
 
I am using a kendo grid in a GoldMine (a windows based CMS) project and have one issue that needs to be resolved. I'm sure it has to do with the stripped down version of IE that Goldmine uses in it's GM+view tab. The GM+view tab is simply an embedded IE browser that exposes the contact data so that external web apps can be integrated.

Here's the problem. When the user clicks on the column header name of a sortble column a new browser window is opened with an empty grid. I'm using the column menu so I don't need the column header to be a link for sorting the column. This only happens in the Goldmine app so I know this is special, but it's a deal breaker for me because this is one of my apps that I'd like to integrate and there is a substantial user base at stake.

So, can the sorting link be disabled for column headers while still maintaining the ability to sort using the column menu? I'm sure there is a way to modify the JS but I'm not able to find it. Unfortunately there is no project I can send to show the problem but I can easily setup a GoToMeeting session and screen share to demo the issue.

My hope is that there's a simple fix for this. I think the IE version is 9 but I'm not sure what the embedded version is like.

Thanks in advance
Tony
Top achievements
Rank 1
 answered on 30 Jan 2013
1 answer
268 views
Hey everbody,

I've got the unique problem of determining an easy-to-understand, concise way to allow our users to edit a value for one or more columns across multiple selected rows.

I've heard from project stakeholders that they particularly like the approach which mint.com takes in allowing for multiple row edits.  This is a slide-out from beneath the header which mimics the row style of the given grid.  In place of column values, there are controls for editing, which then copy values to the selected columns and submit the edits.

I've seen the technical portion of this work in the grid control, however I haven't seen anything remotely like the presentation portion.  I took a stab at getting a simple plugin to overlay the grid, but kept getting interesting bounding issues in trying to determine where the columns actually began and ended, leading to the pseudo-columns we were creating to display far out of whack with where the actual columns displayed.

Does Kendo have any support for multiple editing beyond batch editing (more of a select once - publish many pattern)?  Or is there support for real-time monitoring of the offset of cell bounds and table width?  Or in order to accomplish this, will I have to hack together some Javascript to get things displaying in the right location?

Any ideas on what the best way to accomplish this with the control would be appreciated.

Thanks!
Josh
Alexander Valchev
Telerik team
 answered on 30 Jan 2013
4 answers
448 views
I have a web api for address loopup. User can type some keywords and system will search both Location Description and Address.

I managed to write the following code to make it work, well, basically.

So, whenever user types anything, application will go to server to get back results properly.
However, since I need to specify dataTextField as LocationDescription, autocomplete will always filter out results if keyword is in Address field.

Default value of filter is startsWith, I've changed it to "contains" in my code.

My question is, is there any way I can just disable client side filtering based on dataTextField?

TIA

===============
<input id="pulocation" />

<script id="template" type="text/x-kendo-tmpl">
     <b>${ data.LocationDescription }</b><br/>
     ${ data.Address } 
</script>

<script type="text/javascript">
    $(document).ready(function () {
        var myDs = new kendo.data.DataSource({
            transport: {
                read: function (options) {
                    $.ajax({
                        url: "/api/AddressLookup",
                        data: {
                            criteria: function () {
                                return $("#pulocation").val();
                            }
                        },
                        success: function (result) {
                            options.success(result);
                        },
                        dataType: "json",
                        beforeSend: function (xhr) {
   // set auth info
                        }
                    });
                }
            }
        });

        $("#pulocation").kendoAutoComplete({
            minLength: 1,
            dataTextField: "LocationDescription",
            template: kendo.template($("#template").html()),
            filter: "contains", // <--
            dataSource: myDs
        });

        $("#pulocation").data("kendoAutoComplete").list.width(400);

        $("#pulocation").keydown(function (e) {
                myDs.read();    
        });
    });
</script>

Kent
Top achievements
Rank 1
 answered on 30 Jan 2013
1 answer
193 views
While trying to tackle the following issue regarding the splitter, I am left wondering if it is possible to hook into the splitter's splitter bar drag events.....



Original Issue:

http://www.kendoui.com/forums/ui/splitter/splitter-over-an-iframe-is-not-sensed.aspx



I am trying like this: (working for #testButton and .t-pane, but not .t-splitbar.....)

$('#testButton, .t-splitbar, .t-pane').kendoDraggable({
                       dragstart: function(e) { 
                           alert('hello');
                       }
                   });

Is there a way to do this?  (My intention will be to hook into dragStart, raise the invisible window, hook into dragEnd, hide the invisible window)

Dimo
Telerik team
 answered on 30 Jan 2013
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?