I am creating a kendo panelbar that contains 3 panel and each panel contains kendogrid , the content will load data after kendodropdownlist change occur. If the first time I choose value on dropdownlist I can expand all panels, next time I choose another values on dropdownlist then I cannot expand panel anymore except the panel that set default expand: true and next time I can expand. I don't understand the reason why?

Here is the code of my panel bar:

var expenseConflitViewHTML = '<div class="q-expense-panel-wrap"><div id="conflitsheetsgrid"></div></div>';
    var expenseDraftViewHTML = '<div class="q-expense-panel-wrap"><div id="draftsheetsgrid"></div></div>';
    var expenseSubmittedViewHTML = '<div class="q-expense-panel-wrap"><div id="submittedsheetsgrid"></div></div>';    
    var expensePaidViewHTML = '<div class="q-expense-panel-wrap"><div id="paidsheetsgrid"></div></div>';​

$("#expensesheetpanel").kendoPanelBar(
        {
            dataSource: [
                {
                    text: '<span class="q-bold">' + ExpensesConstants.lbConflitSheet + '</span>',
                    encoded: false,
                    content: expenseConflitViewHTML
                },
                {
                    text: '<span class="q-bold">' + ExpensesConstants.lbDraftSheet + '</span>',
                    encoded: false,
                    expanded: true,
                    content: expenseDraftViewHTML
                },
                {
                    text: '<span class="q-bold">' + ExpensesConstants.lbSubmittedSheet + '</span>',
                    encoded: false,
                    content: expenseSubmittedViewHTML
                },
                {
                    text: '<span class="q-bold">' + ExpensesConstants.lbPaidSheet + '</span>',
                    encoded: false,
                    content: expensePaidViewHTML
                },

            ],
            expandMode: "multiple"
        });

 

Here is the kendogrid :

$("#submittedsheetsgrid").kendoGrid({
        columns: [
            {
                field: "UserFullname",
                title: ExpensesConstants.lbEmployeeName,
                width: 180,
                hidden: isHiddenEmployeeName

            },
            {
                field: "SheetDescription",
                title: ExpensesConstants.lbSheetName,
                width: 500

            },
            {
                field: "AdvanceAmountDisplay",
                title: ExpensesConstants.lbAdvance
            },
             {
                 field: "ExpenseAmountDisplay",
                 title: ExpensesConstants.lbExpenseTotal
             }
        ],
        scrollable: true,
        editable: false,
        filterable: true,
        dataSource: dsSubmittedSheet,
        dataBound: function (e) {
            var grid = e.sender;
            if (grid.dataSource.total() == 0) {
                var msg = ExpensesConstants.msgSubmittedSheetEmpty;
                var colCount = grid.columns.length;
                var emptyRow = '<tr><td colspan="' + colCount + '">' + msg;
                e.sender.tbody.parent().width(e.sender.thead.width()).end().html(emptyRow);
            }
        }
    });

 

......

 Could someone please help me?

Thanks for your help!​

 

 ​

 

Hi,
It seems the back button (both Kendo UI back button and the hardware button) are not working if you embed the kendo.all.min.js instead of the kendo.mobile.min.js (version 2015.2.805). Probably some misconfiguration on my side, I cannot find the cause of this. For embedding the correct stylesheets and script I followed the example here:

http://www.telerik.com/forums/how-to-get-grid-work-in-kendo-ui-mobile-(in-icenium-graphite)

I attached a simple typescript project for you to test. It does work on Android phones, just not on my Galaxy s6 with Android 5.1.1 installed on it. If I change to kendo.mobile.min.js it all works without a problem. Strange...

Best regards,
Ruud

Hi THere,

 

My model contains 4 dates Planned  Start and End vs Actual Start and End dates. How can I overlay the second pair of dates on the same bar in different color or shaded? I don't see no bar templates, and I can't figure how I can offset based on the date differences in dataBound event.

 

Please advise best approach.

Hi,

We have a window with 2 datagrids that allow select data from one grid to another. We have the four tipical options (add one, remove one, add all, remove all), our problem is in the "add all" option.

 We need to clone the datasource from one grid to another and this is our try:

 

 

The problem is that it's very slow when there are many records. What is the best method to clone the datasource?

Hi there,

