Telerik Forums
Kendo UI for jQuery Forum
3 answers
1.0K+ views

We have a Priority boolean flag column

We want a grid filter that only returns rows that only have that flag

Can you please give a quick snippet of how to accomplish this:

a) Show two radio buttons for "Priority" "Not Priority"

b) Only show a radio button for "Priority" (with the radio button pre-selected since it's the only choice)

c) Use a drop-down with a preloaded value ... This is what I have at the moment - replacing the text input with a drop down list with only one value ... BUT for the lift of me I cannot pre-select that value - the user has to expand the drop-down and select the value

        $(param.element).kendoDropDownList({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: [
                {
                    text: "Priority",
                    value: 0
                }
            ],
            index: 0
        });

d) using a custom UI ... the filter UI is just a form with some controls and form buttons, correct? - for the future I would really love to be able to create my own UI with my own inputs, and decide myself what value I want bound when the form is submitted

I tried switching the type on the text input (not shown) and I tried creating a cloned input element and switching the type (shown below) ... and it looks perfect, except on submit it's not recognized as a filter

$(param.element[0]).clone().attr('type', 'radio').attr('checked', true).addClass('avoPriorityFilterRadio').insertAfter(param.element[0]).prev().remove();
        $(".avoPriorityFilterRadio").after("<span>Priority</span>");

 

Appreciate any help - I've struck out with all of these options

Daniel

 

Eyup
Telerik team
 answered on 07 Dec 2018
8 answers
710 views
I am using Durandaljs to create a single page applications. I am using Kendo UI Grid to display data. All my bindings are working and I am able to see the data in the grid. I am not sure on how to bind command events for Edit. I tried it based on MVVM example on Telerik website bit its not working for me.

Below is my code.

My View Model:

define(['plugins/http', 'durandal/app', 'knockout'], function (http, app, ko) {
    return {
        displayName: 'My Applications',
        applications: ko.observableArray([])
 
        editApp: function (e) {
            e.preventDefault();
            alert("test");
        },
 
        activate: function () {
            var that = this;
 
            return http.get('http://localhost/api/App').then(function (response) {
                that.applications(response);
            });
        }     
    }
});

My View:

<section>
    <h2 data-bind="html: displayName"></h2>
    <div id="gridContainer">
        <div data-kendo-role="grid"
             data-kendo-scrollable="false"
             data-kendo-sortable="true"
             data-kendo-bind="source: applications"
             data-kendo-columns="[
                                {'field':'Id','hidden':true},
                                {'field': 'Name'},
                                {'command':[{'text':'Edit Application','click':'this.editApp','name':'Edit-App'}],'title':'','width':'50px'}
                             ]"
             style="height:100%;">
        </div>
    </div>
        <div style="float:left;">
            <a href="#addapp">Register Application</a>
    </div>
</section>

if I click on the Edit button it is not reaching editApp function.
Even tried placing the editApp function in normal js file rather than viewmodel. i am getting a jquery error saying "Object doesn't support property or method 'Apply'".

Please help.
Alex Hajigeorgieva
Telerik team
 answered on 07 Dec 2018
3 answers
1.2K+ views

i have a grid where the current input cell that is being edited may have had a class added to it in a prior edit to indicate that it  had been changed

 

or the current input cell being edited may be in process of being edited and has the k-dirty flag

 

Can I interrogate that cell in javascript or jquery  to determine the class or classes that are attached to that input cell?

 

I am not able to find any examples 

 

thanks

Jim

 

 

 

 

Viktor Tachev
Telerik team
 answered on 06 Dec 2018
3 answers
369 views

I am using Time Picker in MVVM SPA application page. it is happening in IE 11 (working fine in FireFox ).

when i select a time from Dropdown picker or even manually enter it in Time picker Text Box. it gets the value property set to the  that value.

however it resets  to 12:00 AM and sometimes to 10:00 PM and shows that value in Time picker's text box. However value field returns me correct value.

 

following is the declaration of Time picker

$("#tpRunTime").kendoTimePicker({
                dateInput: true
            });

 

<tr>
                    <td class="col-md-8"><input id="tpRunTime" name="Run time" data-required-msg="Select run time" required /></td>
                </tr>

 

 

Please advise.

 

 

 

 

 

Konstantin Dikov
Telerik team
 answered on 06 Dec 2018
2 answers
3.0K+ views

I have a Kendo grid set up, including a template string that shows a button to click to see more details about the row. In order to do this, I set a 'dataBound' function to fire that attaches a click event to each row... which fires the below function. The idea is that this function will accept the 'event' details and use them to show the respective deatils in a pop up box. However, when I get to the bolded line below, I get an error that .dataItem is not a function at showDetails.

