Questions on Kendo UI for jQuery Forum

1 answer

160 views

Show on hover

How does one go about only showing the command buttons on hover in an mvc grid?

Grid

answered on 15 Mar 2013

1 answer

77 views

Embedding Cascading Dropdown List or Adding dropdownlist.

How would I either go about embeding a dropdownlist inside of another dropdownlist. Or is there a way to provide grouping inside of a dropdowns i.e:

Tobacco
Prevention
Education
Media
Aclcholhol
Prevention
Education
Intervention
.......
.....
....

DropDownList

answered on 15 Mar 2013

14 answers

1.1K+ views

Programmatically open a ModalView

How do I open a ModalView using javascript? I have a button which opens the ModalView, but when I run this code:

app.navigate("modalview-login");

It opens the view in a non-modal way and its missing most of the styling that it has as a modal. I also get the same result using this code:

$("#modalview-login").open();

Any help is greatly appreciated. Thanks.
Jason

ModalView

answered on 15 Mar 2013

1 answer

124 views

Hiding the column menu on hiding a column

How do I hide the column menu when the column is hidden from its column menu?

for example if I have
Col 1 | Col 2 | Col3
and I hide Col 3 from Col3's column menu, I would like to hide its column menu at the same time as well.

My understanding is that the column menus are kendo menu but how do I select the correct menu given the column's field/title from the columnHide event? or is there a better way to do it?

Thanks!

Grid

answered on 15 Mar 2013

2 answers

49 views

Switch is closing ModalView while changing the status yes to no and no to yes.

Hi,

I am using Modalview, in that i am using switch, when i change the switch status yet to no modalview is closing.

plese see the below code and find the attachment.

<div data-role="view" id="modalview-camera" data-title="HTML5 Camera" data-layout="mobile-tabstrip">
    <div data-role="footer">
        <div data-role="tabstrip">
            <a href="#tabstrip-settings" data-icon="contacts">Profile</a>
        </div>
    </div>

          <div data-role="content">
      <a data-role="button" data-rel="modalview" href="#modalview-login" id="modalview-open-button">Login</a>

<div data-role="modalview" id="modalview-login" style="width: 95%; height: 270px;">
    <div data-role="header">
        <div data-role="navbar">
            <span>Login</span>
            <a data-click="closeModalViewLogin" data-role="button" data-align="right">Cancel</a>

        </div>
    </div>
    <div data-role="content">
    <input data-role="switch" id="email-switch" checked="checked" />
    </div>

</div>
          </div>

</div>

Switch (Mobile)

answered on 15 Mar 2013

2 answers

1.4K+ views

Disable edit in one row

I have grid with in-cell editing enabled for several columns. But I want to disable editing for some rows depending in row data. Is there any possibility to do this easy?
currently I'm doing a hack like this in edit event,

edit: function (e) {

if (e.model.IsNotEditable) {

e.container.html( $('input', e.container).val());

}

Grid

answered on 15 Mar 2013

11 answers

944 views

Endless scroll not requesting another page

I'm trying to implement the endless scroll. When I just get all my data, all works. When I put in the endlessScroll and scrollThreshold for the list view, parameterMap, pageSize, and serverPaging for the data source, I only get the first page of 10. I get the url request: /api/company?take=10&skip=0&page=1&pageSize=10 for the first page and that works. But when I want more data appended to the bottom of the list by dragging the list up so I see the 10th record on the bottom, another request is not made. What am I missing for Kendo to make that next request for the next page?

  var companyDataTransport = new kendo.data.RemoteTransport({
      read: {
          url: base_url + "/company",
          dataType: "json",
          type: "GET"
      },
  });

  var dsCompany = new kendo.data.DataSource({
      pageSize: 10,
      serverPaging: true,
      schema: {
        type: "json",
        model: Company
       },
   transport: companyDataTransport,
   parameterMap: function (options) {
       var parameters = {
           max: options.pageSize,
           page: options.page
       }
       return parameters;
   },

  });

  function mobileServicersDataBind() {
   $("#servicerView").kendoMobileListView({
    dataSource: dsCompany,
    template: kendo.template($('#servicerOnOffTemplate').html()),
    endlessScroll: true,
    scrollThreshold: 30
   });
  };

ListView (Mobile)

answered on 15 Mar 2013

5 answers

228 views

How to handle nested lists w/animation and datasource

Hi

I'd like to create a navigable list that is multiple levels deep. I'd like to do this in a ListView, and have the listview animate (slide) when the user chooses an item that exposes another hierarchy level.

E.g. assume this data:

top
item 1
item 2
item 3
item a
item b

I'm OK getting the listview to show items 1, 2, 3 - that's easy. What I don't understand is how to force the listview to provide a slide navigation when I re-run the query with a different set of query params to get item a, b.

To be honest - I've actually implemented this already - but the only way I was able to force the listview to provide me the slide transitions was to build a complete new view on the fly, with a new unique ID for every single level in the hierarchy - and I wondered if there was a better way to do this.

Thanks

General Discussions

answered on 14 Mar 2013

1 answer

379 views

TabStrip item Visible() Method isn’t working when used in Grid Detail template scenario

Hi,

I’m trying to add tabs control as client template (nested element inside grid) and hide some tabs based on the data in the grid using ajax binding.

I’m using boolean expression inside item().Visible([boolean expression here]) to determine whether or not show each tab. Even though Boolean expression is correct, Visible() method doesn't reflect it.

As an example I used Kendo Demo Project (Kendo.Mvc.Examples) /razor/web/grid/detailtemplate.cshtml page:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
    .Name("Employees")
    .Columns(columns =>
    {
        columns.Bound(e => e.FirstName).Width(140);
        columns.Bound(e => e.LastName).Width(140);
        columns.Bound(e => e.Title).Width(200);
        columns.Bound(e => e.Country).Width(200);
        columns.Bound(e => e.City);
    })
    .ClientDetailTemplateId("employeesTemplate")
    .Pageable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("HierarchyBinding_Employees", "Grid"))
        .PageSize(5)
    )
    .Sortable()
)
 
