I use Telerik Kendo.UI for ASP.NET MVC.

Here is my view to render the radio button.

Here is the css that I include,

I attached the result in the attachment.

Is there any additional css to make this works?

Thank you.

Hi Team,

I have requirement for custom editable feature there i need to pass a value to editalbe function . So is there any way to pass parameter to Javascript function . i know this function will take dataitem as default parameter instead i want to pass viewbag value along with Dataitem to javascript editable function. 

Hope you understand my problem its very urgent for me , please take a look and help me. waiting for your response.

.Editable("IsEditable('#= ViewBag.Month01 #')");

by using this i get only posted value but not Dataitem.

Below is my code:

c.Bound(p => p.EditYear).Title("Currency").Visible(false).Locked(false).Width(150);                                                         
c.Bound(p => p.month01FD).Title((string)ViewBag.Month01).Width(colWidthFD).ClientGroupFooterTemplate("#=sum#").ClientFooterTemplate("#=sum#").HtmlAttributes(new { @class = "telerik-edit-cell-inline"}).Editable("IsEditable");

i want Dataitem  for EditYear and ViewBag.Month01 needed in javascript. 

Editable("IsEditable"); by using this we will get Dataitem , but not the header of the grid. The header of the column will be in ViewBag . 

Theser are dynamic headers , like this multiple columns will be there based on the header and model for EditYear will determine is this column is editible or not.

Thanks & Regards,
SP

Hi,

I have tested the differences between setting ServerOperation(true) and ServerOperation(false)...

• if I set it to false no progress spinner is displayed during request the of the data - why?
• if I set false it is not enough to use $("#grid").data("kendoGrid").dataSource.page(1) to refresh the data - I have to set:
  

   

  $("#grid").data("kendoGrid").dataSource.read();

  $("#grid").data("kendoGrid").dataSource.page(1);

   

this is because of the Client side paging?

Are there other differences between this modes which I have to consider?
(I didn't find detailed information about ServerOperation(true/false)) and it's consequences)

robert

I started to use the new floating labels but I notice that the controls , otherwise with full width, are now resized to default. Here is my code:

I need these input controls to appear sized and blocked (100% width) within their bootstrap cell.

     Hello All, I am actually usingl ocalization for displaying texts in Window title,

In the .resx file i have a text like  PopUpAjouter_Titre: Saisie d'une écriture .

In .cshtml file i am using this syntax to display the value

 @(Html.Kendo().ToolBar().Name("ToolBar").Resizable(false)
                                    .Items(items =>
                                    {
                                        items.Add().Type(CommandType.Button).Id("btnRefresh").SpriteCssClass("k-i-reload").ShowIcon(ShowIn.Both).HtmlAttributes(new { @title = Web.Resources.Views.TView.Action_Refresh, @class = "k-button-rond-ext" });
                                        items.Add().Type(CommandType.Separator).HtmlAttributes(new { @style = "border-color: rgba(0,0,0,0.08);" });
                                        items.Add().Type(CommandType.Button).Id("btnAjouter").SpriteCssClass("k-i-add").ShowIcon(ShowIn.Both).HtmlAttributes(new { @title = Web.Resources.Views.TView.Action_CreationEcritures, @class = "k-button-rond-ext",
                                            data_titre =  Web.Resources.Views.TView.PopUpAjouter_Titre)
                                        });

}))

when this page is rendered in the chrome browser the html tag is displayed like below

and the actual text is not displaye the singlequote or apostrophe is displayed as '

But when i display the same value in a Paragraph like,<p>@Web.Resources.Views.TView.PopUpAjouter_Titre</p>

it is displayed like this in the chrome browser, <p>Saisie d'une écriture de trésorerie</p>

If anyone has encountered this issue, please help me.

Regards,

NAIDU Geetha

hi all

i have grid with data and pagination in bottom .in higher resolutin screens , all page no is showing . in lower reolution only first page no is showng ( refer screen shot ) 

is it anyway to show all page no in pagination details?

I have an MVC Grid, with a custom toolbar.  On that custom toolbar is a button to Save the grid options, which it does via localStorage.  A second button loads the grid options from localStoage and applies them to the grid.  Everything works except when I load the settings, my custom toolbar disappears.  It doesn't just hide the toolbar, it's completely gone.

The grid code:

And the javascript is:

I've also attached the grid settings themselves, copied out of localStorage and saved as a JSON file.

Any suggestions or help on keeping the toolbar from disappearing?

Hi,

Unfortunately, the simplest seeming tasks are made hard by Kendo.

I just have to show a "kendoConfirm" box before my Kendo Window closes. 

I have written my code in the Close event of the Kendo Window. The confirm box shows but the window has already closed since the code execution does not stop when kendoConfirm box shows.

Is there any way to achieve this simple functionality?

So, I have my grid and my menu and a navbar on top. I want that when I resize the browser window, it all follows and shrinks. Right now, just my menu do it. I'm not sure if it's a grid issue or not. I'll post and hopefully, someone can help me out. In the screen shots, I put what it looks like before and after. When I minimize the screen, my nav bar comes down like it's suppost to, and my menu. But my grid nor the header for my grid move with it. It just falls back and hides. I want the Managed Roles area and Grid to go down and be on the same level as the Menu and beside my Edit Roles button. 

