Hi:

Is there a way we could increase the width of the vertical scroll bar in Kendo grid? What is the styling property i should use?
Can you please provide a sample snippet?

Thank You,
Arul.

Title:
Kendo MVC grid – how to send an ajax post from javascript (or jquery) along with currently selected row of
data from grid (without using the "update" built in button of the grid)

I tried to create hidden variables for the model that the grid is using so that
the controller can grab it, when we do an ajax post. The following code doesn’t
seem to wrok.

What am I missing?

Steps I did in my code and the questions:

-    Created submit button; when the button is clicked, it
should grab the currently selected row of data from grid and pass it to the
controller.

-    Getting the current row seems to work in the javascript I wrote below ($("#btnSearch").click)
and the ajax post goes to the conttoller. But then the model data does NOT have DisposalContainer filled in. Am I
making a mistake in ClientTemplate of mvc grid (when i am trying to make some hidden variables for the model) or am I NOT passing the DisposalContainer (or any model data would do fine) correctly?

 My model that is bound to the grid is:
    [Serializable]
    public class PackUnitModelView
    {
        public string Item;
        public int ShippedQty;
        public int ReturnedQty;
        public string ItemDescription;
        public string DisposalContainer;        // Non-Harzardous, Flammable-INC15-E2, Reactive-BPO, Flammable-AF07
    }

===================================================================================

Code in the controller:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult PackUnits_Update(PackUnitModelView packUnit, string packageID)

{

  // will do some db persistent stuff.

  Return View();

}

Code in the view (*.cshtml):

==================================================================================

    <input type="Submit" id="btnSearch" style="height:32px; font-size:14px; background-color:#3399FF" class="k-button" title="Search" value="Search" />

 

