Hi, I'm using Kendo UI for the web (i.e., not a mobile app, just HTML). I'm looking to load a PDF from an external link into a window when a button is pushed on a mobile device. The problem is, on my Android device, when I load the PDF into the window (with iframe), the browser just downloads it like a normal browser download...and the window remains empty.

Question: is the Window an appropriate way to do this? I'm open to other suggestions...I just need to display a PDF, not have it downloaded by the browser download functionality.

Another approach I could take is to load a byte stream of the PDF from the server and somehow render it from there...but I guess that would require a widget that understood how to render PDFs.

Any ideas? My current code is below:

        $(".search-result-button-area button").click(function() {
            var url = $(this).attr('data-theUrl');
        
            $("#window1").kendoWindow({
                actions: ["Custom", "Pin", "Refresh", "Maximize", "Minimize", "Close"],
                draggable: true,
                modal: true,
                pinned: false,
                resizable: true,
                title: "The Thing",
                content: url,
                iframe: true
            });
        });

<div id="window1"></div>

Hello,

I understand how the DataSource.read() functionality works; I send a JavaScript plain object and the parameters and values are sent to the server. That all works well. I also understand how the data object works under the read transport; that won't work in this instance, because the ViewModel that has the data I need upon search isn't created until after the DataSource itself. I don't want to use require.js if I don't have to :)

But, what if I have a DataSource that has server paging (I use the skip and take parameters on the server to process the request) and I send a plain object when I read? How do I persist the query parameters after I go to the next page in a Data Grid?

For instance:

*** DataSource ***

var rfqDataSource = new kendo.data.DataSource({
  schema: { model: { id: "RFQ" }, data: "RfqQuotes", total: "total" },
  transport: { read: { url: window.rfqQuotePath, dataType: "json" } },
  serverPaging: true,
  pageSize: 15
});

*** Call to read the datasource after a search button is clicked ***

rfqDataSource.read({ customer: rfqModel.customer, startDate: rfqModel.startDate });

The Grid that is bound to the DataSource filters correctly, but as soon as I go to the next page, the read parameters are lost. Better yet, if I'm on page two of the Grid before I do a search, and do the search, the Grid may show no results at all depending on how many pages of actual data are returned.

So, I want to be able to send parameters to the API and persist those parameters until I search again or clear the search parameters.

can some one tell me how to set the grid row height? thanks 
I tried using a row template but doesn't work.

<script id="rowTemplate" type="text/x-kendo-tmpl">
            <tr style="height=10px">
                <td> etc


also tried
$("#grid").kendoGrid({
                columns: [
                    { title:"col1", field: "COL1", width: 100, height:10 },

thank in advance

I copied the demo code for grabbing selected nodes. This is bound to dataSource.bind("change", function). Is there anyway to specify what kind of change to the dataSource. In my case, I want to bind specifically to a check or an uncheck of a checkbox. I would like it to discern between that and appending nodes to the tree and other changes to the dataSource.

In grid documentation I found collapseGroup and expandGroup method.
I need some custom action when user collapse or expand group. In documentation I found detailCollapse and detailExpand event, but not groupCollapse and groupExpand.
Is there any way to catch this 2 events?

Hi,

I am trying to implement cascading drop down on client side. 

I have two data sources. one for Organizations and second one for Locations. Organizations json has Id and Name. Locations json has Id, Name and OrganizationId (reference to Organizations). Once the user selects Organization in the first drop down I want to show relevant values in the second drop down. Also, user can directly select a location with out selecting an organization.

I am trying to populate the Locations drop down along with a custom attribute to to indicate the organization that it belongs. I am trying to use Attr binding and its not working. I am not sure If I am using it the right way.

Data Source: 

Model:

View:

Output that I am expecting is something like this
<select>
   <option value="10" org="2">USA</option>
</select>

Hello,

I am referring to SchedulerCustomEditor Project and in CustomEdiotTemplate.cshtml file i am adding a button and on click of button i want to load another Pop up window with a grid. The Moment i add window open code in button click Event the custom Editor Pop up stops coming.
Atttached the

Attached my template file and TestClick Event to Show Pop up window

Thanks

Anamika

We're binding to a sitemap file as shown below: 



The base controller executes this code in the constructor: 

It's binding correctly using some of the examples shown on these forums. However, the nodes in Bold above don't expand. So clicking on System does nothing. Using Firebug I can see the sub-items are there rendered as a UL so I go into Firebug and remove the display:none attribute. 

The first screenshot "How it should look.png" shows what it should look like expanded. 
Note: I had to use Firebug to get it to display. Clicking on System does nothing... doesn't even throw any errors. 

Note 2: When this panelbar is used on a page that is not included in the Sitemap or rendered out as part of the HTML hierarchy then the items expand, but on pages that do exist in the Sitemap, it doesn't work at all. 

Any ideas or do you need more information? 

Hi,

I'm creating a mobile app and I've got a button in my navigation bar which I have disabled:

<div data-role="navbar">
        <a class="cublink" data-role="button" data-align="middle" data-transition="slide:left" href="#divSelect" disabled="disabled">Continue</a>
        <a class="cublink" data-role="button" data-align="right" data-transition="slide:left" href="#divHelp">Help</a>
</div>

As you can see, I have added the disabled attribute above to the "Continue" button.  The button looks disabled when running, and a single click on it does not take me to the designated page, which is good.  However, if I swipe the button, it does fire it.  Is there some code which ignores the disabled attribute when swiped and not clicked?

Hi, i've been trying to get user grid preference saving following this link:

http://jsbin.com/anisip/31/edit

It's been very helpful so far with saving the data to my database.

However, i'm trying to load the saved data now but i cant seem to get it working.


In my database, i've saved the "state" of the object which looks similar to this:
"{"group":[{"field":"Supplier","dir":"asc","aggregates":[]}]}"

When i load my page i try to load the user grid preference from the database (due to filtering needed as soon as the window loads, i have this method in the window.load() function).

                var grid = $("#Grid").data("kendoGrid");

                // Load grid preferences.
                $.post("Home/LoadGridPreference", { forScreen: "" }, function (data) {
                    var state = JSON.parse(data);
                    if (state) {
                        grid.dataSource.query(state);
                    } else {
                        grid.dataSource.read();
                    }
                });

I have checked that the data i get in "state" is indeed the same as before i stringified the grid information.

However when it gets to the stage grid.dataSource.query(state), nothing seems to happen , i cant see any ordering that i have saved in the database.

Also, to test out whether its the "state" value not being set correctly, i have tried to manually override this by using the exact values from when the "state" value was set. i.e. i have tried this grid.dataSource.query("{"group":[{"field":"Supplier","dir":"asc","aggregates":[]}]}")

Yet this does not work either. 

I can see that it's trying to do something as this seems to make the row counter (located on the bottom right of the screen) to say NaN - NaN of 3 items.


The example on JSBin works perfectly using cookies, but why isn't this working when i implement this on my project and save the grid preferences into the database?


Thanks