Telerik Forums
UI for ASP.NET MVC Forum
7 answers
2.1K+ views
Hi,

How can I  format my date to MM/dd/yyyy in client template? It seems that Format method doesn't work for client templates. Also, I need to sort column that contains date.

Thanks in advance,
Dzmitry Shmidt
Imran
Top achievements
Rank 1
 answered on 23 Jul 2015
1 answer
541 views

Hi , i have he following code in myview of businessunit grid.

 while displaying it the businessunit grid and edit businessunit pages it reflects wrong date format be default- 01/01/0001 instead of the actual date  though there is an actual and corect date in database.

i am using sql server 2014 .

 

businessunit view

@{
    Layout = null;
}

@Scripts.Render("~/bundles/kendo")


<div>
    @(Html.Kendo().Button()
        .Name("textButton")
        .HtmlAttributes(new { type = "Add BusinessUnit", @class = "btn-primary mar-b-10" })
        .Content("Add BusinessUnit"))
</div>
<div id="businessunit"  >
    @(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ModalfBusinessUnit>()
    .Name("BusinessUnitGrid")
            .Events(events => events.Change("Grid_OnRowSelect"))
    .Columns(columns =>
    {
        columns.Bound(b => b.BusinessUnit).Width(40); ;
        columns.Bound(b => b.Fund).Width(30);
        columns.Bound(b => b.FundPurpose).Width(40);
        columns.Bound(b => b.ServiceType).Width(40);
        columns.Bound(b => b.GrantNumber).Width(40);
        columns.Bound(b => b.StartDate).Format("{0:MM/dd/yyyy}").Width(30);
        columns.Bound(b => b.EndDate).Format("{0:MM/dd/yyyy}").Width(30);
        columns.Bound(b => b.id).Visible(false);
        columns.Bound("").ClientTemplate("<button class='btnGrid btn btn-primary btn-sm' data-id='#:id#' onclick='gridBtnClick(this)'><span class='edit_icon glyphicon glyphicon-pencil' aria-hidden='true'></span>Edit</button> <button class='btnGrid btn btn-primary btn-sm' data-id='#:id#' value='View' onclick='gridBtnClick(this)'><span class='edit_icon glyphicon glyphicon-eye-open' aria-hidden='true'></span>View</button>").Width(40);

    })
    .HtmlAttributes(new { style = "height: 410px;" })
        .ToolBar(tools => tools.Excel())
        .Scrollable()
        .Sortable()
                .Excel(excel => excel
                .FileName("BusinessUnit.xlsx")
                .Filterable(true)
                     .ProxyURL(Url.Action("Excel_Export_Save", "Grid"))

                    )
        .ColumnMenu()
         .Filterable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
            .Resizable(resize => resize.Columns(true))
                       .Selectable(selectable => selectable
                            .Mode(GridSelectionMode.Multiple))
        .DataSource(dataSource => dataSource
            .Ajax()
                    .Read(read => read.Action("GetBusinessUnitData", "BusinessUnit"))
                    
        )
    )
</div>
<br />
@(Html.Kendo().Button()
        .Name("textButtonAA")
        .HtmlAttributes(new { type = "Add BusinessUnit", @class = "btn-primary mar-b-10" })
        .Content("Add BusinessUnit AA"))
