We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Unbound columns

What is the best way to do something like this:

I have one table in database and this is also one entity in EF model in the project. Let's say there is 10 columns in that table.
On the page I bind the grid on datasource from that table and it's working normally. Now, I want to add 3 unbound columns in the grid and I want to set their values for every row  by calling some service which is outside of the project. I'm using signalR connection from controller to page to pass the values which I want to set in the grid, and that's working fine.

Is it better to render the grid with columns in javascript, get the signalR message and then loop through the rows and set the values in unbound columns (by the way, how can I loop grid rows in javascript?), or is it better to render it on server-side in controller and set the values for these columns there, and pass the grid properties to the view?

Thanks.

3 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team September 12, 2016 01:02 PM UTC

Hi Bernard, 

We could see you would like to pass the unbound column changes to the another page on the basis of SignalR concepts. We have achieved this by using the template columns which will also be treated as an unbound column. In the template columns, we have rendered the ejNumericTextBoxes. On the change event of them, server modify method has been called to update the Grid rendered on the another page. Refer to the following code example. 

@(Html.EJ().Grid<object>("Grid") 
    .Datasource((IEnumerable<object>)ViewBag.dataSource) 
    .AllowPaging() 
    .AllowFiltering() 
    .ClientSideEvents( 
        d => 
        { 
            d.TemplateRefresh("refreshtemplate"); 
        }) 
    .Columns(col => 
        { 
                 . . .. .  
        col.HeaderText("temp1").Template("<input class='numeric' type='text' />").Add(); 
        col.HeaderText("temp2").Template("<input class='numeric' type='text' />").Add(); 
        col.HeaderText("temp3").Template("<input class='numeric' type='text' />").Add(); 
    }) 
) 
<!--Reference the SignalR library. --> 
<script src="~/Scripts/jquery.signalR-2.1.2.js"></script> 
<!--Reference the autogenerated SignalR hub script. --> 
<script src="~/signalr/hubs"></script> 
<script> 
    function refreshtemplate(args) { 
        $(args.cell).find(".numeric").ejNumericTextbox({ 
            value: 10, 
            change: "change" 
        }).attr("id", args.column.headerText + args.rowIndex); 
    } 
    $(function () { 
        window.signal = $.connection.signalRTestHub; 
        window.signal.client.modify = function (userIp, action, details) { 
            $("#" + action).ejNumericTextbox({ 
                value: details.value 
            }); 
        } 
        $.connection.hub.start().done(function () { 
            window.change = function (args) { 
                window.signal.server.modify($("#userName").text(), this.element.attr("id"), args); 
            } 
        }); 
    }); 
</script> 

Note: Since we have update the template column’s value in the change event of the ejNumericTextBoxes, there is no need to iterate the Grid rows.  

We have also prepared a sample that can be downloaded from the following location. 


Regards, 
Seeni Sakthi Kumar S. 



BJ Bernard Jurlina September 17, 2016 07:14 AM UTC

Great,

I'll give it a try.
Thanks a lot!

Bernard.



RU Ragavee U S Syncfusion Team September 19, 2016 06:13 AM UTC

Hi Bernard, 
  
Thanks for your update. 
  
Regards, 
Ragavee U S. 


Loader.
Up arrow icon