Questions on UI for ASP.NET MVC Forum

1 answer

194 views

[Solved] Dynamic creation of columns in kendo editable grid

I have a model with ID and and array of values, I need each of the array value to be displayed in separate column in kendo grid and all this should be editable fields.

public int Id { get; set; }
public double[] List { get; set; }

I have tried the following way however it display all values in one cell.

@model IEnumerable<HoursModel>

<div id="PlanningGrid">
    @(Html.Kendo().Grid(Model)
          .Name("Grid")
          .Columns(columns =>
          {
             //// columns.AutoGenerate(true);

              columns.Bound(c => c.Id).HeaderHtmlAttributes(new {@class = "grid-header-cell"}).HtmlAttributes(new {@class = "grid-row-cell planningoverview-grid-cell1"});

              columns.Bound(p => p.List).ClientTemplate("#=generateTemplate(HoursList)#");
              //// columns.Bound(m => m.EmployeeId).ClientTemplate("# for (var i=0;i<4;increment(i)) { console.log(i) } #");

          })
          .Sortable())

</div>

<script type="text/javascript">
    function generateTemplate(Wetness) {
        var template = "<ul>";
        for (var i = 0; i < Wetness.length; i++) {
            template = template + "<li>" + Wetness[i] + "</li>";
        }
        return template + "</ul>";
    }

</script>

Grid

answered on 25 Feb 2015

2 answers

1.7K+ views

[Solved] How to default value after databound

I want to have the dropdown default select a value. I have the value is in a ViewData. How can I access this from javascript?

@(Html.Kendo().DropDownList()
.Name("locationCode")
.HtmlAttributes(new { style = "width:200px" })
.DataValueField("Code")
.DataTextField("Name")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetUserGlobalDimensions", "RequestPONumber");
});
}

)
.Events(e => { e.DataBound("onLocationDataBound"); })

In js file:
function onLocationDataBound() {
this.value('ViewData["defaultLocationValue"]');
}

Thanks in advance.

DropDownList

answered on 24 Feb 2015

1 answer

186 views

Export form page to pdf

Hi,

I am trying to export a form created with kendo panel. See the first attach file.
So, it's work very well but each input field are empty. Maybe because i user razor components like this:

@Html.TextBoxFor(m => m.CNom, new { @placeholder = "Nom", @class = "form-control form-decouverte form-nom ChampsObligatoire" })

I attach the pdf file for showing you the results.

So i you have an idea about this prolem.

Thanks,

Ludovic

General Discussions

answered on 24 Feb 2015

1 answer

700 views

Editor insert image

Hi,

I'm trying to implement the Kendo Editor in an application i'm working on. I'm trying to use the editor to allow the user to insert an image with text around it. I have attempted 2 different methods and neither are acceptable.

I can't find any tool/option for wrapping the text around the image. E.g. i want an image on the right and text on the left.

I can insert a table and put the image in the right column and text in the left column but i am unable to drag the table column to size around the image. At the moment it just appears to remain at 50%.

Any help is much appreciated.

Thanks

Anthony

Editor

answered on 24 Feb 2015

4 answers

2.2K+ views

Change the background color of a Kendo Editor text area

I have a number of Kendo Editor's used in my application. Much of the text entered via the Editor will be displayed in a Kendo Grid. I am using the Black theme, so the background color in the grid is a gray, which is fine. The background color of the Kendo Editor text area is white. I want to change that from white to a gray, or the same color as the grid background. This way you will be able to enter the text as it will appear in the grid

Editor

answered on 24 Feb 2015

1 answer

682 views

Using bootstrap glyphicon in kendo menu

I am using the following menu

$("#settingsmenu").kendoMenu({
dataSource: [{
text: 'Settings',
items: settingOptions
}],
openOnClick: true,
closeOnClick: false,
open: function () {
/...../
},
select: function () {
/..../
}
});

