Grid Selectable / Treeview issue

[Daniel]

Hi,

I've got an issue about handling my grid.

There was my first code :

@using System.Data

@{

    DataTable dataTable = ViewBag.DataSource;

}

@(Html.Kendo().Grid(dataTable)

    .Name("Logs")

    .Columns(columns =>

    {

        foreach (DataColumn column in dataTable.Columns)

        {

            columns.Bound(column.DataType, column.ColumnName);

        }

    })

    .Pageable()

    .Scrollable()

    .HtmlAttributes(new { style = "margin-top:30px; height:575px;" })
)

I load my DataTable thanks to a library (so there is no model). When I change page grid, the display is ok.

I try to add a Selectable, in order to have information about the line to display a treeview with data.

So I add this :

.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))

But Visual said I have to add a DataSource. That's the first problem to me ...

Adding this in my .cshtml :

.DataSource(datasource => datasource
        .Ajax()
        .PageSize(10)
        .Read(read => read.Action("GetLogs","Home")))

And this in my controller :

public ActionResult GetLogs([DataSourceRequest] DataSourceRequest request)
        {
            FormFilter filter = new FormFilter();

            return Json(Reader.GetLog(filter).ToDataSourceResult(request));
        }

It's working, but my first column is DateTime type, so when I display my grid ... Date become "/Date(13633....)/"

Do you have a solution to avoid DataSource, or to display easily my data without broken everything ?

Second issue, when I add my Selectable, how can I have the id of the selected line in my controller ? I'd like to add those information in a treeview ...

Thanks,

Daniel

[Dimiter Madjarov]

Hello Daniel,


In the initial configuration the Grid is using Server binding.  In this case it requires an Id to be set, so it could identify which item is selected. If an Ajax binding is used (as in the modified configuration) an Id is no longer required for enabling the selection and the Grid is using the dataItem to identify the selected row.

So if a server binding is required in the current scenario, you could use the following syntax.
E.g.

.DataSource(ds => ds
    .Server()
    .Model(m => m.Id("IdColumn"))
)

If that is not the case, you could keep the Ajax binding. 

Regarding your second question in the current configuration the Grid is not aware of the data types of the columns in order to display them correctly. You should specify the types in the model as demonstrated in this Code Library.
E.g.

.DataSource(ds => ds
    .Server()
    .Model(m =>
    {
        m.Id("IdColumn");
        foreach (System.Data.DataColumn column in Model.Columns)
        {
            m.Field(column.ColumnName, column.DataType);
        }
    })
)

Regarding your last question, it depends on the Grid binding again. If it is configured with Ajax binding, you could use the dataItem method to get the data for the current row.
E.g.

var grid = $("#Grid").data("kendoGrid");
var selection = grid.select();

for (var i = 0; i < selection.length; i++) {
    var currentItem = grid.dataItem(selection[i]);
    var currentId = currentItem.ProductID;
}

If that is not the case, you should be aware which column is the Id column, so you could get the Id from it.
E.g.

var selection = grid.select();
for (var i = 0; i < selection.length; i++) {
    var currentId = $(selection[i]).find("td").eq(0).text();
}

 

All the best,
Dimiter Madjarov
the Telerik team

[Daniel]

Hi,

Hope having an answer today (thursday) 'cause it's the last day I can develop ^^.

The problem with type is I haven't got any model ... I load my DataTable from a DLL (which have types, and specify in the Columns). So other idea ?

Thanks for your two other answers by the way :)

Daniel

[Dimiter Madjarov]

Hello Daniel,


I tried to reproduce this behavior, but to no avail. I am attaching a sample project with a similar scenario, where the dates are displaying as expected. For your convenience I've added both versions - Ajax and Server binding (Server is commented). Could you take a look at it and let me know if it covers your scenario? If that is not the case, could you modify it to reproduce the issue and send it back to me to assist you further?

 

Regards,
Dimiter Madjarov
the Telerik team

[Daniel]

Thanks it works perfectly !

Other question :

Is it possible to display only the first 75 characters of my cell ?

[Daniel]

Hi,

Little problem with display date :

It appears like "Fri Mar 15 2013 21:54:52 GMT+0100 (Paris,Madrid)" inspite of "15/03/2013 21:54".

In my XML I've got something like "<log at="15/03/2013 21:54" type="Message" > blabla </log>".

[Dimiter Madjarov]

Hi Daniel,


You could check for the type of the column and specify the format in a Template if it is a DateTime.
E.g.

.Columns(columns =>
{
    foreach (System.Data.DataColumn column in Model.Columns)
    {
        if (column.DataType == typeof(DateTime))
        {
            columns.Bound(column.ColumnName).Width(200).ClientTemplate("#= kendo.toString(" + column.ColumnName + ", 'MM/dd/yyyy hh:mm') #");
        }
        else
        {
            columns.Bound(column.ColumnName).Width(200);
        }
    }
})

Regarding your second question, you could check for the length of the current value and trim it in the template if necessary.

 

Greetings,
Dimiter Madjarov
the Telerik team