Questions on UI for ASP.NET MVC Forum

1 answer

230 views

I’m having trouble with a ComboBox dropdown area not scrolling under certain circumstances.
Below is the code in my MVC View (.cshtml):

<div class="field">

@Html.LabelFor(m => m.WeightUnitMeasureCode)

@(Html.Kendo().ComboBoxFor(m => m.WeightUnitMeasureCode)

.Filter(FilterType.Contains)

.Suggest(true)

.DataTextField("Name")

.DataValueField("Value")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetUnitMeasures", "UiLists", new { area = "" });

});

})

)

</div>

After page load, clicking the down arrow on the control opens the dropdown list but it is so long that it run out of view. (see image1)
If I select an item in the list and click the down arrow again, the problem persists.
However, if I manually clear the text of the selected item in the control, the dropdown opens automatically and it behaves as desired with a max height of 200px (see image2)

The screenshots show that I'm using these in a custom modal window however this issue occurs even on a regular page.
Any ideas on what I’m doing wrong or how to fix this?

ComboBox

answered on 17 Jul 2015

1 answer

533 views

MenuItem Action and passing the Model from the view

I currently am using buttons on my view for the menu. So along the top of my view I have

@(Html.Kendo().Button()

.Name("btnAddTeacher")

.HtmlAttributes(new { type = "submit", value = "AddTeacher", name = "Command", title = "Add Teacher" })

.ImageUrl(Url.Content("~/Images/add-student-35.png"))

.Enable(ElementaryProgress.Classes.Security.AllowSchoolEdit)

)

Now I would like to replace these buttons with a menu. However I can't seem to figure out how to pass the model within my routevalues in the call to the action. So my menu item looks like:

@(Html.Kendo().Menu()

.Name("menu")

.Items(items =>

{

items.Add()

.Text("Teacher")

.Items(c =>

{

c.Add()

.Text("Add Teacher")

.ImageUrl("~/Images/add-student-35.png")

.Enabled(ElementaryProgress.Classes.Security.AllowSchoolEdit)

.Action("EditMySchool", "School", new { vm=this.Model, Command="AddTeacher" });

});

})

)

So the problem is that when the call is made to my action on my controller, the parameter vm is null. So how do I set vm equal to the model on the view so that I can pass my viewmodel back to my controller?

Thanks in advance,

Lee

Menu

answered on 17 Jul 2015

2 answers

1.7K+ views

Switching Button icon using onClick event

Hi There,

i have the following code. I'm wanitng the icon of the button to change eveytime you click the button deppening if the panel has expaneded or not. ("pin" and "unpin").

$("#button").kendoButton({
icon: "pin",
click: function (e) {
$('.UserFavouritesPanel').animate({ width: 'toggle' }, 350);

if ($('.UserFavouritesPanel').width()>1) {
$("#button").kendoButton({
icon: "unpin"
});
} else {
$(".UserFavouritesViewBtn").kendoButton({
icon: "pin"
});
}
}
});

The issue im having is that on the fist click the icon changes to the correct one but after that when you click the button it never changes again until you refresh the screen. Any ideas on why this happens.

Button

answered on 17 Jul 2015

2 answers

368 views

Inline editing nullable foreign key

In my model I have a nullable foreign key (DocumentCausalID) and the foreign object (DocumentCausal).

I'm using the default "GridForeignKey" editor template to choose the value using the DropDownList.

I've edited the default "GridForeignKey" adding the OptionLabel so I can choose a null value.

When I select the null value it update the row correctly, but the next time if I select a not-null value on the same row it doesn't work: it doesn't enter into the Update function of my controller.

