I have a kendo grid in a kendo PanelBar (actually, I have a few kendo grids in a few kendo panelbars in the same page), and to eliminate a long load time, I don;t want to actually retrieve the grids data until the specific PanelBar get's expanded.  I figured out the Expand event, but how do I configure my Grid to get the data based on that event?

 

<div> 
    <hr />
    <h2 style="color: orangered">@ViewBag.EquipmentType</h2>
    <p>@Html.ActionLink("Back", "GetEquipmentTypes", "Lookup", null, new { @style = "color: orangered;" })</p>

    @(Html.Kendo().Grid<UtiliPoleOfficeWeb.Models.EquipmentModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Name).Width(150);
        columns.Bound(p => p.Description).Width(160);
        columns.ForeignKey(p => p.Category, (System.Collections.IEnumerable)ViewData["categories"], "Id", "Name").Width(120).HeaderHtmlAttributes(new { @title = "Category" }).Width(140).EditorTemplateName("EquipmentTypeCategoryList");
        columns.Bound(p => p.Type).Width(100).EditorTemplateName("EquipmentTypeList").Title("Type").ClientTemplate("#:Type#");
        columns.Bound(p => p.Height).Width(50);
        columns.Bound(p => p.Width).Width(50);
        columns.Bound(p => p.Length).Width(50);
        columns.Bound(p => p.Obsolete).Width(75);
        columns.Command(command => { command.Edit(); });
    })
    .ToolBar(toolBar =>
    {
        toolBar.Create();

    })
    .Editable(editable => { editable.Mode(GridEditMode.InLine); })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Resizable(r => r.Columns(true))
    .HtmlAttributes(new { style = "height: 650px; width: 1000px;" })
    .ColumnResizeHandleWidth(10)
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .Events(events => events.Error("error_handler"))
        .Model(model =>
        {
            model.Id(p => p.Id);
            model.Field(p => p.Name);
            model.Field(p => p.Category);
            model.Field(p => p.Type);
            model.Field(p => p.Height);
            model.Field(p => p.Width);
            model.Field(p => p.Length);
            model.Field(p => p.Description);
            model.Field(p => p.Obsolete);
        })
        .PageSize(20)
        .Read(read => read.Action("EquipmentByType_read", "EquipmentType").Data("additionalInfo"))
        .Create(create => create.Action("EquipmentByType_Create", "EquipmentType"))
        .Update(update => update.Action("EquipmentByType_Update", "EquipmentType"))
            //.Destroy(destroy => destroy.Action("EquipmentByType_Destroy", "EquipmentType"))
    )
    )
</div>
    <script>

        $(document).ready(function () {

            $("#grid .k-grid-content").css("overflow-y", "scroll").css("overflow-x", "scroll").scroll(function () {
                var left = $(this).scrollLeft();
                var wrap = $("#grid > .k-grid-header-wrap");
                if (wrap.scrollLeft() != left) wrap.scrollLeft(left);
            });

            return;
        });

    </script>

    This code will produce the scroll bar rectangle with the right and left arrows with no bar to scroll with, because the grid control re-sizes the columns smaller so they all fit (crumbled up)  inside the width of 1000 px as I defined explicitly. One post was apparently happy with a reply that his total column width should be smaller than the container width but if that's the case, you don't need the scroll bar

If I redefine my container width to 550 px the scroll bar shows up but presentation looks nasty as the column are resized smaller and the container is way to small. 

I've also tried the following approach

    <script>

        $(document).ready(function () {

            $("#grid .k-grid-content").css("overflow-y", "scroll").css("overflow-x", "scroll").scroll(function () {
                var left = $(this).scrollLeft();
                var wrap = $("#grid > .k-grid-header-wrap");
                if (wrap.scrollLeft() != left) wrap.scrollLeft(left);
            });


            resizeColumn('', '60px');
            resizeColumn('Obsolete', '75px');
            resizeColumn('Length', '50px');
            resizeColumn('Width', '50px');
            resizeColumn('Height', '50px');
            resizeColumn('Type', '100px');
            resizeColumn('Category', '120px');
            resizeColumn('Description', '160px');
            resizeColumn('Name', '150px');

            return;
        });

        function resizeColumn(title, width) {
            var index = $("#grid .k-grid-header-wrap").find("th:contains(" + title + ")").index();

            $("#grid .k-grid-header-wrap") //header
                .find("colgroup col")
                .eq(index)
                .css({ width: width });

            $("#grid .k-grid-content") //content
                .find("colgroup col")
                .eq(index)
                .css({ width: width });

            return;
        }

    </script>

    But this made the presentation look even worse.