I know that this used to work when there was no template string being used (I implemented the template string for some conditional row formatting). Is there a way to pass these 'event' details to the function in this manner?

function showDetails(e) {
         e.preventDefault();
         var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
         wnd.content(detailsTemplate(dataItem));
         wnd.center().open();
}

Viktor Tachev
Telerik team
 answered on 06 Dec 2018
6 answers
246 views

Lately, I see lots of errors like this:

" failed:  TypeError: Cannot read property '__kendo_devtools_id' of undefined"

 

And the performance is a bit sluggish in Chrome

Any new Issue with chrome?

Dimitar
Telerik team
 answered on 06 Dec 2018
2 answers
468 views

I'm using bootstrap with a material theme for bootstrap in my project.  I want my kendo controls to look material as well.  Currently for bootstrap v4 I must use the kendo bootstrap v4 file to keep my regular bootstrap formatting working, this means my kendo controls look nothing like I want them to look. Bootstrap should not be a "theme".  Are there any new "fixes" that can be applied to make this scenario work?  Is there a way to modify the current material theme in a way that doesn't break bootstrap?  The theme builder doesn't give anywhere near enough customization to achieve a material look.

 

It would be good if in the future you could separate theming from the layout system so your bootstrap file is additive to any theme the user wants to use. Right now we are frantically evaluating all options and that includes eliminating Kendo UI completely unfortunately.  I am hoping there is a solution because kendo is already in, but more work has been invested in the overall app design.

 

Thank you in advance

Mike
Top achievements
Rank 1
 answered on 05 Dec 2018
2 answers
742 views

Hello,

I'm using the grid with AngularJS on a screen where I need to make the data change "in line."
The 'update' method needs to check whether that operation can be done or not (depending on business rules).
But when I make the call to the API method I get an error.
Follow my code.

$scope.gridOptions = {
                    columns: [
                        {
                            command: [
                                { name: "edit", text: " "},
                                { name: "destroy", text: " " }
                            ], title: " ", width: 230
                        },
 
                        { field: "StateID", title: "ID", width: 70 },
                        { field: "StateCode", title: "Code", width: 70 },
                        { field: "StateName", title: "Name" }
                    ],
                    dataSource: {
                        pageSize: 5,
                        batch: false,
                        transport: {
                            read: {
                                url: "/Definitions/Country/State_Get_List/" + ID,
                                dataType: "json",
                                type: "GET",
                                contentType: "application/json; charset=utf-8"
                            },
                            update: function (opt) {
                                $http.post(urlTest, '"' + opt.data.model + '"')
                                    .success(function (res) {
                                        if (res === '0') {
                                            alert('you can not update this');
                                        }
                                        else {
                                            alert('Success!');
                                        }
                                    });
 
                            },
                            create: function (opt) {
                                alert('create');
                                opt.sucess();
                            },
                            destroy: function (opt) {
                                alert('destroy');
                                opt.sucess();
                            }
                        },
                        schema: {
                            model: {
                                id: "StateID",
                                fields: {
                                    StateID: { editable: false, type: "number", nullable: true },
                                    StateCode: { type: "string" },
                                    StateName: { type: "string" }
                                }
                            }
                        }
                    },
                    filterable: false,
                    sortable: true,
                    autoBind: true,
                    navigatable: true,
                    pageable: true,
                    height: 390,
                    editable: "inline",
                    toolbar: ["create"]
                };

 

My API method (ASP.NET MVC):

[HttpPost]
public JsonResult State_Save([System.Web.Http.FromBody]State state)
{
    string _return = "0";
 
    // I WILL CHECK IF THIS UPDATE WILL BE OK,
    // IF NOT I WILL CHANGE TO "1"
 
    return Json(_return, JsonRequestBehavior.AllowGet);
}

The list of states appears, but when I try to edit and click the "Update" button the below error appears.

jQuery.Deferred exception: Unexpected number SyntaxError: Unexpected number

 

 

 

Konstantin Dikov
Telerik team
 answered on 05 Dec 2018
1 answer
81 views

  if X_axis Min value is "0" then Tooltip showing "d" on header,  please refer attached screenshot and give any suggestion i can i able to show "0" instead of "d" on tooltip header.

   Thanks,

.NET Developer

Tsvetina
Telerik team
 answered on 05 Dec 2018
1 answer
66 views

Hi,

I have a resizable angular kendo grid, whenever I do column resize grid data cleared off and shows empty grid.

Having this problem in all the browsers. We haven't met this problem ever before.

Thanks in advance.

 

Viktor Tachev
Telerik team
 answered on 05 Dec 2018
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?