Questions on Kendo UI for jQuery Forum

2 answers

247 views

I am having problems with aligning an input to the left.

Attached is the code.

The buttons and other stuff is aligned OK, but for some reason I cannot get the inputs (event and screening) to align to the left.

I have tired all of the styles but to no avail.

Here is a jsfiddle link

http://jsfiddle.net/7WVqL/170/

And the source is below

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<a href="app/venue.html" class="button" id="venue-button" data-role="button" type="button">Select a Venue</a>

</li>

</li>

</ul>

<a href="app/screening.html" class="button" id="screeninge-button" data-role="button" type="button">Select a Screening</a>

</li>

</li>

</ul>

</div>

</div>

<p class="listvalue">#:infoName#</p>

</script>

<a class="nav-button" data-role="backbutton" data-align="left" href="app/logon.html">Logout</a>

</div>

</header>

<p>TabStrip</p>

<a href="#validatetab" data-icon="toprated">Validate</a>

<a href="#infotab" data-icon="info">Information</a>

</div>

.listvalue

{

float: left;

font-size: medium;

line-height: .5em;

}

</style>

</body>

</html>

ListView (Mobile)

answered on 23 Oct 2012

4 answers

818 views

[Solved] Issue with DateTime fields being Null

Greetings,

I'm currently in the process of creating a grid to display comments on a product. There is some data migration that has forced two DateTime fields to be required Null and the grid seems to be throwing fits about it. I get the following error when it happens:

The model item passed into the dictionary is null, but this dictionary requires a non-null model item of type 'System.DateTime'.

I have been researching the topic and had little success on solving the problem. Here is a sample of my code thus far.

View

@(Html.Telerik().Grid<ProductModel.ProductCommentsModel>()

.Name("productcomments-grid")

.DataKeys(keys =>

{

keys.Add(x => x.Id);

})

.DataBinding(dataBinding =>

{

dataBinding.Ajax()

.Select("ProductCommentsList", "Product", new { productId = Model.Id })

.Update("ProductCommentUpdate", "Product")

.Delete("ProductCommentDelete", "Product");

})

.Columns(columns =>

{

columns.Bound(x => x.Id)

.Hidden(true);

columns.Bound(x => x.ProductId)

.Hidden(true);

columns.Bound(x => x.CustomerId)

.Hidden(true);

columns.Bound(x => x.CustomerName)

.Width(200)

.ReadOnly(true);

columns.Bound(x => x.CreatedDate)

.Width(100)

.ReadOnly(true);

columns.Bound(x => x.LastModifiedDate)

.Width(100)

.ReadOnly(true);

columns.Bound(x => x.Comment);

columns.Command(commands =>

{

commands.Edit().ButtonType(GridButtonType.Text);

commands.Delete().ButtonType(GridButtonType.Text);

});

})

.Editable(edit => edit.Mode(GridEditMode.PopUp))

.EnableCustomBinding(true))

Model

public partial class ProductCommentsModel : BaseNopEntityModel

{

public int ProductId { get; set; }

public int CustomerId { get; set; }

public string CustomerName { get; set; }

[Required(AllowEmptyStrings=true)]

[DisplayFormat(NullDisplayText = "", DataFormatString = "0:MM/dd/yyyy")]

public DateTime? CreatedDate { get; set; }

[Required(AllowEmptyStrings = true)]

[DisplayFormat(NullDisplayText = "", DataFormatString = "0:MM/dd/yyyy")]

public DateTime? LastModifiedDate { get; set; }

public DateTime? SentForRepair { get; set; }

public string Comment { get; set; }

}

Any help would be appreciated. Thank you.

Kindest Regards,
Chad Johnson

Grid

answered on 23 Oct 2012

1 answer

154 views

Licensing issue

1. Can I use KendoUIWeb package from nuget, or Kendo UI Web archive (gpl3), downloaded from this site

in internal project for free, without any charge.

2. Both these packages (nuget and archive) doesn't contains kendo.aspnetmvc.*.js script file, which is included into trial package