Following is my menu
<ul id="settingsmenu" class="pull-right">
<li>
<span class="glyphicon glyphicon-cog"></span>
</li>
</ul>

Now what is get is a down arrow next to settings text.
I need to show a bootstrap glyph icon(a span essentially).
Any way that I can achieve this ?

Menu

answered on 24 Feb 2015

5 answers

421 views

Grid Foreign Key Field sometime shows textbox

Hi

I have multiple kendo grid used inside a kendo tabstrip. I have same model for all the grid with some filter criteria.

Everything seems to be working fine except when i add or edit one grid and at the same time try to edit another grid, its foreign key is not showing its template. It shows textbox instead of dropdown.

Is this a known bug or is there any idea how to resolve this?

Regards
Victor

Grid

answered on 24 Feb 2015

5 answers

327 views

[Solved] Exporting to Excel Error

I copied the excel demo and got the following message. I am not sure if it is b.c i am dynamically binding that data.

Excel export is not supported in server binding mode.

View

@(Html.Kendo().Grid(Model)

.Name("grid")

.Columns(columns =>

{

foreach (System.Data.DataColumn column in Model.Columns)

{

var c = columns.Bound(column.ColumnName);

}

})

.ToolBar(tools => tools.Excel())

.Pageable()

.Sortable()

.Scrollable()

.Excel(excel => excel

.FileName("Export.xlsx")

.Filterable(true)

.ProxyURL(Url.Action("Excel_Export_Save", "Reports"))

)

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

.DataSource(dataSource => dataSource

.Server()

.Model(model =>

{

foreach (System.Data.DataColumn column in Model.Columns)

{

var field = model.Field(column.ColumnName, column.DataType);

}

})

)

controller

[HttpPost]

public ActionResult Excel_Export_Save(string contentType, string base64, string fileName)

{

var fileContents = Convert.FromBase64String(base64);

return File(fileContents, contentType, fileName);

}

Grid

answered on 23 Feb 2015

6 answers

654 views

Listview Selection

Hello,
I have a Telerik ListView inside a partial view that is rendered inside a kendo Window in modal mode. Using MVC5.

The listview is setup to query the controller for records (which are image files).

In the edit view for my model, and the user can select an image to be part of the model's data. I want them to select from maybe 5000 images on our system. So the Listview popup starts with 6 visible images (pagesize is 6) and they can cycle via paging to the image they want to select.

This all works fine.

Currently when the listbox is displayed, (after a button click on view), it always shows the very first 6. Consider case where user is editing record 10, and that record has already specified it uses pictureId 50 (pictureID is foreign key to picture table). I want the listbox to show Item 50 in its selected page, but allow the user to page back to other pages, or page forward. The page backs/forwards will do the datarequests as needed.

I added a "save" button to the popup window so i could test out code. My listview is named "imageListView".
In my sample, i just wanted to choose item 9, as an example.
If i first navigate to page 2 so item 9 is shown on the listview, then the below code works fine.
but if i am on page 1 (items 1-6 shown), the get(9) call returns null.

how can i figure out what page to go to prior to actually loading the items on the page?

$("#save").click(function () {

var lv = $("#imageListView").data("kendoListView");

var model = lv.dataSource.get(9);

var index = lv.dataSource.indexOf(model);

var pg = Math.floor(index / lv.dataSource.pageSize()) + 1;

lv.dataSource.page(pg);

}

ListView

answered on 23 Feb 2015

3 answers

163 views

Initialize Grid Options from Serialized JSON String

We allow our users to optionally save the state of their grids and persist them in the db. When a user comes back to he screen, they see the standard grid display just for a moment, then it updates their grid via JavaScript ( setOptions call) as it applies their persisted state settings. This makes it look like it's doing a double load.

We would rather just initialize the grid with their persisted settings (via serialized json string) so the grid shows correctly on the initial load.

Is this possible?

We are using MVC.

Thanks!

Grid

answered on 23 Feb 2015