i am looking to load an external html page into the tab of a details template. this seems pretty strait forward to do if it is a just a regular tabstrip however when the tabstrip is a template, i cant seem to get this to work:

    <script type="text/x-kendo-template" id="template">
       <div class="tabstrip">
            <ul>
                <li class="k-state-active">
                    Details
                </li>
            </ul>
            <div>
                <div class="statuspage">
                    <div class="content"></content>
                </div>
            </div>
        </div>
    </script>

         function detailInit(e) {
            var detailRow = e.detailRow;
            detailRow.find(".tabstrip").kendoTabStrip({
                animation: { open: { effects: "fadeIn" } },
                dataTextField: "text",
                dataContentField: "content",
                dataUrlField: "url",
                dataContentUrlField: "contentUrl",
                dataSource: [{
                    text: "Build Output",
                    content: "This displays content IF i press the tab",
                    contentUrl: "http://doesnt work."
                }]
            });
        }

 i will need to app the url as demonstrated in the demo. e.data.poperty

 

thanks!

 

Jonathan 

 

  

 

We have a scenario, where we have to show the listview data in the parent-child relation format. In the Parent row there should be a plus (+) symbol and on click of the plus symbol the child data should be opened. It’s basically group the data under the parent and show the child data on click of the plus symbol.

Kindly suggest us the approach or the code to accomplish our requirement.

Below sample code of my template for the listview without the parent-child relation and will have to modify the code to accommodate the new requirement.


<script type="text/x-kendo-tmpl" id="template">
        <div class="left-body-container">
            <table id="doc-list" class="doc-list" width="100%">
                <tbody>                   
                    # if (FolderName==null) { #
                    <tr id="tblRowFileItems" objectid="#:ObjectId#">
                        <td>
                            <listleft>
                                <img src="#:ImagePath#" />

                                <file-folder-names>
                                    <a data-role="button" href="GetDocumentContent?objId=#:ObjectId#" target="_blank" id="testa">#:DocumentName#</a>
                                </file-folder-names>
                                <br />

                                <span class="details">
                                    #:DocumentSize# <span class="paddingLR10">|</span> #:DocumentCreatedDate# :
                                    # if (!(DocumentCreatedby==null)) { # <a href=""> #:DocumentCreatedby# </a> # } #
                                </span>

                            </listleft>
                        </td>
                    </tr>
                    # } #
                </tbody>
            </table>
        </div>
    </script>

@(Html.Kendo().ListView<IndexModels>(Model)
                        .Name("listView")
                        .TagName("div")
                        .ClientTemplateId("template")
                        .DataSource(dataSource =>
                        {
                            dataSource.Read(read => read.Action("ReadDataonPaging", "Home").Data("additionalInfo").Type(HttpVerbs.Post));
                            dataSource.ServerOperation(true);
                            dataSource.PageSize(10);


                        })

                .Pageable(pager => pager

                                 .PreviousNext(true)
                         )
                )

I have some model with selected ids:

in my partial view I render Multiselect control:

and it renders next wrong Javascript code (see value of the "value" at the end of the expression :):

BUT!

When I change the Name in Razor code to something other name, for example, "bla-bla-bla" it renders correct code and I see in the web page multiselect with selected items:

 

In other words, rendered javascript is incorrect when Model's property for the selected ids is the same with parameter value passed to Html.Kendo().MultiSelect().Name method

Whats wrong in my code?

HI Team,

1. In Kendo grid,if i enable virtual scrolling also,I could not see the loading progress bar in my application. But in the demo i could see. Kindly help me.Below is my code.

 @(Html.Kendo().Grid<kendo_grid_with_web_api_and_ondemand.Models.ClientDetails>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(o => o.ClientID).Width(110);
        columns.Bound(o => o.ClientName).Width(130);
        columns.Bound(o => o.AppDesc).Width(280);
    })
    .Sortable()
    .Scrollable(scrollable => scrollable.Virtual(true))
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(100)
        .Read(read => read.Action("ClientDetailswithWcf_Read", "Home"))
     )
    )

2.My another doubt is I need to show,loading symbol with text like ,loading symbol - 1 to 50 records are loading,If i scroll again it should show with loading symbol and 51-100 records are loading.Kindly help me out

3.One more clarification is kindly provide the disadvantages of virtual scolling of kendo grid. Not technical perspective. Usablity perspective.

Hi there,

Some of our charts take a few seconds to come back from the server.  Initially, the legend at the bottom just shows the unformatted template (see attached screenshot) until the data comes back and it's all good.  Is there a way of hiding this until the actual data has been rendered? 

Thanks, Mark

Hi,

 

I'm trying to export the map as an image in IE9, but it doesn't work.

Do I have to use Proxy?