Can you help me? (I've attached my Model, View and the Editor Template)

Thank you

Grid

answered on 17 Jul 2015

1 answer

167 views

Bind to dynamic SQL?

Is there a way to bind the Grid to the results from a ADO.net reader without converting each row into a POCO object? We are trying to figure a way of allowing the end-users to add data from sql joins to the grid's data. So for example:

We have 3 tables: Parents, Students, Grades. A student can have multiple Parents (1..n) and multiple Grades (1..n). The default grid view should show only Students records but should allow the end user to add Parents to the grid so that each row shows parent/student combination.

Grid

answered on 17 Jul 2015

9 answers

2.5K+ views

[Solved] Kendo Grid: How to keep scoll position after calling sync (with Batch property set to true)

We have a Kendo Grid, shows many records with Batch property set to true.
Sync() is called after user modifies data, but then the scroll always moves up to the first row.

$('#grid').data('kendoGrid').dataSource.sync()

How can I prevent the scroll from moving up to the first row?
I have set focus to the current cell by calling, but it doesn't work (from this example: http://dojo.telerik.com/@Alexander/Ezoh/3):

this.current(cell);
grid.table.focus();

Thank you very much in advanced.

Grid

answered on 16 Jul 2015

6 answers

414 views

[Solved] Inline editing validation with drop-down list fails

I've got a grid, which uses in-line editing on the sub-grid for the linked hierarchical data.

When just using a text box, the validation message display, and prevents entry of a blank value, but when I replace it with a drop-down list editor template, the validation fails to fire, causing an error message to be displayed (from the controller) when the record tries to save. This is strange, as when I do similar drop-down lists with pop-up edit forms, the validation works fine.

The grid:-

@(Html.Kendo().Grid<CMS_2013.Models.ApportionmentScenario>()

.Name("Grid")

.Events(e=>e.Edit("onEdit"))

.Columns(columns=>

{

columns.Bound(o => o.ID).Title("ID");

columns.Bound(o => o.FormattedDateTime).Title("Created");

columns.Bound(o => o.ScenarioName).Title("Name");

columns.Bound(o => o.CreatingUser).Title("User");

columns.Command(command => { command.Edit(); command.Destroy(); });

})

.ClientDetailTemplateId("detailsTemplate")

.ToolBar(commands=>commands.Create())

.Editable(editable=>editable

.Mode(GridEditMode.PopUp))

.DataSource(dataSource=>dataSource

.Ajax()

.Model(m=>m.Id(p=>p.ID))

.Events(events => events.Error("error"))

.PageSize(10)

.Read(read=>read.Action("ReadScenarios","Apportionment"))

.Create(create=>create.Action("InsertScenario","Apportionment"))

.Update(update=>update.Action("UpdateScenario","Apportionment"))

.Destroy(delete=>delete.Action("DeleteScenario","Apportionment"))

)

.Pageable()

.Sortable()

.Filterable()

)

</div>

<script id="detailsTemplate" type="text/kendo-tmpl">

@(Html.Kendo().Grid<CMS_2013.Models.ApportionmentData>()

.Name("Data_#=ID#")

.Columns(columns=>

{

columns.Bound(o => o.FormattedDateTime).Title("Date");

columns.Bound(o => o.Purchaser).Title("Purchaser");

columns.Bound(o => o.Apportionment);

columns.Command(command => { command.Edit(); command.Destroy(); });

})

.ToolBar(commands=>commands.Create())

.Editable(editable=>editable

.Mode(GridEditMode.InLine))

.DataSource(dataSource=>dataSource

.Ajax()

.Model(m=>m.Id(p=>p.ID))

.Events(events => events.Error("error"))

.PageSize(10)

.Read(read=>read.Action("ReadData","Apportionment", new { SID = "#= ID #" }))

.Create(create=>create.Action("InsertData","Apportionment", new { SID = "#= ID #" }))

.Update(update=>update.Action("UpdateData","Apportionment"))

.Destroy(delete=>delete.Action("DeleteData","Apportionment"))

)

.Pageable()

.Sortable()

.ToClientTemplate())

The editor template for the purchaser field (PurchaserEditor.cshtml):-

@(Html.Kendo().DropDownList()

.Name("Purchaser")

.DataTextField("ShortName")

.DataValueField("Purchaser")

.OptionLabel("Choose Purchaser")

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

.DataSource(source=>source

.Read(read=>read.Action("GetPurchaserLookUpList2","ManualData"))))

The object meta data:-

public class ApportionmentDataMD

{

[Required, StringLength(6)]

[UIHint("PurchaserEditor")]

public object Purchaser { get; set; }

[Required]

[UIHint("ApportionmentPercent")]

public object Apportionment { get; set; }

}

Thanks

Grid

answered on 16 Jul 2015

3 answers

290 views

Not able to see the kendo editor icon when deployed application on cloude

I have implemented Kendo Editor(MVC) in my application.Its working fine
on the local.But as When I upload my application on Cloude (Windows
Azure) I am not able to see tools ICON images.Please check with attached
Image.
I also Verified with Sprite.png but its exists on Cloude ,Still issue occurs.Here is below my code.

Layout.cshtml :
@Styles.Render("~/bundles/KendoCss")
@Scripts.Render("~/bundles/KendoJs")

Bundle.config :
bundles.Add(new StyleBundle("~/bundles/KendoCss").Include(
                 "~/Styles/Kendo/kendo.common.min.css",
                  "~/Styles/Kendo/kendo.bootstrap.min.css",
                   "~/Styles/Kendo/kendo.dataviz.min.css",
                   "~/Styles/Kendo/kendo.dataviz.default.min.css"
                ));
            bundles.Add(new ScriptBundle("~/bundles/KendoJs").Include(
                  "~/Scripts/Kendo/kendo.all.min.js",
                            "~/Scripts/Kendo/kendo.web.min.js"

Editor.cshtml :
        @(Html.Kendo().EditorFor(m => m.Header)
          .HtmlAttributes(new { style = "width: 100%;height:Auto;" })
                   .Tools(tools => tools
                .Clear()
                .Bold().Italic().Underline().Strikethrough()
                .JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
                .InsertUnorderedList().InsertOrderedList()
                .Outdent().Indent()
                .CreateLink().Unlink()
                .InsertImage()
                .InsertFile()
                .SubScript()
                .SuperScript()
                .TableEditing()
                .ViewHtml()
                .Formatting()
                .FontName()
                .FontSize()
                .FontColor().BackColor()
              )
                      .Encode(false)
        )

Also Please checked with attached folder structure and Output image.

Editor

answered on 16 Jul 2015

1 answer

125 views

Grid line issues with Freeze Pane and Grid Height

Hi

We are using Q2 hot fix release of Telerik Kendo MVC UI Grid controls. We are using Freeze Columns and Fix height of Grid control. With this when grid is not filled with data, we see vertical line. Is there a way to get rid of that line?

Grid

answered on 15 Jul 2015

2 answers

145 views

Grid "auto" height with Header Row Freeze

Hi !!

We are using Telerik Kendo MVC UI Q2 hotfix controls. We want grid with "auto" height but in process of making "auto" height we are loosing header row information. Is there a way header scroll with grid scroll so users never loose site of column headers?

Thanks,

Grid

answered on 15 Jul 2015