<script id="employeesTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().TabStrip()
            .Name("TabStrip_#=EmployeeID#")
            .SelectedIndex(0)
            .Items(items =>
            {
                items.Add().Text("Orders").Content(@<text>
                    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
                        .Name("Orders_#=EmployeeID#")
                        .Columns(columns =>
                        {
                            columns.Bound(o => o.OrderID).Width(101);
                            columns.Bound(o => o.ShipCountry).Width(140);
                            columns.Bound(o => o.ShipAddress).Width(200);
                            columns.Bound(o => o.ShipName).Width(200);
                        })
                        .DataSource(dataSource => dataSource
                            .Ajax()
                            .Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
                        )
                        .Pageable()
                        .Sortable()
                        .ToClientTemplate())
                </text>                        
                );
                items.Add()
                    .Visible("#= Country #" == "USA")
                    .Text("Contact Information: #= Country #").Content(
                    "<div class='employee-details'>" +
                        "<ul>" +
                            "<li><label>Country:</label>#= Country #</li>" +
                            "<li><label>City:</label>#= City #</li>" +
                            "<li><label>Address:</label>#= Address #</li>" +
                            "<li><label>Home Phone:</label>#= HomePhone #</li>" +
                        "</ul>" +
                    "</div>"
                );                
            })
            .ToClientTemplate())
</script>

I've highlighted the only 2 changes I had made.

Any suggestions?

Thanks,
-Brett

TabStrip

answered on 14 Mar 2013

1 answer

102 views

Select an item in DropdownList control present inside a custom editor feild of a grid.

Hi,

I have a grid in which i have a column, for which i have a custom editor defined, in edit mode it shows a drop down list in the column. The dropdownlist is getting remote data and its rendering correctly, but I am unable to select an item after the dropdownlist is getting data binded. Basically the item to be default selected is different for different rows.

This is my code :

$("#grid").kendoGrid({

dataSource: dataSource,

filterable: true,

sortable: {

mode: "multiple",

allowUnsort: true

},

height: 400,

pageable: true,

selectable: "row",

resizable: true,

reorderable: true,

columns: [

{ field: "DocumentName", title: "Document Name", width: "150px" },

{ field: "DocumentDescription", title: "Description", width: "150px" },

{ field: "StateId", title: "State", width: "120px", editor: categoryDropDownEditor },

{ field: "Policy_CertificateNumber", title: "Policy/Certificate Number", width: "170px" },

{ field: "Amount", title: "Amount", format: "{0:c}", width: "110px" },

{ field: "ExpiryDate", title: "Expiry Date", width: "110px", template: '#= kendo.toString(ExpiryDate,"M/d/yyyy")#' },

{ command: [{ id: "View", name: "View", click: showDetails, template: "<a class='k-button k-button-icontext k-grid-View' href='' style='min-width:7px;'><input type='image' src='../../Content/Images/document.png' text='''/></a>" },

{ id: "edit", name: "edit", template: "<a class='k-button k-grid-edit' href='' style='min-width:7px;'><span class='k-icon k-edit'></span></a>"}],

title: " ", width: "92px"

}],

editable: "inline"

});

And this is my custom editor code :

function categoryDropDownEditor(container, options) {

$('<input data-text-field="StateName" data-value-field="StateId" data-bind="value:' + options.field + '"/>')

.appendTo(container)

.kendoDropDownList({

autoBind: false,

dataTextField: "StateName",

dataValueField: "StateId",

dataSource: {

type: "json",

transport: {

read: function (options) {

$.ajax({

type: "GET",

url: "Documents.aspx/GetStates",

contentType: "application/json; charset=utf-8",

dataType: "json",

data: options.data,

success: function (result) {

var d = $.parseJSON(result.d);

options.success(d);

}

});

}

});

}

So what i want to achieve is that, after dropdownlist databind, it should an item out of it, and this item to be selected is different for each row.

Please help.

Grid

answered on 14 Mar 2013