<div id="businessunitaa"  >
    @(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ModalfBusinessUnitAA>()
            .Name("BusinessUnitGridAA")
    .Columns(columns =>
    {

        columns.Bound(b => b.SpendPriority).Width(40); ;
        columns.Bound(b => b.Description).Width(80);
        columns.Bound(b => b.StartDate).Format("{0:MM/dd/yyyy}").Width(30);
        columns.Bound(b => b.EndDate).Format("{0:MM/dd/yyyy}").Width(30);
        columns.Bound(b => b.InitTotalAuth).Width(35);
        columns.Bound(b => b.InitAvailable).Width(35);
        columns.Bound(b => b.Id).Visible(false).Width(10);
        // columns.Bound("").ClientTemplate("<button class='btnGrid btn btn-primary btn-sm' data-id='#:Id#' onclick='gridAAClick(this)'><span class='edit_icon glyphicon glyphicon-pencil' aria-hidden='true'></span>Edit</button><button class='btnGrid btn btn-primary btn-sm' data-id='#:Id#' onclick='gridAAClick(this)'><span class='edit_icon glyphicon glyphicon-eye-open' aria-hidden='true'></span>View</button>").Width(50);
        columns.Bound("").ClientTemplate("<button class='btnGrid btn btn-primary btn-sm' data-id='#:Id#' onclick='gridAAClick(this)'><span class='edit_icon glyphicon glyphicon-pencil' aria-hidden='true'></span>Edit</button> <button class='btnGrid btn btn-primary btn-sm' data-id='#:Id#' value='View' onclick='gridAAClick(this)'><span class='edit_icon glyphicon glyphicon-eye-open' aria-hidden='true'></span>View</button>").Width(40);

    })
    .HtmlAttributes(new { style = "height: 410px;", })
        .ToolBar(tools => tools.Excel() )
        .Scrollable()
        .Sortable()
        .Excel(excel => excel
        .FileName("BusinessUnitAA.xlsx")
        .Filterable(true)
             .ProxyURL(Url.Action("Excel_Export_Save", "Grid"))
             
            )
        .ColumnMenu()
        .Filterable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
            .Resizable(resize => resize.Columns(true))
                           .Selectable(selectable => selectable
                    .Mode(GridSelectionMode.Multiple))
                .Navigatable()
                .Navigatable()
        .DataSource(dataSource => dataSource
            .Ajax()
                    .Read(read => read.Action("GetBusinessUnitAA", "BusinessUnit").Data("additionalInfo"))
                               )

                              
    )
    
</div>
<script>
    var id = 0;
    Grid_OnRowSelect = function (e) {
        var data = this.dataItem(this.select());
        id = data.id;
        $('#BusinessUnitGridAA').data('kendoGrid').dataSource.read();
        $('#BusinessUnitGridAA').data('kendoGrid').refresh();
        //   alert("1 st grid :" + data.id);//IMP

    }
    function additionalInfo() {
        //alert(id);
        return { AdditionalParam: id };
    }
    function doOnRowSelect(e) {
        var selectedItem = this.dataItem(this.select());
        alert(selectedItem.ShipName);
    }
    function formatDate(date) {
        debugger;
        switch (flag) {
            case 1:
                return kendo.toString(date, "g");
            case 2:
                return kendo.toString(date, "d");
            case 3:
                return kendo.toString(date, "Y");
            default:
                return kendo.toString(date, "F");
        }
    }
    $('#textButton').on('click', function () {
        $.ajax({
            url: '@Url.Action("AddBusinessUnit", "BusinessUnit")',
            type: 'GET',
            success: function (data) {
                $('#AddBusinessUnitDiv').html(data);
            },
            error: function () {
                console.log("add business unit error rendering page");
            }
        });
    });
    $('#textButtonAA').on('click', function () {
        if (id == 0) {
            alert("Select one row on the BusinessUnit grid");
        }
        else {
            $.ajax({
                url: '@Url.Action("AddBusinessUnitAA", "BusinessUnit")' + '?BU_Id=' + id,
                type: 'GET',
                success: function (data) {
                    $('#AddBusinessUnitDiv').html(data);
                },
                error: function () {
                    console.log("add business unit aa error rendering page");
                }
            });
        }
    });


</script>
<style>
    .row div:nth-child(even) {
        background-color: #F9F9F9;
    }

    .row div:nth-child(odd) {
        background-color: #aaaaaa;
    }
</style>

 

 

 

 ​

 please suggest.

 

Georgi Krustev
Telerik team
 answered on 22 Jul 2015
1 answer
587 views
The MVC Grid component has an option to specify a template for its Toolbar so you can add additional buttons and other things. However, I can't seem to find similar functionality for the MVC Scheduler. Can custom buttons be added to the Scheduler toolbar?
Alexander Popov
Telerik team
 answered on 22 Jul 2015
6 answers
161 views

Hi,

I got some problems when I using virtualization of local data on MultiSelect widget.

Here I leave a sample video and source code.

Hope to get some helps.

 

Georgi Krustev
Telerik team
 answered on 22 Jul 2015
2 answers
129 views