Is it means that I cannot use kendo.aspnetmvc.*.js in project without charge?

3. Same question regarding kendo.mvc.dll (where html helpers is situated)

Thank you for your answer.

General Discussions

answered on 23 Oct 2012

0 answers

123 views

Endless scroll won't work on GET twitter user_timeline!

Hi,

I'm trying to get a user's timeline from twitter and display it in a list view. Currently I have a list view that displays the first 10 tweets in a user's timeline. However the endless scrolling feature doesn't work! No animation is shown when you get to the bottom of the page and no call to twitter is made via http request either (I have looked using wireshark). Below is my source code:

function loadTwitterFeed() {

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "http://api.twitter.com/1/statuses/user_timeline.json", // the remove service url

dataType: "jsonp" // JSONP (JSON with padding) is required for cross-domain AJAX

},

parameterMap: function(options) {

return {

screen_name: "USER_NAME",

count: 10,

since_id: options.since_id, //additional parameters sent to the remote service

max_id: options.max_id //additional parameters sent to the remove service

};

}

});

$("#twitter-feed").kendoMobileListView({

dataSource: dataSource,

template: $("#twitter-template").text(),

appendOnRefresh: true,

pullToRefresh: true,

//addition parameters which will be passed to the DataSource's read method

pullParameters: function(item) { //pass first data item of the ListView

return {

since_id: item.id_str

};

},

endlessScroll: true,

//addition parameters which will be passed to the DataSource's next method

endlessScrollParameters: function(firstOrigin) {

if (firstOrigin) {

return {

max_id: firstOrigin.id_str

};

}

});

}

It is similar to the twitter search demo but I have removed the serverPaging from the code as Twitter is getting rid of pages soon and is instead only using max_id and since_id. I've searched the documentation with no luck, it should work!

Does anybody know what's wrong?

Thanks,
Thomas

Link to twitter page on user_timeline: https://dev.twitter.com/docs/api/1/get/statuses/user_timeline

Example Json request which works when copied and pasted into browser (just replace USER_NAME with valid one): http://api.twitter.com/1/statuses/user_timeline.json?screen_name=USER_NAME&count=10

ListView (Mobile)

asked on 23 Oct 2012

0 answers

107 views

How to add a dropdown in grid and on selection I want to display some selected data in different grid?

I am trying this codeto add the dropdown in the template:-

$( "#grdTrading" ).kendoGrid( {
            dataSource: grddataSource,   // static data source
            scrollable: true,
            height: 180,
            columns: [
           "Code", "Level",
        {
            field: "Flag",
            template: "#=Flag.Name#",
            width: "150px",
            editor: TradingDropDownEditor
        }

        ],
            editable: true,
            sortable: true,
            selectable: true

} );

function TradingDropDownEditor( container, options )
{

            $( '<input data-text-field="Name" data-value-field="FlagID" id="Category" data-bind="value:' + options.field + '"/>' ).appendTo( container ).kendoDropDownList( {
                autoBind: false,
                change: function ( e )
                {

                    var grid = $( "#grdTrading" ).data( "kendoGrid" );
                    var dataItem = null;
                    grid.select().each( function ( e )
                    {
                        dataItem = grid.dataItem( $( this ) );
                        var id = dataItem.Code;
                        var DropdownText = dataItem.Flag.Name;
                        alert( DropdownText );
                        if ( id == "ABC" && DropdownText == "No" )
                        {

//Adding dropdown to the second grid
AssociatedData = [{ text: "No", value: "No"}];

                                $( "#grdAssociated" ).find( "#ddlAssoPort" ).kendoDropDownList( {
                                dataTextField: "text",
                                dataValueField: "value",
                                autoBind: true,
                                enable: false,
                                dataSource: AssociatedData

} );

                        }
                        else
                        {
                           return;
                        }

} );

},

dataSource: ddlFlag

} );

}

I am able to add the dropdown but on change event if I select the dropdown it vanishes the the dropdown in the other grid.
Please look at the code and please help..!

