Hello,

I am trying to use/define templates based on meta-data. In the example below, I have hard coded a json array (to be replaced with remote data) that is used to populate the template, and other fields as well. While the correct templates are being invoked (identified by the for debug labels added), the date picker and drop list assigned to the data-role attribute are not functioning.

1.  the mock data is bound to a list view, which
2.  uses a template that calls a function
3.  the function calls another template which contains the datepicker.

Thanks in advance for your help.

Regards,

Amit Kohli

<div id="container">
</div>

<script type="text/x-kendo-template" id="textBoxTemplate">
<input type="text" id="txt#=columnName#">
</script>

<script type="text/x-kendo-template" id="dateTemplate">
<input name="#=columnName#" 
                type="text" 
                data-type="date" 
                data-role="datepicker" /><label>for debug - date</label>
</script>

<script type="text/x-kendo-template" id="dropListTemplate">
<input name="dll#=columnName#" id="dll#=columnName#"
        data-value-field="LookupValue"
        data-text-field="LookupName"
        data-source="#:lookupList#"
        data-value-primitive="true"
        data-role="dropdownlist" /><label>for debug - droplist</label>
</script>

<script type="text/x-kendo-template" id="outerTemplate">
    <table>
<tr>
<td>#=columnDisplayName#</td>
<td>
                #= renderEntityTemplate(data) #
            </td>
</tr>
</table>
</script>

<script type="text/javascript">
    //todo - amit k - validations for required, format, etc. ? May one assume all dates are required
    $(document).ready(function () {
        
        var mockData =
            [
                {  columnDisplayName: "Entity Code", columnName: "EntCode", templateType: "textBoxTemplate", lookupList: ""          },
                {  columnDisplayName: "Start Date", columnName: "EqEffBegDate", templateType: "dateTemplate", lookupList: ""        },
                {  columnDisplayName: "Entity Type", columnName: "EntTypeTID", templateType: "dropListTemplate",
                    lookupList: [{ "LookupValue": 1, "LookupName": "One" }, { "LookupValue": 2, "LookupName": "Two" }]
                },
            ];

        $("#container").kendoListView({
            dataSource: mockData,
            template: kendo.template($("#outerTemplate").html())
        });
    });

    function renderEntityTemplate(data) {
        //debugger;
        return kendo.Template.compile($('#' + data.templateType).html())(data);
    }
</script>

Hello,

I've found this post: http://www.kendoui.com/forums/ui/grid/any-filtering-event.aspx
Is there any other way to receive a filter event or a sort one? Or how to override the logic of sorting/filtering but keeping the styles applied on the grid ?
The reason I need those is the following:
I'm sorting and filtering the data on the server side since it's a server pagination one, but the problem is that I'm not using the DataSource transport method to retrieve it, because it's much more complex. I have lots and lots of configurations that need to be parsed and also data, the data is generic and it's shared among multiple visualization controls and each of them parsing  the data correspondingly etc.

So what I need is to catch some filter/sort event, stop the default behavior, call my get data methods, parse the data and reassign it to the data source, but keeping the sorting/ filtering info in the headers of the grid. With the little trick in the post above I've managed to do it, but I don't like it that much especially that in order to keep the filtering/sorting info in the columns headers of the grid, I need to reapply the sorting and filtering on the data source in the client side which I don't like.

Please let me know your thoughts,
Walid

I have a template that has a multiselect control on it. I want to be able to hide it or show it dynamically.


How would i gain reference to this to call show/hide on it. Im doing something similar on a form and can call $("#daysOfMonth").hide() and it works fine. Doesn't work in the popup editor however. Any clues how to do this?

What is the best way to put a button on the bottom of the screen, ios style?

Hi,

  I am trying to save the modified changes from kendo ui grid, but its not hitting the controller method. Here is my view code,


And my update actionmethod in the controller is,

Hi,

 We have a requirement to collapse/expand TabStrip's currently selected tab using code - lets say on some button click. I already have set collapsible property as true for my Tab.
So is there any method that we can call in this case? I know the feature that clicking on tab header toggles the content - we need API for that so that we can call it from our code.

Thanks a lot,
Abhishek

Hello,

Let me explain my scenario for better understanding:
- my Model contains a list of products. All these products are displayed in GridView
- there is a nested detail template with TabStrip for each product
- one tab/item of this TabStrip contains all ebay auctions of this product in another GridView

ie. something like this http://demos.telerik.com/aspnet-mvc/grid/detailtemplate

My view in razor syntax:

Above example works fine! DataSources are read from Actions in my Controller.

But I don't want to display the strEbayID just like that, I want to display a link to the actual auction on the Ebay website.
The closest I got was this (replacing the above column):
But unfortunately this doesn't work. To build the String I can use variables from the main model without a problem. But I don't know how I can use values from the nested model, ie. strEbayID here. It's displayed as undefined this way.

I couldn't solve this yet and I am running out of ideas. But I should be pretty close I guess. Can you help me?

With kind regards...

Hi,

I can select multiple rows in grid using the Ctrl & Mouse down.

Is it possible to select/deselect multiple rows in grid using Shift + up or down keys? if so how can i do that?

Presently, when I trying to do that, it navigates to different tab in my application.

Thanks,
Prashant

Hi,

I am tweaking my web site so that certain pages are mobile friendly.
I have been using the Kendo DropDownList on my pages and was hoping that it would render nicely on mobile devices as well.

@(Html.Kendo().DropDownListFor(m => m.Acc).OptionLabel("Select Service").BindTo(Model.AccountsList).HtmlAttributes(new { style = "width: 300px;" }))

This renders on the mobile devices but when you click on it the popup is displayed inline as it does with a normal web browser and not using the native select list that normal Select elements use on mobiles which is a lot easier to use and less buggy.

Is there a way to get the dropdownlist to render as a native select element on mobile devices instead of the fancy javascript way it uses on desktop web browsers?

This would allow me to use css rules to change the style for mobile viewing instead of rewriting the page for the mobile version to get rid of the kendo ui dropdownlists.

Thanks.

I'm using the kendo.angular integration. Here's our markup using the kendo-grid directive, which works great:


I need to initialize the grid with rows pre-selected. Is the code snippet below the only way to do this? Extracting data from the DOM with a jQuery selector seems kind of hacky.


Here are my environment details:

OS: OS X 10.9.3
Browser: Chrome 35.0.1916.114
jQuery: 2.1.1
KendoUI: 2014.1.528

Any help would be appreciated!