Hi,

 I've added a collapse/expand all option to my treeview, which works fine, but doesn't have any slide effects.  On the demo one (http://demos.telerik.com/kendo-ui/treeview/api) it has slide effects for this.

Are there settings I need to apply somewhere to make this work?  I have 3 treeviews on top of each other and my button works for all at once - here are the relevant bits of javascript code :-

// 1. collapse all treeview nodes
var treeview = $("#TreeViewSurveyByRisk").data("kendoTreeView").collapse(".k-item");
var treeview = $("#TreeViewSurveyByRecAction").data("kendoTreeView").collapse(".k-item");
var treeview = $("#TreeViewSurveyByLocation").data("kendoTreeView").collapse(".k-item");

// 2. expand all treeview nodes
var treeview = $("#TreeViewSurveyByRisk").data("kendoTreeView").expand(".k-item");
var treeview = $("#TreeViewSurveyByRecAction").data("kendoTreeView").expand(".k-item");
var treeview = $("#TreeViewSurveyByLocation").data("kendoTreeView").expand(".k-item");

Any help would be appreciated.

Thanks, Mark

Mark
Top achievements
Rank 1
 answered on 22 Jul 2015
1 answer
55 views

Hello,

I have reviewed the documentation here: http://docs.telerik.com/kendo-ui/browsers-support

And have ensured I have the correct DOCTYPE and IE-Edge tags implemented.

When opening your Demo here: http://demos.telerik.com/kendo-ui/map/index

IE11 reacts to a pinch on the map control by trying to shrink the page.

Chrome on the other hand will zoom the map out.

Thanks,

Aaron

Atanas Georgiev
Telerik team
 answered on 22 Jul 2015
3 answers
85 views

Hi,

 

since I have problems with edit mode PopUp I changed it to Inline.

But this brings up the next problems.

First - IE 11 vs. Google Chrome.

In Chrome I get Numeric-UpDown for numbers and "nothing special" for strings.
In IE 11 I get "Edit with Clear Button" for all Items (also numeric).

The real problem occurs when I make the Grid selectable (Row).

Using a DropDown I selecte something an this selects the row.

After the row is selected numeric fields no longer have values.

See the attached Image.

 

Manfred

ManniAT
Top achievements
Rank 2
 answered on 21 Jul 2015
2 answers
287 views

Hi,

 I've searched google and the forums, but couldn't find anything about the MVC grid.

Is it possible to import from excel into an MVC grid? I wanted the importer to import the data by matching on column names, and mark which values have changed, before saving.

Dimiter Madjarov
Telerik team
 answered on 21 Jul 2015
2 answers
2.0K+ views

Hi,

 

I have table which contains an ID column (Identity) and several other fields.

If I use "Inline" I can edit and add records.

The ID column is (as intended) not visible.

But a soon as I change to "Popup" the ID column shows up as edit field.
I changed the field to readonly via model.Field(p => p.​ID).Editable(false);
Still I have an edit field for the ID - and I can change the value (although this is not persisitet to the DB).

So how to hide the column in Popup edit mode.

Manfred

Alexander Popov
Telerik team
 answered on 21 Jul 2015
1 answer
567 views

 We are working with “Jquery Kendo Grid” with asp.net MVC 4.0. We need your help on few things. Please help us with some samples.

 

  1. Need to Display Dynamic Column Kendo  Grid( Columns of the Grid will vary for different users)
  • How can I pass the Column details to “View” from “Controller”
  • How can I bind the column details to  “Jquery Kendo  Grid” in View
  • How can I pass the Data to “View” from “Controller”
  • How can I bind the Data to  “Jquery Kendo  Grid” in View
  1. Need to allow user to edit the Data in Dynamic Grid and save this only when user click on the SAVE button
  • How do I pass the EDITED Data from View to Controller?
  • How should I write my Controller Action to receive the Data sent from View. I don’t know the format of the data which View will send to Controller?
  1. Need to allow user to Delete the Data in Dynamic Grid and save this only when user click on the SAVE button
  • How do I pass the DELETED Data from View to Controller?
  • How should I write my Controller Action to receive the Data sent from View. I don’t know the format of the data which View will send to Controller?
  1. Need Column chooser / Resize / Re order also in Dynamic Grid
  • We should allow the user “Select / Unselect” the column which user needed in Dynamic Grid
  • We should allow the user “Reorder” the column  in Dynamic Grid
  • We should allow the user  to “Resize”  the column  in Dynamic Grid
  •  We should allow the user SAVE the preferences (List of the needed column, width of the column and order of the column) which he has made on the “Dynamic Grid”  to database, so that  when user login next time, we can show the Grid as user had preferred (customized) last time​
Hristo Valyavicharski
Telerik team
 answered on 21 Jul 2015
Narrow your results
Selected tags
Tags
+? more
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?