Grid

asked on 23 Oct 2012

2 answers

205 views

Radial Gauge blanks out when i try to change label position from outside to inside

Hi,

I have a radial gauge and it is working fine, but as soon as i add the following it goes completely blank when i run the code.

labels: {
position: labelPosition || "inside"
},
If i remove this code it works again.
Any ideas?

Here is the complete function for reference.

function createGauges() {
var theme = $(document).data("kendoSkin") || "default";
// value = $("#gauge-value").val();

$("#Lgauge").kendoRadialGauge({
theme: theme,

pointer: {
value: 80
},

scale: {
majorUnit: 10,
minorUnit: 2,
min: 0,
max: 100,
labels: {
position: labelPosition || "inside"
},

ranges: [
{
from: 0,
to: 35,
color: "red"
}, {
from: 35,
to: 70,
color: "yellow"
}, {
from: 70,
to: 100,
color: "green"
}
]
}
});
}

And here is the only styling i apply to the div :

div#gaugeLCon {
background: transparent url("../images/gauge-container-partial.png") no-repeat 50% 50%;
width: 386px;
height: 386px;
text-align: center;
margin: 0 0 30px 50px;
}

div#Lgauge
{

width: 330px;
height: 310px;
text-align: center;
margin: 0 auto 0;
}

LinearGauge

answered on 23 Oct 2012

0 answers

74 views

To check user availability in kendo ui grid for validation

In kendo ui how can we check user availability in kendo ui grid? is it possible in it? if possible than please reply me so i will make in changes in my code because i want to check user availability in my module.

Grid

asked on 23 Oct 2012

1 answer

113 views

Grid custom popup edit template does not build elements after textarea

Hi,
I am using the kendo grid with custom popup edit template and everything works fine until i use text area inside the template.
any html after the textare does not show in the edit popup template and hence i cannot see the update and cancel buttons or any other field that i declare after the textarea

Thankyou

Grid

answered on 23 Oct 2012

6 answers

327 views

Bubble chart, legend problem

Hi there, for some reason I can't force bubble chart to show legend, at the same time I'm able to see category name in the tooltip, could you please explain why, thanks.

        $("#Chart1").kendoChart({
                title: {
                    text: "Chart"
                },
                legend: {
                    visible: true,
                    position: "bottom"
                },
                dataSource: @{@Html.Raw(id)}ChartDataSource1,
                seriesDefaults: {
                    type: "bubble"
                },
                seriesColors: ["#004D5C", "#FF8700", "#38A660", "#E5D843", "#80BF34"],
                series:
                    [{
                        type: "bubble",
                        categoryField: "Field1",
                        xField: "Field2",
                        yField: "Field3",
                        sizeField: "Size",
                        colorField: "Color",
                        maxSize: 35,
                        minSize: 3,
                        visibleInLegendField: "true",
                        tooltip: {
                            visible: true,
                            format: "{2} {3}"
                        }

                    }
                    ]
               ,
                xAxis: {
                    //max: 1000,
                    labels: {
                        format: "{0}"
                    }
                },
                yAxis: {
                    //min: 80,
                    labels: {
                        format: "{0}"
                    }
                },
        });

Charts

answered on 23 Oct 2012

2 answers

2.3K+ views

Kendo UI ASP.NET MVC Installation Instructions

To: Those familiar with Kendo UI installation,

A VS 2010 application using the Kendo UI ASP.NET MVC trial version controls was created and works ok. The license for Kendo UI has been purchased and the files have been downloaded and installed. The trial version CSS and JS files have the same time stamp and file sizes.

Telerik's installation instructions are:

1.) Download Kendo UI.
2.) Copy Kendo UI CSS and Javascript resources to your project.
3.) Configure your page to use Kendo UI scripts and skins
4.) You are ready to use Kendo UI.

Is there anything that needs to be done to upgrade the Kendo UI trial version to the purchased version?

Thanks for your help

Peter

General Discussions

answered on 23 Oct 2012