Questions on UI for ASP.NET MVC Forum

4 answers

147 views

update the parent row - based on child-template "text/kendo-tmpl -

I want to add an image to parent row depending on the value in child row.
Below is my main grid and template code

If FeedBackForm.FeedBackQA[i].Answer is not null I need image on parent row
find complete code attached.
Please guide

.ClientDetailTemplateId("template")

    <script id="template" type="text/kendo-tmpl">
        <div>
            <div class="feedbackQuestion">
                # for (var i = 0; i < FeedBackForm.FeedBackQA.length; i++) { #
                <ul>
                    <li>#= FeedBackForm.FeedBackQA[i].Question #   <span class="feedbackanswer">    #= FeedBackForm.FeedBackQA[i].Answer #</span></li>
                </ul>

                # } #
            </div>

        </div>

    </script>

Grid

answered on 23 Sep 2014

2 answers

140 views

Extended functionality for Dependencies

Hello,
we are currently evaluating the Gantt for use in a Business App and missing some points.

We are looking for following functions/features
- how can a user edit/destroy a Dependency ?
- is it possible to tell the Gantt if one task is moved on the timeline, that all depending tasks should also move.

Many thanks
Thomas

Gantt

answered on 23 Sep 2014

1 answer

151 views

Capturing events when "Editable" is false.

I am trying to use the Scheduler to display events only - I don't want to use any of the Schedulers built in editing functionality - instead I would just like to use javascript events such as "Change" or "Navigate".

This works OK if I set the scheduler to Editable(true), however I don't want to be able to do things such as drag the events or delete them. If I set Editable to false it behaves as I would like except I can no longer capture any javascript events such as clicking on an item.

I'd like to have Editable as false but capture which item was clicked on, or if a blank date is clicked on I'd like to capture the date that was clicked.

The idea is that we would then load some event related information in another Partial View or something, it's for a user to browse, not to edit.

How can I achieve this with the scheduler?

Thanks.

Scheduler

answered on 23 Sep 2014

5 answers

848 views

[Solved] How to bold matched text in suggestion list?

Hi. I'm attempting to bold matched text from the autocomplete textbox in the suggestions list and am having some difficulty. I'm passing a simple list of strings to the autocomplete control not an object. I know I need to use a template to accomplish what I'm trying to do. I realize my template line is completely wrong but I put there the kind of pseudo-code to convey the idea of what I want. If someone could nudge me in the right direction as to a possible solution I would be very much appreciative.
Thanks!

<div class="DCF">

@using (Html.BeginForm("Search", "Search", FormMethod.Post,

new { enctype = "multipart/form-data" }))

{

<span>DCF DB</span>

@(Html.Kendo().AutoComplete()

.Name("dcfSearchBox")

//.DataTextField("results") //commented as the list of strings do not need a dataTextField defined to display

.Filter("contains")

.MinLength(3)

.HtmlAttributes(new { style = "width:250px" })

.DataSource(source =>

{

source.Read(read =>

{

read.Action("SuggestionSearch", "Search").Data("onAdditionalData");

})

.ServerFiltering(true);

})

.Template("#:results.Replace(dcfSearchBox.val(),\"<span style='font-weight: bold;'>#:dcfSearchBox.val()</span>\")#")

)

<br />

@(Html.Kendo().Button()

.Name("btnSubmit")

.HtmlAttributes(new { type = "submit" })

.Content("Search")

)

}

</div>

<script>

function onAdditionalData() {

return {

text: $("#dcfSearchBox").val()//,

//checkFilter: $("#dcfCheckFilter").is(':checked'),

//filterText: $("#dcfFilterText").val()

};

}

</script>

AutoComplete

answered on 23 Sep 2014

1 answer

608 views

ClientRowTemplate Double and Decimal Formatting

.Columns(columns =>

{

columns.Template(e => { }).ClientTemplate(" ").Title("Store Name");

columns.Bound(c => c.Value).Format("R {0:n2}");

columns.Bound(c => c.Quantity).Format("{0:n0}");

columns.Bound(c => c.ASP).Format("R {0:n2}");

})

.HtmlAttributes(new { style = "height: 900px;" })

.Events(ev => ev.DataBound("onDataBound"))