Code for my Master Page.

<body  onresize="onResize()">
    <div id="masterlayout" class="fixed-top">
        <nav class="navbar navbar-expand-md navbar-dark bg-dark">
            <h1 class="navbar-brand d-flex align-items-center">Div 11</h1>
            <div class="container">
                <ul class="nav navbar-nav">
                    <li></li>
                    <li class="nav-item nav-link mx-1">@Html.ActionLink("Home", "Index", "Home")</li>
                    @if (1 == 1)
                    {
                        <li class="nav-item nav-link mx-1">@Html.ActionLink("Site Admin", "RegisterUsers", "SiteAdmin")</li>
                    }
                    <li class="nav-item nav-link mx-1">@Html.ActionLink("Promotional", "Promotional", "Promotional")</li>
                    <li class="nav-item nav-link mx-1">@Html.ActionLink("Reports", "Contact", "Home")</li>
                </ul>
            </div>
            @Html.Partial("_LoginPartial")
        </nav>
        <div style="background-color: darkgray; width: 100%; height: 10px;">


        </div>

    </div>
    
    <div id="content1">
        @RenderBody()
    </div>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function () {
        var height = document.getElementById("masterlayout").offsetHeight;
        document.getElementById("content1").style.marginTop = height - 1 + 'px';
    });
    $(document).ready(function () {
        var height = document.getElementById("masterlayout").offsetHeight;
        document.getElementById("menu").style.marginTop = height - 1 + 'px';
    });

    function onResize() {
        var height = document.getElementById("masterlayout").offsetHeight;
        document.getElementById("content1").style.marginTop = height - 1 + 'px';
    }
    function onResize() {
        var height = document.getElementById("masterlayout").offsetHeight;
        document.getElementById("menu").style.marginTop = height - 1 + 'px';
    }


</script>

Code for my Menu. 

@{
    Layout = "~/Views/Shared/_MasterLayout.cshtml";
}
<header>

</header>

<body>

        <div  class="sidenav">
            <div id="menu" class="navbar-text">
                @if (1==1)
                {
                    @(Html.Kendo().Menu()
                .Name("Menu")
                .Direction(MenuDirection.Left)
                .Orientation(MenuOrientation.Vertical)
                .Scrollable(true)
                .Items(items =>
                    {
                       items.Add().Text("Register Employees").Action("RegisterUsers", "SiteAdmin").Visible(Request.IsAuthenticated && User.IsInRole("Administrators"));
                       items.Add().Text("Edit Roles").Action("ManageRoles", "SiteAdmin");
                    })
    )
                }
            </div>
        </div>

        <div id="idmain" class="main">
            @RenderBody()
        </div>

</body>

And the code to my Grid.

@{
    ViewBag.Title = "RegisterUsers";
    Layout = "~/Views/Shared/_SiteAdminLayout.cshtml";

}

<h2>Register Employees</h2>

@(Html.Kendo().Grid<Div11WebSite.Models.Users_Select_Result>
    ()
    .Name("grid")
    .Editable(editable => editable.Mode(GridEditMode.InCell).DisplayDeleteConfirmation(false))
    .Selectable(selection => selection.Enabled(true).Mode(GridSelectionMode.Multiple))
    .Navigatable()
    .Columns(columns =>
    {

    columns.Bound(c => c.Employee_ID).HtmlAttributes(new {style = "height=1em"});
    columns.Bound(c => c.Username);
    })
    .Scrollable(s => s.Height("auto"))

    .DataSource(dataSource => dataSource
    .Ajax()

    .Batch(true)
    .Model(m => {
    m.Id(p => p.User_Id);
    m.Field(p => p.Employee_ID).Editable(true);
    m.Field(p => p.Username).Editable(true);
    })

    .AutoSync(true)

    .ServerOperation(false)
    .Read(read => read.Action("Users_Read", "SiteAdmin"))
    .Create("Users_Create", "SiteAdmin")
    .Update(update => update.Action("Users_Update", "SiteAdmin"))
    .Destroy(delete => delete.Action("Users_Delete", "SiteAdmin"))
    )
    .PersistSelection(true)
    .ToolBar(toolbar =>
    {
    toolbar.Create();
    toolbar.Pdf();
    //toolbar.Save();
    toolbar.Excel();

    toolbar.Custom().Text("Delete").Name("tbDestroy").IconClass("k-icon k-i-close");
    })
    .ClientDetailTemplateId("childGrid")
   // .Events(e => e.DataBound("dataBound"))



    )


<script id="pageFunctions" type="text/javascript">
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }


    $(document).ready(function () {
        $(".k-grid-tbDestroy").on("click", function (e) {
            e.preventDefault();
            var grid = $("#grid").data("kendoGrid");
            var selectedRows = grid.select();
            kendo.confirm(kendo.format("Are you sure you wish to delete {0} records?", selectedRows.length))
                .done(function () {
                    $.each(selectedRows, function (i, row) {
                        grid.removeRow(row);
                    })
                    grid.saveChanges();
                });
        });
    });

I'm out of thoughts about it to be honest. Any help would be appreciated.