Please Help, anybody ...

 

I have a grid with an InCell edit and I have one of the columns as a dropdown list and I'm implementing this using EditorTemplateName. I'm getting the dropdown list populated but how do I have the default value of the dropdown selected to the bound column value? Now I just get a dropdown on clicking the cell with all the values populated and the default selected value is blank.

 My Editior Template :

 

@model IEnumerable<AMCUpfrontTracker2.Models.Agency_Ref>

@(Html.Kendo().DropDownListFor(m => m)
        .DataValueField("AgencyID")
        .DataTextField("AgencyName")
        .BindTo((System.Collections.IEnumerable)ViewData["Agencies"])
)

 

 

 

Hi,

 I was wondering if there is a way to disable child check boxes when parent check boxes have been disabled. I have used the selectableMode property to disable parent checkbox but am running into issue disabling child checkbox using same property.

 C#:

aspx:

can someone tell me why this is not working? I am trying to puss the ID of the video to GetVideoDuration().

Second line display the correct VID on every record. But when  GetVideoDuration() is getting executed the value passed is VID string not the actual number.

multimedia controller.

I have a grid that I'm binding from the database and I have a search box for the users to find rows in the grid. I'm using Autocomplete for the search box. I want the autocomplete to list values from all columns and not just one field. I have a string array with all the values or filtered using where on the search term in my Controller but I'm not sure how to bind this array to the Autocomplete UI in the view. Can someone help me here with an example? Thanks! 

I wish to exchange the radiobuttons in the default boolean filter with a checkbox.

 

I expected that there was a GridUIRole for this, but alas it was not so.

 

How would I go about this practically?

 

 

Hi,

I have a Kendo Tabstrip in which  I use LoadContentFrom to load content from a controller action that return a PartialView. The code is

        <%  Html.Kendo().TabStrip()
                .Name("TabStrip")
                .Items(tabstrip =>
                {
                    foreach (var pillar in Model.Evaluation.Pillars)
                    {
                        tabstrip.Add()
                            .Text("Name")
                            .LoadContentFrom("EvaluationFormPillar", "Evaluations", new { id = Model.Evaluation.Id, pillarId = pillar.Id,
                                 hasActionItem = Model.Editable , editable = Model.Editable
                            });
                    }
                })
                .SelectedIndex(Model.SelectedTabIndex)
                .Render();            
     %>
        public ActionResult EvaluationFormPillar(int id, string pillarId, bool hasActionItem, bool editable)
        {
            var model = new EvaluationPillarViewModel();
            Evaluation evaluation = this._evaluationsBL.GetEvaluation(id);
......
            return PartialView(model);
        }

But strangely enough, LoadContentFrom can't go to action "EvaluationFormPillar". It just displays a empty tabstrip with correct tab (set by SelectedIndex). Can anyone help me on this problem? Thanks.

Hi,

I'm not sure if i posted in the correct sub forum. But i have a problem using drawer as navigation menu. The menu links need to open the page in current tab/page. My code works ok in desktop browser but when test it on ipad it's opened in new tab. I have tried using the code from telerik documentation something like this:

<div data-role="drawer" data-views='["bar.html"]'>

    <ul data-role="listview">

             <li><a href="#foo">Foo</a></li>

             <li><a href="bar.html">Bar</a></li>

     </ul>

</div>

but the page wouldn't open correctly and just looks like a blank page. What am i doing wrong? Please someone help me.

I have attached my sample code as reference. Thank you.

Ady

URL :
http://www.rewardsalad.com/Pages/Events/EventList.aspx

Error message :
SCRIPT5007: Unable to get value of the property 'replace': object is null or undefined
kendo.all.min.js, line 8 character 4630

Please see the attachment for the error screenshot.

It's occurred only in IE 9. in all other web browsers, FF, Chrome, Safari and even IE8, it's not happening.
Not everytime. but, at least, more than 50%.

Please help me out.

Thanks.