.ClientRowTemplate(

"<tr data-uid='#: uid #'>" +

"<td ><a href='/Dashboard/Store/#= StoreId #'>" +

"#: Element #" +

"</a></td>" +

"<td class='text-right' >R " +

"#: Value #" +

"</td>" +

"<td class='text-right'>" +

"#: Quantity #" +

"</td>" +

"<td class='text-right' >R " +

"#: ASP #" +

"</td>"+

"</tr>"

)

Hello

I would like to know how to format the #: ASP # for it to format to decimal with 2 digits ({0:n2})
Regards

Grid

answered on 23 Sep 2014

1 answer

200 views

Kendo Slider Tooltips works in one case not the other

If you see the attached images you'll notice that the slider on the right with the square drag handle has a working tooltip, but the slider on the left doesn't have a tooltip when dragged as you can see in the second image.

I compared the two MVVM based implementations, stripped out the unnecessary information and came up with this:

<input id="..." name="..." class="post-retirement" data-show-buttons="false" data-role="slider" data-min="0" data-max="2" data-small-step="0.01" value="" data-value="" data-bind="visible: isVisible, events: { change: onChange }" data-index="@i" data-tooltip="{format: '{0:p0}'}" data-toggle="tooltip" />

<input id="..." name="..." class="weight-split" data-show-buttons="false" data-role="slider" data-min="0" data-max="1" data-small-step="0.01" value="" data-value="" data-bind="visible: isVisible, events: { change: onChange }" data-index="@i" data-tooltip="{format: '{0:p0}'}" data-toggle="tooltip" />

As you can see they're almost identical apart from class names which are used only to style the drag handles differently.

The JavaScript that activates the tooltip and binds the MVVM objects looks like this:

//activate tooltips

$("[data-toggle=\"tooltip\"]").tooltip();

var postRetirementViewModel = kendo.observable({

isEnabled: true,

isVisible: true,

onChange: function (e)

{

//get the index for this row

var index = $(e.sender.element).data("index");

//removed for brevity

}

});

var weightSplitViewModel = kendo.observable({

isEnabled: true,

isVisible: true,

onChange: function (e)

{

//removed for brevity

}

});

kendo.bind($(".post-retirement"), postRetirementViewModel);

kendo.bind($(".weight-split"), weightSplitViewModel);

Any idea why the left slider tooltip won't show up?

Slider

answered on 23 Sep 2014

1 answer

274 views

Progress Gradient Background?

I can change the background color to show the progress (percentage complete section) - but I need to make the background color transparent and use a background-image with linear gradient but can't get that working. Any idea?

ProgressBar

answered on 22 Sep 2014

3 answers

169 views

Heirachy Grid editing set dependent row values

I have a Heirachy Grid where there are columns in the sub-grid that have dependencies on each other. So for I have done these as a set of Cascading DropDownLists. This is using EditorTemplates for each of the DropDownLists as they need to get their content via an Ajax Read. I am using Inline editing on the grids.

However the last item in the cascade will only ever have one value available so it would be better just to make this a non-editable/readonly column and set this when the other selections have been made.

I have looked at the following example that uses the Select event of the drop down list then sets other columns in the same grid however I don't know the grid name (highlighted). How can this work with a Heirachy grid.

function select(e) {
var grid = $("#grid").data("kendoGrid"),
model = grid.dataItem(this.element.closest("tr"));

model.ProductName = "changed";
model.UnitPrice = 100;
}

Grid

answered on 22 Sep 2014

1 answer

155 views

Scroll bar without Paging

I want to specify max height of the grid content.
I have tried to keep .Scrollbar() and in this by default it is taking 200px as the height. In this case i am getting the scrollbar if the content size is more then 200px but if it is less then 200px then i am getting an empty space till 200px height.

I have tried to keep .Scrollbar(s =>s.height("auto")). In this case i am not getting the scrollbar.

I have even tried to override k-grid-content class by specifying the max-height something like this
#gvCommList .k-grid-content {
max-height:300px !important;
}
in this case in IE8 the browser is getting crashed.

I want the height to be adjusted automatically based on the content size and should work in all the browsers.

How to do that?

Grid

answered on 19 Sep 2014

3 answers

88 views

Refer Telerik dll in .HTML Page

Hello,

My application is MVC. I have "Popup.Html" page in views along with "Popup.cshtml". I want to use combobox in the below link in my "popup.html" page.

http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/autocompleteclientside/defaultcs.aspx

How can I refer Telerik in .html page ?

How can I work with combobox in this page ?

General Discussions

answered on 19 Sep 2014