==================================================================================

    @(Html.Kendo().Grid<PackUnitModelView>()

        .Name("gridPackUnits")

        .Columns(columns =>

        {

            // do
this in case if I need to pass pacakage unique id along with each
PackUnitModel.

            //
columns.Bound(c => c.Id).Visible(false);

            columns.Bound(c =>
c.Item).Title("Item").Width(50)

                    .ClientTemplate("#= Item #" +

                            "<input type='hidden' name='PackUnitModelView[#=
index(data)#].Item' value='#= Item #' />");

 

            columns.Bound(c =>
c.ShippedQty).Title("Shipped").Width(60).HtmlAttributes(new { style = "text-align:center" })  // For text alignment on the column use the HtmlAtributes
like it is done here.

                    .ClientTemplate("#= ShippedQty #" +

                            "<input type='hidden' name='PackUnitModelView[#=
index(data)#].ShippedQty' value='#= ShippedQty#' />");

           

            columns.Bound(c =>
c.ReturnedQty).Title("Returned").Width(60).HtmlAttributes(new { style = "text-align:center" });

                    //columns.Bound(e =>
e.Industry).ClientTemplate("#= Industry #" +

                    //"<input type='hidden' name='Occupation[#=
index(data)#].Industry' value='#= Industry#' />");

           

            columns.Bound(c =>
c.ItemDescription).Title("Item
Description").Width(250);

            columns.Bound(c =>
c.DisposalContainer).Title("Disposal
Container").Width(150);

        })

       

        .HtmlAttributes(new { style = "height: 290px;"
})       //
grid height

        .Scrollable()

        .Selectable()

        //.Groupable()          // This will show the title for the
grid and the title text can be set via jscript code
"kendo.ui.Groupable.prototype.options.messages =.." below

        .Sortable()

        .RowAction(row =>

                        {

                            //if (condition) // would be check the container hazardous
stata - then color as red

                            {

                               
row.HtmlAttributes["class"] = "k-state-selected";

                            }

                        })

        .Reorderable(reorder =>
reorder.Columns(false))

        .Resizable(r => r.Columns(true))

        .Events(e => e.DataBound("DataBoundGrid"))

        .DataSource(dataSource => dataSource

            .Ajax()

            .Read(read => read.Action("PackUnits_Read", "Main"))

            .Update(update => update.Action("PackUnits_Update", "Main", new { packageID = "111-11-1111" }))

        )

    )

   ===============================================================================

Javascript functions:        

// Index function to get the dynamic value of columns and put in the hidden variable of
//html page - so that model can be bound to controller function when we do HttpPos (via ajax typically).

function index(dataItem) {

        var data = $("#gridPackUnits").data("kendoGrid").dataSource.data();

        return data.indexOf(dataItem);

    }

============================================================================
$("#btnSearch").click(function (e) {
            var grid = $("#gridPackUnits").data("kendoGrid");
            var selectedBackup = grid.dataItem(grid.select());

            if (selectedBackup == null)
                return;
            selectedBackup.dirty = true;

            $.ajax({
                type: "POST",
                url: "Main/PackUnits_Update",   // post to your controller action that does what you want
to do with the model
                dataType: "json",
                data: { DisposalContainer: 'cont', PackageID: 1234}
            });

           e.preventDefault();

        });

    });

=======================================================================

 

Hi,

I wonder if it's possible to hide a row when I'm grouping the results by column but still showing the ClientGroupFooterTemplate in my case is "Subtotal".

I attach a image to explain better the scenario.

And here's my code


Thanks for the help I hope it's possible

Hi There,

I'm trying to get a combo box to have a custom template depending on the row, as it needs to have essentially sub headers within the combobox. Currently using a non-Kendo combobox we have this however is something like this even possible within Kendo?

Hi Team,

we are facing issues in Gantt chart. if we select first row and than second row first row is not disabled[ it is in editable mode]

kindly help us. please find the attachment for your reference.

Thanks

Manoj

Is there anyway to implement optimistic concurrency with the Kendo Grid?

Hi,


I have a kendo mvc grid on Razor View, which is collecting data by AJAX request to Controller.

I Would like to save page visited by user and when that user comes back grid automatically would load last visited page.

View code:

@(Html.Kendo().Grid<OrderListItemModel>()
    .Name("orders")
    .Columns(columns =>
    {
....
 .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(order => order.Id))
        .PageSize(10)
        .Read(read => read.Action(Mvc.Crud.AjaxFilter,...

any my AjaxFilterMethod:

public virtual ActionResult AjaxFilter([DataSourceRequest]DataSourceRequest request, FilterModel filter)
        {
            var model = GetListItems(filter);
            var result = model.ToDataSourceResult(request);
            return Json(result);
        }

any suggestions how i can achieve this?

Best Regards

Guys,

I have two comboboxes on a Custom Editor for Scheduler that are called "CustomerID" and "SiteID" - when selecting a customer, if that customer has a single site, I wish for the single item in the "SiteID" box to be selected.

I have the UI functionality working as expected, but yet ModelState.IsValid is always false and the "SiteID" value is always an empty guid  e.g. the Selected Value for the SiteID dropdownlist does not seem to be passed back to the model.

The definition of CustomerID and SiteID are below:

  <div class="k-edit-field">
           @(Html.Kendo().DropDownListFor(model => model.CustomerID)
              .Name("CustomerID")
              .HtmlAttributes(new { style = "width:300px", data_bind = "value :CustomerID" })
              .OptionLabel("Select...")
              .DataTextField("CustomerName")
              .DataValueField("CustomerID")
              .Events(events=>events.DataBound("customersLoaded"))
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("GetCascadeCustomers", "Job");
                  }).ServerFiltering(true);                  
              })              
              
            )
        </div>
        <div class="k-edit-label">
            @(Html.LabelFor(model => model.SiteID))
        </div>
        <div class="k-edit-field">
           @(Html.Kendo().DropDownListFor(model => model.SiteID)
              .HtmlAttributes(new { style = "width:300px", data_bind="value: SiteID" })
              .OptionLabel("Select...")
              .DataTextField("SiteName")
              .DataValueField("SiteID")
              .Events(events => events.DataBound("sitesLoaded"))
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("GetCascadeSites", "Job")
                          .Data("filterSites");
                  })
                  .ServerFiltering(true);
              })
              .Enable(true)
              .AutoBind(false)
              .CascadeFrom("CustomerID")                           
        )       

The events relating to each are defined in javascript as below:

function filterSites() {
        return {
            CustomerID: $("#CustomerID").val()
        };
    }

function customersLoaded(e) {
        // handle the event
        var dropdownlist = $("#CustomerID").data("kendoDropDownList");
        // selects item if its value is equal to "test" using predicate function
        if (_custID != null) {
            dropdownlist.value(_custID);
            //dropdownlist.value(dropdownlist.value());

        }
    }

    function sitesLoaded(e) {
        // handle the event
        var dropdownlist = $("#SiteID").data("kendoDropDownList");
        // selects item if its value is equal to "test" using predicate function
        if (_siteID != null) {
            dropdownlist.value(_siteID);

        }
        else
        {
            //select first items if 1
            if( dropdownlist.dataSource.data().length == 1)
            {
                dropdownlist.select(1);
               
                
            }
        }


    }


I use the dropdownlist.select method to select the first item in the SiteID DropDownList.

A video of the problem can be found here:

http://screencast.com/t/xdmTpREq

If you could let me know what I need to change that would be great.

Based on the selection of dropdownlist item, I would need to query the database with the selected item and display the results as chart.
Could anyone please point me to the example url

Hi there,

I want to add a ajax backed ComboBox item into the form template for selecting a company.
(I do not want to use the ressources functionality for that)

The form is working correctly, but the CompanyId ist not transferred in the server request for saving the event.
Am I blind? What am I missing here?

My Scheduler:


My template:


many thanks,
Chris